@wizishop/img-manager 15.2.3 → 15.2.4

package/fesm2020/wizishop-img-manager.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, SkipSelf, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
+import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, Observable, of, delay, tap, forkJoin } from 'rxjs';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule } from '@wizishop/ng-wizi-bulma';
 import { take, map, takeUntil, debounceTime, distinctUntilChanged, tap as tap$1 } from 'rxjs/operators';
-import * as i3$1 from '@angular/common/http';
-import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import * as i4 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import * as i3$1 from '@angular/common/http';
+import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i3$2 from '@angular/router';
@@ -97,22 +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 UserSettingsService {
     constructor() {
@@ -132,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 AlertService {
     constructor(nwbAlertService, translateService) {
@@ -179,12 +160,9 @@ 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 ImgEventService {
@@ -220,13 +198,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 ApiService {
 }
@@ -237,8 +212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class UploadService {
-    constructor(apiService) {
-        this.apiService = apiService;
+    constructor() {
+        this.apiService = inject(ApiService);
     }
     uploadFile(formData) {
         return this.apiService.uploadFile(formData);
@@ -247,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) {
@@ -394,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 {
@@ -427,17 +398,74 @@ 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
         }] });
 
-class ImgManagerService {
-    constructor(apiService) {
+const easeInOut = // the fade-in/fade-out animation.
+ trigger('easeInOut', [
+    // the "in" style determines the "resting" state of the element when it is visible.
+    state('in', style({ opacity: 1 })),
+    // fade in when created. this could also be written as transition('void => *')
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('0.5s ease-in-out')
+    ]),
+]);
+
+class RenamePictureService {
+    constructor(apiService, alertService) {
         this.apiService = apiService;
+        this.alertService = alertService;
+        this.picturesList = [];
+        this.errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
+        this.msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
+        this.msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
+    }
+    setPicturesList(picturesList) {
+        this.picturesList = picturesList;
+    }
+    renamePicture(pictureNameUpdate) {
+        const picture = this.getPictureById(pictureNameUpdate.id);
+        if (!picture) {
+            this.alertService.openAlert(this.errorRenameImg);
+            return;
+        }
+        this.alertService.openAlert(this.msgSavingImgName);
+        this.apiService
+            .changeImgName(picture.display_name, picture.id_file)
+            .subscribe((data) => {
+            picture.display_name = data.display_name;
+            this.alertService.openAlert(this.msgImgNameSaved);
+        }, () => {
+            picture.display_name = pictureNameUpdate.previousName;
+            this.alertService.openAlert(this.errorRenameImg);
+        });
+    }
+    changeImageName(name, idFile) {
+        return this.apiService.changeImgName(name, idFile);
+    }
+    getPictureById(id_file) {
+        if (!this.picturesList) {
+            return;
+        }
+        for (const picture of this.picturesList) {
+            if (picture.id_file === id_file) {
+                return picture;
+            }
+        }
+        return null;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, decorators: [{
+            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 = {
@@ -477,6 +505,7 @@ class ImgManagerService {
             showSelection: false,
             displayBtn: false
         };
+        this.apiService = inject(ApiService);
     }
     getShopImgList(params) {
         if (params && this.previousParams && this.previousParams.limit === params.limit
@@ -546,88 +575,11 @@ class ImgManagerService {
         ];
     }
 }
-ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+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
-        }], 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],
-};
-
-const easeInOut = // the fade-in/fade-out animation.
- trigger('easeInOut', [
-    // the "in" style determines the "resting" state of the element when it is visible.
-    state('in', style({ opacity: 1 })),
-    // fade in when created. this could also be written as transition('void => *')
-    transition(':enter', [
-        style({ opacity: 0 }),
-        animate('0.5s ease-in-out')
-    ]),
-]);
-
-class RenamePictureService {
-    constructor(apiService, alertService) {
-        this.apiService = apiService;
-        this.alertService = alertService;
-        this.picturesList = [];
-        this.errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
-        this.msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
-        this.msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
-    }
-    setPicturesList(picturesList) {
-        this.picturesList = picturesList;
-    }
-    renamePicture(pictureNameUpdate) {
-        const picture = this.getPictureById(pictureNameUpdate.id);
-        if (!picture) {
-            this.alertService.openAlert(this.errorRenameImg);
-            return;
-        }
-        this.alertService.openAlert(this.msgSavingImgName);
-        this.apiService
-            .changeImgName(picture.display_name, picture.id_file)
-            .subscribe((data) => {
-            picture.display_name = data.display_name;
-            this.alertService.openAlert(this.msgImgNameSaved);
-        }, () => {
-            picture.display_name = pictureNameUpdate.previousName;
-            this.alertService.openAlert(this.errorRenameImg);
-        });
-    }
-    changeImageName(name, idFile) {
-        return this.apiService.changeImgName(name, idFile);
-    }
-    getPictureById(id_file) {
-        if (!this.picturesList) {
-            return;
-        }
-        for (const picture of this.picturesList) {
-            if (picture.id_file === id_file) {
-                return picture;
-            }
-        }
-        return null;
-    }
-}
-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' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RenamePictureService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ApiService }, { type: AlertService }]; } });
+        }] });
 
 class ImgCDNService {
     constructor() {
@@ -644,12 +596,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 {
@@ -1190,12 +1139,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 }]; } });
 
 const listAnnimation = // the fade-in/fade-out animation.
@@ -1354,7 +1300,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';
@@ -1367,8 +1313,6 @@ class PexelLibComponent {
     set content(control) {
         this.outerElement = control;
     }
-    ngOnInit() {
-    }
     ngAfterViewInit() {
         this.oldSearchValue = this.searchValue;
         this.isLoading = false;
@@ -1379,11 +1323,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--;
             }
         });
     }
@@ -1408,23 +1352,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);
     }
@@ -1443,7 +1390,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: []
@@ -2449,12 +2396,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 {
@@ -3775,6 +3719,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
@@ -3807,6 +3752,7 @@ class WzImgManagerComponent {
         }
     }
     ngOnInit() {
+        console.log('WzImgManagerComponent');
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
         this.imgSelectionService.initImgSelectedList(null);
         this.selectImgEvent = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
@@ -3903,16 +3849,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: [{
@@ -3932,6 +3872,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,
@@ -3985,7 +3982,20 @@ class WzImgManagerModule {
         return {
             ngModule: WzImgManagerModule,
             providers: [
-                ApiService
+                ImgManagerService,
+                ApiService,
+                ImgCDNService,
+                FiltersTableService,
+                AlertService,
+                CanvaService,
+                DomService,
+                ImgEventService,
+                ImgSelectionService,
+                PexelsService,
+                RenamePictureService,
+                SnackBarService,
+                UploadService,
+                UserSettingsService
             ]
         };
     }