@wizishop/img-manager 15.2.54 → 15.2.56

package/README.md

@@ -1,394 +1,394 @@
-# Image Manager
-
-[![npm](https://img.shields.io/npm/v/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-manager)
-[![npm](https://img.shields.io/npm/dm/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-manager)
-
-## Install
-
-Run:
-
-```
-npm install @wizishop/img-manager
-```
-
-## Add Image Manager SCSS in your project
-Add all the following styles in your main scss file.
-
-### Required styles
-The required styles must be imported before the image-manager style.
-```
-$img-em-base: 16px!default;
-$img-transition-base-time: 400ms!default;
-
-@import '~bourbon/core/bourbon';
-@import '~bulma/bulma';
-@import '~bulma-extensions/bulma-switch/src/sass/index';
-@import '~bulma-extensions/bulma-tooltip/src/sass/index';
-@import '~@wizishop/ng-wizi-bulma/ng-wizi-bulma';
-@import '~sass-flex-mixin/flex';
-@import '@wizishop/img-manager/wz-img-manager';
-```
-
-### Custom colors
-Optional : The following scss colors variables can be overrided.
-```
-$wizishop-blue: #4baed0!default;
-$img-gray-background: #f5f8fa!default;
-$img-placeholder: #b5b5b5!default;
-$img-red-color: #e74c3c!default;
-$img-dark: #6c6c6c!default;
-$img-really-bad-bad-bad-green: #a2c739!default;
-
-$img-amount-hover: 8%!default;
-
-$img-main-color: #4baed0!default;
-$img-main-color-hover: darken($img-main-color, $img-amount-hover)!default;
-$img-bleu-color: #4baed0!default;
-
-$img-primary-button: $img-main-color!default;
-$img-primary-button-hover: darken($img-primary-button, $img-amount-hover)!default;
-$img-primary-button-desable: #dbdbdb!default;
-
-$img-grey-color: #6B7881!default;
-$img-green-color: #2ecc71!default;
-$img-yellow-color: #faa945!default;
-$img-orange-color: #F39C12!default;
-$img-bleu-action: #3498DB!default;
-$img-bright-red-color: #E95656!default;
-$img-second-color: #6B7881!default;
-$img-lightened-secondary: #d8d8d8!default;
-$img-secondary-text: #6c6c6c!default;
-$img-input-border: #dce0e3!default;
-$img-light-white-color: #DCE0E3!default;
-$img-main-text: #23272b!default;
-$img-table-selected: #ddff98!default;
-$img-color-loader: $img-main-color!default;
-$img-color-loader2: $img-really-bad-bad-bad-green!default;
-
-// Colors from wizi-admin components (table, sarch-input, pagination, checkbox...)
-$gray-background: #f5f8fa!default;
-$textarea-border-color: #dce0e3!default;
-$main-text: #1d2a3b!default;
-$secondary-color: #526384!default;
-$second-color: #526384!default;
-$border-form: #ccd1e0!default;
-$background-color: #ecf0f1!default;
-$table-background-color: #fafafa!default;
-$input-border-search: #dee2edcc!default;
-$placeholder-color: #b4bdd0!default;
-$input-radio-color: #d8d8d8!default;
-$input-active-color: $wizishop-blue!default;
-$input-radio-color-label: #6b7881!default;
-$input-radio-color-active-label: #1e2e43!default;
-$border-color: #dee2ed!default;
-```
-
-## Add Image manager assets
-In your `angular.json` file add the image manager assets dependency.
-```
-"assets": [
-              ...
-              {
-                "glob": "**/*",
-                "input": "./node_modules/@wizishop/img-manager/assets/",
-                "output": "./assets/img-manager/"
-              }
-            ]
-```
-
-## Add Pro Icons from Font Awesome
-In your `index.html` file add the following balise.
-
-```
-<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />
-```
-
-## Add package dependencies
-In your module like `app.module.ts` :
-```
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { WzImgManagerModule, ApiService } from '@wizishop/img-manager';
-import { AppComponent } from './app.component';
-import { TranslateModule, TranslateLoader} from '@ngx-translate/core';
-import { HttpClient } from '@angular/common/http';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
-...
-
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/img-manager/i18n/', '.json');
-}
-
-...
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    WzImgManagerModule.withConfig({
-      provide: ApiService,
-      useClass: ImageManagerApiService,
-    },
-    { // Optional
-      provide: ImageNotFoundService,
-      useClass: RemoveImageMissingService
-    }),
-    TranslateModule.forRoot({
-      defaultLanguage: 'fr',
-      loader: {
-          provide: TranslateLoader,
-          useFactory: (HttpLoaderFactory),
-          deps: [HttpClient]
-      }
-    })
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### Provide the ApiService
-You must provide the ApiService needed to fetch images, upload new images...
-Your service should extends ApiService from `@wizishop/img-manager` in order to implements all needed properties and methods.
-
-Example:
-
-```
-@Injectable()
-export class ImageManagerApiService implements ApiService {
-
-    SHOP_ID_KEY = "shopIdKey";
-    SHOP_TOKEN_KEY = "shopTokenKey";
-
-    get shopId(): number {
-        return Number(localStorage.getItem(this.SHOP_ID_KEY)) || 0;
-      }
-
-    get shopToken(): string {
-        return localStorage.getItem(this.SHOP_TOKEN_KEY) || '';
-    }
-
-    CONFIG = {
-        image_manager_route: `https://api.wizilocal.com/v3/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',
-        assets_route: 'assets/img-manager/'
-    }
-
-    IMG_SIZE = {
-        url_raw_image: `https://mepdia.wizilocal.com/_i/${this.shopId}/RAW-`,
-        url_100_image: `https://media.wizilocal.com/_i/${this.shopId}/m100-`,
-        url_200_image: `https://media.wizilocal.com/_i/${this.shopId}/cs200-`,
-        url_400_image: `https://media.wizilocal.com/_i/${this.shopId}/cs400-`,
-        url_800_image: `https://media.wizilocal.com/_i/${this.shopId}/cs800-`
-    }
-
-    constructor(private http: HttpClient) {
-    }
-
-    getShopCategory(): string {
-        return 'other';
-    }
-
-    private getOptionsHeaders(params?: ParamsImgManagerDTO) {
-        const header = { headers: new HttpHeaders({
-          Authorization: 'Bearer ' + this.shopToken
-          })
-        };
-        if (params) {
-          header['params'] = params
-        }
-        return header;
-    }
-
-    getShopImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO> {
-        return this.http.get<ImgPicturesDTO>(`${this.CONFIG.image_manager_route}/images`, this.getOptionsHeaders(params));
-    }
-
-    getShopTotalImgList(params?: ParamsImgManagerDTO) {
-        return this.http.get<{totalRecords: string}>(`${this.CONFIG.image_manager_route}/total/image`, this.getOptionsHeaders(params)).pipe(map(data => Number(data.totalRecords)));
-    }
-
-    getShopImg(idFile: string): Observable<ImgPictureDTO> {
-        return this.http.get<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${idFile}`, this.getOptionsHeaders());
-    }
-
-    uploadFile(formData: FormData) {
-        return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, formData, this.getOptionsHeaders());
-    }
-
-    uploadFileByUrl(url: string, fileName?: string) {
-        return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, { url, fileName }, this.getOptionsHeaders());
-    }
-
-    replaceImg(imageBase64: string, id_file: string) {
-        const body = {
-            imageBase64,
-            type : "RAW"
-        }
-        return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}/replace`, body, this.getOptionsHeaders());
-    }
-
-    changeImgName(fileName: string, id_file: string) {
-        return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
-    }
-
-    removeImg(id_file: string) {
-        return this.http.delete<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}`, this.getOptionsHeaders());
-    }
-
-    removeMultipleImg(id_array: string[]) {
-        return this.http.post<ImgPictureDTO[]>(`${this.CONFIG.image_manager_route}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
-    }
-
-}
-```
-
-
-
-### Optional: Provide the ImageNotFoundService
-Example:
-```
-@Injectable()
-export class RemoveImageMissingService extends ImageNotFoundService {
-
-    http = inject(HttpClient);
-
-    constructor() {
-        super();
-    }
-
-    imageNotFound(url: string): void {
-        this.removeImgIfMIssing(url).subscribe((res) => {
-            console.log(res);
-            });
-    }
-
-    private getOptionsHeaders() {
-        const header = { headers: new HttpHeaders({
-          Authorization: 'Bearer ' + this.shopToken
-          })
-        };
-
-        return header;
-    }
-
-    removeImgIfMIssing(url: string) {
-        return this.http.post<boolean>(`https://api.wizilocal.com/v3/image-manager/shops/${this.shopId}/image/remove-if-missing`, {url}, this.getOptionsHeaders());
-    }
-
-}
-```
-
-### Install external package dependencies
-The list of all external package required by the image manager is listed at at the end of the installation.
-
-Install all the dependencies packages.
-It should look like that :
-`npm i tslib @angular/core @ngx-translate @angular/common rxjs @wizishop/ng-wizi-bulma @angular/common @angular/forms ngx-scrollbar ngx-scrollbar/reached-event ngx-image-cropper @angular/cdk/table`
-
-## Image Manager setup
-### Choose the image manager display
-You can choose the display config with the parameter passed in the getImgManagerDisplayConfig method.
-
-```
-imgManagerDisplayConfig = this.imgManagerService.getImgManagerDisplayConfig('wizi-block');
-```
-
-
-Html file :
-```
-<wz-img-manager
-  [stateDisplayed]="imgManagerDisplayConfig.stateDisplayed"
-  [multipleImgMode]="imgManagerDisplayConfig.multipleImgMode"
-  [showImgManagerModule]="imgManagerDisplayConfig.showImgManagerModule && openImgManager"
-  [showSelection]="imgManagerDisplayConfig.showSelection"
-  (imgManagerClosed)="onImgManagerClosed()"
-  (imgSelectionChange)="onImageSelected($event)"
-  (imageUploaded)="onImgUploaded($event)"
->
-</wz-img-manager>
-
-```
-### Detect when an image is selected
-
-TS file :
-```
-onImageSelected(imgPictures: ImgPictureDTO[]) {
-    if (!this.waitForImage) {
-      return;
-    }
-    if (imgPictures && imgPictures.length) {
-      this.setImgInWiziBlock(imgPictures[0].file_name, imgPictures[0].id_file);
-    }
-  }
-```
-### Set Canva expected image size
-The `this.canvaService.expectedImgSizesChange(mediaDto);` send the expected size of the image asked by the wizi block. It is optional.
-
-## Config the translations
-This project use `ngx-translate module` for the internationalization.
-
-In the imported project, in the `app.module.ts` :
-
-```
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { HttpClient } from '@angular/common/http';
-
-// Define which translations files to used
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
-
-@NgModule({
-  imports: [
-    ...,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      },
-    })
-  ],
-  ...
-})
-```
-
-If you integrate the image manager module as a lazy module, in your `shared.module.ts` file:
-
-```
-import { TranslateModule } from '@ngx-translate/core';
-
-@NgModule({
-  imports: [
-    ...,
-    TranslateModule
-  ],
- ...
-})
-```
-
-And somewhere in the project or in a custom translate loader :
-
-```
-import { TranslateService } from '@ngx-translate/core';
-
-private defaultLang = 'fr';
-
-constructor(private translateService: TranslateService) {
-    this.translateService.setDefaultLang(this.defaultLang);
-}
-
-// Change the lang used
-this.translateService.use(lang);
+# Image Manager
+
+[![npm](https://img.shields.io/npm/v/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-manager)
+[![npm](https://img.shields.io/npm/dm/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-manager)
+
+## Install
+
+Run:
+
+```
+npm install @wizishop/img-manager
+```
+
+## Add Image Manager SCSS in your project
+Add all the following styles in your main scss file.
+
+### Required styles
+The required styles must be imported before the image-manager style.
+```
+$img-em-base: 16px!default;
+$img-transition-base-time: 400ms!default;
+
+@import '~bourbon/core/bourbon';
+@import '~bulma/bulma';
+@import '~bulma-extensions/bulma-switch/src/sass/index';
+@import '~bulma-extensions/bulma-tooltip/src/sass/index';
+@import '~@wizishop/ng-wizi-bulma/ng-wizi-bulma';
+@import '~sass-flex-mixin/flex';
+@import '@wizishop/img-manager/wz-img-manager';
+```
+
+### Custom colors
+Optional : The following scss colors variables can be overrided.
+```
+$wizishop-blue: #4baed0!default;
+$img-gray-background: #f5f8fa!default;
+$img-placeholder: #b5b5b5!default;
+$img-red-color: #e74c3c!default;
+$img-dark: #6c6c6c!default;
+$img-really-bad-bad-bad-green: #a2c739!default;
+
+$img-amount-hover: 8%!default;
+
+$img-main-color: #4baed0!default;
+$img-main-color-hover: darken($img-main-color, $img-amount-hover)!default;
+$img-bleu-color: #4baed0!default;
+
+$img-primary-button: $img-main-color!default;
+$img-primary-button-hover: darken($img-primary-button, $img-amount-hover)!default;
+$img-primary-button-desable: #dbdbdb!default;
+
+$img-grey-color: #6B7881!default;
+$img-green-color: #2ecc71!default;
+$img-yellow-color: #faa945!default;
+$img-orange-color: #F39C12!default;
+$img-bleu-action: #3498DB!default;
+$img-bright-red-color: #E95656!default;
+$img-second-color: #6B7881!default;
+$img-lightened-secondary: #d8d8d8!default;
+$img-secondary-text: #6c6c6c!default;
+$img-input-border: #dce0e3!default;
+$img-light-white-color: #DCE0E3!default;
+$img-main-text: #23272b!default;
+$img-table-selected: #ddff98!default;
+$img-color-loader: $img-main-color!default;
+$img-color-loader2: $img-really-bad-bad-bad-green!default;
+
+// Colors from wizi-admin components (table, sarch-input, pagination, checkbox...)
+$gray-background: #f5f8fa!default;
+$textarea-border-color: #dce0e3!default;
+$main-text: #1d2a3b!default;
+$secondary-color: #526384!default;
+$second-color: #526384!default;
+$border-form: #ccd1e0!default;
+$background-color: #ecf0f1!default;
+$table-background-color: #fafafa!default;
+$input-border-search: #dee2edcc!default;
+$placeholder-color: #b4bdd0!default;
+$input-radio-color: #d8d8d8!default;
+$input-active-color: $wizishop-blue!default;
+$input-radio-color-label: #6b7881!default;
+$input-radio-color-active-label: #1e2e43!default;
+$border-color: #dee2ed!default;
+```
+
+## Add Image manager assets
+In your `angular.json` file add the image manager assets dependency.
+```
+"assets": [
+              ...
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@wizishop/img-manager/assets/",
+                "output": "./assets/img-manager/"
+              }
+            ]
+```
+
+## Add Pro Icons from Font Awesome
+In your `index.html` file add the following balise.
+
+```
+<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />
+```
+
+## Add package dependencies
+In your module like `app.module.ts` :
+```
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { WzImgManagerModule, ApiService } from '@wizishop/img-manager';
+import { AppComponent } from './app.component';
+import { TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+...
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/img-manager/i18n/', '.json');
+}
+
+...
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    WzImgManagerModule.withConfig({
+      provide: ApiService,
+      useClass: ImageManagerApiService,
+    },
+    { // Optional
+      provide: ImageNotFoundService,
+      useClass: RemoveImageMissingService
+    }),
+    TranslateModule.forRoot({
+      defaultLanguage: 'fr',
+      loader: {
+          provide: TranslateLoader,
+          useFactory: (HttpLoaderFactory),
+          deps: [HttpClient]
+      }
+    })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+### Provide the ApiService
+You must provide the ApiService needed to fetch images, upload new images...
+Your service should extends ApiService from `@wizishop/img-manager` in order to implements all needed properties and methods.
+
+Example:
+
+```
+@Injectable()
+export class ImageManagerApiService implements ApiService {
+
+    SHOP_ID_KEY = "shopIdKey";
+    SHOP_TOKEN_KEY = "shopTokenKey";
+
+    get shopId(): number {
+        return Number(localStorage.getItem(this.SHOP_ID_KEY)) || 0;
+      }
+
+    get shopToken(): string {
+        return localStorage.getItem(this.SHOP_TOKEN_KEY) || '';
+    }
+
+    CONFIG = {
+        image_manager_route: `https://api.wizilocal.com/v3/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',
+        assets_route: 'assets/img-manager/'
+    }
+
+    IMG_SIZE = {
+        url_raw_image: `https://mepdia.wizilocal.com/_i/${this.shopId}/RAW-`,
+        url_100_image: `https://media.wizilocal.com/_i/${this.shopId}/m100-`,
+        url_200_image: `https://media.wizilocal.com/_i/${this.shopId}/cs200-`,
+        url_400_image: `https://media.wizilocal.com/_i/${this.shopId}/cs400-`,
+        url_800_image: `https://media.wizilocal.com/_i/${this.shopId}/cs800-`
+    }
+
+    constructor(private http: HttpClient) {
+    }
+
+    getShopCategory(): string {
+        return 'other';
+    }
+
+    private getOptionsHeaders(params?: ParamsImgManagerDTO) {
+        const header = { headers: new HttpHeaders({
+          Authorization: 'Bearer ' + this.shopToken
+          })
+        };
+        if (params) {
+          header['params'] = params
+        }
+        return header;
+    }
+
+    getShopImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO> {
+        return this.http.get<ImgPicturesDTO>(`${this.CONFIG.image_manager_route}/images`, this.getOptionsHeaders(params));
+    }
+
+    getShopTotalImgList(params?: ParamsImgManagerDTO) {
+        return this.http.get<{totalRecords: string}>(`${this.CONFIG.image_manager_route}/total/image`, this.getOptionsHeaders(params)).pipe(map(data => Number(data.totalRecords)));
+    }
+
+    getShopImg(idFile: string): Observable<ImgPictureDTO> {
+        return this.http.get<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${idFile}`, this.getOptionsHeaders());
+    }
+
+    uploadFile(formData: FormData) {
+        return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, formData, this.getOptionsHeaders());
+    }
+
+    uploadFileByUrl(url: string, fileName?: string) {
+        return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, { url, fileName }, this.getOptionsHeaders());
+    }
+
+    replaceImg(imageBase64: string, id_file: string) {
+        const body = {
+            imageBase64,
+            type : "RAW"
+        }
+        return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}/replace`, body, this.getOptionsHeaders());
+    }
+
+    changeImgName(fileName: string, id_file: string) {
+        return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
+    }
+
+    removeImg(id_file: string) {
+        return this.http.delete<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}`, this.getOptionsHeaders());
+    }
+
+    removeMultipleImg(id_array: string[]) {
+        return this.http.post<ImgPictureDTO[]>(`${this.CONFIG.image_manager_route}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
+    }
+
+}
+```
+
+
+
+### Optional: Provide the ImageNotFoundService
+Example:
+```
+@Injectable()
+export class RemoveImageMissingService extends ImageNotFoundService {
+
+    http = inject(HttpClient);
+
+    constructor() {
+        super();
+    }
+
+    imageNotFound(url: string): void {
+        this.removeImgIfMIssing(url).subscribe((res) => {
+            console.log(res);
+            });
+    }
+
+    private getOptionsHeaders() {
+        const header = { headers: new HttpHeaders({
+          Authorization: 'Bearer ' + this.shopToken
+          })
+        };
+
+        return header;
+    }
+
+    removeImgIfMIssing(url: string) {
+        return this.http.post<boolean>(`https://api.wizilocal.com/v3/image-manager/shops/${this.shopId}/image/remove-if-missing`, {url}, this.getOptionsHeaders());
+    }
+
+}
+```
+
+### Install external package dependencies
+The list of all external package required by the image manager is listed at at the end of the installation.
+
+Install all the dependencies packages.
+It should look like that :
+`npm i tslib @angular/core @ngx-translate @angular/common rxjs @wizishop/ng-wizi-bulma @angular/common @angular/forms ngx-scrollbar ngx-scrollbar/reached-event ngx-image-cropper @angular/cdk/table`
+
+## Image Manager setup
+### Choose the image manager display
+You can choose the display config with the parameter passed in the getImgManagerDisplayConfig method.
+
+```
+imgManagerDisplayConfig = this.imgManagerService.getImgManagerDisplayConfig('wizi-block');
+```
+
+
+Html file :
+```
+<wz-img-manager
+  [stateDisplayed]="imgManagerDisplayConfig.stateDisplayed"
+  [multipleImgMode]="imgManagerDisplayConfig.multipleImgMode"
+  [showImgManagerModule]="imgManagerDisplayConfig.showImgManagerModule && openImgManager"
+  [showSelection]="imgManagerDisplayConfig.showSelection"
+  (imgManagerClosed)="onImgManagerClosed()"
+  (imgSelectionChange)="onImageSelected($event)"
+  (imageUploaded)="onImgUploaded($event)"
+>
+</wz-img-manager>
+
+```
+### Detect when an image is selected
+
+TS file :
+```
+onImageSelected(imgPictures: ImgPictureDTO[]) {
+    if (!this.waitForImage) {
+      return;
+    }
+    if (imgPictures && imgPictures.length) {
+      this.setImgInWiziBlock(imgPictures[0].file_name, imgPictures[0].id_file);
+    }
+  }
+```
+### Set Canva expected image size
+The `this.canvaService.expectedImgSizesChange(mediaDto);` send the expected size of the image asked by the wizi block. It is optional.
+
+## Config the translations
+This project use `ngx-translate module` for the internationalization.
+
+In the imported project, in the `app.module.ts` :
+
+```
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+// Define which translations files to used
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+@NgModule({
+  imports: [
+    ...,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      },
+    })
+  ],
+  ...
+})
+```
+
+If you integrate the image manager module as a lazy module, in your `shared.module.ts` file:
+
+```
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    ...,
+    TranslateModule
+  ],
+ ...
+})
+```
+
+And somewhere in the project or in a custom translate loader :
+
+```
+import { TranslateService } from '@ngx-translate/core';
+
+private defaultLang = 'fr';
+
+constructor(private translateService: TranslateService) {
+    this.translateService.setDefaultLang(this.defaultLang);
+}
+
+// Change the lang used
+this.translateService.use(lang);
 ```