@wizishop/img-manager 0.2.108 → 14.0.0

package/fesm2020/wizishop-img-manager.mjs

@@ -0,0 +1,4140 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
+import { ReplaySubject, Observable, Subject, BehaviorSubject, forkJoin } from 'rxjs';
+import * as i3 from '@angular/common/http';
+import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i7 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, debounceTime, map, takeUntil, distinctUntilChanged, tap } 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';
+import * as i3$1 from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i3$2 from '@angular/router';
+import * as i4 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import { v4 } from 'uuid';
+import * as i3$3 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
+import { CdkTableModule } from '@angular/cdk/table';
+
+class ImgSelectionService {
+    constructor() {
+        this.imgSelectedList = [];
+        this.multipleImgMode = false;
+        this.imgSelectionSubscriber = [];
+        this.imgListLoading = new ReplaySubject();
+    }
+    getImgSelection() {
+        return this.imgSelectedList;
+    }
+    // Use in img manager webelement, when the product img selection is retrieved
+    setImgSelection(imgSelectedList) {
+        this.imgSelectedList.length = 0; // Remove all the elements from the array and keep the reference
+        if (imgSelectedList && imgSelectedList.length) {
+            imgSelectedList.forEach(elem => this.imgSelectedList.push(elem));
+        }
+        this.emitImgSelectionChange();
+    }
+    addImgSelected(picture) {
+        if (this.multipleImgMode) {
+            this.imgSelectedList.push(picture);
+        }
+        else {
+            this.imgSelectedList = [picture];
+        }
+        this.emitImgSelectionChange();
+    }
+    getImgSelectionChange() {
+        const obsImgSelection = new Observable(subscriber => {
+            this.imgSelectionSubscriber.push(subscriber);
+        });
+        return obsImgSelection;
+    }
+    emitImgSelectionChange() {
+        this.imgSelectionSubscriber.map(obs => obs.next(JSON.parse(JSON.stringify(this.imgSelectedList))));
+    }
+    removeImgSelectedByIndex(index) {
+        this.imgSelectedList.splice(index, 1);
+        this.emitImgSelectionChange();
+    }
+    removeImgSelectedById(id_file) {
+        if (!this.multipleImgMode) {
+            this.imgSelectedList = [];
+            return;
+        }
+        let index = 0;
+        for (const img of this.imgSelectedList) {
+            if (img.id_file === id_file) {
+                this.removeImgSelectedByIndex(index);
+                break;
+            }
+            index++;
+        }
+    }
+    removeImgSelectionByIds(id_file_list) {
+        if (!this.multipleImgMode) {
+            this.imgSelectedList = [];
+            return;
+        }
+        for (let index = this.imgSelectedList.length - 1; index > -1; index--) {
+            const id_file = this.imgSelectedList[index].id_file;
+            if (id_file_list.indexOf(id_file) !== -1) {
+                this.removeImgSelectedByIndex(index);
+            }
+        }
+    }
+    removeAllImgSelected() {
+        this.imgSelectedList.length = 0;
+        this.emitImgSelectionChange();
+        // Remove all the elements from the array and keep the reference
+    }
+    setMultipleImgMode(activated) {
+        this.multipleImgMode = activated;
+    }
+    initImgSelectedList(imgSelectedList) {
+        // Retrieve the imgSelectedList from parameter
+        if (imgSelectedList) {
+            this.imgSelectedList = imgSelectedList;
+            return;
+        }
+        // Remove all elements from imgSelectedList
+        if (this.imgSelectedList && this.imgSelectedList.length) {
+            this.imgSelectedList.splice(0, this.imgSelectedList.length);
+            return;
+        }
+        this.imgSelectedList = [];
+    }
+    /**
+     * Use to display the loader on img selection list
+     * @param loading
+     */
+    emitImgListLoading(loading) {
+        this.imgListLoading.next(loading);
+    }
+    /**
+     * Use to display the loader on img selection list
+     * @param loading
+     */
+    getImgListLoadingEventListner() {
+        return this.imgListLoading.asObservable();
+    }
+    /**
+     * Use angular cdk function
+     * Called by img selection component
+     * @param event
+     */
+    moveImgOrder(event) {
+        const fromIndex = event.previousIndex;
+        const toIndex = event.currentIndex;
+        this.imgSelectedList.splice(toIndex, 0, this.imgSelectedList.splice(fromIndex, 1)[0]);
+        this.emitImgSelectionChange();
+    }
+}
+ImgSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImgSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgSelectionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgSelectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ImgManagerConfigDto {
+}
+
+class ImgManagerService {
+    constructor(http) {
+        this.http = http;
+        this.params = new HttpParams().set("limit", "20").set("page", "1");
+        // Display the img selection
+        this.pageFicheProductConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: true,
+            showImgManagerModule: true,
+            showSelection: true,
+            displayBtn: true,
+            pageficheProduct: true
+        };
+        this.angularFicheProductConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: true,
+            showImgManagerModule: true,
+            showSelection: true,
+            displayBtn: false,
+            pageficheProduct: true
+        };
+        this.wiziblockConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: false
+        };
+        this.simpleWithButtonOpenerConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: true
+        };
+        this.fullWindowConfig = {
+            stateDisplayed: 'window',
+            multipleImgMode: false,
+            showImgManagerModule: true,
+            showSelection: false,
+            displayBtn: false
+        };
+    }
+    setApiConfig(img_manager_route, shop_token) {
+        this.imgManagerRoute = img_manager_route;
+        this.shopToken = shop_token;
+    }
+    getOptionsHeaders(params) {
+        const header = { headers: new HttpHeaders({
+                Authorization: 'Bearer ' + this.shopToken
+            })
+        };
+        if (params) {
+            this.getParams(params);
+            header['params'] = this.params;
+        }
+        return header;
+    }
+    getShopImgList(params) {
+        return this.http.get(`${this.imgManagerRoute}/images`, this.getOptionsHeaders(params));
+    }
+    getShopTotalImgList(params) {
+        return this.http.get(`${this.imgManagerRoute}/total/image`, this.getOptionsHeaders(params));
+    }
+    getShopImg(idFile) {
+        return this.http.get(`${this.imgManagerRoute}/images/${idFile}`, this.getOptionsHeaders());
+    }
+    getParams(params) {
+        this.params = new HttpParams();
+        this.params = this.params.set('id_file:sort', 'desc');
+        for (const param in params) {
+            this.params = this.params.set(param, params[param]);
+        }
+    }
+    uploadFile(formData) {
+        return this.http.post(`${this.imgManagerRoute}/images/template`, formData, this.getOptionsHeaders());
+    }
+    uploadFileByUrl(url, fileName) {
+        const body = {
+            url,
+            fileName
+        };
+        return this.http.post(`${this.imgManagerRoute}/images/template`, { url, fileName }, this.getOptionsHeaders());
+    }
+    replaceImg(imageBase64, id_file) {
+        const body = {
+            imageBase64,
+            type: "RAW"
+        };
+        return this.http.put(`${this.imgManagerRoute}/images/${id_file}/replace`, body, this.getOptionsHeaders());
+    }
+    changeImgName(fileName, id_file) {
+        return this.http.put(`${this.imgManagerRoute}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
+    }
+    removeImg(id_file) {
+        return this.http.delete(`${this.imgManagerRoute}/images/${id_file}`, this.getOptionsHeaders());
+    }
+    removeMultipleImg(id_array) {
+        return this.http.post(`${this.imgManagerRoute}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
+    }
+    getImgManagerDisplayConfig(displayName) {
+        switch (displayName) {
+            case "window":
+                return this.fullWindowConfig;
+            case "wizi-block":
+                return this.wiziblockConfig;
+            case "fiche-product":
+                return this.pageFicheProductConfig;
+            case "simple-with-button":
+                return this.simpleWithButtonOpenerConfig;
+            case 'angular-fiche-product':
+                return this.angularFicheProductConfig;
+            default:
+                return;
+        }
+    }
+    getAllImgManagerDisplayConfig() {
+        return [
+            this.fullWindowConfig,
+            this.wiziblockConfig,
+            this.pageFicheProductConfig,
+            this.simpleWithButtonOpenerConfig,
+        ];
+    }
+}
+ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerService, deps: [{ token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.HttpClient }]; } });
+
+class ImgCDNService {
+    constructor() {
+        this.imgCDNConfig = null;
+    }
+    setImgCDNConfig(imgCDNConfig) {
+        this.imgCDNConfig = imgCDNConfig;
+    }
+    getUrlImg(size) {
+        const urlProperty = Object.keys(this.imgCDNConfig)
+            .filter(url => new RegExp(size, 'i').test(url))[0];
+        return this.imgCDNConfig[urlProperty];
+    }
+    getAllSize() {
+        return Object.keys(this.imgCDNConfig)
+            .map(elem => elem.match(/_(\w+)_/)[1]);
+    }
+}
+ImgCDNService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImgCDNService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgCDNService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgCDNService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ImgManagerConfigService {
+    constructor(imgManagerService, imgCDNService) {
+        this.imgManagerService = imgManagerService;
+        this.imgCDNService = imgCDNService;
+    }
+    /**
+     * Set imgManagerService and imgCDNService
+     * Canva and Pexel service retrieve the externalConfig at their initialization
+     * @param externalConfig
+     */
+    setExternalConfig(externalConfig) {
+        this.externalConfig = externalConfig;
+        this.imgManagerService.setApiConfig(externalConfig.api.image_manager_route, externalConfig.api.shop_token);
+        this.imgCDNService.setImgCDNConfig(externalConfig.imgCDNConfig);
+    }
+    getCanvaApiURL() {
+        return this.externalConfig.api.canva_url;
+    }
+    getCanvaApiToken() {
+        return this.externalConfig.api.canva_token;
+    }
+    getRouteAssets() {
+        return this.externalConfig.api.assets_route;
+    }
+    getPexelsApiURL() {
+        return this.externalConfig.api.pexels_route;
+    }
+    getPexelsApiToken() {
+        return this.externalConfig.api.pexels_token;
+    }
+    getShopCategory() {
+        return this.externalConfig.api.shop_category;
+    }
+}
+ImgManagerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerConfigService, deps: [{ token: ImgManagerService }, { token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Injectable });
+ImgManagerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgCDNService }]; } });
+
+class UserSettingsService {
+    constructor() {
+        this.userdisplayPreference = 'WzImgManagerListDisplayed';
+    }
+    /**
+     * true : display list
+     * false : display mosaic
+     * @param value
+     */
+    setUserDisplayPreference(value) {
+        localStorage.setItem(this.userdisplayPreference, '' + value);
+    }
+    getUserDisplayPreference() {
+        const value = localStorage.getItem(this.userdisplayPreference);
+        return value == 'true';
+    }
+}
+UserSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UserSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: UserSettingsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: UserSettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AlertService {
+    constructor(nwbAlertService, translateService) {
+        this.nwbAlertService = nwbAlertService;
+        this.translateService = translateService;
+        this.actionMsg = 'ImgManager.alert.action';
+        this.alertConfig = {
+            message: '',
+            duration: 5000
+        };
+    }
+    openAlert(msgKey) {
+        this.closePreviousAlert();
+        this.translateService.get(msgKey).subscribe(trans => {
+            this.alertConfig.message = trans;
+            this.setAlertColor(msgKey);
+            this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
+            this.alertRefComponent.afterClosed().subscribe();
+        });
+    }
+    openAlertWithBackendRespons(msgKey, msgBackend) {
+        this.translateService.get(msgKey).subscribe(trans => {
+            this.alertConfig.message = trans;
+            this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
+            this.closePreviousAlert();
+            this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
+            this.alertRefComponent.afterClosed().subscribe();
+        });
+    }
+    closePreviousAlert() {
+        if (this.alertRefComponent) {
+            this.alertRefComponent.dismiss();
+        }
+    }
+    setAlertColor(msgKey) {
+        const isErrorMsg = /error/i.test(msgKey);
+        this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
+    }
+}
+AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AlertService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NwbAlertService }, { type: i7.TranslateService }]; } });
+
+class ImgEventService {
+    constructor() {
+        this.imgToEditEvent = new Subject();
+        this.imgRemoved = new Subject();
+        this.imgAdded = new Subject();
+        this.listDisplayedChange = new Subject();
+    }
+    emitImgRemoved(id_file) {
+        this.imgRemoved.next(id_file);
+    }
+    getImgRemovedEventListner() {
+        return this.imgRemoved.asObservable();
+    }
+    emitImgToEdit(imgToEdit) {
+        this.imgToEditEvent.next(imgToEdit);
+    }
+    getImgToEditEventListner() {
+        return this.imgToEditEvent.asObservable();
+    }
+    emitImgAdded(id_file) {
+        this.imgAdded.next(id_file);
+    }
+    getImgAddedEventListner() {
+        return this.imgAdded.asObservable();
+    }
+    emitlistDisplayedChange(value) {
+        this.listDisplayedChange.next(value);
+    }
+    getlistDisplayedChange() {
+        return this.listDisplayedChange.asObservable();
+    }
+}
+ImgEventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImgEventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgEventService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgEventService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class CanvaService {
+    constructor(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
+        this.externalConfigService = externalConfigService;
+        this.imgManager = imgManager;
+        this.wzImgEventService = wzImgEventService;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        this.imgLoading = false;
+        this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
+        this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
+        this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
+        this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
+        this.forceToOpenCanva = false;
+        this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
+        this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
+    }
+    setCanvaApiConfig() {
+        this.canvaApiURL = this.externalConfigService.getCanvaApiURL();
+        this.canvaApiKey = this.externalConfigService.getCanvaApiToken();
+    }
+    getCanvaLogo() {
+        return this.externalConfigService.getRouteAssets() + "canva/icon_canva.svg";
+    }
+    bindEventExepectedImgSizeChange() {
+        return this.bindExpectedSizeDone;
+    }
+    expectedImgSizesChange(mediaDTO) {
+        this.bindExpectedImgSizeEvent.next(mediaDTO);
+        if (this.forceToOpenCanva) {
+            this.openCanva(parseInt(mediaDTO.image_width), parseInt(mediaDTO.image_height));
+        }
+    }
+    getCanvaApi() {
+        if (!this.canvaApiURL || !this.canvaApiKey) {
+            this.setCanvaApiConfig();
+        }
+        return new Observable(observer => {
+            this.loadCanva().subscribe({
+                complete: () => {
+                    if (this.canvaApi && Canva.DesignButton) {
+                        observer.next(this.canvaApi);
+                        observer.complete();
+                    }
+                    else {
+                        this.initializeCanva(observer);
+                    }
+                }
+            });
+        });
+    }
+    initializeCanva(observer) {
+        if (Canva.DesignButton) {
+            Canva.DesignButton.initialize({
+                apiKey: this.canvaApiKey
+            }).then((canvaApi) => {
+                this.canvaApi = canvaApi;
+                observer.next(this.canvaApi);
+                observer.complete();
+            });
+        }
+    }
+    loadCanva() {
+        return new Observable(observer => {
+            if (this.canvaApi) {
+                observer.complete();
+            }
+            else {
+                this.loadCanvaScript(observer);
+            }
+        });
+    }
+    loadCanvaScript(observer) {
+        const node = document.createElement('script');
+        node.src = this.canvaApiURL;
+        node.type = 'text/javascript';
+        node.async = false;
+        node.charset = 'utf-8';
+        node.onload = () => {
+            observer.complete();
+        };
+        document.getElementsByTagName('head')[0].appendChild(node);
+    }
+    openCanva(width, height) {
+        if (this.imgLoading) {
+            return;
+        }
+        this.getCanvaApi().pipe(take(1)).subscribe((api) => {
+            this.canvaApi = api;
+            this.addOverflowBody();
+            this.createDesign(width, height);
+        });
+    }
+    addOverflowBody() {
+        document.body.classList.add('ovh-canva');
+    }
+    removeOverflowBody() {
+        document.body.classList.remove('ovh-canva');
+    }
+    createDesign(width, height) {
+        const createDesign = {
+            type: 'EtsyShopIcon',
+            dimensions: {
+                units: 'px',
+                width: width ? width : undefined,
+                height: height ? height : undefined,
+            },
+            publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
+        };
+        this.canvaApi.createDesign({
+            design: createDesign,
+            onDesignPublish: ({ exportUrl, designTitle }) => this.designPublished(exportUrl, designTitle),
+            onDesignClose: () => {
+                this.removeOverflowBody();
+            }
+        });
+    }
+    designPublished(exportUrl, designTitle) {
+        this.alertService.openAlert(this.uploadingImg);
+        this.imgLoading = true;
+        this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe((img) => {
+            this.imgLoading = false;
+            this.removeOverflowBody();
+            this.wzImgEventService.emitImgAdded(img.id_file);
+            this.alertService.openAlert(this.successUploadPhoto);
+        }, error => {
+            this.imgLoading = false;
+            this.removeOverflowBody();
+            if (error.error.code === 406 && error.error.message) {
+                this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
+            }
+            else {
+                this.alertService.openAlert(this.errorUploadCanvaImg);
+            }
+        });
+    }
+}
+CanvaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CanvaService, deps: [{ token: ImgManagerConfigService }, { token: ImgManagerService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+CanvaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CanvaService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CanvaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ImgManagerConfigService }, { type: ImgManagerService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }]; } });
+
+class DomService {
+    constructor() {
+        this.documentEventSource = new Subject();
+        this.documentEventDone = this.documentEventSource.asObservable();
+        this.documentScrollSource = new Subject();
+        this.documentScrollDone = this.documentScrollSource.asObservable();
+    }
+    documentEvent() {
+        return this.documentEventDone;
+    }
+    setDocumentEventListener() {
+        document.body.addEventListener('click', event => {
+            this.documentEventSource.next(event.target);
+        });
+    }
+    documentScroll() {
+        return this.documentScrollDone;
+    }
+    setScrollEventListener() {
+        window.onscroll = () => {
+            this.documentScrollSource.next(window);
+        };
+    }
+}
+DomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DomService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DomService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+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(imgManager, alertService) {
+        this.imgManager = imgManager;
+        this.alertService = alertService;
+        this.picturesList = [];
+        this.pictureNameChanged = new Subject();
+        this.errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
+        this.msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
+        this.msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
+        this.setEvents();
+    }
+    setPicturesList(picturesList) {
+        this.picturesList = picturesList;
+    }
+    onRenamePicture(pictureRenamed) {
+        this.pictureNameChanged.next(pictureRenamed);
+    }
+    setEvents() {
+        this.pictureNameChanged
+            .pipe(debounceTime(800)) // wait 0.8 sec after the last event before emitting last event
+            .subscribe((pictureNameUpdate) => {
+            this.renamePicture(pictureNameUpdate);
+        });
+    }
+    renamePicture(pictureNameUpdate) {
+        const picture = this.getPictureById(pictureNameUpdate.id);
+        if (!picture) {
+            this.alertService.openAlert(this.errorRenameImg);
+            return;
+        }
+        this.alertService.openAlert(this.msgSavingImgName);
+        this.imgManager
+            .changeImgName(picture.display_name, picture.id_file)
+            .subscribe((data) => {
+            picture.display_name = data.display_name;
+            this.alertService.openAlert(this.msgImgNameSaved);
+        }, (error) => {
+            picture.display_name = pictureNameUpdate.previousName;
+            this.alertService.openAlert(this.errorRenameImg);
+        });
+    }
+    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: "14.1.3", ngImport: i0, type: RenamePictureService, deps: [{ token: ImgManagerService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
+RenamePictureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: RenamePictureService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: RenamePictureService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: AlertService }]; } });
+
+class ImagesActionHandler {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+        this.imgManager = imgManager;
+        this.imgSelectionService = imgSelectionService;
+        this.http = http;
+        this.imgCDNService = imgCDNService;
+        this.imgEventCardService = imgEventCardService;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        this.externalService = externalService;
+        this.picturesList = [];
+        this.picturesListChange = new EventEmitter();
+        this.tableFilters = {
+            sort: undefined,
+            order: undefined,
+            searchValue: '',
+            totalItems: 0,
+            itemsPerPage: 30,
+            currentPage: 1
+        };
+        this.displayPexelsResults = false;
+        this.disable = false;
+        this.disableChange = new EventEmitter();
+        this.filtersChange = new EventEmitter();
+        this.pictureNameChange = new EventEmitter();
+        this.isLoading = false;
+        this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
+        this.errorAlreadyUsedImg = 'ImgManager.ImgList.errorAlreadyUsed';
+        this.fakeImgRoute = this.externalService.getRouteAssets() + 'img/fake.png';
+    }
+    /** Event emit when the header checkbox is checked */
+    onToggleAllCheckBoxRow(event) {
+        this.picturesList.forEach(data => {
+            data.delSelected = event;
+        });
+        this._pictureListeChange();
+    }
+    onToggleDelSelection(index) {
+        if (this.disable) {
+            return;
+        }
+        this.picturesList[index].delSelected = !this.picturesList[index].delSelected;
+        this._pictureListeChange();
+    }
+    /** Event emit each time filters change */
+    onFiltersChange() {
+        this.filtersChange.emit();
+    }
+    onEdit(picture) {
+        this.imgEventCardService.emitImgToEdit(picture);
+    }
+    onToggleSelectImg(index) {
+        if (this.disable || this.stateDisplayed === 'window') {
+            return;
+        }
+        if (!this.picturesList[index].selected) {
+            this.imgSelectionService.addImgSelected(this.picturesList[index]);
+            this.picturesList[index].selected = true;
+        }
+        else {
+            this.imgSelectionService.removeImgSelectedById(this.picturesList[index].id_file);
+            this.picturesList[index].selected = false;
+        }
+    }
+    onRemoveImg(picture) {
+        picture.deleted = true;
+        this.imgManager.removeImg(picture.id_file).subscribe(data => {
+            this.imgEventCardService.emitImgRemoved(picture.id_file);
+            this.imgSelectionService.removeImgSelectedById(picture.id_file);
+        }, error => {
+            const msg = error.status === 409 ? this.errorAlreadyUsedImg : this.errorRemoveImg;
+            picture.deleted = false;
+            this.alertService.openAlert(msg);
+        });
+    }
+    onPictureNotLoading(event) {
+        event.target.src = this.fakeImgRoute;
+    }
+    onDownloadImg(display_name, file_name) {
+        this.http.get(this.getRAWImgRoute(file_name), { responseType: 'blob' }).subscribe(val => {
+            let url = URL.createObjectURL(val);
+            this.downloadUrl(url, display_name);
+            URL.revokeObjectURL(url);
+        });
+    }
+    onNameChange(id_file) {
+        this.pictureNameChange.emit({ id: id_file, previousName: this.previousName });
+    }
+    getRAWImgRoute(file_name) {
+        return this.imgCDNService.getUrlImg('raw') + file_name;
+    }
+    _pictureListeChange() {
+        this.picturesListChange.emit();
+    }
+    downloadUrl(url, fileName) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.click();
+    }
+    ngDestroy() {
+        if (this.getDataAPISub) {
+            this.getDataAPISub.unsubscribe();
+        }
+    }
+}
+ImagesActionHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImagesActionHandler, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Directive });
+ImagesActionHandler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: ImagesActionHandler, inputs: { picturesList: "picturesList", tableFilters: "tableFilters", displayPexelsResults: "displayPexelsResults", disable: "disable", isLoading: "isLoading", stateDisplayed: "stateDisplayed" }, outputs: { picturesListChange: "picturesListChange", disableChange: "disableChange", filtersChange: "filtersChange", pictureNameChange: "pictureNameChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImagesActionHandler, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { picturesList: [{
+                type: Input
+            }], picturesListChange: [{
+                type: Output
+            }], tableFilters: [{
+                type: Input
+            }], displayPexelsResults: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], disableChange: [{
+                type: Output
+            }], filtersChange: [{
+                type: Output
+            }], pictureNameChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
+            }], stateDisplayed: [{
+                type: Input
+            }] } });
+
+class LoadingDirective {
+    constructor(el) {
+        this.currentLoading = 0;
+        this.interval = null;
+        this.element = el;
+        this.launchLoading();
+    }
+    launchLoading() {
+        if (this.interval !== null) {
+            return;
+        }
+        this.currentLoading = 10;
+        this.element.nativeElement.style.width = this.currentLoading + '%';
+        this.interval = setInterval(() => {
+            if (this.currentLoading < 80) {
+                this.currentLoading += Math.floor(Math.random() * 15);
+                this.element.nativeElement.style.width = this.currentLoading + '%';
+            }
+            if (this.currentLoading >= 80 && this.currentLoading < 95) {
+                this.currentLoading += Math.floor(Math.random() * 2);
+                this.element.nativeElement.style.width = this.currentLoading + '%';
+            }
+        }, 70);
+    }
+    ngOnDestroy() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+}
+LoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: LoadingDirective, selector: "[btnLoadingAnim]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[btnLoadingAnim]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class ImageSrcPipe {
+    constructor(imgCDNService) {
+        this.imgCDNService = imgCDNService;
+    }
+    transform(pictureName, size) {
+        if (!size) {
+            throw "The size is undefined in ImageSrcPipe.";
+        }
+        const route = this.imgCDNService.getUrlImg(size);
+        if (!route) {
+            throw "The expected size is not defined in ImageSrcPipe.";
+        }
+        return route + pictureName;
+    }
+}
+ImageSrcPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImageSrcPipe, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Pipe });
+ImageSrcPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: ImageSrcPipe, name: "imgSrc" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImageSrcPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'imgSrc'
+                }]
+        }], ctorParameters: function () { return [{ type: ImgCDNService }]; } });
+
+class ImgCardComponent extends ImagesActionHandler {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+        this.focusInput = false;
+        this.toggleImgSelected = new EventEmitter();
+        this.switchDisplayWindow = new EventEmitter();
+        this.isUploadSection = false;
+        this.activeConfirmDelete = false;
+    }
+    ngOnInit() {
+        this.isUploadSection = this.tabDisplayed === 'img-upload';
+    }
+    displayLargeWindow() {
+        this.switchDisplayWindow.emit(true);
+    }
+    onToggleImgSelected() {
+        this.toggleImgSelected.next();
+    }
+}
+ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+        easeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-card', animations: [
+                        easeInOut
+                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { tabDisplayed: [{
+                type: Input
+            }], fullSize: [{
+                type: Input
+            }], picture: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], toggleImgSelected: [{
+                type: Output
+            }], switchDisplayWindow: [{
+                type: Output
+            }] } });
+
+class UploadListComponent {
+    constructor(imgSelectionService, renamePictureService) {
+        this.imgSelectionService = imgSelectionService;
+        this.renamePictureService = renamePictureService;
+        this.picturesList = [];
+        this.multipleImgMode = false;
+        this.switchDisplayWindow = new EventEmitter();
+    }
+    ngOnInit() {
+        this.setEvents();
+    }
+    onImgUploaded(img) {
+        img.forEach(picture => this.picturesList.push(picture));
+        this.renamePictureService.setPicturesList(this.picturesList);
+    }
+    onToggleSelectImg(index) {
+        if (this.stateDisplayed === 'window') {
+            return;
+        }
+        if (!this.picturesList[index].selected) {
+            this.imgSelectionService.addImgSelected(this.picturesList[index]);
+            this.picturesList[index].selected = true;
+        }
+        else {
+            this.imgSelectionService.removeImgSelectedById(this.picturesList[index].id_file);
+            this.picturesList[index].selected = false;
+        }
+    }
+    switchDisplayWindowCard() {
+        this.switchDisplayWindow.emit(true);
+    }
+    onRenamePicture(pictureRenamed) {
+        this.renamePictureService.onRenamePicture(pictureRenamed);
+    }
+    setEvents() {
+        this.imgSelectionChange = this.imgSelectionService.getImgSelectionChange().subscribe(imgSelection => {
+            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;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.imgSelectionChange.unsubscribe();
+    }
+}
+UploadListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: UploadListComponent, deps: [{ token: ImgSelectionService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
+UploadListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: UploadListComponent, selector: "upload-list", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, ngImport: i0, template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <perfect-scrollbar\n        #scrollable\n        [config]=\"{ suppressScrollX: true }\"\n        class=\"upload-list__scroll\"\n        [ngClass]=\"{\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\n    >\n        <div class=\"upload-list__box\">\n            <div class=\"upload-list__box__container\">\n                <div>\n                    <p class=\"mainColor\">\n                        {{ picturesList? picturesList.length : '' }}\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n                    </p>\n                    <div class=\"dropdown is-hoverable\">\n                        <div class=\"dropdown-trigger\">\n                            <i\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n                                class=\"fas fa-info-circle\">\n                            </i>\n                        </div>\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n                          <div class=\"dropdown-content\">\n                            <div class=\"dropdown-item\">\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"upload-list__box__cards\">\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n                    <img-card\n                        [picture]=\"picture\"\n                        [stateDisplayed]=\"stateDisplayed\"\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n                        (pictureNameChange)=\"onRenamePicture($event)\"\n                    ></img-card>\n                    <div class=\"upload-list__box__cards__card__btnBox\">\n                        <button class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </perfect-scrollbar>\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: "component", type: i3$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+        easeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: UploadListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upload-list', animations: [
+                        easeInOut
+                    ], template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <perfect-scrollbar\n        #scrollable\n        [config]=\"{ suppressScrollX: true }\"\n        class=\"upload-list__scroll\"\n        [ngClass]=\"{\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\n    >\n        <div class=\"upload-list__box\">\n            <div class=\"upload-list__box__container\">\n                <div>\n                    <p class=\"mainColor\">\n                        {{ picturesList? picturesList.length : '' }}\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n                    </p>\n                    <div class=\"dropdown is-hoverable\">\n                        <div class=\"dropdown-trigger\">\n                            <i\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n                                class=\"fas fa-info-circle\">\n                            </i>\n                        </div>\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n                          <div class=\"dropdown-content\">\n                            <div class=\"dropdown-item\">\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                            <div class=\"dropdown-item\">\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"upload-list__box__cards\">\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n                    <img-card\n                        [picture]=\"picture\"\n                        [stateDisplayed]=\"stateDisplayed\"\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n                        (pictureNameChange)=\"onRenamePicture($event)\"\n                    ></img-card>\n                    <div class=\"upload-list__box__cards__card__btnBox\">\n                        <button class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </perfect-scrollbar>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], tabDisplayed: [{
+                type: Input
+            }], multipleImgMode: [{
+                type: Input
+            }], switchDisplayWindow: [{
+                type: Output
+            }] } });
+
+class LoaderComponent {
+    constructor() {
+        this.small = false;
+    }
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: LoaderComponent, selector: "wz-loader", inputs: { text: "text", small: "small", position: "position" }, ngImport: i0, template: "<div class=\"wz-loader\" [ngClass]=\"{'is-small': small}\" [ngStyle]=\"{'position': position}\">\n  <div class='loader loader1'>\n    <div>\n      <div>\n        <div>\n          <div>\n            <div>\n              <div></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"is-textcentered\" *ngIf=\"text\" [innerHTML]=\"text\"></p>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"wz-loader\" [ngClass]=\"{'is-small': small}\" [ngStyle]=\"{'position': position}\">\n  <div class='loader loader1'>\n    <div>\n      <div>\n        <div>\n          <div>\n            <div>\n              <div></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"is-textcentered\" *ngIf=\"text\" [innerHTML]=\"text\"></p>\n</div>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], small: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+class DragDropDirective {
+    constructor() {
+        this.onFileDropped = new EventEmitter();
+        this.background = '#fff';
+        this.opacity = '1';
+    }
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.background = '#f5f5f5';
+        this.opacity = '0.8';
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.background = '#fff';
+        this.opacity = '1';
+    }
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.background = '#f5f5f5';
+        this.opacity = '1';
+        const files = evt.dataTransfer.files;
+        if (files.length > 0) {
+            this.onFileDropped.emit(files);
+        }
+    }
+}
+DragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: DragDropDirective, selector: "[appDragDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "style.background-color": "this.background", "style.opacity": "this.opacity" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDragDrop]'
+                }]
+        }], propDecorators: { onFileDropped: [{
+                type: Output
+            }], background: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], opacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class ImgUploadComponent {
+    constructor(imgManager, alertService, externalConfigService) {
+        this.imgManager = imgManager;
+        this.alertService = alertService;
+        this.externalConfigService = externalConfigService;
+        this.files = [];
+        this.isLoading = false;
+        this.imgUploaded = new EventEmitter();
+        this.loadingText = 'ImgManager.ImgUpload.loading';
+        this.errorUploadingImg = 'ImgManager.ImgUpload.errorUploadingImg';
+        this.errorNotImg = 'ImgManager.ImgUpload.errorNotImg';
+        this.MAX_IMAGE_SIZE = 10000000; // In bytes
+    }
+    ngOnInit() {
+        this.assetsIcon = this.getAssets();
+    }
+    filesChangeByClick(event) {
+        this.uploadFile(event.target.files);
+    }
+    getAssets() {
+        return this.externalConfigService.getRouteAssets() + "img/icon_picture.svg";
+    }
+    filesChangeByDragAndDrop(filesList) {
+        console.log('filesList', filesList);
+        this.removeDragAndDropStyle();
+        this.uploadFile(Array.from(filesList));
+    }
+    uploadFile(files) {
+        if (files && !files.length) {
+            return;
+        }
+        this.isLoading = true;
+        const imgToUploadList = [];
+        for (const file of files) {
+            if (!this.isFileImage(file.type)) {
+                this.alertService.openAlert(this.errorNotImg);
+                this.isLoading = false;
+                continue;
+            }
+            if (!this.isSizeValid(file.size)) {
+                this.alertService.openAlert(`L'image : ${file.name} est trop grande (${this.getImageSizeInKo(file.size)}ko). Taille maximum acceptée: ${this.getImageSizeInKo(this.MAX_IMAGE_SIZE)}ko`);
+                this.isLoading = false;
+                continue;
+            }
+            const formData = new FormData();
+            formData.append('image', file, file.name);
+            imgToUploadList.push(this.imgManager.uploadFile(formData));
+        }
+        forkJoin(imgToUploadList).subscribe((img) => {
+            this.onImgUpload(img),
+                this.isLoading = false;
+        }, error => {
+            if (error?.error?.message && error.statusText !== 'Bad Request') {
+                this.alertService.openAlertWithBackendRespons(this.errorUploadingImg, error.error.message);
+            }
+            else {
+                this.alertService.openAlert(this.errorUploadingImg);
+            }
+            this.isLoading = false;
+        });
+    }
+    /**
+     * Send the img uploaded to the tabs components,
+     * Then the tabs components add the img to upload list by calling the method onImgUploaded of the upload-list component
+     * @param img
+     */
+    onImgUpload(img) {
+        this.imgUploaded.emit(img);
+    }
+    isFileImage(fileType) {
+        return fileType.split('/')[0] === 'image';
+    }
+    isSizeValid(imageBytesSize) {
+        return imageBytesSize < this.MAX_IMAGE_SIZE;
+    }
+    getImageSizeInKo(size) {
+        return Math.round(size / 1024);
+    }
+    /**
+     * Remove the style of the drag and drop box
+     * After an img is droped, the box is still grey
+     */
+    removeDragAndDropStyle() {
+        this.dragAndDropBox.nativeElement.style = '';
+    }
+}
+ImgUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgUploadComponent, deps: [{ token: ImgManagerService }, { token: AlertService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+ImgUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-upload has-text-centered\"\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n  (click)=\"fileInput.click()\"\n  appDragDrop\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n  #dragAndDropBox\n  [@easeInOut]=\"'in'\"\n>\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n    <div class=\"img-upload__container__wrapper\">\n\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isLoading\">\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n        </div>\n\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n        <div class=\"img-upload__container__text\">\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\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: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+        easeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-upload', animations: [
+                        easeInOut
+                    ], template: "<div\n  class=\"img-upload has-text-centered\"\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\n  (click)=\"fileInput.click()\"\n  appDragDrop\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\n  #dragAndDropBox\n  [@easeInOut]=\"'in'\"\n>\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\n\n    <div class=\"img-upload__container__wrapper\">\n\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isLoading\">\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\n        </div>\n\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\n\n        <div class=\"img-upload__container__text\">\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: AlertService }, { type: ImgManagerConfigService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], imgUploaded: [{
+                type: Output
+            }], dragAndDropBox: [{
+                type: ViewChild,
+                args: ['dragAndDropBox']
+            }] } });
+
+class PexelsService {
+    constructor(http, externalConfigService, translateService) {
+        this.http = http;
+        this.externalConfigService = externalConfigService;
+        this.translateService = translateService;
+        this.languages = { 'fr': 'fr-FR', 'en': 'en-US', 'it': 'it-IT', 'es': 'es-ES' };
+        this.setLang(this.translateService.currentLang);
+        this.translateService.onLangChange.subscribe(langData => {
+            this.setLang(langData.lang);
+        });
+    }
+    setLang(lang) {
+        this.lang = this.languages[lang] ? this.languages[lang] : 'fr-FR';
+    }
+    searchOnPexels(toSearch, perPage, page) {
+        if (!this.apiBaseUrl || this.apiKey) {
+            this.apiBaseUrl = this.externalConfigService.getPexelsApiURL();
+            this.apiKey = this.externalConfigService.getPexelsApiToken();
+        }
+        const httpOptions = {
+            headers: new HttpHeaders({
+                Authorization: 'Bearer ' + this.apiKey
+            })
+        };
+        let request;
+        // If search value is not empty or blank
+        if (toSearch && !/^\s*$/.test(toSearch)) {
+            request = `/search?query=${toSearch}&per_page=${perPage}&page=${page}&locale=${this.lang}`;
+        }
+        else { // Search by category or display Pexels selection
+            const shopCategory = this.externalConfigService.getShopCategory();
+            // Search by shop category
+            if (shopCategory && shopCategory !== 'other' && shopCategory !== 'btob') {
+                request = `/search?query=${shopCategory}&per_page=${perPage}&page=${page}&locale=en-US`;
+            }
+            else { // Display Pexels selection
+                request = `/curated?per_page=${perPage}&page=${page}`;
+            }
+        }
+        return this.http.get(this.apiBaseUrl + request, httpOptions).pipe(map((data) => {
+            return data;
+        }));
+    }
+}
+PexelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PexelsService, deps: [{ token: i3.HttpClient }, { token: ImgManagerConfigService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+PexelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PexelsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PexelsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.HttpClient }, { type: ImgManagerConfigService }, { type: i7.TranslateService }]; } });
+
+const listAnnimation = // the fade-in/fade-out animation.
+ trigger('listAnimation', [
+    transition(':enter, * => 0, * => -1', []),
+    transition(':increment', [
+        query(':enter', [
+            style({ opacity: 0, transform: 'translateY(100px)' }),
+            stagger(50, [
+                animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 1, transform: 'none' })),
+            ]),
+        ], { optional: true })
+    ]),
+]);
+
+class AbstractDebounceDirective {
+    constructor() {
+        this.debounceTime = 500;
+        this.onEventChange = new EventEmitter();
+        this.emitEvent$ = new Subject();
+        this.subscription$ = new Subject();
+    }
+    ngOnInit() {
+        this.emitEvent$
+            .pipe(takeUntil(this.subscription$), debounceTime(this.debounceTime), distinctUntilChanged(), tap(value => this.emitChange(value)))
+            .subscribe();
+    }
+    emitChange(value) {
+        this.onEventChange.emit(value);
+    }
+    ngOnDestroy() {
+        this.subscription$.next();
+        this.subscription$.complete();
+    }
+}
+AbstractDebounceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AbstractDebounceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDebounceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: AbstractDebounceDirective, selector: "AbstractDebounceDirective", inputs: { debounceTime: "debounceTime" }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AbstractDebounceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'AbstractDebounceDirective'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { debounceTime: [{
+                type: Input
+            }], onEventChange: [{
+                type: Output
+            }] } });
+
+class DebounceKeyupDirective extends AbstractDebounceDirective {
+    constructor() {
+        super();
+    }
+    onKeyUp(event) {
+        event.preventDefault();
+        this.emitEvent$.next(event);
+    }
+}
+DebounceKeyupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DebounceKeyupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DebounceKeyupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]", host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DebounceKeyupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[debounceKeyUp]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class InputSearchComponent {
+    constructor() {
+        this.placeholder = '';
+        this.smallPadding = false;
+        this.innerValue = '';
+        this.changeDebounced = new EventEmitter(); // debounced
+        this.onTouchedCallback = () => { };
+        this.onChangeCallback = () => { };
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    handleDebouncedKeyUp(event) {
+        this.changeDebounced.emit(event.target.value);
+    }
+}
+InputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: InputSearchComponent, selector: "wz-input-search", inputs: { placeholder: "placeholder", smallPadding: "smallPadding", id: "id" }, outputs: { changeDebounced: "changeDebounced" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], ngImport: i0, template: "<div class=\"input-search field\" [ngClass]=\"smallPadding ? 'small-padding' : ''\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp($event)\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: InputSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-input-search', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], template: "<div class=\"input-search field\" [ngClass]=\"smallPadding ? 'small-padding' : ''\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp($event)\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], smallPadding: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], changeDebounced: [{
+                type: Output
+            }] } });
+
+class AlertComponent {
+    constructor() {
+        this.icon = true;
+        this.warning = false;
+        this.success = false;
+        this.iconClass = 'fas fa-info';
+    }
+    ngOnInit() { }
+}
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AlertComponent, selector: "wz-alert", inputs: { icon: "icon", warning: "warning", success: "success", iconClass: "iconClass" }, ngImport: i0, template: "<div class=\"wz-alert\" [ngClass]=\"{ success: success, warning: warning }\">\n  <i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i>\n  <p><ng-content></ng-content></p>\n</div>\n", styles: [".wz-alert{width:100%;background-color:#52aecd26;color:#52aecd;border-radius:3px;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:20px}.wz-alert.success{background-color:#2ecc7126}.wz-alert.success p{color:#11552e}.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:#e9565626}.wz-alert.warning p{color:#3a0505}.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-alert', template: "<div class=\"wz-alert\" [ngClass]=\"{ success: success, warning: warning }\">\n  <i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i>\n  <p><ng-content></ng-content></p>\n</div>\n", styles: [".wz-alert{width:100%;background-color:#52aecd26;color:#52aecd;border-radius:3px;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:20px}.wz-alert.success{background-color:#2ecc7126}.wz-alert.success p{color:#11552e}.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:#e9565626}.wz-alert.warning p{color:#3a0505}.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+                type: Input
+            }], warning: [{
+                type: Input
+            }], success: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }] } });
+
+class PexelLibComponent {
+    constructor(wzImgLibService, imgManager, alertService, translateService) {
+        this.wzImgLibService = wzImgLibService;
+        this.imgManager = imgManager;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        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;
+        this.currentPage = 1;
+        this.isLoading = true;
+        this.initComponent = true;
+        this.photosColumns = [];
+        this.nbColumuns = 6;
+        this.responsiveColumns = [1250, 1050, 750, 500];
+        this.outerElement = null;
+        this.uploadingImg = 'ImgManager.PexelLib.uploadingImg';
+        this.untitled = 'ImgManager.PexelLib.untitled';
+        this.successUploadPhoto = 'ImgManager.PexelLib.successImport';
+        this.errorUploadPhoto = 'ImgManager.PexelLib.errorUploadPhoto';
+        this.errorRetrievePhotos = 'ImgManager.PexelLib.errorRetrievePhotos';
+        this.subs = [];
+    }
+    set content(control) {
+        this.outerElement = control;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.oldSearchValue = this.searchValue;
+        this.isLoading = false;
+        this.setNbColumnsToDisplayPhoto();
+        this.setPhotosColumns();
+        this.search();
+    }
+    setNbColumnsToDisplayPhoto() {
+        const width = this.outerElement.nativeElement.offsetWidth;
+        if (this.stateDisplayed !== 'window') {
+            this.nbColumuns = 8;
+        }
+        this.responsiveColumns.forEach(value => {
+            if (width < value) {
+                this.nbColumuns--;
+            }
+        });
+    }
+    onSearchNameChanged() {
+        this.onSearchChange();
+    }
+    onBottomReached() {
+        this.scrollHandler();
+    }
+    onSearchChange() {
+        this.search();
+    }
+    search() {
+        if (this.isLoading) {
+            return;
+        }
+        if (this.searchValue !== this.oldSearchValue) {
+            this.resetSearch();
+        }
+        // All the picture are displayed
+        if (this.nbResult && this.nbResult <= (this.currentPage - 1) * this.perPage) {
+            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);
+                });
+            }
+            this.isLoading = false;
+            this.initComponent = false;
+        }, error => {
+            this.isLoading = false;
+            this.initComponent = false;
+            this.alertService.openAlert(this.errorRetrievePhotos);
+        });
+        this.subs.push(searchSub);
+    }
+    scrollHandler() {
+        if (this.isLoading) {
+            return;
+        }
+        const bestColumnIndex = this.getBestColumn();
+        const lastPic = this.photosColumns[bestColumnIndex].photos[this.photosColumns[bestColumnIndex].photos.length - 1];
+        const lastPhoto = lastPic ? document.querySelector('img[src="' + lastPic.src.medium + '"]') : null;
+        if (lastPhoto) {
+            if (!this.isLoading) {
+                this.currentPage += 1;
+                this.search();
+            }
+        }
+    }
+    setPhotosColumns() {
+        for (let indexColumn = 0; indexColumn < this.nbColumuns; indexColumn++) {
+            const photosColumn = {
+                height: 0,
+                photos: []
+            };
+            this.photosColumns.push(photosColumn);
+        }
+    }
+    getBestColumn() {
+        const bestColumn = {
+            index: 0,
+            height: this.photosColumns[0].height
+        };
+        this.photosColumns.forEach((photosColumn, index) => {
+            if (bestColumn.height > photosColumn.height) {
+                bestColumn.index = index;
+                bestColumn.height = photosColumn.height;
+            }
+        });
+        return bestColumn.index;
+    }
+    resetSearch() {
+        this.oldSearchValue = this.searchValue;
+        this.photosColumns = [];
+        this.currentPage = 1;
+        this.setPhotosColumns();
+    }
+    uploadPhoto(photo, url) {
+        photo.uploading = true;
+        const uploadSub = this.imgManager.uploadFileByUrl(url, photo.alt).subscribe(img => {
+            photo.uploading = false;
+            photo.uploaded = true;
+            this.alertService.openAlert(this.successUploadPhoto);
+        }, error => {
+            photo.uploading = false;
+            if (error.error.code === 406 && error.error.message) {
+                this.alertService.openAlertWithBackendRespons(this.errorUploadPhoto, error.error.message);
+            }
+            else {
+                this.alertService.openAlert(this.errorUploadPhoto);
+            }
+        });
+        // Display img uploading msg
+        this.alertService.openAlert(this.uploadingImg);
+        this.subs.push(uploadSub);
+    }
+    ngOnDestroy() {
+        this.subs.forEach(sub => sub.unsubscribe());
+    }
+}
+PexelLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: ImgManagerService }, { token: AlertService }, { token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PexelLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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  <perfect-scrollbar\n        scrollYMarginOffset=\"300\"\n        class=\"pexels-lib__scroll\"\n        [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n        (psYReachEnd)=\"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                      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      <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\n  </perfect-scrollbar>\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: i3$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { 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: i7.TranslatePipe, name: "translate" }], animations: [
+        easeInOut,
+        listAnnimation
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PexelLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pexels-lib', animations: [
+                        easeInOut,
+                        listAnnimation
+                    ], template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n  <perfect-scrollbar\n        scrollYMarginOffset=\"300\"\n        class=\"pexels-lib__scroll\"\n        [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n        (psYReachEnd)=\"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                      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      <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\n  </perfect-scrollbar>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: PexelsService }, { type: ImgManagerService }, { type: AlertService }, { type: i7.TranslateService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], searchValue: [{
+                type: Input
+            }], disableSearch: [{
+                type: Input
+            }], showImgUploaded: [{
+                type: Output
+            }], content: [{
+                type: ViewChild,
+                args: ['outerElement']
+            }] } });
+
+class CopyClipboardDirective {
+    constructor() {
+        this.copied = new EventEmitter();
+    }
+    onClick(event) {
+        event.preventDefault();
+        if (!this.payload)
+            return;
+        let listener = (e) => {
+            let clipboard = e.clipboardData || window["clipboardData"];
+            clipboard.setData("text", this.payload.toString());
+            e.preventDefault();
+            this.copied.emit(this.payload);
+        };
+        document.addEventListener("copy", listener, false);
+        document.execCommand("copy");
+        document.removeEventListener("copy", listener, false);
+    }
+}
+CopyClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CopyClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CopyClipboardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: { payload: ["copy-clipboard", "payload"] }, outputs: { copied: "copied" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CopyClipboardDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[copy-clipboard]' }]
+        }], propDecorators: { payload: [{
+                type: Input,
+                args: ["copy-clipboard"]
+            }], copied: [{
+                type: Output,
+                args: ["copied"]
+            }], onClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }] } });
+
+class EditorInfoSectionComponent {
+    constructor(alertService) {
+        this.alertService = alertService;
+        this._isNameModified = false;
+        this.isNameModifiedChange = new EventEmitter();
+        this.msgCopyToClipBoard = 'ImgManager.ImgEditor.copytoClipBoard';
+    }
+    set isNameModified(isNameModified) {
+        this._isNameModified = isNameModified;
+    }
+    get isNameModified() {
+        return this._isNameModified;
+    }
+    ngOnInit() {
+        this.init();
+    }
+    init() {
+        this.imgName = this.imgToEdit.display_name;
+    }
+    getFileSize() {
+        return this.imgToEdit ? Math.round(parseInt(this.imgToEdit.size) / 1000) : '-';
+    }
+    copyToClipBoard(event) {
+        this.alertService.openAlert(this.msgCopyToClipBoard);
+    }
+    onNameChange() {
+        this.isNameModifiedChange.emit(true);
+    }
+}
+EditorInfoSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: EditorInfoSectionComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
+EditorInfoSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></span>\n    </p>\n    <input\n      type=\"text\"\n      class=\"img-editor__infoSection__propertyEditable__input\"\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n      [(ngModel)]=\"imgToEdit.display_name\"\n      debounceKeyUp\n      [debounceTime]=\"500\"\n      (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgURL' | translate }}</p>\n    <button [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span  class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "directive", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: ["copy-clipboard"], outputs: ["copied"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: EditorInfoSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'info-section', template: "\n<!-- Img properties -->\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></span>\n    </p>\n    <input\n      type=\"text\"\n      class=\"img-editor__infoSection__propertyEditable__input\"\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\n      [(ngModel)]=\"imgToEdit.display_name\"\n      debounceKeyUp\n      [debounceTime]=\"500\"\n      (onEventChange)=\"onNameChange()\">\n</div>\n<div class=\"img-editor__infoSection__propertyEditable\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgURL' | translate }}</p>\n    <button [copy-clipboard]=\"imgToEdit.file_name | imgSrc : 'raw'\" (copied)=\"copyToClipBoard($event)\" ><span  class=\"img-editor__infoSection__propertyEditable__span\">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class=\"far fa-copy\"></i></button>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class=\"img-editor__infoSection__property\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n<!-- SEO info -->\n\n<span class=\"img-editor__infoSection__divider\"></span>\n\n<div class=\"img-editor__infoSection__titleSEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\n</div>\n\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n\n</div>\n<div class=\"img-editor__infoSection__propertySEO\">\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fas fa-info-circle\"></i></p>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: AlertService }]; }, propDecorators: { imgToEdit: [{
+                type: Input
+            }], isNameModified: [{
+                type: Input
+            }], isNameModifiedChange: [{
+                type: Output
+            }] } });
+
+const insertRemove = // the fade-in/fade-out animation.
+ trigger('insertRemoveAnnim', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('0.5s ease-in-out', style({ opacity: 1 })),
+    ])
+]);
+
+class DropdownComponent {
+    constructor() {
+        this.disable = false;
+    }
+    ngOnInit() {
+    }
+}
+DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: DropdownComponent, selector: "dropdown", inputs: { dropDownMenuClass: "dropDownMenuClass", disable: "disable" }, ngImport: i0, template: "<div class=\"dropdown dropdownWizi\" [ngClass]=\"{'is-hoverable': !disable}\">\n    <div class=\"dropdown-trigger\">\n\n        <!-- Label -->\n        <ng-content select=\"[label]\"></ng-content>\n\n    </div>\n    <div class=\"dropdown-menu\" [ngClass]=\"dropDownMenuClass\" role=\"menu\">\n        <div class=\"dropdown-content\">\n\n            <!-- Content -->\n            <ng-content select=\"[item]\"></ng-content>\n\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropdown', template: "<div class=\"dropdown dropdownWizi\" [ngClass]=\"{'is-hoverable': !disable}\">\n    <div class=\"dropdown-trigger\">\n\n        <!-- Label -->\n        <ng-content select=\"[label]\"></ng-content>\n\n    </div>\n    <div class=\"dropdown-menu\" [ngClass]=\"dropDownMenuClass\" role=\"menu\">\n        <div class=\"dropdown-content\">\n\n            <!-- Content -->\n            <ng-content select=\"[item]\"></ng-content>\n\n        </div>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dropDownMenuClass: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }] } });
+
+class CropperComponent {
+    constructor(imgCDNService) {
+        this.imgCDNService = imgCDNService;
+        this._isImgModified = false;
+        this.isImgModifiedChange = new EventEmitter();
+        this.editClosed = new EventEmitter();
+        this.currentCroppedImageChange = new EventEmitter();
+        this.msgFailLoad = 'ImgManager.ImgEditor.msgFailLoad';
+        this.isNameModified = false;
+        this.isCropperReady = false; // Use to not display the crop validation btn, after the img is loaded or changed
+        this.currentCroppedImage = ''; // Img modified return in base64
+        this.isCropped = false;
+        this.isLoading = false;
+        this._isImgCropped = false;
+        this.imgCropperChange = new Subject();
+        this.skipNextImgCropped = 1;
+        this.imageChangedEvent = '';
+        this.croppedImage = '';
+        this.canvasRotation = 0;
+        this.rotation = 0;
+        this.scale = 1;
+        this.showCropper = false;
+        this.containWithinAspectRatio = false;
+        this.transform = {};
+        // dropdown list
+        this.resolutionConfig = [
+            {
+                label: 'ImgManager.ImgEditor.config.origin',
+                config: {
+                    maintainAspectRatio: true
+                },
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.free',
+                config: {
+                    maintainAspectRatio: false
+                },
+                active: true
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.square',
+                config: {
+                    maintainAspectRatio: true,
+                    aspectRatio: 1 / 1
+                }
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.Portrait',
+                config: {
+                    maintainAspectRatio: true,
+                    aspectRatio: 3 / 4
+                }
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.landscape',
+                config: {
+                    maintainAspectRatio: true,
+                    aspectRatio: 5 / 3
+                }
+            }
+        ];
+        this.rotationConfig = [
+            {
+                label: 'ImgManager.ImgEditor.config.schedule',
+                icon: "fal fa-redo-alt",
+                method: "rotateRight",
+                active: true
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.AntiSchedule',
+                icon: "fal fa-undo-alt",
+                method: "rotateLeft"
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.flipVert',
+                icon: "fal fa-sort-alt",
+                method: "flipVertical"
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.flipHoriz',
+                icon: "fal fa-exchange-alt",
+                method: "flipHorizontal"
+            }
+        ];
+        this.zoomConfig = [
+            {
+                label: 'ImgManager.ImgEditor.config.zoom',
+                icon: "fal fa-search-plus",
+                method: "zoomIn",
+                active: true
+            },
+            {
+                label: 'ImgManager.ImgEditor.config.dezoom',
+                icon: "fal fa-search-minus",
+                method: "zoomOut"
+            }
+        ];
+        // Img cropper variables
+        this.imgCropperConfig = {
+            maintainAspectRatio: false,
+            aspectRatio: undefined
+        };
+    }
+    set isImgModified(isImgModified) {
+        this._isImgModified = isImgModified;
+        if (!isImgModified) {
+            this.restartEdit();
+        }
+    }
+    get isImgModified() {
+        return this._isImgModified;
+    }
+    set isImgCropped(isImgCropped) {
+        setTimeout(() => {
+            this._isImgCropped = isImgCropped;
+        }, 0);
+    }
+    get isImgCropped() {
+        return this._isImgCropped;
+    }
+    ngOnInit() {
+        this.init();
+        this.detectImgCropperChange();
+    }
+    init() {
+        this.imgRoute = this.getRAWImgRoute();
+        this.imgType = this.getImgType();
+        this.croppedImage = null;
+        this.setDefautAspectRatio();
+    }
+    getRAWImgRoute() {
+        return this.imgCDNService.getUrlImg('raw') + this.imgToEdit.file_name;
+    }
+    getImgType() {
+        return (this.imgToEdit.file_name ? this.imgToEdit.file_name.split('.').pop() : undefined);
+    }
+    setDefautAspectRatio() {
+        const height = parseInt(this.imgToEdit.raw_height);
+        const width = parseInt(this.imgToEdit.raw_width);
+        this.defaultAspectRatio = height / width;
+        this.resolutionConfig[0].config.aspectRatio = this.defaultAspectRatio;
+        this.imgCropperConfig.aspectRatio = this.defaultAspectRatio;
+    }
+    onEditClosed(msgKey) {
+        this.editClosed.emit(msgKey);
+    }
+    onRestart() {
+        this.isImgModifiedChange.emit(false);
+    }
+    restartEdit() {
+        this.init();
+        this.resetConfCropper();
+    }
+    onImgModified() {
+        this.isImgModified = true;
+        this.isImgModifiedChange.emit(true);
+    }
+    ////// Img cropper methods ////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /* Cropper output events */
+    fileChangeEvent(event) {
+        this.imageChangedEvent = event;
+    }
+    imageCropped(event) {
+        this.imgCropperChange.next();
+        this.currentCroppedImage = event.base64;
+        this.currentCroppedImageChange.emit(this.currentCroppedImage);
+    }
+    imageLoaded() {
+        this.showCropper = true;
+    }
+    cropperReady() {
+        this.isCropperReady = true;
+    }
+    loadImageFailed() {
+        this.onEditClosed(this.msgFailLoad);
+    }
+    /* Resize functions */
+    changeResolutionSize(index) {
+        this.setActiveItem(this.resolutionConfig, index);
+        const config = this.resolutionConfig[index].config;
+        this.setCropperProperties(config);
+    }
+    confirmCrop() {
+        setTimeout(() => {
+            this.imgRoute = null;
+            this.croppedImage = this.currentCroppedImage;
+            this.skipNextImgCropped = 2;
+            this.isImgCropped = false;
+        }, 0);
+        this.resetConfCropper();
+        this.onImgModified();
+    }
+    resetConfCropper() {
+        this.scale = 1;
+        this.rotation = 0;
+        this.canvasRotation = 0;
+        this.transform = {};
+    }
+    setActiveItem(array, index) {
+        // Set active-item class for the dropdown
+        array.forEach((item, indexItem) => {
+            item.active = indexItem === index ? true : false;
+        });
+    }
+    setCropperProperties(config) {
+        for (const property in config) {
+            this.imgCropperConfig[property] = config[property];
+        }
+    }
+    detectImgCropperChange() {
+        this.imgCropperChange
+            .subscribe(() => {
+            this.skipNextImgCropped--;
+            if (this.skipNextImgCropped >= 0) {
+                return;
+            }
+            this.skipNextImgCropped = 0;
+            this.isImgCropped = true;
+        });
+    }
+    /* Rotations functions */
+    rotateLeft() {
+        this.canvasRotation--;
+        this.flipAfterRotate();
+        this.onImgModified();
+    }
+    rotateRight() {
+        this.canvasRotation++;
+        this.flipAfterRotate();
+        this.onImgModified();
+    }
+    flipHorizontal() {
+        this.transform = {
+            ...this.transform,
+            flipH: !this.transform.flipH
+        };
+        this.onImgModified();
+    }
+    flipVertical() {
+        this.transform = {
+            ...this.transform,
+            flipV: !this.transform.flipV
+        };
+        this.onImgModified();
+    }
+    flipAfterRotate() {
+        const flippedH = this.transform.flipH;
+        const flippedV = this.transform.flipV;
+        this.transform = {
+            ...this.transform,
+            flipH: flippedV,
+            flipV: flippedH
+        };
+    }
+    /* Zoom functions */
+    zoomOut() {
+        this.scale -= this.scale < 0.2 ? 0 : .1;
+        this.transform = {
+            ...this.transform,
+            scale: this.scale
+        };
+        this.onImgModified();
+    }
+    zoomIn() {
+        this.scale += .1;
+        this.transform = {
+            ...this.transform,
+            scale: this.scale
+        };
+        this.onImgModified();
+    }
+    applyMethod(method) {
+        this[method](); // call the method contains in zoomConfig or rotationConfig
+    }
+}
+CropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CropperComponent, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Component });
+CropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: CropperComponent, selector: "cropper", inputs: { imgToEdit: "imgToEdit", isImgModified: "isImgModified" }, outputs: { isImgModifiedChange: "isImgModifiedChange", editClosed: "editClosed", currentCroppedImageChange: "currentCroppedImageChange" }, ngImport: i0, template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL]=\"imgRoute\"\n        [imageBase64]=\"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\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: i1.NwbToolTipDirective, selector: "[nwbToolTip]", inputs: ["nwbToolTip", "nwbToolTipPosition", "nwbToolTipIsMultiline"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+        insertRemove
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CropperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cropper', animations: [
+                        insertRemove
+                    ], template: "<div class=\"img-editor__container__toolsContainer\">\n\n    <div *ngIf=\"isImgCropped\">\n        <div\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n          (click)=\"confirmCrop()\"\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n          nwbToolTipPosition=\"left\"\n        >\n            <i class=\"far fa-check\"></i>\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n        </div>\n    </div>\n\n    <!-- Resolution -->\n    <dropdown dropdownId=\"dropdown-resolution\">\n        <ng-container label>\n            <div\n              class=\"img-editor__container__toolsContainer__tool\"\n            >\n                <i class=\"far fa-crop\"></i>\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n            <div\n                class=\"dropdown-item\"\n                [ngClass]=\"{'active-item': item.active}\"\n                (click)=\"changeResolutionSize(index)\">\n                <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Zoom -->\n    <dropdown dropdownId=\"dropdown-rotation\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n                <i class=\"far fa-expand-arrows-alt\"></i>\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <!-- Rotation -->\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n        <ng-container label>\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n                <i class=\"far fa-redo\"></i>\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n            </div>\n        </ng-container>\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n            <div\n              class=\"dropdown-item\"\n              [ngClass]=\"{'active-item': item.active}\"\n              (click)=\"applyMethod(item.method)\">\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n                    <p>{{item.label | translate}}</p>\n            </div>\n        </ng-container>\n    </dropdown>\n\n    <div\n        class=\"img-editor__container__toolsContainer__tool\"\n        (click)=\"onRestart()\"\n        @insertRemoveAnnim\n    >\n        <i class=\"far fa-retweet-alt\"></i>\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n    </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n    <image-cropper\n        [imageURL]=\"imgRoute\"\n        [imageBase64]=\"croppedImage\"\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n        [onlyScaleDown]=\"true\"\n        [roundCropper]=\"false\"\n        [canvasRotation]=\"canvasRotation\"\n        [transform]=\"transform\"\n        [alignImage]=\"'center'\"\n        [style.display]=\"showCropper ? null : 'none'\"\n        [format]=\"imgType\"\n        [backgroundColor]=\"'white'\"\n        (imageCropped)=\"imageCropped($event)\"\n        (imageLoaded)=\"imageLoaded()\"\n        (cropperReady)=\"cropperReady()\"\n        (loadImageFailed)=\"loadImageFailed()\"\n    ></image-cropper>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgCDNService }]; }, propDecorators: { imgToEdit: [{
+                type: Input
+            }], isImgModified: [{
+                type: Input
+            }], isImgModifiedChange: [{
+                type: Output
+            }], editClosed: [{
+                type: Output
+            }], currentCroppedImageChange: [{
+                type: Output
+            }] } });
+
+class ImgEditorComponent {
+    constructor(imgManagerService) {
+        this.imgManagerService = imgManagerService;
+        this.editClosed = new EventEmitter();
+        this.isLoading = false;
+        this.isImgModified = false;
+        this.isNameModified = false;
+        this.currentCroppedImage = ''; // Img modified return in base64 by the cropper
+        this.msgFailSave = 'ImgManager.ImgEditor.msgFailSave';
+        this.msgFailLoad = 'ImgManager.ImgEditor.msgFailLoad';
+        this.msgSuccessEdit = "Les modifications de l'image ont bien été enregistrées.";
+    }
+    ngOnInit() {
+        this.previousName = this.imgToEdit.display_name;
+    }
+    onSave() {
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        if (!this.isImgModified && !this.isNameModified) {
+            this.isLoading = false;
+            this.onEditClosed();
+        }
+        const obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
+        const obsChangeImgName = this.imgManagerService.changeImgName(this.imgToEdit.display_name, this.imgToEdit.id_file);
+        if (this.isImgModified && this.isNameModified) {
+            this.ranameAndReplaceImg(obsChangeImgName, obsReplaceImg);
+            return;
+        }
+        if (this.isImgModified) {
+            obsReplaceImg.subscribe(data => {
+                this.isLoading = false;
+                this.onEditClosed(this.msgSuccessEdit);
+            }, error => {
+                this.isLoading = false;
+                this.currentCroppedImage = '';
+                this.onEditClosed(this.msgFailSave);
+            });
+            return;
+        }
+        if (this.isNameModified) {
+            obsChangeImgName.subscribe(data => {
+                this.isLoading = false;
+                this.previousName = this.imgToEdit.display_name;
+                this.onEditClosed(this.msgSuccessEdit);
+            }, error => {
+                this.isLoading = false;
+                this.imgToEdit.display_name = this.previousName;
+                this.onEditClosed(this.msgFailSave);
+            });
+        }
+        this.isNameModified = false;
+    }
+    onEditClosed(msgKey) {
+        this.editClosed.emit(msgKey);
+    }
+    onRestartEdit() {
+        this.isImgModified = false;
+        this.isNameModified = false;
+        this.imgToEdit.display_name = this.previousName;
+    }
+    onCancel() {
+        this.onEditClosed('');
+    }
+    onImgCropped(imgBase64) {
+        this.currentCroppedImage = imgBase64;
+    }
+    ranameAndReplaceImg(obsChangeImgName, obsReplaceImg) {
+        // Avoid to use forkjoin, because it can create conflict and loos the img
+        obsChangeImgName.subscribe(res1 => {
+            obsReplaceImg.subscribe(res2 => {
+                this.onEditClosed(this.msgSuccessEdit);
+            }, error => {
+                this.onEditClosed(this.msgFailSave);
+            });
+        }, error => {
+            this.onEditClosed(this.msgFailSave);
+        });
+    }
+}
+ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }], target: i0.ɵɵFactoryTarget.Component });
+ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <perfect-scrollbar\n        [config]=\"{suppressScrollX: true}\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </perfect-scrollbar>\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: i3$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], animations: [
+        easeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-editor', animations: [
+                        easeInOut
+                    ], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <!-- Button Action Section -->\n\n    <div class=\"img-editor__infoSection__actions\">\n      <div>\n        <button\n          class=\"button img-editor__infoSection__actions__cancel\"\n          (click)=\"onCancel()\"\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n        >\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\n        </button>\n        <div\n          class=\"button danger button img-editor__infoSection__actions__save\"\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n          (click)=\"onSave()\"\n        >\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n        </div>\n\n      </div>\n    </div>\n\n    <perfect-scrollbar\n        [config]=\"{suppressScrollX: true}\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </perfect-scrollbar>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], imgToEdit: [{
+                type: Input
+            }], editClosed: [{
+                type: Output
+            }] } });
+
+class AutoHideDirective {
+    constructor(_elementRef, domService) {
+        this._elementRef = _elementRef;
+        this.domService = domService;
+        this.forceOn = null;
+        this.clickOutside = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this.domService.documentEvent().subscribe((targetElement) => {
+            const clickedInside = this._elementRef.nativeElement.contains(targetElement);
+            const classNameFromElement = targetElement.getAttribute('class');
+            if (!clickedInside && (classNameFromElement === null || !classNameFromElement.includes(this.triggerElement))) {
+                this.clickOutside.emit(null);
+            }
+            if (this.forceOn != null && classNameFromElement !== null) {
+                let needToClose = true;
+                this.forceOn.forEach(v => {
+                    if (!classNameFromElement.includes(v)) {
+                        needToClose = false;
+                    }
+                });
+                if (needToClose) {
+                    this.clickOutside.emit(null);
+                }
+            }
+        });
+    }
+}
+AutoHideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AutoHideDirective, deps: [{ token: i0.ElementRef }, { token: DomService }], target: i0.ɵɵFactoryTarget.Directive });
+AutoHideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: { triggerElement: "triggerElement", forceOn: "forceOn" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AutoHideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wzAutoHide]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomService }]; }, propDecorators: { triggerElement: [{
+                type: Input
+            }], forceOn: [{
+                type: Input
+            }], clickOutside: [{
+                type: Output,
+                args: ['clickOutside']
+            }] } });
+
+class CanvaBtnComponent {
+    constructor(canvaService) {
+        this.canvaService = canvaService;
+        this.showImgUploaded = new EventEmitter();
+        this.imgLoading = false;
+        this.availableFormat = {
+            'ImgManager.CanvaBtn.smallSquare': {
+                'width': 500,
+                'height': 500
+            },
+            'ImgManager.CanvaBtn.mediumSquare': {
+                'width': 1000,
+                'height': 1000
+            },
+            'ImgManager.CanvaBtn.bigSquare': {
+                'width': 2500,
+                'height': 2500
+            }
+        };
+        this.openDropDownMenu = false;
+        this.subs = [];
+    }
+    ngOnInit() {
+        this.canvaLogoRouteAssets = this.canvaService.getCanvaLogo();
+        this.listenCanvaExpectedSize();
+    }
+    listenCanvaExpectedSize() {
+        // Subcribe to askImg from wizi-block
+        const subExpectedImgSizesChange = this.canvaService.bindEventExepectedImgSizeChange().subscribe((mediaDTO) => {
+            if (mediaDTO) {
+                this.expectedWidth = parseInt(mediaDTO.image_width, 10);
+                this.expectedHeight = parseInt(mediaDTO.image_height, 10);
+            }
+            else {
+                this.expectedWidth = undefined;
+                this.expectedHeight = undefined;
+            }
+        });
+        this.subs.push(subExpectedImgSizesChange);
+    }
+    onOpenCanva(width, height) {
+        this.canvaService.openCanva(width, height);
+    }
+    ngOnDestroy() {
+        this.subs.forEach(sub => sub.unsubscribe());
+    }
+}
+CanvaBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CanvaBtnComponent, deps: [{ token: CanvaService }], target: i0.ɵɵFactoryTarget.Component });
+CanvaBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <div\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true;\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <perfect-scrollbar\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </perfect-scrollbar>\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: "component", type: i3$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CanvaBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'canva-btn', template: "<div class=\"canva dropdown is-right is-hoverable\"\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <div\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true;\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <perfect-scrollbar\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </perfect-scrollbar>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: CanvaService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], showImgUploaded: [{
+                type: Output
+            }] } });
+
+class PagniationIsLastPage {
+    /**
+     * Return true, if the current page is the last page. Otherwise, return false.
+     * @param currentPage
+     * @param totalItems
+     * @param itemsPerPage
+     */
+    transform(currentPage, totalItems, itemsPerPage) {
+        if (!(currentPage >= 0 && totalItems >= 0 && itemsPerPage >= 0)) {
+            throw new Error('currentPage or totalItems or itemsPerPage is/are missing in PagniationIsLastPage pipe.');
+        }
+        return currentPage === Math.ceil(totalItems / itemsPerPage);
+    }
+}
+PagniationIsLastPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationIsLastPage, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PagniationIsLastPage.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PagniationIsLastPage, name: "IsLastPage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationIsLastPage, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'IsLastPage'
+                }]
+        }] });
+
+class PagniationArrayTotalPages {
+    /**
+     * Return an incremental array corresponding with the number page
+     * [ 1, 2, 3 ..., last page number ]
+     * @param totalItems
+     * @param itemsPerPage
+     */
+    transform(totalItems, itemsPerPage) {
+        if (!(totalItems >= 0 && itemsPerPage >= 0)) {
+            throw new Error('totalItems or itemsPerPage missing in ArrayTotalPages pipe.');
+        }
+        const arrayLength = Math.ceil(totalItems / itemsPerPage);
+        return Array.apply(null, { length: arrayLength })
+            .map(Number.call, Number)
+            .map((x) => x + 1);
+    }
+}
+PagniationArrayTotalPages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationArrayTotalPages, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PagniationArrayTotalPages.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PagniationArrayTotalPages, name: "ArrayTotalPages" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationArrayTotalPages, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'ArrayTotalPages'
+                }]
+        }] });
+
+class LargeNumberOfPagePipe {
+    /**
+     * Return an incremental array
+     * Display 30 pages, from -15 to +15 of the current page
+     * @param totalItems
+     * @param itemsPerPage
+     */
+    transform(totalItems, itemsPerPage, currentPage) {
+        if (!(totalItems >= 0 && itemsPerPage >= 0)) {
+            throw new Error('totalItems or itemsPerPage missing in ArrayTotalPages pipe.');
+        }
+        let arrayLength = 32;
+        const startAtPage = currentPage <= 15 ? 0 : currentPage - 15;
+        const totalPage = Math.ceil(totalItems / itemsPerPage);
+        const arrayWithPageNumber = Array.apply(null, { length: arrayLength })
+            .map(Number.call, Number)
+            .map((x) => {
+            const pageIndex = {
+                display: startAtPage + x + 1,
+                value: startAtPage + x + 1
+            };
+            if (x === arrayLength - 2) {
+                pageIndex.display = '...';
+            }
+            if (x === arrayLength - 1) {
+                pageIndex.display = totalPage;
+                pageIndex.value = totalPage;
+            }
+            return pageIndex;
+        });
+        if (startAtPage) {
+            arrayWithPageNumber.unshift({
+                display: 1,
+                value: 1
+            }, {
+                display: "...",
+                value: 2
+            });
+        }
+        return arrayWithPageNumber;
+    }
+}
+LargeNumberOfPagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LargeNumberOfPagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LargeNumberOfPagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: LargeNumberOfPagePipe, name: "LargeNumberOfPage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LargeNumberOfPagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LargeNumberOfPage'
+                }]
+        }] });
+
+class PageSelectorComponent {
+    constructor() {
+        this.openAbsoluteSelect = false;
+        this.largeNumberOfPage = false;
+        this.numberOfPage = 0;
+        this.pageChange = new EventEmitter();
+    }
+    set pagination(pagination) {
+        this._pagination = pagination;
+    }
+    get pagination() {
+        return this._pagination;
+    }
+    set totalItems(totalItems) {
+        this.numberOfPage = Math.ceil(totalItems / this.pagination.itemsPerPage);
+        this.largeNumberOfPage = this.numberOfPage > 30;
+    }
+    get totalItems() {
+        return this._totalItems;
+    }
+    onGotoPageChange(event, directValue) {
+        if (directValue) {
+            this.pageChange.emit(event);
+            this.openAbsoluteSelect = false;
+        }
+        else {
+            this.pageChange.emit(parseInt(event.target.value));
+        }
+    }
+}
+PageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PageSelectorComponent, selector: "wz-page-selector", inputs: { pagination: "pagination", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-selector\">\n\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n      <i class=\"fas fa-sort-down\"></i>\n    </div>\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n          <span>{{ pageIndex.display }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!largeNumberOfPage\">\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n      <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n        <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n          {{ pageIndex }}\n        </option>\n      </ng-container>\n    </select>\n  </ng-container>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "pipe", type: PagniationArrayTotalPages, name: "ArrayTotalPages" }, { kind: "pipe", type: LargeNumberOfPagePipe, name: "LargeNumberOfPage" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-page-selector', template: "<div class=\"wz-selector\">\n\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n      <i class=\"fas fa-sort-down\"></i>\n    </div>\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n          <span>{{ pageIndex.display }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!largeNumberOfPage\">\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n      <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n        <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n          {{ pageIndex }}\n        </option>\n      </ng-container>\n    </select>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pagination: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+class PagniationText {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    /**
+     * Update pagination text if at least one entrie change
+     * @param currentPage
+     * @param totalItems
+     * @param itemsPerPage
+     */
+    transform(currentPage, totalItems, itemsPerPage) {
+        let currentItemsLow = 0, currentItemsHigh = 0;
+        if (totalItems) {
+            currentItemsLow = (currentPage - 1) * itemsPerPage + 1;
+            currentItemsHigh = currentPage * itemsPerPage;
+        }
+        if (currentItemsHigh > totalItems) {
+            currentItemsHigh = totalItems;
+        }
+        return this.translateService.instant('PaginationComponent.on', { low: currentItemsLow, high: currentItemsHigh, total: totalItems });
+    }
+}
+PagniationText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationText, deps: [{ token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+PagniationText.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: PagniationText, name: "customPagniationText" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PagniationText, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customPagniationText'
+                }]
+        }], ctorParameters: function () { return [{ type: i7.TranslateService }]; } });
+
+class PaginationComponent {
+    constructor() {
+        this.pageChange = new EventEmitter();
+    }
+    set pagination(pagination) {
+        this._pagination = pagination;
+    }
+    get pagination() {
+        return this._pagination;
+    }
+    decrementPage() {
+        if (this.pagination.currentPage <= 1) {
+            return;
+        }
+        this.pagination.currentPage--;
+        this.pageChange.emit(this.pagination);
+    }
+    incrementPage() {
+        const isLastPage = new PagniationIsLastPage().transform(this.pagination.currentPage, this.pagination.totalItems, this.pagination.itemsPerPage);
+        if (isLastPage) {
+            return;
+        }
+        this.pagination.currentPage++;
+        this.pageChange.emit(this.pagination);
+    }
+    onGotoPageChange(pageNumber) {
+        this.pagination.currentPage = parseInt(pageNumber);
+        this.pageChange.emit(this.pagination);
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PaginationComponent, selector: "wz-pagination", inputs: { pagination: "pagination" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\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: PageSelectorComponent, selector: "wz-page-selector", inputs: ["pagination", "totalItems"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: PagniationIsLastPage, name: "IsLastPage" }, { kind: "pipe", type: PagniationText, name: "customPagniationText" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-pagination', template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pagination: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+class NumberToArray {
+    transform(number) {
+        return Array.from('x'.repeat(number));
+    }
+}
+NumberToArray.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NumberToArray, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberToArray.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: NumberToArray, name: "numberToArray" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NumberToArray, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'numberToArray'
+                }]
+        }] });
+
+class MosaicViewComponent extends ImagesActionHandler {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+        this.nbFakeImg = 0;
+        this.switchDisplayWindow = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onSearchChange(event) {
+        // Reset table filters
+        this.tableFilters.sort = undefined;
+        this.tableFilters.order = undefined;
+        this.tableFilters.currentPage = 1;
+        this.filtersChange.emit(this.tableFilters);
+    }
+    onCardRenamePicture(pictureRenamed) {
+        this.pictureNameChange.next(pictureRenamed);
+    }
+    switchDisplayWindowCard() {
+        this.switchDisplayWindow.emit(true);
+    }
+}
+MosaicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\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: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { 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: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
+        listAnnimation
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MosaicViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mosaic-view', animations: [
+                        listAnnimation
+                    ], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { tabDisplayed: [{
+                type: Input
+            }], fullSize: [{
+                type: Input
+            }], nbFakeImg: [{
+                type: Input
+            }], switchDisplayWindow: [{
+                type: Output
+            }] } });
+
+class FiltersTableService {
+    constructor(filterRoutingBuilder) {
+        this.filterRoutingBuilder = filterRoutingBuilder;
+        this.filterGroups = new Map();
+        this.dataTableFilters = {
+            sort: undefined,
+            order: undefined,
+            searchValue: undefined,
+            totalItems: 0,
+            itemsPerPage: 0,
+            currentPage: 0
+        };
+        this.sortSubject = new Subject();
+    }
+    getTableFilterGroup(dataTableName) {
+        if (this.filterGroups.has(dataTableName)) {
+            return this.filterGroups.get(dataTableName);
+        }
+        const filterGroup = this.filterRoutingBuilder.group(this.dataTableFilters, dataTableName);
+        this.filterGroups.set(dataTableName, filterGroup);
+        return filterGroup;
+    }
+    /**
+     * Use to reset the others sorts of the table
+     * @param dataTableName
+     * @param sortName
+     * @param order
+     */
+    emitSortChange(dataTableName, sortName, order) {
+        this.sortSubject.next({ dataTableName, sortName, order });
+    }
+    getSortChangeListner() {
+        return this.sortSubject.asObservable();
+    }
+    setPaginationFilters(dataTableName, totalItems, itemsPerPage, currentPage) {
+        const filterGroup = this.getTableFilterGroup(dataTableName);
+        filterGroup.setValues({
+            itemsPerPage,
+            currentPage
+        });
+    }
+    setInitialPaginationFiltersIfNotExist(dataTableName, itemsPerPage, currentPage) {
+        const filterGroup = this.getTableFilterGroup(dataTableName);
+        filterGroup.setValues({
+            itemsPerPage: filterGroup.get('itemsPerPage') ? parseInt(filterGroup.get('itemsPerPage')) : itemsPerPage,
+            currentPage: filterGroup.get('currentPage') ? parseInt(filterGroup.get('currentPage')) : currentPage
+        });
+    }
+}
+FiltersTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FiltersTableService, deps: [{ token: i1.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+FiltersTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FiltersTableService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FiltersTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NwbFilterRoutingBuilder }]; } });
+
+class CheckboxComponent {
+    constructor() {
+        this.label = '';
+        this.alone = false;
+        this.checked = false;
+        this.id = '';
+        this.disabled = false;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(obj) {
+        this.value = obj;
+    }
+    onChange(value) {
+        if (this._onChange) {
+            this._onChange(value);
+        }
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: CheckboxComponent, selector: "wz-checkbox", inputs: { label: "label", value: "value", type: "type", alone: "alone", checked: "checked", id: "id", name: "name" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], ngImport: i0, template: "<div class=\"checkBoxField field\" [ngClass]=\"{ 'field--nowrap': type === 'column', alone: alone }\">\n  <div class=\"field__row\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id\"\n      class=\"is-checkradio\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [checked]=\"checked\"\n      (ngModelChange)=\"onChange($event)\"\n    />\n    <label [attr.for]=\"id\">{{ label }}</label>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-checkbox', encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"checkBoxField field\" [ngClass]=\"{ 'field--nowrap': type === 'column', alone: alone }\">\n  <div class=\"field__row\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id\"\n      class=\"is-checkradio\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [checked]=\"checked\"\n      (ngModelChange)=\"onChange($event)\"\n    />\n    <label [attr.for]=\"id\">{{ label }}</label>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], alone: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class TableComponent {
+    constructor(filtersTableService) {
+        this.filtersTableService = filtersTableService;
+        this.tableFiltersChange = new EventEmitter();
+        this.placeholder = '';
+        /// Input/Output of checkbox ///
+        /** Pass to true to display checkbox in the header table */
+        this.checkbox = false;
+        /** Emit new header checboxValue */
+        this.toggleAllCheckBox = new EventEmitter();
+        /// Input to disable section ///
+        /** Pass to true to hide search input */
+        this.disableSearch = false;
+        /** Pass to true to hide the pagniator */
+        this.disablePagniation = false;
+        /// Input for loader on table body ///
+        this.isLoading = false;
+    }
+    ngOnInit() {
+        this.headerCheckBoxId = v4(); // Create checkbox unique id
+        /* Handle routing filters */
+        if (this.tableRoutingName) {
+            this._filterGroup = this.filtersTableService.getTableFilterGroup(this.tableRoutingName);
+            // Performe initial fetch data
+            this._filterGroup.valuesChange$.next([]);
+            this.setTablesFilters();
+            // Listen to filters changes with debounced time to limit multiple api calls
+            this.filterGroupChangeSub = this._filterGroup.valuesChange$.subscribe(filters => {
+                this.setTablesFilters();
+            });
+        }
+    }
+    onToggleAllCheckBox(event) {
+        this.toggleAllCheckBox.emit(event.target.checked);
+    }
+    searchChange(event) {
+        // Reset table filters
+        this.tableFilters.sort = undefined;
+        this.tableFilters.order = undefined;
+        this.tableFilters.currentPage = 1;
+        this.tableFiltersChange.emit(this.tableFilters);
+        // Reset routing filters
+        if (this._filterGroup) {
+            this._filterGroup.setValues({
+                searchValue: this.tableFilters.searchValue,
+                sort: undefined,
+                order: undefined,
+                currentPage: 1
+            });
+        }
+    }
+    pageChange() {
+        this.tableFiltersChange.emit(this.tableFilters);
+        if (this._filterGroup) {
+            this._filterGroup.setValues({
+                itemsPerPage: this.tableFilters.itemsPerPage,
+                currentPage: this.tableFilters.currentPage
+            });
+        }
+    }
+    /**
+     *  Set tableFilters from routing data existing in the url
+     * */
+    setTablesFilters() {
+        this.tableFilters = {
+            sort: this._filterGroup.get('sort'),
+            order: this._filterGroup.get('order'),
+            searchValue: this._filterGroup.get('searchValue'),
+            itemsPerPage: this._filterGroup.get('itemsPerPage') ? parseInt(this._filterGroup.get('itemsPerPage')) : 0,
+            currentPage: this._filterGroup.get('currentPage') ? parseInt(this._filterGroup.get('currentPage')) : 0,
+            totalItems: this.tableFilters.totalItems
+        };
+        this.tableFiltersChange.emit(this.tableFilters);
+    }
+    ngDestroy() {
+        if (this.filterGroupChangeSub) {
+            this.filterGroupChangeSub.unsubscribe();
+        }
+    }
+}
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableComponent, deps: [{ token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: TableComponent, selector: "wz-table", inputs: { tableFilters: "tableFilters", tableRoutingName: "tableRoutingName", placeholder: "placeholder", checkbox: "checkbox", disableSearch: "disableSearch", disablePagniation: "disablePagniation", isLoading: "isLoading" }, outputs: { tableFiltersChange: "tableFiltersChange", toggleAllCheckBox: "toggleAllCheckBox" }, ngImport: i0, template: "<div class=\"wz-table\">\n  <!-- Header section -->\n  <div class=\"wz-table__head\" id=\"headerTable\">\n    <div *ngIf=\"checkbox\" class=\"wz-table__head__cell wz-table__head__cell--checkbox\">\n      <wz-checkbox [id]=\"headerCheckBoxId\" (change)=\"onToggleAllCheckBox($event)\" [alone]=\"true\"></wz-checkbox>\n    </div>\n\n    <!-- Header contents are added with the headerCell directive -->\n    <ng-content select=\"[headerCell]\"></ng-content>\n  </div>\n\n  <!-- Search section -->\n  <div *ngIf=\"!disableSearch\" class=\"wz-table__search\">\n    <wz-input-search\n      [(ngModel)]=\"tableFilters.searchValue\"\n      (changeDebounced)=\"searchChange($event)\"\n      [placeholder]=\"placeholder\"\n      [smallPadding]=\"true\"\n    ></wz-input-search>\n  </div>\n\n  <!-- Body section -->\n  <div class=\"wz-table__body\">\n    <!-- Loader on body -->\n    <div class=\"wz-table__body__loader\" *ngIf=\"isLoading\">\n      <wz-loader [small]=\"true\"></wz-loader>\n    </div>\n    <!-- Body contents are added with the tableRow directive -->\n    <ng-content select=\"[tableRow]\" *ngIf=\"!isLoading\"></ng-content>\n  </div>\n\n  <!-- Pagination section -->\n  <wz-pagination *ngIf=\"!disablePagniation\" [pagination]=\"tableFilters\" (pageChange)=\"pageChange()\"></wz-pagination>\n</div>\n", dependencies: [{ 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: 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: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "wz-checkbox", inputs: ["label", "value", "type", "alone", "checked", "id", "name"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wz-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"wz-table\">\n  <!-- Header section -->\n  <div class=\"wz-table__head\" id=\"headerTable\">\n    <div *ngIf=\"checkbox\" class=\"wz-table__head__cell wz-table__head__cell--checkbox\">\n      <wz-checkbox [id]=\"headerCheckBoxId\" (change)=\"onToggleAllCheckBox($event)\" [alone]=\"true\"></wz-checkbox>\n    </div>\n\n    <!-- Header contents are added with the headerCell directive -->\n    <ng-content select=\"[headerCell]\"></ng-content>\n  </div>\n\n  <!-- Search section -->\n  <div *ngIf=\"!disableSearch\" class=\"wz-table__search\">\n    <wz-input-search\n      [(ngModel)]=\"tableFilters.searchValue\"\n      (changeDebounced)=\"searchChange($event)\"\n      [placeholder]=\"placeholder\"\n      [smallPadding]=\"true\"\n    ></wz-input-search>\n  </div>\n\n  <!-- Body section -->\n  <div class=\"wz-table__body\">\n    <!-- Loader on body -->\n    <div class=\"wz-table__body__loader\" *ngIf=\"isLoading\">\n      <wz-loader [small]=\"true\"></wz-loader>\n    </div>\n    <!-- Body contents are added with the tableRow directive -->\n    <ng-content select=\"[tableRow]\" *ngIf=\"!isLoading\"></ng-content>\n  </div>\n\n  <!-- Pagination section -->\n  <wz-pagination *ngIf=\"!disablePagniation\" [pagination]=\"tableFilters\" (pageChange)=\"pageChange()\"></wz-pagination>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: FiltersTableService }]; }, propDecorators: { tableFilters: [{
+                type: Input
+            }], tableFiltersChange: [{
+                type: Output
+            }], tableRoutingName: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], toggleAllCheckBox: [{
+                type: Output
+            }], disableSearch: [{
+                type: Input
+            }], disablePagniation: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }] } });
+
+class TableColumn {
+    constructor(currentCell, renderer, document) {
+        this.currentCell = currentCell;
+        this.renderer = renderer;
+        this.document = document;
+        this.centerCellValue = ['left', 'center', 'right'];
+    }
+    ngAfterViewInit() {
+        this.applyCustomStylesOnCell();
+    }
+    applyCustomStylesOnCell() {
+        this.currentCell.nativeElement.style.flexGrow = typeof this.columnSize !== 'undefined' ? this.columnSize : '1';
+        this.renderer.addClass(this.currentCell.nativeElement, 'wz-table__body__line__cell');
+        if (this.centerCell) {
+            if (this.centerCellValue.indexOf(this.centerCell) === -1) {
+                throw 'Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.';
+            }
+            let className = 'wz-table__body__line__cell--center' + '--' + this.centerCell;
+            this.renderer.addClass(this.currentCell.nativeElement, className);
+        }
+    }
+}
+TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableColumn, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+TableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: TableColumn, selector: "[tableColumn]", inputs: { columnSize: "columnSize", centerCell: "centerCell" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tableColumn]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { columnSize: [{
+                type: Input,
+                args: ['columnSize']
+            }], centerCell: [{
+                type: Input,
+                args: ['centerCell']
+            }] } });
+
+class CheckBoxRow {
+    constructor(currentRow, appRef, renderer, document, resolver, injector) {
+        this.currentRow = currentRow;
+        this.appRef = appRef;
+        this.renderer = renderer;
+        this.document = document;
+        this.resolver = resolver;
+        this.injector = injector;
+        this.checkBoxValueChange = new EventEmitter();
+    }
+    set checkBoxValue(value) {
+        this._value = value;
+        if (this.checkboxComponentRef) {
+            this.setCheckBoxValue();
+        }
+    }
+    get checkBoxValue() {
+        return this._value;
+    }
+    ngOnInit() {
+        this.createCheckBoxComponent();
+        this.handleChecboxInputs();
+        this.handleCheckboxOutputs();
+    }
+    createCheckBoxComponent() {
+        // Create the container
+        const checkBoxContainer = document.createElement('div');
+        checkBoxContainer.className = 'wz-table__body__line__cell wz-table__body__line__cell--checkbox';
+        // Insert divCheckBox in the DOM as the first child of the row
+        this.renderer.insertBefore(this.currentRow.nativeElement, checkBoxContainer, this.currentRow.nativeElement.firstChild);
+        // Insert the CheckBoxComponent inside the container (DOM and Angular DOM)
+        this.htmlContainer = new HtmlContainer(checkBoxContainer, this.appRef, this.resolver, this.injector);
+        this.checkboxComponentRef = this.htmlContainer.attach(CheckboxComponent);
+    }
+    handleChecboxInputs() {
+        this.checkboxComponentRef.instance.id = this.checkBoxId ? this.checkBoxId : v4();
+        this.checkboxComponentRef.instance.name = this.checkBoxName ? this.checkBoxName : undefined;
+        this.checkboxComponentRef.instance.alone = true;
+        this.setCheckBoxValue();
+    }
+    setCheckBoxValue() {
+        this.checkboxComponentRef.instance.value = this.checkBoxValue;
+    }
+    handleCheckboxOutputs() {
+        // Detect checkbox changes
+        this.checkboxComponentRef.instance.registerOnChange(() => {
+            this._toggleCheckbox();
+        });
+    }
+    _toggleCheckbox() {
+        this.checkBoxValue = !this.checkBoxValue;
+        this.checkBoxValueChange.emit(this.checkBoxValue);
+    }
+    ngOnDestroy() {
+        this.htmlContainer.dispose();
+    }
+}
+CheckBoxRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CheckBoxRow, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+CheckBoxRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: { checkBoxId: "checkBoxId", checkBoxName: "checkBoxName", checkBoxValue: "checkBoxValue" }, outputs: { checkBoxValueChange: "checkBoxValueChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CheckBoxRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[checkBoxRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { checkBoxId: [{
+                type: Input,
+                args: ['checkBoxId']
+            }], checkBoxName: [{
+                type: Input,
+                args: ['checkBoxName']
+            }], checkBoxValue: [{
+                type: Input,
+                args: ['checkBoxValue']
+            }], checkBoxValueChange: [{
+                type: Output
+            }] } });
+class HtmlContainer {
+    constructor(hostElement, appRef, componentFactoryResolver, injector) {
+        this.hostElement = hostElement;
+        this.appRef = appRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.attached = false;
+    }
+    attach(component) {
+        if (this.attached) {
+            throw new Error('component has already been attached');
+        }
+        this.attached = true;
+        const childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
+        let componentRef = childComponentFactory.create(this.injector);
+        this.appRef.attachView(componentRef.hostView);
+        this.disposeFn = () => {
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        };
+        this.hostElement.appendChild(componentRef.hostView.rootNodes[0]);
+        return componentRef;
+    }
+    dispose() {
+        if (this.attached) {
+            this.disposeFn();
+        }
+    }
+}
+
+class TableColumnHeader {
+    constructor(currentCell, renderer, document, filtersTableService) {
+        this.currentCell = currentCell;
+        this.renderer = renderer;
+        this.document = document;
+        this.filtersTableService = filtersTableService;
+        this._headerName = '';
+        this.filterRouting = false; // Optional. Set to true to use Filter Routing.
+        this.onSortChange = new EventEmitter(); // Emit the sort value (true, false, undefuned) of the current sort icon when clicking
+        this.tableFiltersChange = new EventEmitter();
+        this.centerCellValue = ['left', 'center', 'right'];
+        this.subscriptions = [];
+    }
+    set headerName(value) {
+        this._headerName = value;
+        this.setHeaderName();
+    }
+    get headerName() {
+        return this._headerName;
+    }
+    ngOnInit() {
+        if (this.tableName && this.sortName) {
+            if (this.filterRouting) {
+                this.handleSortRouting();
+            }
+            else {
+                this.handleSortBasic();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.applyCustomStylesOnCell();
+        this.renderHeaderColumn();
+    }
+    handleSortRouting() {
+        this.filterGroup = this.filtersTableService.getTableFilterGroup(this.tableName);
+        const filterGroupChangeSub = this.filterGroup.valuesChange$.subscribe(filters => {
+            const filterSort = filters.filter(filter => filter.key === 'sort')[0];
+            if (this.sortName !== filterSort.value) {
+                this.resetSortIcon();
+            }
+        });
+        this.subscriptions.push(filterGroupChangeSub);
+    }
+    handleSortBasic() {
+        const sortChangeSub = this.filtersTableService.getSortChangeListner().subscribe(sort => {
+            if (this.tableName === sort.dataTableName && this.sortName !== sort.sortName) {
+                // Reset the current sort icon
+                this.resetSortIcon();
+            }
+        });
+        this.subscriptions.push(sortChangeSub);
+    }
+    resetSortIcon() {
+        // Replace current icon with default icon
+        this.contentHeader.className = this.contentHeader.className.replace(this.getCurrentSortIcon(), 'idle');
+    }
+    applyCustomStylesOnCell() {
+        this.currentCell.nativeElement.style.flexGrow = typeof this.columnSize !== 'undefined' ? this.columnSize : '1';
+        this.renderer.addClass(this.currentCell.nativeElement, 'wz-table__head__cell');
+        if (this.centerCell) {
+            if (this.centerCellValue.indexOf(this.centerCell) === -1) {
+                throw 'Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.';
+            }
+            let className = 'wz-table__head__cell--center' + '--' + this.centerCell;
+            this.renderer.addClass(this.currentCell.nativeElement, className);
+        }
+    }
+    renderHeaderColumn() {
+        this.createHeaderContent();
+        this.renderer.appendChild(this.currentCell.nativeElement, this.contentHeader);
+    }
+    createHeaderContent() {
+        this.contentHeader = document.createElement('a');
+        this.contentHeader.className = 'wz-table__head__cell__search';
+        this.setHeaderName();
+        if (this.tableName && this.sortName) {
+            this.handleSort();
+        }
+    }
+    setHeaderName() {
+        if (!this.contentHeader) {
+            return;
+        }
+        this.contentHeader.innerHTML = this.headerName;
+    }
+    handleSort() {
+        // Set icon in the header column cell
+        this.contentHeader.className += ' wz-table__head__cell__search--' + this.getInitialSortIcon();
+        // On click on the content header, change the icon and emit event
+        this.renderer.listen(this.contentHeader, 'click', () => {
+            const currentIcon = this.getCurrentSortIcon();
+            let newIcon;
+            let newSort, newOrder;
+            switch (currentIcon) {
+                case 'idle':
+                    newIcon = 'up';
+                    newSort = this.sortName;
+                    newOrder = true;
+                    break;
+                case 'up':
+                    newIcon = 'down';
+                    newSort = this.sortName;
+                    newOrder = false;
+                    break;
+                case 'down':
+                    newIcon = 'idle';
+                    break;
+                default:
+                    newIcon = 'idle';
+                    break;
+            }
+            // Replace the icon
+            this.contentHeader.className = this.contentHeader.className.replace(currentIcon, newIcon);
+            this.emitEvents(newSort, newOrder);
+        });
+    }
+    getInitialSortIcon() {
+        if (!this.filterRouting) {
+            return 'idle';
+        }
+        // Get Initial Sort Icon for Routing Filter
+        let initialSortIcon = 'idle';
+        if (this.filterGroup.get('sort') === this.sortName) {
+            initialSortIcon = this.filterGroup.get('order') == 'true' ? 'up' : 'down';
+        }
+        return initialSortIcon;
+    }
+    getCurrentSortIcon() {
+        const regexp = /wz-table__head__cell__search--(?<icon>\w+)/;
+        const { groups } = regexp.exec(this.contentHeader.className);
+        return groups.icon;
+    }
+    emitEvents(newSort, newOrder) {
+        if (this.filterRouting) {
+            // Will send the filter routing value has changes event
+            this.filterGroup.setValues({
+                sort: newSort,
+                order: newOrder,
+                currentPage: 1
+            });
+        }
+        else {
+            // Send the event sort change
+            this.filtersTableService.emitSortChange(this.tableName, this.sortName, newOrder);
+        }
+        if (this.tableFilters) {
+            this.tableFilters.sort = this.sortName;
+            this.tableFilters.order = newOrder;
+            this.tableFilters.currentPage = 1;
+            this.tableFiltersChange.emit(this.tableFilters);
+        }
+        this.onSortChange.emit(newOrder);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => {
+            subscription.unsubscribe();
+        });
+    }
+}
+TableColumnHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableColumnHeader, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Directive });
+TableColumnHeader.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: TableColumnHeader, selector: "[headerCell]", inputs: { headerName: "headerName", columnSize: "columnSize", filterRouting: "filterRouting", tableName: "tableName", sortName: "sortName", centerCell: "centerCell", tableFilters: "tableFilters" }, outputs: { onSortChange: "onSortChange", tableFiltersChange: "tableFiltersChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableColumnHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    // The selector has the same name as the headerCell selector in table.component.html
+                    selector: '[headerCell]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: FiltersTableService }]; }, propDecorators: { headerName: [{
+                type: Input,
+                args: ['headerName']
+            }], columnSize: [{
+                type: Input,
+                args: ['columnSize']
+            }], filterRouting: [{
+                type: Input,
+                args: ['filterRouting']
+            }], tableName: [{
+                type: Input,
+                args: ['tableName']
+            }], sortName: [{
+                type: Input,
+                args: ['sortName']
+            }], centerCell: [{
+                type: Input,
+                args: ['centerCell']
+            }], onSortChange: [{
+                type: Output
+            }], tableFilters: [{
+                type: Input
+            }], tableFiltersChange: [{
+                type: Output
+            }] } });
+
+class TableRow {
+    constructor(currentCell, renderer, document) {
+        this.currentCell = currentCell;
+        this.renderer = renderer;
+        this.document = document;
+    }
+    ngAfterViewInit() {
+        this.applyCustomStylesOnCell();
+    }
+    applyCustomStylesOnCell() {
+        this.renderer.addClass(this.currentCell.nativeElement, 'wz-table__body__line');
+    }
+}
+TableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableRow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+TableRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: TableRow, selector: "[tableRow]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    // The selector has the same name as the tableRaw selector in table.component.html
+                    selector: '[tableRow]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class TableViewComponent extends ImagesActionHandler {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+        this.dataTableName = 'imgagesView'; // Name of your table
+    }
+    ngOnInit() {
+    }
+}
+TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+        listAnnimation
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TableViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-view', animations: [
+                        listAnnimation
+                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; } });
+
+class ImagesViewComponent {
+    constructor(imgManager, imgEventService, imgSelectionService, alertService, userSettingsService, renamePictureService) {
+        this.imgManager = imgManager;
+        this.imgEventService = imgEventService;
+        this.imgSelectionService = imgSelectionService;
+        this.alertService = alertService;
+        this.userSettingsService = userSettingsService;
+        this.renamePictureService = renamePictureService;
+        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;
+        this.imgFullWidthConfig = [
+            {
+                max: 419,
+                largeImgWidthFactor: 1,
+                smallImgWidthFactor: 0.5
+            },
+            {
+                max: 499,
+                largeImgWidthFactor: 1,
+                smallImgWidthFactor: 0.5
+            },
+            {
+                max: 719,
+                largeImgWidthFactor: 0.5,
+                smallImgWidthFactor: 0.3333
+            },
+            {
+                max: 1023,
+                largeImgWidthFactor: 0.3333,
+                smallImgWidthFactor: 0.2
+            },
+            {
+                max: 1399,
+                largeImgWidthFactor: 0.25,
+                smallImgWidthFactor: 0.125
+            },
+            {
+                max: 1599,
+                largeImgWidthFactor: 0.2,
+                smallImgWidthFactor: 0.1111
+            },
+            {
+                largeImgWidthFactor: 0.1666,
+                smallImgWidthFactor: 0.1
+            }
+        ];
+        this.imgWidthConfig = [
+            {
+                max: 1024,
+                largeImgWidthFactor: 0.25,
+                smallImgWidthFactor: 0.125
+            },
+            {
+                max: 1199,
+                largeImgWidthFactor: 0.3333,
+                smallImgWidthFactor: 0.2
+            },
+            {
+                max: 1299,
+                largeImgWidthFactor: 0.3333,
+                smallImgWidthFactor: 0.1666
+            },
+            {
+                max: 1399,
+                largeImgWidthFactor: 0.25,
+                smallImgWidthFactor: 0.1666
+            },
+            {
+                max: 1599,
+                largeImgWidthFactor: 0.25,
+                smallImgWidthFactor: 0.14
+            },
+            {
+                largeImgWidthFactor: 0.25,
+                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.isTotalRetieved = 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';
+    }
+    ngOnInit() {
+        /* if (this.maxLengthCardShow) {
+          this.reducePictureListMaxLength();
+        } */
+        this.setEvents();
+        this.imgSelectedList = this.imgSelectionService.getImgSelection();
+    }
+    ngAfterViewInit() {
+        this.setNbImgToDisplay();
+        this._getImgList();
+        if (!this.savePictureList) {
+            this.savePictureList = this.picturesList;
+        }
+    }
+    /* reducePictureListMaxLength() {
+      this.picturesList.splice(0, this.maxLengthCardShow);
+    } */
+    getImgList() {
+        this.filtersChanged.next();
+    }
+    /**
+     * true : go to list display
+     * false : go to mosaic display
+     * @param activate
+     */
+    onSwitchFormatDisplayed(activate) {
+        this.listDisplayed = activate;
+        this.userSettingsService.setUserDisplayPreference(activate);
+        this.imgEventService.emitlistDisplayedChange(activate);
+    }
+    /**
+     * Calcul the number of img selected for masse deletion
+     */
+    onImgSelected() {
+        this.setNbImgToDelSelected();
+    }
+    onShowImgUploaded() {
+        this.searchText = null;
+        this.searchedValue = null;
+        this.getImgList();
+    }
+    onRenamePicture(pictureRenamed) {
+        console.log('onRenamePicture pictureRenamed', pictureRenamed);
+        this.renamePictureService.onRenamePicture(pictureRenamed);
+    }
+    removeListImg() {
+        if (this.disable) {
+            return;
+        }
+        this.disable = true;
+        this.delListImgLoader = true;
+        this.confirmImgSup = false;
+        // Get the id of the img to remove
+        // And add deleted property
+        const idImgToRemove = [];
+        this.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);
+        });
+    }
+    selectImgChosen() {
+        if (this.disable) {
+            return;
+        }
+        const picturesListSelected = [];
+        this.picturesList.map(img => {
+            if (img.delSelected) {
+                img.delSelected = false;
+                img.selected = true;
+            }
+            if (img.selected) {
+                picturesListSelected.push(img);
+            }
+        });
+        this.setNbImgToDelSelected();
+        this.imgSelectionService.setImgSelection(picturesListSelected);
+    }
+    displayConfirmImgSup() {
+        if (this.disable) {
+            return;
+        }
+        this.confirmImgSup = true;
+    }
+    cancelSup() {
+        this.confirmImgSup = false;
+    }
+    /**
+     * Event emit when a img selected in order to delete
+     */
+    onPicturesListChange() {
+        this.setNbImgToDelSelected();
+    }
+    onFiltersChange() {
+        this.getImgList();
+    }
+    /**
+     * Set default number of img per page to display at the initialisation
+     * This number is between 30 and 50
+     */
+    setNbImgToDisplay() {
+        const containerWidth = this.imgLibContainer.nativeElement.offsetWidth + 30; // + 30px -> left + right margin
+        const scrollWidth = window.innerWidth - document.body.offsetWidth;
+        const [maxImgWidthFactor, minImgWidthFactor] = this.getImgWidthFactors();
+        const minImgWidth = Math.floor(containerWidth * minImgWidthFactor);
+        const maxImgWidth = Math.ceil((containerWidth + scrollWidth) * maxImgWidthFactor);
+        this.nbMaxImgPerLine = Math.floor(containerWidth / minImgWidth);
+        this.nbMinImgPerLine = Math.floor((containerWidth + scrollWidth) / maxImgWidth);
+        this.pageSize = this.getTotalImgPerPage();
+    }
+    getImgWidthFactors() {
+        const screenWidth = window.innerWidth;
+        let minWidth = 0;
+        let imgSizesConfig = [];
+        const currentImgWidthConfig = this.fullSize ? this.imgFullWidthConfig : this.imgWidthConfig;
+        for (const widthConfig of currentImgWidthConfig) {
+            if (!widthConfig.max) {
+                imgSizesConfig = [widthConfig.largeImgWidthFactor, widthConfig.smallImgWidthFactor];
+                break;
+            }
+            if (minWidth < screenWidth && screenWidth <= widthConfig.max) {
+                imgSizesConfig = [widthConfig.largeImgWidthFactor, widthConfig.smallImgWidthFactor];
+                break;
+            }
+            minWidth = widthConfig.max;
+        }
+        return imgSizesConfig;
+    }
+    getTotalImgPerPage() {
+        if (this.nbRowToShow) {
+            const nbImgPerLine = this.stateDisplayed === 'full' ? this.nbMinImgPerLine : this.nbMaxImgPerLine;
+            return nbImgPerLine * this.nbRowToShow;
+        }
+        let total = this.nbMinImgPerLine;
+        while (total < 30 || total % this.nbMaxImgPerLine !== 0 || total % this.nbMinImgPerLine !== 0) {
+            total += this.nbMinImgPerLine;
+        }
+        return total;
+    }
+    setParams() {
+        this.params = {
+            limit: this.maxLengthCardShow?.toString() || (this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString()),
+            page: this.tableFilters.currentPage.toString()
+        };
+        if (this.tableFilters.searchValue) {
+            this.params["display_name:contains"] = 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;
+            }
+        });
+    }
+    displayPexelsLib() {
+        this.displayPexelsResults = true;
+        this.alertService.openAlert(this.msgNoImgFound);
+    }
+    /**
+     * Set a img list in order to fill properly all the line of images displayed in mosaic.
+     * Otherwise, the space-between css will do a bad display
+     */
+    calculNbImgFake(nbImgDisplayed) {
+        const nbImgPerLine = this.stateDisplayed === 'small' || this.tabDisplayed === 'img-upload' ? this.nbMaxImgPerLine : this.nbMinImgPerLine;
+        if (nbImgDisplayed % nbImgPerLine !== 0) {
+            this.nbFakeImg = nbImgPerLine - nbImgDisplayed % nbImgPerLine;
+        }
+    }
+    getImg(id_file) {
+        this.imgManager.getShopImg(id_file).pipe(take(1)).subscribe((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;
+            }
+        }
+        return false;
+    }
+    setNbImgToDelSelected() {
+        this.nbImgToDelSelected = this.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.getImgRemovedEventListner().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.getImgSelectionChange().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();
+        this.imgManager.getShopImgList(this.params).pipe(take(1)).subscribe((data) => {
+            this.initVariables(true);
+            const nbImgDisplayed = data.data.length;
+            this.calculNbImgFake(nbImgDisplayed);
+            this.picturesList = data.data;
+            this.renamePictureService.setPicturesList(this.picturesList);
+            this.selectImgSelected();
+            this.length = this.isTotalRetieved ? this.length : data.totalRecords;
+            this.tableFilters.totalItems = this.isTotalRetieved ? this.tableFilters.totalItems : data.totalRecords;
+            this.tableFilters.itemsPerPage = this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage : this.pageSize;
+            // Display Pexels if no result
+            if (data.totalRecords === 0) {
+                this.displayPexelsLib();
+            }
+        }, error => {
+            this.alertService.openAlert(this.errorGetAllImg);
+            this.initVariables(false);
+        });
+    }
+    refreshTotalImgList() {
+        const searchValue = this.tableFilters.searchValue;
+        if (this.isTotalRetieved && searchValue === this.previousSearchValue) {
+            // Keep current total result
+            return;
+        }
+        this.isTotalRetieved = false;
+        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe((data) => {
+            this.previousSearchValue = searchValue;
+            this.isTotalRetieved = true;
+            this.length = data.totalRecords;
+            this.tableFilters.totalItems = data.totalRecords;
+        }, error => {
+            //this.alertService.openAlert(this.errorGetTotalImg);
+            this.initVariables(false);
+        });
+    }
+    switchDisplayWindowMosaic() {
+        this.switchDisplayWindow.emit(true);
+    }
+    ngOnDestroy() {
+        this.searchQueryChanged.unsubscribe();
+        this.imgRemovedEvent.unsubscribe();
+        this.imgAddedEvent.unsubscribe();
+        this.imgSelectionChange.unsubscribe();
+    }
+}
+ImagesViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
+ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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\">{{ '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            <!-- S\u00E9lectionner -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\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            >\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                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\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<perfect-scrollbar\n  [config]=\"{ suppressScrollX: true }\"\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\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</perfect-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: i3$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { 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: i7.TranslatePipe, name: "translate" }], animations: [
+        easeInOut,
+        insertRemove
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImagesViewComponent, decorators: [{
+            type: Component,
+            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\">{{ '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            <!-- S\u00E9lectionner -->\n            <button\n              class=\"button success images-view__container__boxAction__import\"\n              @insertRemoveAnnim\n              *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n              (click)=\"selectImgChosen()\"\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            >\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                    >\n                      {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <button\n                      (click)=\"removeListImg()\"\n                      class=\"button images-view__container__delBtn danger\"\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<perfect-scrollbar\n  [config]=\"{ suppressScrollX: true }\"\n  class=\"images-view__scroll\"\n  [ngClass]=\"{\n    'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n    'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\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</perfect-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" }]
+        }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], tabDisplayed: [{
+                type: Input
+            }], fullSize: [{
+                type: Input
+            }], maxLengthCardShow: [{
+                type: Input
+            }], nbRowToShow: [{
+                type: Input
+            }], listDisplayed: [{
+                type: Input
+            }], multipleImgMode: [{
+                type: Input
+            }], switchDisplayWindow: [{
+                type: Output
+            }], imgLibContainer: [{
+                type: ViewChild,
+                args: ['imgLibContainer']
+            }] } });
+
+class ZindexToggleDirective {
+    constructor(currentElement, renderer) {
+        this.currentElement = currentElement;
+        this.renderer = renderer;
+        this.isActived = false;
+    }
+    set isActive(value) {
+        this.isActived = value;
+        this.switchToggle();
+    }
+    get isActive() {
+        return this.isActived;
+    }
+    ngOnInit() {
+    }
+    switchToggle() {
+        if (this.isActived) {
+            this.renderer.addClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+        }
+        else {
+            this.renderer.removeClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+        }
+    }
+    ngOnDestroy() {
+    }
+}
+ZindexToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ZindexToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ZindexToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: { isActive: ["zIndexToggle", "isActive"] }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ZindexToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zIndexToggle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onEventChange: [{
+                type: Output
+            }], isActive: [{
+                type: Input,
+                args: ['zIndexToggle']
+            }] } });
+
+class SelectFiltersPipe {
+    transform(items, filterName) {
+        return items.filter(item => {
+            const regexp = new RegExp(filterName, 'i');
+            return regexp.test(item.name);
+        });
+    }
+}
+SelectFiltersPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectFiltersPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SelectFiltersPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SelectFiltersPipe, name: "selectFilters" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectFiltersPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'selectFilters'
+                }]
+        }] });
+
+class SelectComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.search = false;
+        this.type = 'default';
+        this.maxWidth = '100%';
+        this.disabled = false;
+        this.selectValue = new EventEmitter();
+        this.clickOnCallToAction = new EventEmitter();
+        this.openCategories = false;
+        this.searchValue = '';
+        this.indexItemSelected = -1;
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouch = () => { };
+    }
+    ngOnInit() {
+        this.indexItemSelected = this.items.findIndex(item => item.selected);
+    }
+    onClose() {
+        this.openCategories = false;
+    }
+    customTB(item, index) {
+        return `${item.id}-${index}`;
+    }
+    onSelectItem(id) {
+        this.unselectAll();
+        this.setIndexItemSelected(id);
+        const itemSelected = this.getItemSelected();
+        itemSelected.selected = true;
+        this.selectValue.emit(this.indexItemSelected);
+        this.onChange(itemSelected);
+    }
+    onClickCallToAction() {
+        this.onClose();
+        this.clickOnCallToAction.emit(this.callToAction.value);
+    }
+    getItemSelected() {
+        return this.items[this.indexItemSelected];
+    }
+    showCategories() {
+        this.openCategories = true;
+        setTimeout(() => {
+            this.searchElement.nativeElement.focus();
+        }, 0);
+    }
+    unselectAll() {
+        this.items.forEach(item => item.selected = false);
+    }
+    setIndexItemSelected(id) {
+        this.indexItemSelected = this.items.findIndex(item => item.id === id);
+    }
+    writeValue(selectItem) {
+        if (!selectItem) {
+            return;
+        }
+        this.unselectAll();
+        selectItem.selected = true;
+        this.setIndexItemSelected(selectItem.id);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectComponent, deps: [{ token: i7.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <div [perfectScrollbar]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i3$1.PerfectScrollbarDirective, selector: "[perfectScrollbar]", inputs: ["disabled", "perfectScrollbar"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <div [perfectScrollbar]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i7.TranslateService }]; }, propDecorators: { items: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], maxWidthItems: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], callToAction: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectValue: [{
+                type: Output
+            }], clickOnCallToAction: [{
+                type: Output
+            }], searchElement: [{
+                type: ViewChild,
+                args: ['search']
+            }] } });
+
+class ImgTabsComponent {
+    constructor(imgEventEditService, alertService, route) {
+        this.imgEventEditService = imgEventEditService;
+        this.alertService = alertService;
+        this.route = route;
+        this.multipleImgMode = false;
+        this.listDisplayed = false;
+        this.imgManagerClosed = new EventEmitter();
+        this.currentTab = new EventEmitter();
+        this.switchDisplayWindow = new EventEmitter();
+        this.tabs = [
+            {
+                name: 'ImgManager.Tabs.addImg',
+                value: 'img-upload',
+                selected: true,
+                id: 0
+            },
+            {
+                name: 'ImgManager.Tabs.imgLib',
+                value: 'images-view',
+                id: 1
+            },
+            {
+                name: 'ImgManager.Tabs.freeImgLib',
+                value: 'pexels-lib',
+                id: 2
+            },
+            {
+                name: 'ImgManager.Tabs.Editor',
+                value: 'img-edition',
+                hide: true,
+                id: 3
+            }
+        ];
+        this.tabActive = this.tabs[0];
+        /* tabActive = 'images-view';
+        tabs: string[] = ['img-upload', 'images-view', 'pexels-lib', 'img-edition']; */
+        this.editTab = false;
+        this.imgUpload = false;
+        this.snackBarNewVersionConfig = {
+            message: '',
+            duration: 3000
+        };
+    }
+    ngOnInit() {
+        this.imgEventEditService.getImgToEditEventListner().subscribe(imgToEdit => {
+            this.tabActive = this.tabs[3];
+            this.imgToEdit = imgToEdit;
+            this.editTab = true;
+            this.currentTab.emit(this.tabs[3]);
+        });
+    }
+    toggleTabs(item) {
+        this.imgUpload = false;
+        this.editTab = false;
+        this.tabActive = item;
+    }
+    onImgUploaded(img) {
+        this.imgUpload = true;
+        this.imgUploadedComponent.onImgUploaded(img);
+    }
+    onEditClosed(msgKey) {
+        this.editTab = false;
+        this.toggleTabs(this.tabs[1]);
+        if (msgKey) {
+            this.alertService.openAlert(msgKey);
+        }
+        this.currentTab.emit('close');
+    }
+    onShowImgUploaded() {
+        this.tabActive = this.tabs[1];
+    }
+    switchDisplayWindowImgView() {
+        this.switchDisplayWindow.emit(true);
+    }
+    switchRouterLink(event) {
+    }
+    onImgManagerClosed() {
+        this.imgManagerClosed.emit();
+    }
+}
+ImgTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", 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: "14.1.3", 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  <!-- Pexel 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: i7.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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  <!-- Pexel 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" }]
+        }], ctorParameters: function () { return [{ type: ImgEventService }, { type: AlertService }, { type: i3$2.Router }]; }, propDecorators: { multipleImgMode: [{
+                type: Input
+            }], stateDisplayed: [{
+                type: Input
+            }], listDisplayed: [{
+                type: Input
+            }], imgManagerClosed: [{
+                type: Output
+            }], currentTab: [{
+                type: Output
+            }], switchDisplayWindow: [{
+                type: Output
+            }], imgUploadedComponent: [{
+                type: ViewChild,
+                args: ['imgUploadedImg']
+            }] } });
+
+class ImgSelectionComponent {
+    constructor(imgSelectionService) {
+        this.imgSelectionService = imgSelectionService;
+        this.imgManagerClosed = new EventEmitter();
+        this.imgSelectedList = [];
+        this.removingAll = false;
+        this.cancellingAll = false;
+        this.importingAll = false;
+        this.dragStart = false;
+        this.isLoading = false;
+        this.trashPositionIndex = 0;
+        this.trashPositionLeft = '-5px';
+    }
+    ngOnInit() {
+        this.getImgSelected();
+        this.imgSelectionService.getImgListLoadingEventListner().subscribe(loading => {
+            this.isLoading = loading;
+        });
+    }
+    init() {
+        this.removingAll = false;
+        this.cancellingAll = false;
+        this.importingAll = false;
+    }
+    getImgSelected() {
+        this.imgSelectedList = this.imgSelectionService.getImgSelection();
+    }
+    removeImg(index) {
+        this.imgSelectionService.removeImgSelectedByIndex(index);
+    }
+    drop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            this.imgSelectionService.moveImgOrder(event);
+        }
+    }
+    removeImgFromSelection(event) {
+        this.imgSelectionService.removeImgSelectedByIndex(event.previousIndex);
+    }
+}
+ImgSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
+ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!isLoading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-container *ngIf=\"isLoading\">\n  <wz-loader></wz-loader>\n</ng-container>\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: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-selection', template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!isLoading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-container *ngIf=\"isLoading\">\n  <wz-loader></wz-loader>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: ImgSelectionService }]; }, propDecorators: { tabDisplayed: [{
+                type: Input
+            }], imgManagerClosed: [{
+                type: Output
+            }] } });
+
+class WzImgManagerComponent {
+    constructor(imgSelectionService, externalConfigService, userSettingsService, canvaService, imgEventService, domService) {
+        this.imgSelectionService = imgSelectionService;
+        this.externalConfigService = externalConfigService;
+        this.userSettingsService = userSettingsService;
+        this.canvaService = canvaService;
+        this.imgEventService = imgEventService;
+        this.domService = domService;
+        this.showSelection = false;
+        this.imgManagerClosed = new EventEmitter();
+        this._multipleImgMode = false;
+        this._showImgManagerModule = false;
+        this.close = false;
+        this.listDisplayed = false;
+        this.hideTab = false;
+    }
+    // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
+    // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
+    set forceToOpenCanva(forceToOpenCanva) {
+        this.canvaService.forceToOpenCanva = !!forceToOpenCanva;
+        if (typeof forceToOpenCanva === 'boolean') {
+            return;
+        }
+        this.canvaService.expectedImgSizesChange(forceToOpenCanva);
+    }
+    set multipleImgMode(activate) {
+        this._multipleImgMode = activate;
+        this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
+    }
+    get multipleImgMode() {
+        return this._multipleImgMode;
+    }
+    set showImgManagerModule(activate) {
+        this._showImgManagerModule = activate;
+        if (activate) {
+            this.displaySmall();
+        }
+    }
+    get showImgManagerModule() {
+        return this._multipleImgMode;
+    }
+    onKeydownHandler(event) {
+        if (this.stateDisplayed && this.stateDisplayed !== 'window') {
+            this.onClose();
+        }
+    }
+    ngOnInit() {
+        this.externalConfigService.setExternalConfig(this.externalConfig);
+        this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
+        this.imgSelectionService.initImgSelectedList(null);
+        this.selectImgEvent = this.imgSelectionService.getImgSelectionChange().subscribe(imgSlection => {
+            if (imgSlection && imgSlection.length && this.checkCloseImgManager()) {
+                // Close the img manager
+                this.onClose();
+            }
+        });
+        this.checkUserDisplayPreference();
+        // Use when the img manager is full open or open in page. This display the user preference display, mosaic or list.
+        this.listDisplayedEvent = this.imgEventService.getlistDisplayedChange().subscribe(value => this.listDisplayed = value);
+        // Register dom service to listen on all event on the body to avoid having multiple instance of the same thing every where
+        this.domService.setDocumentEventListener();
+    }
+    checkUserDisplayPreference() {
+        if (this.stateDisplayed === 'window' || this.stateDisplayed === 'full') {
+            this.listDisplayed = this.userSettingsService.getUserDisplayPreference();
+        }
+    }
+    setCurrentTab(event) {
+        if (event === 'img-edition') {
+            this.hideTab = true;
+            return;
+        }
+        this.hideTab = false;
+    }
+    displaySmall() {
+        if (this.stateDisplayed !== 'window') {
+            setTimeout(() => {
+                this.stateDisplayed = 'small';
+                this.addBodyBottomPaddingForModule();
+            }, 10);
+        }
+    }
+    openSmall() {
+        this.stateDisplayed = 'small';
+        this.setBodyMainScroll();
+        this.listDisplayed = false;
+    }
+    openFull() {
+        this.stateDisplayed = 'full';
+        this.checkUserDisplayPreference();
+        this.hideBodyMainScroll();
+    }
+    onClose() {
+        this.stateDisplayed = 'closed';
+        this.hideTab = false;
+        this.setBodyMainScroll();
+        this.removeBodyBottomPaddingForModule();
+        // Wait the end of the closing annimation
+        setTimeout(() => {
+            this.imgManagerClosed.emit();
+        }, 250);
+    }
+    onImgManagerClosed() {
+        this.onClose();
+    }
+    /**
+     * Close the img manager after one img is selected, if not in multiple img to select
+     */
+    checkCloseImgManager() {
+        return !this.multipleImgMode && this.stateDisplayed !== 'window' ? true : false;
+    }
+    hideBodyMainScroll() {
+        const html = document.getElementsByTagName('html')[0];
+        if (!this.overflowHTML) {
+            this.overflowHTML = html.style.overflowY;
+        }
+        html.style.overflowY = "hidden";
+    }
+    setBodyMainScroll() {
+        const html = document.getElementsByTagName('html')[0];
+        html.style.overflowY = this.overflowHTML ? this.overflowHTML : "scroll";
+    }
+    addBodyBottomPaddingForModule() {
+        const body = document.getElementsByTagName('body')[0];
+        this.bodyPadding = this.bodyPadding ? parseInt(body.style.paddingBottom) : 0;
+        body.style.paddingBottom = this.bodyPadding + 300 + 'px';
+    }
+    removeBodyBottomPaddingForModule() {
+        if (typeof this.bodyPadding !== 'undefined') {
+            const body = document.getElementsByTagName('body')[0];
+            body.style.paddingBottom = this.bodyPadding + 'px';
+            this.bodyPadding = 0;
+        }
+    }
+    changeDisplayTab() {
+        this.stateDisplayed = 'full';
+    }
+    ngOnDestroy() {
+        this.selectImgEvent.unsubscribe();
+        this.canvaService.expectedImgSizesChange(null);
+        this.listDisplayedEvent.unsubscribe();
+    }
+}
+WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: ImgManagerConfigService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component });
+WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", externalConfig: "externalConfig", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed" }, 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'\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><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: "14.1.3", ngImport: i0, type: WzImgManagerComponent, decorators: [{
+            type: Component,
+            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'\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><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: ImgManagerConfigService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }]; }, propDecorators: { stateDisplayed: [{
+                type: Input
+            }], showSelection: [{
+                type: Input
+            }], externalConfig: [{
+                type: Input
+            }], forceToOpenCanva: [{
+                type: Input
+            }], imgManagerClosed: [{
+                type: Output
+            }], multipleImgMode: [{
+                type: Input
+            }], showImgManagerModule: [{
+                type: Input
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+;
+const components = [
+    WzImgManagerComponent,
+    ImgTabsComponent,
+    ImgUploadComponent,
+    PexelLibComponent,
+    ImgCardComponent,
+    UploadListComponent,
+    ImgEditorComponent,
+    EditorInfoSectionComponent,
+    CanvaBtnComponent,
+    ImgSelectionComponent,
+    LoaderComponent,
+    DropdownComponent,
+    CropperComponent,
+    ImagesViewComponent,
+    MosaicViewComponent,
+    TableViewComponent,
+    TableComponent,
+    InputSearchComponent,
+    PaginationComponent,
+    CheckboxComponent,
+    AlertComponent,
+    PageSelectorComponent,
+    SelectComponent
+];
+const directives = [
+    DragDropDirective,
+    LoadingDirective,
+    AutoHideDirective,
+    CopyClipboardDirective,
+    TableColumn,
+    CheckBoxRow,
+    TableColumnHeader,
+    TableRow,
+    AbstractDebounceDirective,
+    DebounceKeyupDirective,
+    ZindexToggleDirective
+];
+const pipes = [
+    PagniationArrayTotalPages,
+    PagniationIsLastPage,
+    PagniationText,
+    ImageSrcPipe,
+    NumberToArray,
+    LargeNumberOfPagePipe,
+    SelectFiltersPipe
+];
+class WzImgManagerModule {
+}
+WzImgManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: WzImgManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WzImgManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: WzImgManagerModule, declarations: [WzImgManagerComponent,
+        ImgTabsComponent,
+        ImgUploadComponent,
+        PexelLibComponent,
+        ImgCardComponent,
+        UploadListComponent,
+        ImgEditorComponent,
+        EditorInfoSectionComponent,
+        CanvaBtnComponent,
+        ImgSelectionComponent,
+        LoaderComponent,
+        DropdownComponent,
+        CropperComponent,
+        ImagesViewComponent,
+        MosaicViewComponent,
+        TableViewComponent,
+        TableComponent,
+        InputSearchComponent,
+        PaginationComponent,
+        CheckboxComponent,
+        AlertComponent,
+        PageSelectorComponent,
+        SelectComponent, DragDropDirective,
+        LoadingDirective,
+        AutoHideDirective,
+        CopyClipboardDirective,
+        TableColumn,
+        CheckBoxRow,
+        TableColumnHeader,
+        TableRow,
+        AbstractDebounceDirective,
+        DebounceKeyupDirective,
+        ZindexToggleDirective, PagniationArrayTotalPages,
+        PagniationIsLastPage,
+        PagniationText,
+        ImageSrcPipe,
+        NumberToArray,
+        LargeNumberOfPagePipe,
+        SelectFiltersPipe], imports: [CommonModule,
+        HttpClientModule,
+        FormsModule,
+        NgScrollbarModule,
+        NgScrollbarReachedModule,
+        NwbAllModule,
+        ImageCropperModule,
+        CdkTableModule,
+        DragDropModule,
+        TranslateModule,
+        PerfectScrollbarModule], exports: [WzImgManagerComponent] });
+WzImgManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: WzImgManagerModule, imports: [CommonModule,
+        HttpClientModule,
+        FormsModule,
+        NgScrollbarModule,
+        NgScrollbarReachedModule,
+        NwbAllModule,
+        ImageCropperModule,
+        CdkTableModule,
+        DragDropModule,
+        TranslateModule,
+        PerfectScrollbarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: WzImgManagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...components,
+                        ...directives,
+                        ...pipes
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        FormsModule,
+                        NgScrollbarModule,
+                        NgScrollbarReachedModule,
+                        NwbAllModule,
+                        ImageCropperModule,
+                        CdkTableModule,
+                        DragDropModule,
+                        TranslateModule,
+                        PerfectScrollbarModule
+                    ],
+                    providers: [],
+                    exports: [
+                        WzImgManagerComponent
+                    ]
+                }]
+        }] });
+
+class CanvaButtonApi {
+}
+;
+
+class ImgApiDto {
+    constructor() {
+        this.image_manager_route = '';
+        this.pexels_route = '';
+        this.canva_url = '';
+        this.assets_route = 'assets/img-manager/';
+    }
+}
+
+class ImgCDNConfigDTO {
+    constructor() {
+        this.url_raw_image = '';
+        this.url_100_image = '';
+        this.url_200_image = '';
+        this.url_400_image = '';
+        this.url_800_image = '';
+    }
+}
+
+/*
+ * Public API Surface of wz-img-manager
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
+//# sourceMappingURL=wizishop-img-manager.mjs.map