@wizishop/img-manager 15.2.39 → 15.2.41

package/fesm2020/wizishop-img-manager.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
-import { BehaviorSubject, Subject, tap, Observable, of, delay, forkJoin, combineLatest } from 'rxjs';
+import { BehaviorSubject, Subject, tap, Observable, merge, debounceTime, distinctUntilChanged, switchMap, map, forkJoin, take as take$1, startWith, shareReplay, combineLatest } 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 { take, map as map$1, takeUntil, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, filter } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
@@ -461,6 +461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class ImgManagerService {
     constructor() {
+        this.uploadService = inject(UploadService);
         this.params = new HttpParams().set("limit", "20").set("page", "1");
         // Display the img selection
         this.pageFicheProductConfig = {
@@ -501,47 +502,57 @@ class ImgManagerService {
             displayBtn: false
         };
         this.apiService = inject(ApiService);
+        this.destroy$ = new Subject();
+        this.searchImagesParameters$ = new BehaviorSubject(this.DEFAULT_SEARCH_PARAMS);
+        this.refreshImageList$ = new Subject();
+        this.resetImageList$ = merge(this.uploadService.imageUploaded$);
+        this.isLoading$ = new BehaviorSubject(true);
+        this.fetchImagesList$ = merge(this.searchImagesParameters$.pipe(debounceTime(800), distinctUntilChanged()), this.refreshImageList$.pipe(switchMap(() => this.searchImagesParameters$))).pipe(map((params) => this.getHttpParameters(params)), tap(() => this.isLoading$.next(true)), switchMap((params) => forkJoin({
+            imageList: this.apiService.getShopImgList(params).pipe(take$1(1)),
+            imageTotal: this.apiService.getShopTotalImgList(params).pipe(take$1(1))
+        })), tap(() => this.isLoading$.next(false)));
+        this.imageList$ = merge(this.fetchImagesList$, this.resetImageList$.pipe(tap(() => this.isLoading$.next(true)), tap(() => this.searchImagesParameters$.next(this.DEFAULT_SEARCH_PARAMS)), map(() => this.DEFAULT_DATA_LIST))).pipe(startWith(this.DEFAULT_DATA_LIST), shareReplay(1));
+    }
+    get DEFAULT_SEARCH_PARAMS() {
+        return {
+            limit: '30',
+            page: '1',
+        };
     }
-    getShopImgList(params, forceToUpdate = false) {
-        if (!forceToUpdate &&
-            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));
-        }
-        const httpParams = params ? this.resetParams(params) : undefined;
-        return this.apiService.getShopImgList(httpParams).pipe(tap((shopImgList) => {
-            this.shopImgList = shopImgList;
-            this.previousParams = params;
-        }));
-        ;
-    }
-    getShopTotalImgList(params) {
-        const httpParams = params ? this.resetParams(params) : undefined;
-        return this.apiService.getShopTotalImgList(httpParams);
-    }
-    getShopImg(idFile) {
-        return this.apiService.getShopImg(idFile);
+    get DEFAULT_DATA_LIST() {
+        return {
+            imageList: {
+                data: [],
+                filter: [],
+                limit: 0,
+                page: 0,
+                totalRecords: 0
+            },
+            imageTotal: 0
+        };
     }
-    resetParams(params) {
-        this.params = new HttpParams();
-        this.params = this.params.set('id_file:sort', 'desc');
+    getHttpParameters(params) {
+        let parameters = new HttpParams();
+        parameters = parameters.set('id_file:sort', 'desc');
         for (const param in params) {
-            this.params = this.params.set(param, params[param]);
+            parameters = parameters.set(param, params[param]);
         }
-        if (params.search) {
-            this.params = this.params.set('display_name:contains', params.search);
+        if (params?.search) {
+            parameters = parameters.set('display_name:contains', params.search);
         }
-        return this.params;
+        return parameters;
+    }
+    getShopImg(idFile) {
+        return this.apiService.getShopImg(idFile).pipe(tap(() => this.refreshImageList$.next()));
     }
     replaceImg(imageBase64, id_file) {
-        return this.apiService.replaceImg(imageBase64, id_file);
+        return this.apiService.replaceImg(imageBase64, id_file).pipe(tap(() => this.refreshImageList$.next()));
     }
     removeImg(id_file) {
-        return this.apiService.removeImg(id_file);
+        return this.apiService.removeImg(id_file).pipe(tap(() => this.refreshImageList$.next()));
     }
     removeMultipleImg(id_array) {
-        return this.apiService.removeMultipleImg(id_array);
+        return this.apiService.removeMultipleImg(id_array).pipe(tap(() => this.refreshImageList$.next()));
     }
     getImgManagerDisplayConfig(displayName) {
         switch (displayName) {
@@ -567,6 +578,10 @@ class ImgManagerService {
             this.simpleWithButtonOpenerConfig,
         ];
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
 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 });
@@ -1139,7 +1154,7 @@ class PexelsService {
                 request = `/curated?per_page=${perPage}&page=${page}`;
             }
         }
-        return this.http.get(this.apiBaseUrl + request, httpOptions).pipe(map((data) => {
+        return this.http.get(this.apiBaseUrl + request, httpOptions).pipe(map$1((data) => {
             return data;
         }));
     }
@@ -1172,7 +1187,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$1(this.debounceTime), distinctUntilChanged$1(), tap$1(value => this.emitChange(value)))
             .subscribe();
     }
     emitChange(value) {
@@ -1298,7 +1313,6 @@ class PexelLibComponent {
         this.searchValue = '';
         /** Pass to true to hide search input */
         this.disableSearch = false;
-        this.showImgUploaded = new EventEmitter();
         this.perPage = 30;
         this.searchUpdated = new Subject();
         this.nbResult = 0;
@@ -1447,7 +1461,7 @@ class PexelLibComponent {
     }
 }
 PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, outputs: { showImgUploaded: "showImgUploaded" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n      'pexels-lib__scroll--noResult': !nbResult,\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n    }\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n\n  </ng-scrollbar>\n\n  <ng-container *ngIf=\"isLoading\">\n    <wz-loader></wz-loader>\n  </ng-container>\n  <div\n    *ngIf=\"!isLoading && !nbResult\"\n    class=\"pexels-lib__alert\"\n    [@easeInOut]=\"'in'\">\n      <wz-alert [warning]=\"true\">\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\n      </wz-alert>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n      'pexels-lib__scroll--noResult': !nbResult,\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n    }\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n\n  </ng-scrollbar>\n\n  <ng-container *ngIf=\"isLoading\">\n    <wz-loader></wz-loader>\n  </ng-container>\n  <div\n    *ngIf=\"!isLoading && !nbResult\"\n    class=\"pexels-lib__alert\"\n    [@easeInOut]=\"'in'\">\n      <wz-alert [warning]=\"true\">\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\n      </wz-alert>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut,
         listAnnimation
     ] });
@@ -1463,8 +1477,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], disableSearch: [{
                 type: Input
-            }], showImgUploaded: [{
-                type: Output
             }], content: [{
                 type: ViewChild,
                 args: ['outerElement']
@@ -2090,9 +2102,6 @@ class PagniationIsLastPage {
      * @param itemsPerPage
      */
     transform(currentPage, totalItems, itemsPerPage) {
-        console.log('currentPage', currentPage);
-        console.log('totalItems', totalItems);
-        console.log('itemsPerPage', itemsPerPage);
         if (!(currentPage >= 0 && totalItems >= 0 && itemsPerPage >= 0)) {
             throw new Error('currentPage or totalItems or itemsPerPage is/are missing in PagniationIsLastPage pipe.');
         }
@@ -2930,7 +2939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             type: Directive,
             args: [{
                     // The selector has the same name as the tableRaw selector in table.component.html
-                    selector: '[tableRow]'
+                    selector: '[tableRow]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2968,15 +2977,6 @@ class ImagesViewComponent {
         this.listDisplayed = false; // Display format list or mosaic
         this.multipleImgMode = false;
         this.switchDisplayWindow = new EventEmitter();
-        // Data filters
-        this.tableFilters = {
-            sort: undefined,
-            order: undefined,
-            searchValue: '',
-            totalItems: 0,
-            itemsPerPage: 0,
-            currentPage: 1
-        };
         this.widthLargeCard = 219; // Default value of a card width 199 + margin 20
         this.widthSmallCard = 160; // Default value of a card width 140 + margin 20
         this.nbFakeImg = 0;
@@ -3047,46 +3047,58 @@ class ImagesViewComponent {
                 smallImgWidthFactor: 0.125
             }
         ];
-        this.searchQueryChanged = new Subject();
-        this.filtersChanged = new Subject();
-        this.picturesList = [];
-        this.savePictureList = [];
         this.nbImgToDelSelected = 0;
         this.disable = false; // Use to disable action during server request
-        this.isLoading = true;
-        this.isTotalRetrieved = false;
         this.delListImgLoader = false;
         this.initComponent = true;
         this.failLoaded = false;
-        this.displayPexelsResults = false; // Use when no img find by name, display img from Pexels
         this.confirmImgSup = false;
-        // Paginator Params
-        this.pageIndex = 0;
-        this.length = 0;
-        this.pageSize = 30; // Default value
-        this.pageSizeOptions = [25, 50, 100, 250];
         this.errorGetAllImg = 'ImgManager.ImgLib.errorGetAllImg';
         this.errorGetTotalImg = 'ImgManager.ImgLib.errorGetTotalImg';
         this.errorGetImg = 'ImgManager.ImgLib.errorGetCanvaImg';
-        this.msgNoImgFound = 'ImgManager.ImgLib.noImgFound';
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
+        this.destroy$ = new Subject();
+        this.vm$ = combineLatest({
+            imageSelection: this.imgSelectionService.imgSelection$,
+            imageListData: this.imgManager.imageList$,
+            isLoading: this.imgManager.isLoading$,
+            searchImagesParameters: this.imgManager.searchImagesParameters$,
+        }).pipe(map$1(({ imageSelection, imageListData: { imageList, imageTotal }, isLoading, searchImagesParameters }) => {
+            this.initVariables(true);
+            this.calculateNbImgFake(imageList.data.length);
+            const picturesList = this.setSelectedProperty(imageSelection, imageList.data);
+            this.renamePictureService.setPicturesList(picturesList);
+            const tableFilters = this.getTableFilters(searchImagesParameters, imageTotal);
+            const keepImagesDisplayed = (this.tabDisplayed === 'img-upload' && searchImagesParameters.page === '1') || (this.tabDisplayed === 'images-view' && imageList.data.length && searchImagesParameters.page === '1');
+            const skipSetImagesToDisplay = !!picturesList?.length && this.tabDisplayed === 'img-upload' && searchImagesParameters.page === '1';
+            const hideUntilFetchedFirstPageImagesForTabUpload = this.tabDisplayed === 'img-upload' && (searchImagesParameters.page !== '1' || imageList?.page !== 1);
+            return {
+                isLoading: hideUntilFetchedFirstPageImagesForTabUpload || !keepImagesDisplayed && isLoading,
+                displayPexelsResults: !isLoading && imageTotal === 0,
+                picturesList,
+                imageTotal,
+                tableFilters,
+                skipSetImagesToDisplay
+            };
+        }));
     }
-    ngOnInit() {
-        /* if (this.maxLengthCardShow) {
-          this.reducePictureListMaxLength();
-        } */
-        this.setEvents();
-        this.imgSelectedList = this.imgSelectionService.getImgSelection();
+    get searchImagesParameters$() {
+        return this.imgManager.searchImagesParameters$;
     }
-    ngAfterViewInit() {
-        this.setNbImgToDisplay();
-        this._getImgList();
-        if (!this.savePictureList) {
-            this.savePictureList = this.picturesList;
-        }
+    getTableFilters(searchImagesParameters, imageTotal) {
+        return {
+            sort: undefined,
+            order: undefined,
+            searchValue: searchImagesParameters.search,
+            totalItems: imageTotal,
+            itemsPerPage: parseInt(searchImagesParameters.limit),
+            currentPage: parseInt(searchImagesParameters.page)
+        };
     }
-    getImgList() {
-        this.filtersChanged.next();
+    ngAfterViewInit() {
+        this.vm$.pipe(take(1), filter(({ skipSetImagesToDisplay }) => !skipSetImagesToDisplay)).subscribe(({ tableFilters }) => {
+            this.setNbImgToDisplay(tableFilters);
+        });
     }
     /**
      * true : go to list display
@@ -3101,19 +3113,14 @@ class ImagesViewComponent {
     /**
      * Calcul the number of img selected for masse deletion
      */
-    onImgSelected() {
-        this.setNbImgToDelSelected();
-    }
-    onShowImgUploaded() {
-        this.searchText = null;
-        this.searchedValue = null;
-        this.getImgList();
+    onImgSelected(picturesList) {
+        this.setNbImgToDelSelected(picturesList);
     }
     onRenamePicture(pictureRenamed) {
         console.log('onRenamePicture pictureRenamed', pictureRenamed);
         this.renamePictureService.renamePicture(pictureRenamed);
     }
-    removeListImg() {
+    removeListImg(picturesList) {
         if (this.disable) {
             return;
         }
@@ -3123,26 +3130,28 @@ class ImagesViewComponent {
         // Get the id of the img to remove
         // And add deleted property
         const idImgToRemove = [];
-        this.picturesList.forEach(img => {
+        picturesList.forEach(img => {
             if (img.delSelected) {
                 img.deleted = true;
                 idImgToRemove.push(img.id_file);
             }
         });
-        this.imgManager.removeMultipleImg(idImgToRemove).subscribe(() => {
-            this.getImgList();
-            this.imgSelectionService.removeImgSelectionByIds(idImgToRemove);
-        }, error => {
-            this.getImgList();
-            this.alertService.openAlert(this.errorRemoveImg);
+        this.imgManager.removeMultipleImg(idImgToRemove).subscribe({
+            next: () => {
+                this.imgSelectionService.removeImgSelectionByIds(idImgToRemove);
+            },
+            error: error => {
+                this.imgManager.refreshImageList$.next();
+                this.alertService.openAlert(this.errorRemoveImg);
+            }
         });
     }
-    selectImgChosen() {
+    selectImgChosen(picturesList) {
         if (this.disable) {
             return;
         }
         const picturesListSelected = [];
-        this.picturesList.map(img => {
+        picturesList.map(img => {
             if (img.delSelected) {
                 img.delSelected = false;
                 img.selected = true;
@@ -3151,7 +3160,7 @@ class ImagesViewComponent {
                 picturesListSelected.push(img);
             }
         });
-        this.setNbImgToDelSelected();
+        this.setNbImgToDelSelected(picturesList);
         this.imgSelectionService.setImgSelection(picturesListSelected);
     }
     displayConfirmImgSup() {
@@ -3166,17 +3175,14 @@ class ImagesViewComponent {
     /**
      * Event emit when a img selected in order to delete
      */
-    onPicturesListChange() {
-        this.setNbImgToDelSelected();
-    }
-    onFiltersChange() {
-        this.getImgList();
+    onPicturesListChange(picturesList) {
+        this.setNbImgToDelSelected(picturesList);
     }
     /**
      * Set default number of img per page to display at the initialisation
      * This number is between 30 and 50
      */
-    setNbImgToDisplay() {
+    setNbImgToDisplay(tableFilters) {
         const containerWidth = this.imgLibContainer.nativeElement.offsetWidth + 30; // + 30px -> left + right margin
         const scrollWidth = window.innerWidth - document.body.offsetWidth;
         const [maxImgWidthFactor, minImgWidthFactor] = this.getImgWidthFactors();
@@ -3184,7 +3190,11 @@ class ImagesViewComponent {
         const maxImgWidth = Math.ceil((containerWidth + scrollWidth) * maxImgWidthFactor);
         this.nbMaxImgPerLine = Math.floor(containerWidth / minImgWidth);
         this.nbMinImgPerLine = Math.floor((containerWidth + scrollWidth) / maxImgWidth);
-        this.pageSize = this.getTotalImgPerPage();
+        this.searchImagesParameters$.next(this.getParams({
+            ...tableFilters,
+            itemsPerPage: this.getTotalImgPerPage(),
+            currentPage: 1
+        }));
     }
     getImgWidthFactors() {
         const screenWidth = window.innerWidth;
@@ -3215,40 +3225,30 @@ class ImagesViewComponent {
         }
         return total;
     }
-    setParams() {
-        this.params = {
-            limit: this.maxLengthCardShow?.toString() || (this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString()),
-            page: this.tableFilters.currentPage.toString()
+    getParams(tableFilters) {
+        return {
+            limit: tableFilters.itemsPerPage.toString(),
+            page: tableFilters.currentPage.toString(),
+            ...(tableFilters.searchValue && { search: tableFilters.searchValue.toString() }),
         };
-        if (this.tableFilters.searchValue) {
-            this.params.search = this.tableFilters.searchValue.toString();
-        }
     }
     initVariables(loadingSuccess) {
         this.nbImgToDelSelected = 0;
         this.disable = false;
-        this.isLoading = false;
         this.delListImgLoader = false;
         this.initComponent = false;
-        this.displayPexelsResults = false;
         this.failLoaded = !loadingSuccess;
         this.nbFakeImg = 0;
     }
-    selectImgSelected() {
-        if (!this.imgSelectedList || !this.imgSelectedList.length) {
-            return;
-        }
-        const idImgSlectedList = [];
-        this.imgSelectedList.forEach(img => idImgSlectedList.push(img.id_file));
-        this.picturesList.forEach(picture => {
-            if (idImgSlectedList.indexOf(picture.id_file) !== -1) {
-                picture.selected = true;
+    setSelectedProperty(imgSelectedList, picturesList) {
+        const picturesListSelected = JSON.parse(JSON.stringify(picturesList));
+        imgSelectedList.forEach(img => {
+            const selectedImg = picturesListSelected.find(picture => picture.id_file === img.id_file);
+            if (selectedImg) {
+                selectedImg.selected = true;
             }
         });
-    }
-    displayPexelsLib() {
-        this.displayPexelsResults = true;
-        this.alertService.openAlert(this.msgNoImgFound);
+        return picturesListSelected;
     }
     /**
      * Set a img list in order to fill properly all the line of images displayed in mosaic.
@@ -3256,139 +3256,32 @@ class ImagesViewComponent {
      */
     calculateNbImgFake(nbImgDisplayed) {
         const nbImgPerLine = this.stateDisplayed === 'small' || this.tabDisplayed === 'img-upload' ? this.nbMaxImgPerLine : this.nbMinImgPerLine;
-        if (nbImgDisplayed % nbImgPerLine !== 0) {
-            this.nbFakeImg = nbImgPerLine - nbImgDisplayed % nbImgPerLine;
+        if (isNaN(nbImgDisplayed % nbImgPerLine)) {
+            this.nbFakeImg = 0;
+            return;
         }
-    }
-    getImg(id_file) {
-        this.imgManager.getShopImg(id_file).pipe(take(1)).subscribe({
-            next: (picture) => {
-                if (!this.imgAlreadyExist(picture.id_file)) {
-                    // check the img is not already present
-                    this.picturesList.unshift(picture);
-                    this.length += 1;
-                }
-            },
-            error: () => {
-                this.alertService.openAlert(this.errorGetImg);
-            }
-        });
-    }
-    imgAlreadyExist(id_file) {
-        for (const img of this.picturesList) {
-            if (img.id_file === id_file) {
-                return true;
-            }
+        if (nbImgDisplayed % nbImgPerLine !== 0) {
+            setTimeout(() => {
+                this.nbFakeImg = nbImgPerLine - nbImgDisplayed % nbImgPerLine;
+            }, 0);
         }
-        return false;
     }
-    setNbImgToDelSelected() {
-        this.nbImgToDelSelected = this.picturesList.filter(img => img.delSelected).length;
+    setNbImgToDelSelected(picturesList) {
+        this.nbImgToDelSelected = picturesList.filter(img => img.delSelected).length;
         if (!this.nbImgToDelSelected) {
             this.confirmImgSup = false;
         }
     }
-    setEvents() {
-        // Add a timer to retrieve img when the search bar or the paginator are used
-        this.searchQueryChanged
-            .pipe(debounceTime(400)) // wait 0.5 sec after the last event before emitting last event
-            .subscribe(data => {
-            this.getImgList();
-        });
-        this.filtersChanged
-            .pipe(debounceTime(800)) // wait 0.8 sec after the last event before emitting last event
-            .subscribe(data => {
-            this._getImgList();
-        });
-        // Reload img when img is/are removed
-        this.imgRemovedEvent = this.imgEventService.imgRemoved$.subscribe(id_file => {
-            this.getImgList();
-        });
-        // Create img from Canva
-        this.imgAddedEvent = this.imgEventService.getImgAddedEventListner().subscribe(id_file => {
-            if (id_file && !this.imgAlreadyExist(id_file)) {
-                this.getImg(id_file);
-            }
-        });
-        this.imgSelectionChange = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
-            if (this.listDisplayed) {
-                return;
-            }
-            const idFileList = [];
-            imgSelection.map(img => idFileList.push(img.id_file));
-            for (const picture of this.picturesList) {
-                if (idFileList.indexOf(picture.id_file) === -1) {
-                    picture.selected = false;
-                }
-            }
-        });
-    }
-    _getImgList() {
-        this.isLoading = true;
-        this.displayPexelsResults = false;
-        this.setParams();
-        this.refreshTotalImgList();
-        const forceToUpdate = this.isLastImgRemovedInList();
-        this.imgManager.getShopImgList(this.params, forceToUpdate).pipe(take(1)).subscribe({
-            next: (data) => {
-                this.initVariables(true);
-                const nbImgDisplayed = data.data.length;
-                this.calculateNbImgFake(nbImgDisplayed);
-                this.picturesList = data.data;
-                this.renamePictureService.setPicturesList(this.picturesList);
-                this.selectImgSelected();
-                this.length = this.isTotalRetrieved ? this.length : data.totalRecords;
-                this.tableFilters.totalItems = this.isTotalRetrieved ? this.tableFilters.totalItems : data.totalRecords;
-                console.log('this.tableFilters.totalItems 1', this.tableFilters.totalItems);
-                this.tableFilters.itemsPerPage = this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage : this.pageSize;
-                // Display Pexels if no result
-                if (data.totalRecords === 0) {
-                    this.displayPexelsLib();
-                }
-                this.changeDetectorRef.markForCheck(); // In wizi-admin, the change detection is not working properly
-            },
-            error: error => {
-                this.alertService.openAlert(this.errorGetAllImg);
-                this.initVariables(false);
-            }
-        });
-    }
-    refreshTotalImgList() {
-        const searchValue = this.tableFilters.searchValue;
-        if (this.isTotalRetrieved && searchValue === this.previousSearchValue) {
-            // Keep current total result
-            return;
-        }
-        this.isTotalRetrieved = false;
-        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe({
-            next: total => {
-                this.previousSearchValue = searchValue;
-                this.isTotalRetrieved = true;
-                this.length = total;
-                this.tableFilters.totalItems = total;
-                console.log('this.tableFilters.totalItems 1', this.tableFilters.totalItems);
-            },
-            error: error => {
-                //this.alertService.openAlert(this.errorGetTotalImg);
-                this.initVariables(false);
-            }
-        });
-    }
     switchDisplayWindowMosaic() {
         this.switchDisplayWindow.emit(true);
     }
-    isLastImgRemovedInList() {
-        return this.picturesList.some(picture => picture.id_file === this.imgEventService.imgRemoved$.getValue());
-    }
     ngOnDestroy() {
-        this.searchQueryChanged.unsubscribe();
-        this.imgRemovedEvent.unsubscribe();
-        this.imgAddedEvent.unsubscribe();
-        this.imgSelectionChange.unsubscribe();
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 }
 ImagesViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", maxLengthCardShow: "maxLengthCardShow", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n  <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n  <div\n  *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n  class=\"images-view__container\"\n  [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n  >\n\n    <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n        <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n    </div>\n    <div *ngIf=\"tabDisplayed === 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n    </div>\n\n    <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n        <!-- For listforma : Display btn del multiple img & Confirm action -->\n        <div class=\"images-view__container__boxAction\">\n\n\n            <!-- Select -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\n              type=\"button\"\n              >\n                <i class=\"fal fa-check\"></i>\n                {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n            </button>\n\n            <!-- Display btn del multiple img -->\n            <button\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n              (click)=\"displayConfirmImgSup()\"\n              class=\"button images-view__container__boxAction__delBtn danger\"\n              @insertRemoveAnnim\n              type=\"button\"\n            >\n                <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n            </button>\n\n            <!-- Confirm action -->\n            <div\n              class=\"images-view__container__boxAction__confirmSup\"\n              [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <div>\n                    <button\n                      class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                      (click)=\"cancelSup()\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.confirm' | translate }}\n                  </button>\n                </div>\n            </div>\n\n        </div>\n\n\n        <!-- Swith mosaic/list forma -->\n        <div class=\"field has-addons images-view__container__buttonBox\">\n            <div class=\"control\">\n                <div\n                  class=\"button is-lighted images-view__container__buttonBox__btn\"\n                  [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                  (click)=\"onSwitchFormatDisplayed(false)\"\n                >\n                    <span class=\"icon is-small\">\n                        <i class=\"far fa-th\"></i>\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"control\">\n                <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                        [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                        (click)=\"onSwitchFormatDisplayed(true)\"\n                >\n                  <span class=\"icon is-small\">\n                      <i class=\"fas fa-bars\"></i>\n                  </span>\n              </div>\n            </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n\n  <!-- Images section -->\n<ng-scrollbar\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n    'images-view__scroll--full': stateDisplayed === 'full',\n    'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n    'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n    'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n  <div #imgLibContainer class=\"images-view__wrapper\">\n    <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n      <mosaic-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n        [nbFakeImg]=\"nbFakeImg\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [isLoading]=\"isLoading\"\n        [fullSize]=\"fullSize\"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n      <table-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [isLoading]=\"isLoading\"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n  *ngIf=\"displayPexelsResults\"\n  class=\"images-view--pexels\"\n  [@easeInOut]=\"'in'\">\n  <pexels-lib\n    [searchValue]=\"tableFilters.searchValue\"\n    (showImgUploaded)=\"onShowImgUploaded()\"\n    [disableSearch]=\"true\"\n  >\n  </pexels-lib>\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: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n    <div\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n    class=\"images-view__container\"\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n    >\n\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n      </div>\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n      </div>\n\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\n          <div class=\"images-view__container__boxAction\">\n\n\n              <!-- Select -->\n              <button\n                class=\"button success images-view__container__boxAction__import\"\n                @insertRemoveAnnim\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n                (click)=\"selectImgChosen(vm.picturesList)\"\n                type=\"button\"\n                >\n                  <i class=\"fal fa-check\"></i>\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n              </button>\n\n              <!-- Display btn del multiple img -->\n              <button\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n                (click)=\"displayConfirmImgSup()\"\n                class=\"button images-view__container__boxAction__delBtn danger\"\n                @insertRemoveAnnim\n                type=\"button\"\n              >\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n              </button>\n\n              <!-- Confirm action -->\n              <div\n                class=\"images-view__container__boxAction__confirmSup\"\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <div>\n                      <button\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                        (click)=\"cancelSup()\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                      </button>\n                      <button\n                        (click)=\"removeListImg(vm.picturesList)\"\n                        class=\"button images-view__container__delBtn danger\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\n                    </button>\n                  </div>\n              </div>\n\n          </div>\n\n\n          <!-- Swith mosaic/list forma -->\n          <div class=\"field has-addons images-view__container__buttonBox\">\n              <div class=\"control\">\n                  <div\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                    (click)=\"onSwitchFormatDisplayed(false)\"\n                  >\n                      <span class=\"icon is-small\">\n                          <i class=\"far fa-th\"></i>\n                      </span>\n                  </div>\n              </div>\n\n              <div class=\"control\">\n                  <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                          [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                          (click)=\"onSwitchFormatDisplayed(true)\"\n                  >\n                    <span class=\"icon is-small\">\n                        <i class=\"fas fa-bars\"></i>\n                    </span>\n                </div>\n              </div>\n          </div>\n      </div>\n    </div>\n  </div>\n\n\n    <!-- Images section -->\n  <ng-scrollbar\n    class=\"images-view__scroll\"\n    [ngClass]=\"{\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n      'images-view__scroll--full': stateDisplayed === 'full',\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n      'images-view__scroll--window': stateDisplayed === 'window'\n  }\"\n  >\n    <div #imgLibContainer class=\"images-view__wrapper\">\n\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n          <mosaic-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n            [nbFakeImg]=\"nbFakeImg\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [tabDisplayed]=\"tabDisplayed\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [isLoading]=\"vm.isLoading\"\n            [fullSize]=\"fullSize\"\n          >\n          </mosaic-view>\n        </div>\n\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n          <table-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [isLoading]=\"vm.isLoading\"\n            >\n          </table-view>\n        </div>\n    </div>\n  </ng-scrollbar>\n\n  <!-- Pexels Section - When no img found -->\n  <div\n    *ngIf=\"vm.displayPexelsResults\"\n    class=\"images-view--pexels\"\n    [@easeInOut]=\"'in'\">\n    <pexels-lib\n      [searchValue]=\"vm.tableFilters.searchValue\"\n      [disableSearch]=\"true\"\n    >\n    </pexels-lib>\n  </div>\n</ng-container>", 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: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut,
         insertRemove
     ] });
@@ -3397,15 +3290,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'images-view', animations: [
                         easeInOut,
                         insertRemove
-                    ], template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n  <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n  <div\n  *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n  class=\"images-view__container\"\n  [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n  >\n\n    <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n        <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n    </div>\n    <div *ngIf=\"tabDisplayed === 'img-upload'\">\n        <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n    </div>\n\n    <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n        <!-- For listforma : Display btn del multiple img & Confirm action -->\n        <div class=\"images-view__container__boxAction\">\n\n\n            <!-- Select -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\n              type=\"button\"\n              >\n                <i class=\"fal fa-check\"></i>\n                {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n            </button>\n\n            <!-- Display btn del multiple img -->\n            <button\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n              (click)=\"displayConfirmImgSup()\"\n              class=\"button images-view__container__boxAction__delBtn danger\"\n              @insertRemoveAnnim\n              type=\"button\"\n            >\n                <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n            </button>\n\n            <!-- Confirm action -->\n            <div\n              class=\"images-view__container__boxAction__confirmSup\"\n              [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                <div>\n                    <button\n                      class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                      (click)=\"cancelSup()\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\n                      type=\"button\"\n                    >\n                      {{ 'ImgManager.ImgLib.confirm' | translate }}\n                  </button>\n                </div>\n            </div>\n\n        </div>\n\n\n        <!-- Swith mosaic/list forma -->\n        <div class=\"field has-addons images-view__container__buttonBox\">\n            <div class=\"control\">\n                <div\n                  class=\"button is-lighted images-view__container__buttonBox__btn\"\n                  [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                  (click)=\"onSwitchFormatDisplayed(false)\"\n                >\n                    <span class=\"icon is-small\">\n                        <i class=\"far fa-th\"></i>\n                    </span>\n                </div>\n            </div>\n\n            <div class=\"control\">\n                <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                        [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                        (click)=\"onSwitchFormatDisplayed(true)\"\n                >\n                  <span class=\"icon is-small\">\n                      <i class=\"fas fa-bars\"></i>\n                  </span>\n              </div>\n            </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n\n  <!-- Images section -->\n<ng-scrollbar\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n    'images-view__scroll--full': stateDisplayed === 'full',\n    'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n    'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n    'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n  <div #imgLibContainer class=\"images-view__wrapper\">\n    <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n      <mosaic-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n        [nbFakeImg]=\"nbFakeImg\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [isLoading]=\"isLoading\"\n        [fullSize]=\"fullSize\"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n      <table-view\n        [picturesList]=\"picturesList\"\n        (picturesListChange)=\"onPicturesListChange()\"\n        [tableFilters]=\"tableFilters\"\n        (filtersChange)=\"onFiltersChange()\"\n        [(disable)]=\"disable\"\n        (pictureNameChange)=\"onRenamePicture($event)\"\n        [displayPexelsResults]=\"displayPexelsResults\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [isLoading]=\"isLoading\"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n  *ngIf=\"displayPexelsResults\"\n  class=\"images-view--pexels\"\n  [@easeInOut]=\"'in'\">\n  <pexels-lib\n    [searchValue]=\"tableFilters.searchValue\"\n    (showImgUploaded)=\"onShowImgUploaded()\"\n    [disableSearch]=\"true\"\n  >\n  </pexels-lib>\n</div>\n" }]
+                    ], template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n    <div\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n    class=\"images-view__container\"\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n    >\n\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n      </div>\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n      </div>\n\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\n          <div class=\"images-view__container__boxAction\">\n\n\n              <!-- Select -->\n              <button\n                class=\"button success images-view__container__boxAction__import\"\n                @insertRemoveAnnim\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n                (click)=\"selectImgChosen(vm.picturesList)\"\n                type=\"button\"\n                >\n                  <i class=\"fal fa-check\"></i>\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n              </button>\n\n              <!-- Display btn del multiple img -->\n              <button\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n                (click)=\"displayConfirmImgSup()\"\n                class=\"button images-view__container__boxAction__delBtn danger\"\n                @insertRemoveAnnim\n                type=\"button\"\n              >\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n              </button>\n\n              <!-- Confirm action -->\n              <div\n                class=\"images-view__container__boxAction__confirmSup\"\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <div>\n                      <button\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                        (click)=\"cancelSup()\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                      </button>\n                      <button\n                        (click)=\"removeListImg(vm.picturesList)\"\n                        class=\"button images-view__container__delBtn danger\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\n                    </button>\n                  </div>\n              </div>\n\n          </div>\n\n\n          <!-- Swith mosaic/list forma -->\n          <div class=\"field has-addons images-view__container__buttonBox\">\n              <div class=\"control\">\n                  <div\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                    (click)=\"onSwitchFormatDisplayed(false)\"\n                  >\n                      <span class=\"icon is-small\">\n                          <i class=\"far fa-th\"></i>\n                      </span>\n                  </div>\n              </div>\n\n              <div class=\"control\">\n                  <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n                          [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n                          (click)=\"onSwitchFormatDisplayed(true)\"\n                  >\n                    <span class=\"icon is-small\">\n                        <i class=\"fas fa-bars\"></i>\n                    </span>\n                </div>\n              </div>\n          </div>\n      </div>\n    </div>\n  </div>\n\n\n    <!-- Images section -->\n  <ng-scrollbar\n    class=\"images-view__scroll\"\n    [ngClass]=\"{\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n      'images-view__scroll--full': stateDisplayed === 'full',\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n      'images-view__scroll--window': stateDisplayed === 'window'\n  }\"\n  >\n    <div #imgLibContainer class=\"images-view__wrapper\">\n\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n          <mosaic-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n            [nbFakeImg]=\"nbFakeImg\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [tabDisplayed]=\"tabDisplayed\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [isLoading]=\"vm.isLoading\"\n            [fullSize]=\"fullSize\"\n          >\n          </mosaic-view>\n        </div>\n\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n          <table-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [isLoading]=\"vm.isLoading\"\n            >\n          </table-view>\n        </div>\n    </div>\n  </ng-scrollbar>\n\n  <!-- Pexels Section - When no img found -->\n  <div\n    *ngIf=\"vm.displayPexelsResults\"\n    class=\"images-view--pexels\"\n    [@easeInOut]=\"'in'\">\n    <pexels-lib\n      [searchValue]=\"vm.tableFilters.searchValue\"\n      [disableSearch]=\"true\"\n    >\n    </pexels-lib>\n  </div>\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], tabDisplayed: [{
                 type: Input
             }], fullSize: [{
                 type: Input
-            }], maxLengthCardShow: [{
-                type: Input
             }], nbRowToShow: [{
                 type: Input
             }], listDisplayed: [{
@@ -3657,7 +3548,7 @@ class ImgTabsComponent {
     }
 }
 ImgTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"], outputs: ["showImgUploaded"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "maxLengthCardShow", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+ImgTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgTabsComponent, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-tabs', template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n" }]