@wizishop/img-manager 18.2.3-beta → 19.0.0-beta.1

package/fesm2022/wizishop-img-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, EventEmitter, Input, Output, Directive, Pipe, Component, ViewEncapsulation, HostListener, HostBinding, ViewChild, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, tap, Observable, merge, debounceTime, distinctUntilChanged, switchMap, map, forkJoin, take as take$1, startWith, shareReplay, combineLatest } from 'rxjs';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -17,19 +17,21 @@ import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i3$2 from '@angular/router';
 import * as i8 from 'ngx-scrollbar/reached-event';
-import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
+import { NgScrollReached } from 'ngx-scrollbar/reached-event';
+import * as i1$1 from '@angular/platform-browser';
 import * as i4$1 from 'ngx-image-cropper';
-import { ImageCropperModule } from 'ngx-image-cropper';
+import { ImageCropperComponent } 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 { CdkTableModule } from '@angular/cdk/table';
 
 class ImgSelectionService {
-    multipleImgMode = false;
-    imgSelection$ = new BehaviorSubject([]);
-    imgSelectedListLoading$ = new BehaviorSubject(false);
-    constructor() { }
+    constructor() {
+        this.multipleImgMode = false;
+        this.imgSelection$ = new BehaviorSubject([]);
+        this.imgSelectedListLoading$ = new BehaviorSubject(false);
+    }
     getImgSelection() {
         return this.imgSelection$.getValue();
     }
@@ -90,15 +92,17 @@ class ImgSelectionService {
         imgSelectedList.splice(toIndex, 0, imgSelectedList.splice(fromIndex, 1)[0]);
         this.imgSelection$.next(imgSelectedList);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgSelectionService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class UserSettingsService {
-    userdisplayPreference = 'WzImgManagerListDisplayed';
+    constructor() {
+        this.userdisplayPreference = 'WzImgManagerListDisplayed';
+    }
     /**
      * true : display list
      * false : display mosaic
@@ -111,25 +115,22 @@ class UserSettingsService {
         const value = localStorage.getItem(this.userdisplayPreference);
         return value == 'true';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UserSettingsService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UserSettingsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UserSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UserSettingsService, decorators: [{
             type: Injectable
         }] });
 
 class AlertService {
-    nwbAlertService;
-    translateService;
-    actionMsg = 'ImgManager.alert.action';
-    alertConfig = {
-        message: '',
-        duration: 5000
-    };
-    alertRefComponent;
     constructor(nwbAlertService, translateService) {
         this.nwbAlertService = nwbAlertService;
         this.translateService = translateService;
+        this.actionMsg = 'ImgManager.alert.action';
+        this.alertConfig = {
+            message: '',
+            duration: 5000
+        };
     }
     openAlert(msgKey) {
         this.closePreviousAlert();
@@ -158,24 +159,33 @@ class AlertService {
         const isErrorMsg = /error/i.test(msgKey);
         this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertService, deps: [{ token: i1.NwbAlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NwbAlertService }, { type: i3.TranslateService }] });
 
 class ImgEventService {
-    imgRemoved$ = new BehaviorSubject(undefined);
-    imgToEditEvent = new Subject();
-    imgAdded = new Subject();
-    listDisplayedChange = new Subject();
+    constructor() {
+        this.imgRemoved$ = new BehaviorSubject(undefined);
+        this.imgToEditEvent = new Subject();
+        this.imgToVideoEvent = new Subject();
+        this.imgAdded = new Subject();
+        this.listDisplayedChange = new Subject();
+    }
     emitImgToEdit(imgToEdit) {
         this.imgToEditEvent.next(imgToEdit);
     }
+    emitImgToVideo(imgToEdit) {
+        this.imgToVideoEvent.next(imgToEdit);
+    }
     getImgToEditEventListener() {
         return this.imgToEditEvent.asObservable();
     }
+    getImgToVideoEventListener() {
+        return this.imgToVideoEvent.asObservable();
+    }
     emitImgAdded(id_file) {
         this.imgAdded.next(id_file);
     }
@@ -188,44 +198,40 @@ class ImgEventService {
     getlistDisplayedChange() {
         return this.listDisplayedChange.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgEventService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgEventService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgEventService, decorators: [{
             type: Injectable
         }] });
 
 class ApiService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ApiService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ApiService, decorators: [{
             type: Injectable
         }] });
 
 class UploadService {
-    imageUploaded$ = new Subject();
-    apiService = inject(ApiService);
+    constructor() {
+        this.imageUploaded$ = new Subject();
+        this.apiService = inject(ApiService);
+    }
     uploadFile(formData) {
         return this.apiService.uploadFile(formData).pipe(tap((img) => this.imageUploaded$.next(img)));
     }
     uploadFileByUrl(url, fileName) {
         return this.apiService.uploadFileByUrl(url, fileName).pipe(tap((img) => this.imageUploaded$.next(img)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UploadService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable
         }] });
 
 class CanvaService {
-    wzImgEventService;
-    alertService;
-    translateService;
-    uploadService;
-    apiService;
-    canvaApi; // Object use to manage the canva api
     get canvaApiURL() {
         return this.apiService.CONFIG.canva_url;
     }
@@ -233,20 +239,20 @@ class CanvaService {
     get canvaApiKey() {
         return this.apiService.CONFIG.canva_token;
     }
-    imgLoading = false;
-    uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
-    successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
-    errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
-    errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
-    forceToOpenCanva = false;
-    bindExpectedImgSizeEvent = new BehaviorSubject(null);
-    bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
     constructor(wzImgEventService, alertService, translateService, uploadService, apiService) {
         this.wzImgEventService = wzImgEventService;
         this.alertService = alertService;
         this.translateService = translateService;
         this.uploadService = uploadService;
         this.apiService = apiService;
+        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();
     }
     getCanvaLogo() {
         return this.apiService.CONFIG.assets_route + "canva/icon_canva.svg";
@@ -363,18 +369,20 @@ class CanvaService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CanvaService, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CanvaService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CanvaService, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CanvaService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CanvaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CanvaService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: ApiService }] });
 
 class DomService {
-    documentEventSource = new Subject();
-    documentEventDone = this.documentEventSource.asObservable();
-    documentScrollSource = new Subject();
-    documentScrollDone = this.documentScrollSource.asObservable();
+    constructor() {
+        this.documentEventSource = new Subject();
+        this.documentEventDone = this.documentEventSource.asObservable();
+        this.documentScrollSource = new Subject();
+        this.documentScrollDone = this.documentScrollSource.asObservable();
+    }
     documentEvent() {
         return this.documentEventDone;
     }
@@ -391,10 +399,10 @@ class DomService {
             this.documentScrollSource.next(window);
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DomService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DomService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DomService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DomService, decorators: [{
             type: Injectable
         }] });
 
@@ -406,10 +414,10 @@ class IconService {
         link.crossOrigin = "anonymous";
         document.getElementsByTagName('head')[0].appendChild(link);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconService, providedIn: 'root' });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -426,51 +434,64 @@ const easeInOut = // the fade-in/fade-out animation.
 ]);
 
 class ImgManagerService {
-    uploadService = inject(UploadService);
-    params = new HttpParams().set("limit", "20").set("page", "1");
-    // Display the img selection
-    pageFicheProductConfig = {
-        stateDisplayed: 'closed',
-        multipleImgMode: true,
-        showImgManagerModule: true,
-        showSelection: true,
-        displayBtn: true,
-        pageficheProduct: true
-    };
-    angularFicheProductConfig = {
-        stateDisplayed: 'closed',
-        multipleImgMode: true,
-        showImgManagerModule: true,
-        showSelection: true,
-        displayBtn: false,
-        pageficheProduct: true
-    };
-    wiziblockConfig = {
-        stateDisplayed: 'closed',
-        multipleImgMode: false,
-        showImgManagerModule: true,
-        showSelection: false,
-        displayBtn: false
-    };
-    simpleWithButtonOpenerConfig = {
-        stateDisplayed: 'closed',
-        multipleImgMode: false,
-        showImgManagerModule: true,
-        showSelection: false,
-        displayBtn: true
-    };
-    fullWindowConfig = {
-        stateDisplayed: 'window',
-        multipleImgMode: false,
-        showImgManagerModule: true,
-        showSelection: false,
-        displayBtn: false
-    };
-    apiService = inject(ApiService);
-    destroy$ = new Subject();
+    constructor() {
+        this.uploadService = inject(UploadService);
+        this.ngZone = inject(NgZone); // Injecter NgZone
+        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
+        };
+        this.apiService = inject(ApiService);
+        this.destroy$ = new Subject();
+        this.searchImagesParameters$ = new BehaviorSubject(this.DEFAULT_SEARCH_PARAMS);
+        this.refreshImageList$ = new Subject();
+        this.resetImageList$ = merge(this.uploadService.imageUploaded$);
+        this.isLoading$ = new BehaviorSubject(true);
+        this.fetchImagesList$ = merge(this.searchImagesParameters$.pipe(debounceTime(800), distinctUntilChanged()), this.refreshImageList$.pipe(switchMap(() => this.searchImagesParameters$))).pipe(map((params) => this.getHttpParameters(params)), tap(() => this.isLoading$.next(true)), switchMap((params) => forkJoin({
+            imageList: this.apiService.getShopImgList(params).pipe(take$1(1)),
+            imageTotal: this.apiService.getShopTotalImgList(params).pipe(take$1(1))
+        })), tap(() => this.isLoading$.next(false)));
+        this.imageList$ = merge(this.fetchImagesList$, this.resetImageList$.pipe(tap(() => this.isLoading$.next(true)), tap(() => this.searchImagesParameters$.next(this.DEFAULT_SEARCH_PARAMS)), map(() => this.DEFAULT_DATA_LIST))).pipe(startWith(this.DEFAULT_DATA_LIST), shareReplay({ bufferSize: 1, refCount: true }));
+    }
     get DEFAULT_SEARCH_PARAMS() {
         return {
             limit: '30',
+            type: '',
             page: '1',
         };
     }
@@ -486,15 +507,6 @@ class ImgManagerService {
             imageTotal: 0
         };
     }
-    searchImagesParameters$ = new BehaviorSubject(this.DEFAULT_SEARCH_PARAMS);
-    refreshImageList$ = new Subject();
-    resetImageList$ = merge(this.uploadService.imageUploaded$);
-    isLoading$ = new BehaviorSubject(true);
-    fetchImagesList$ = merge(this.searchImagesParameters$.pipe(debounceTime(800), distinctUntilChanged()), this.refreshImageList$.pipe(switchMap(() => this.searchImagesParameters$))).pipe(map((params) => this.getHttpParameters(params)), tap(() => this.isLoading$.next(true)), switchMap((params) => forkJoin({
-        imageList: this.apiService.getShopImgList(params).pipe(take$1(1)),
-        imageTotal: this.apiService.getShopTotalImgList(params).pipe(take$1(1))
-    })), tap(() => this.isLoading$.next(false)));
-    imageList$ = merge(this.fetchImagesList$, this.resetImageList$.pipe(tap(() => this.isLoading$.next(true)), tap(() => this.searchImagesParameters$.next(this.DEFAULT_SEARCH_PARAMS)), map(() => this.DEFAULT_DATA_LIST))).pipe(startWith(this.DEFAULT_DATA_LIST), shareReplay(1));
     getHttpParameters(params) {
         let parameters = new HttpParams();
         parameters = parameters.set('id_file:sort', 'desc');
@@ -543,32 +555,74 @@ class ImgManagerService {
         ];
     }
     ngOnDestroy() {
-        this.destroy$.next();
+        this.destroy$.next(null);
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgManagerService });
+    copyToClipboard(url) {
+        return new Promise((resolve) => {
+            // Vérifier si l'API Clipboard est disponible
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(url)
+                    .then(() => resolve(true))
+                    .catch((error) => {
+                    console.error('Failed to copy to clipboard:', error);
+                    resolve(this.fallbackCopyToClipboard(url));
+                });
+            }
+            else {
+                // Fallback pour les navigateurs qui ne supportent pas l'API Clipboard
+                resolve(this.fallbackCopyToClipboard(url));
+            }
+        });
+    }
+    fallbackCopyToClipboard(text) {
+        let success = false;
+        // Exécuter en dehors du cycle de détection d'Angular
+        this.ngZone.runOutsideAngular(() => {
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            textArea.style.top = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            try {
+                success = document.execCommand('copy');
+            }
+            catch (error) {
+                console.error('Fallback: Failed to copy to clipboard:', error);
+                success = false;
+            }
+            finally {
+                document.body.removeChild(textArea);
+            }
+        });
+        return success;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgManagerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgManagerService, decorators: [{
             type: Injectable
         }] });
 
 class RenamePictureService {
-    apiService;
-    alertService;
-    imgManagerService;
-    picturesList = [];
-    errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
-    msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
-    msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
     constructor(apiService, alertService, imgManagerService) {
         this.apiService = apiService;
         this.alertService = alertService;
         this.imgManagerService = imgManagerService;
+        this.picturesList = [];
+        this.errorRenameImg = 'ImgManager.ImgList.errorRenameImg';
+        this.msgSavingImgName = 'ImgManager.ImgLib.savingImgName';
+        this.msgImgNameSaved = 'ImgManager.ImgLib.imgNameSaved';
     }
     setPicturesList(picturesList) {
         this.picturesList = picturesList;
     }
+    changeVideoLink(videoLink, idFile) {
+        return this.apiService.changeVideoLink(videoLink, idFile).pipe(tap(() => this.imgManagerService.refreshImageList$.next()));
+    }
     renamePicture(pictureNameUpdate) {
         const picture = this.getPictureById(pictureNameUpdate.id);
         if (!picture) {
@@ -603,15 +657,17 @@ class RenamePictureService {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RenamePictureService, deps: [{ token: ApiService }, { token: AlertService }, { token: ImgManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RenamePictureService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RenamePictureService, deps: [{ token: ApiService }, { token: AlertService }, { token: ImgManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RenamePictureService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RenamePictureService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RenamePictureService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ApiService }, { type: AlertService }, { type: ImgManagerService }] });
 
 class ImgCDNService {
-    imgCDNConfig = inject(ApiService).IMG_SIZE;
+    constructor() {
+        this.imgCDNConfig = inject(ApiService).IMG_SIZE;
+    }
     getUrlImg(size) {
         const urlProperty = Object.keys(this.imgCDNConfig)
             .filter(url => new RegExp(size, 'i').test(url))[0];
@@ -621,10 +677,10 @@ class ImgCDNService {
         return Object.keys(this.imgCDNConfig)
             .map(elem => elem.match(/_(\w+)_/)[1]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgCDNService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgCDNService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgCDNService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgCDNService, decorators: [{
             type: Injectable
         }] });
 
@@ -632,45 +688,14 @@ class ImageNotFoundService {
     imageNotFound($url) {
         return;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImageNotFoundService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImageNotFoundService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImageNotFoundService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImageNotFoundService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImageNotFoundService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImageNotFoundService, decorators: [{
             type: Injectable
         }] });
 
 class ImagesActionHandler {
-    imgManager;
-    imgSelectionService;
-    http;
-    imgCDNService;
-    imgEventCardService;
-    alertService;
-    translateService;
-    apiService;
-    picturesList = [];
-    picturesListChange = new EventEmitter();
-    tableFilters = {
-        sort: undefined,
-        order: undefined,
-        searchValue: '',
-        totalItems: 0,
-        itemsPerPage: 30,
-        currentPage: 1
-    };
-    displayPexelsResults = false;
-    disable = false;
-    disableChange = new EventEmitter();
-    filtersChange = new EventEmitter();
-    pictureNameChange = new EventEmitter();
-    isLoading = false;
-    stateDisplayed;
-    previousName; // Use to save the previous picture name, when a user change his name
-    fakeImgRoute;
-    getDataAPISub;
-    errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
-    errorAlreadyUsedImg = 'ImgManager.ImgList.errorAlreadyUsed';
-    imageNotFoundService = inject(ImageNotFoundService);
     constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
         this.imgManager = imgManager;
         this.imgSelectionService = imgSelectionService;
@@ -680,9 +705,27 @@ class ImagesActionHandler {
         this.alertService = alertService;
         this.translateService = translateService;
         this.apiService = apiService;
-    }
-    ngOnInit() {
+        this.picturesList = [];
+        this.picturesListChange = new EventEmitter();
+        this.tableFilters = {
+            sort: undefined,
+            order: undefined,
+            searchValue: '',
+            totalItems: 0,
+            type: '',
+            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.fakeImgRoute = this.apiService.CONFIG.assets_route + 'img/fake.png';
+        this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
+        this.errorAlreadyUsedImg = 'ImgManager.ImgList.errorAlreadyUsed';
+        this.imageNotFoundService = inject(ImageNotFoundService);
     }
     /** Event emit when the header checkbox is checked */
     onToggleAllCheckBoxRow(event) {
@@ -705,6 +748,20 @@ class ImagesActionHandler {
     onEdit(picture) {
         this.imgEventCardService.emitImgToEdit(picture);
     }
+    redirectToVideo(picture) {
+        this.imgEventCardService.emitImgToVideo(picture);
+    }
+    copyLink(file_name) {
+        const url = this.imgCDNService.getUrlImg('raw') + file_name;
+        this.imgManager.copyToClipboard(url).then(success => {
+            if (success) {
+                this.alertService.openAlert('ImgManager.ImgList.linkCopied');
+            }
+            else {
+                this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
+            }
+        });
+    }
     onToggleSelectImg(index) {
         if (this.disable || this.stateDisplayed === 'window') {
             return;
@@ -752,7 +809,7 @@ class ImagesActionHandler {
     downloadUrl(url, fileName) {
         const a = document.createElement('a');
         a.href = url;
-        a.download = fileName;
+        a.download = fileName.replace(/[.]/g, "");
         a.click();
     }
     ngDestroy() {
@@ -760,10 +817,10 @@ class ImagesActionHandler {
             this.getDataAPISub.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImagesActionHandler, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagesActionHandler, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ImagesActionHandler, isStandalone: true, 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: "18.2.5", ngImport: i0, type: ImagesActionHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagesActionHandler, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }], propDecorators: { picturesList: [{
                 type: Input
@@ -788,10 +845,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class LoadingDirective {
-    element;
-    currentLoading = 0;
-    interval = null;
     constructor(el) {
+        this.currentLoading = 0;
+        this.interval = null;
         this.element = el;
         this.launchLoading();
     }
@@ -818,18 +874,18 @@ class LoadingDirective {
             this.interval = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: LoadingDirective, selector: "[btnLoadingAnim]", ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: LoadingDirective, isStandalone: false, selector: "[btnLoadingAnim]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LoadingDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[btnLoadingAnim]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class ImageSrcPipe {
-    imgCDNService;
     constructor(imgCDNService) {
         this.imgCDNService = imgCDNService;
     }
@@ -843,28 +899,25 @@ class ImageSrcPipe {
         }
         return route + pictureName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImageSrcPipe, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ImageSrcPipe, name: "imgSrc" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImageSrcPipe, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ImageSrcPipe, isStandalone: false, name: "imgSrc" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImageSrcPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImageSrcPipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'imgSrc'
                 }]
         }], ctorParameters: () => [{ type: ImgCDNService }] });
 
 class ImgCardComponent extends ImagesActionHandler {
-    tabDisplayed;
-    fullSize;
-    picture;
-    index;
-    focusInput = false;
-    toggleImgSelected = new EventEmitter();
-    switchDisplayWindow = new EventEmitter();
-    isUploadSection = false;
-    activeConfirmDelete = false;
     constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
         super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
+        this.focusInput = false;
+        this.toggleImgSelected = new EventEmitter();
+        this.switchDisplayWindow = new EventEmitter();
+        this.isUploadSection = false;
+        this.activeConfirmDelete = false;
     }
     ngOnInit() {
         this.isUploadSection = this.tabDisplayed === 'img-upload';
@@ -875,16 +928,16 @@ class ImgCardComponent extends ImagesActionHandler {
     onToggleImgSelected() {
         this.toggleImgSelected.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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 }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImgCardComponent, isStandalone: false, 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 class=\"hover-img-size\">\n          <span>{{picture.raw_height}}x{{picture.raw_width}}</span>\n        </div>\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n            <ng-container *ngIf=\"!picture.video_link\">\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</span></button>\n            </ng-container>\n            <ng-container *ngIf=\"picture.video_link\">\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.EditVideo' | translate }}</span></button>\n            </ng-container>\n              <button type=\"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 type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid 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=\"fa-solid 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          <div *ngIf=\"picture.video_link\" class=\"img-card__container__video\">\n            <i class=\"fa-solid fa-play\"></i>\n            <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\n          </div>\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          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
             easeInOut
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-card', animations: [
+            args: [{ standalone: false, selector: 'img-card', animations: [
                         easeInOut
-                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\r\n  <div class=\"img-card\">\r\n      <div class=\"img-card__container\"\r\n      [ngClass]=\"{\r\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\r\n          'imgSelected': picture.selected,\r\n          'deletion': picture.deleted}\">\r\n          <img\r\n            class=\"img-card__container__img\"\r\n            [src]=\"picture.file_name | imgSrc : '400'\"\r\n            [alt]=\"picture.display_name\"\r\n            (click)=\"onToggleImgSelected()\"\r\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n          />\r\n          <div\r\n            class=\"img-card__container__config\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\r\n            >\r\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\r\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\r\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\r\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\r\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\r\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\r\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\r\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\r\n              </button>\r\n          </div>\r\n          <div\r\n            class=\"img-card__container__config img-card__container__config--small\"\r\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\r\n          >\r\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\r\n          </div>\r\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\r\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\r\n            <div>\r\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\r\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\r\n            <i class=\"far fa-check\"></i>\r\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"picture.imgNotLoaded\"\r\n            class=\"img-card__container__overlay\"\r\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\r\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\r\n          </div>\r\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\r\n\r\n      </div>\r\n      <div\r\n        class=\"img-card__nameContainer\"\r\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"wzImgMngInput img-card__nameContainer__name\"\r\n          [(ngModel)]=\"picture.display_name\"\r\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\r\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\r\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\r\n          (blur)=\"focusInput = false;\"\r\n        >\r\n        <span>{{picture.display_name}}</span>\r\n      </div>\r\n\r\n  </div>\r\n</div>\r\n" }]
+                    ], 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 class=\"hover-img-size\">\n          <span>{{picture.raw_height}}x{{picture.raw_width}}</span>\n        </div>\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n            <ng-container *ngIf=\"!picture.video_link\">\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</span></button>\n            </ng-container>\n            <ng-container *ngIf=\"picture.video_link\">\n              <button type=\"button\" class=\"size\" (click)=\"redirectToVideo(picture)\"><i class=\"fa-solid fa-play\"></i><span>{{ 'ImgManager.ImgEditor.EditVideo' | translate }}</span></button>\n            </ng-container>\n              <button type=\"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 type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid 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=\"fa-solid 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          <div *ngIf=\"picture.video_link\" class=\"img-card__container__video\">\n            <i class=\"fa-solid fa-play\"></i>\n            <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\n          </div>\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          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\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: () => [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }], propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
@@ -900,18 +953,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class UploadListComponent {
-    imgSelectionService;
-    renamePictureService;
-    picturesList = [];
-    imgSelectionChange;
-    selectImgEvent;
-    stateDisplayed;
-    tabDisplayed;
-    multipleImgMode = false;
-    switchDisplayWindow = new EventEmitter();
     constructor(imgSelectionService, renamePictureService) {
         this.imgSelectionService = imgSelectionService;
         this.renamePictureService = renamePictureService;
+        this.picturesList = [];
+        this.multipleImgMode = false;
+        this.switchDisplayWindow = new EventEmitter();
     }
     ngOnInit() {
         this.setEvents();
@@ -953,16 +1000,16 @@ class UploadListComponent {
     ngOnDestroy() {
         this.imgSelectionChange.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UploadListComponent, deps: [{ token: ImgSelectionService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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'\">\r\n\r\n    <ng-scrollbar\r\n        class=\"upload-list__scroll\"\r\n        [ngClass]=\"{\r\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\r\n    >\r\n        <div class=\"upload-list__box\">\r\n            <div class=\"upload-list__box__container\">\r\n                <div>\r\n                    <p class=\"mainColor\">\r\n                        {{ picturesList? picturesList.length : '' }}\r\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\r\n                    </p>\r\n                    <div class=\"dropdown is-hoverable\">\r\n                        <div class=\"dropdown-trigger\">\r\n                            <i\r\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\r\n                                class=\"fa-solid fa-info-circle\">\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\r\n                          <div class=\"dropdown-content\">\r\n                            <div class=\"dropdown-item\">\r\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\r\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"upload-list__box__cards\">\r\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\r\n                    <img-card\r\n                        [picture]=\"picture\"\r\n                        [stateDisplayed]=\"stateDisplayed\"\r\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\r\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\r\n                        (pictureNameChange)=\"onRenamePicture($event)\"\r\n                    ></img-card>\r\n                    <div class=\"upload-list__box__cards__card__btnBox\">\r\n                        <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-scrollbar>\r\n</div>\r\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: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadListComponent, deps: [{ token: ImgSelectionService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: UploadListComponent, isStandalone: false, 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    <ng-scrollbar\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=\"fa-solid 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 type=\"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    </ng-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: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
             easeInOut
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: UploadListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UploadListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upload-list', animations: [
+            args: [{ standalone: false, selector: 'upload-list', animations: [
                         easeInOut
-                    ], template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n\r\n    <ng-scrollbar\r\n        class=\"upload-list__scroll\"\r\n        [ngClass]=\"{\r\n            'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'upload-list__scroll--window': stateDisplayed === 'window'}\"\r\n    >\r\n        <div class=\"upload-list__box\">\r\n            <div class=\"upload-list__box__container\">\r\n                <div>\r\n                    <p class=\"mainColor\">\r\n                        {{ picturesList? picturesList.length : '' }}\r\n                        <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\r\n                    </p>\r\n                    <div class=\"dropdown is-hoverable\">\r\n                        <div class=\"dropdown-trigger\">\r\n                            <i\r\n                                aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\r\n                                class=\"fa-solid fa-info-circle\">\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\r\n                          <div class=\"dropdown-content\">\r\n                            <div class=\"dropdown-item\">\r\n                              <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\r\n                              <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                            <div class=\"dropdown-item\">\r\n                                <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\r\n                                <p><i class=\"fal fa-check\"></i> 100%</p>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"upload-list__box__cards\">\r\n                <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\r\n                    <img-card\r\n                        [picture]=\"picture\"\r\n                        [stateDisplayed]=\"stateDisplayed\"\r\n                        (toggleImgSelected)=\"onToggleSelectImg(index)\"\r\n                        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\r\n                        (pictureNameChange)=\"onRenamePicture($event)\"\r\n                    ></img-card>\r\n                    <div class=\"upload-list__box__cards__card__btnBox\">\r\n                        <button type=\"button\" class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\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=\"fa-solid 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 type=\"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    </ng-scrollbar>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ImgSelectionService }, { type: RenamePictureService }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], tabDisplayed: [{
@@ -974,15 +1021,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class LoaderComponent {
-    text;
-    small = false;
-    position;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    constructor() {
+        this.small = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: LoaderComponent, isStandalone: false, 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: "18.2.5", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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: [{
@@ -992,9 +1039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class DragDropDirective {
-    onFileDropped = new EventEmitter();
-    background = '#fff';
-    opacity = '1';
+    constructor() {
+        this.onFileDropped = new EventEmitter();
+        this.background = '#fff';
+        this.opacity = '1';
+    }
     onDragOver(evt) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -1017,12 +1066,13 @@ class DragDropDirective {
             this.onFileDropped.emit(files);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DragDropDirective, isStandalone: false, 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: "18.2.5", ngImport: i0, type: DragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragDropDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[appDragDrop]'
                 }]
         }], propDecorators: { onFileDropped: [{
@@ -1045,25 +1095,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class ImgUploadComponent {
-    alertService;
-    apiService;
-    translateService;
-    uploadService;
-    files = [];
-    isLoading = false;
-    assetsIcon;
-    stateDisplayed;
-    imgUploaded = new EventEmitter();
-    dragAndDropBox;
-    loadingText = 'ImgManager.ImgUpload.loading';
-    errorUploadingImg = 'ImgManager.ImgUpload.errorUploadingImg';
-    errorNotImg = 'ImgManager.ImgUpload.errorNotImg';
-    MAX_IMAGE_SIZE = 10000000; // In bytes
     constructor(alertService, apiService, translateService, uploadService) {
         this.alertService = alertService;
         this.apiService = apiService;
         this.translateService = translateService;
         this.uploadService = uploadService;
+        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();
@@ -1143,16 +1186,16 @@ class ImgUploadComponent {
     removeDragAndDropStyle() {
         this.dragAndDropBox.nativeElement.style = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgUploadComponent, deps: [{ token: AlertService }, { token: ApiService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ImgUploadComponent, selector: "img-upload", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { imgUploaded: "imgUploaded" }, viewQueries: [{ propertyName: "dragAndDropBox", first: true, predicate: ["dragAndDropBox"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"img-upload has-text-centered\"\r\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\r\n  (click)=\"fileInput.click()\"\r\n  appDragDrop\r\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\r\n  #dragAndDropBox\r\n  [@easeInOut]=\"'in'\"\r\n>\r\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\r\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\r\n\r\n    <div class=\"img-upload__container__wrapper\">\r\n\r\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\r\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!isLoading\">\r\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\r\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\r\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\r\n        </div>\r\n\r\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\r\n\r\n        <div class=\"img-upload__container__text\">\r\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\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: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgUploadComponent, deps: [{ token: AlertService }, { token: ApiService }, { token: i3.TranslateService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImgUploadComponent, isStandalone: false, 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: i3.TranslatePipe, name: "translate" }], animations: [
             easeInOut
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-upload', animations: [
+            args: [{ standalone: false, selector: 'img-upload', animations: [
                         easeInOut
-                    ], template: "<div\r\n  class=\"img-upload has-text-centered\"\r\n  [ngClass]=\"{'img-upload--small': stateDisplayed === 'small'}\"\r\n  (click)=\"fileInput.click()\"\r\n  appDragDrop\r\n  (onFileDropped)=\"filesChangeByDragAndDrop($any($event))\"\r\n  #dragAndDropBox\r\n  [@easeInOut]=\"'in'\"\r\n>\r\n  <input hidden type=\"file\" #fileInput (change)=\"filesChangeByClick($event)\" accept=\"image/*\" multiple >\r\n  <div class=\"img-upload__container\" [ngClass]=\"{'img-upload__container--small': stateDisplayed === 'small'}\">\r\n\r\n    <div class=\"img-upload__container__wrapper\">\r\n\r\n      <div class=\"img-upload__container__loader\" *ngIf=\"isLoading\">\r\n        <wz-loader [small]=\"true\" [position]=\"'relative'\"></wz-loader>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!isLoading\">\r\n        <div class=\"blueColor img-upload__container__dropImgIconDiv\">\r\n          <img *ngIf=\"assetsIcon\" [src]=\"assetsIcon\" alt=\"icon picture\" />\r\n          <p>{{ 'ImgManager.ImgUpload.dropImg' | translate }}</p>\r\n        </div>\r\n\r\n        <p class=\"img-upload__container__or\">{{ 'ImgManager.ImgUpload.or' | translate }}</p>\r\n\r\n        <div class=\"img-upload__container__text\">\r\n          <i class=\"fal fa-file-upload\"></i>{{ 'ImgManager.ImgUpload.selectImg' | translate }}\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], 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: () => [{ type: AlertService }, { type: ApiService }, { type: i3.TranslateService }, { type: UploadService }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgUploaded: [{
@@ -1163,9 +1206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class PexelsService {
-    http;
-    apiService;
-    translateService;
     get apiBaseUrl() {
         return this.apiService.CONFIG.pexels_route;
     }
@@ -1173,12 +1213,11 @@ class PexelsService {
     get apiKey() {
         return this.apiService.CONFIG.pexels_token;
     }
-    lang;
-    languages = { 'fr': 'fr-FR', 'en': 'en-US', 'it': 'it-IT', 'es': 'es-ES' };
     constructor(http, apiService, translateService) {
         this.http = http;
         this.apiService = apiService;
         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);
@@ -1212,10 +1251,10 @@ class PexelsService {
             return data;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PexelsService, deps: [{ token: i3$1.HttpClient }, { token: ApiService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PexelsService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PexelsService, deps: [{ token: i3$1.HttpClient }, { token: ApiService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PexelsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PexelsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PexelsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i3$1.HttpClient }, { type: ApiService }, { type: i3.TranslateService }] });
 
@@ -1233,10 +1272,6 @@ const listAnnimation = // the fade-in/fade-out animation.
 ]);
 
 class AbstractDebounceDirective {
-    debounceTime;
-    onEventChange;
-    emitEvent$;
-    subscription$;
     constructor() {
         this.debounceTime = 500;
         this.onEventChange = new EventEmitter();
@@ -1255,12 +1290,13 @@ class AbstractDebounceDirective {
         this.subscription$.next();
         this.subscription$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AbstractDebounceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: AbstractDebounceDirective, selector: "AbstractDebounceDirective", inputs: { debounceTime: "debounceTime" }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AbstractDebounceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: AbstractDebounceDirective, isStandalone: false, selector: "AbstractDebounceDirective", inputs: { debounceTime: "debounceTime" }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AbstractDebounceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AbstractDebounceDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'AbstractDebounceDirective'
                 }]
         }], ctorParameters: () => [], propDecorators: { debounceTime: [{
@@ -1277,12 +1313,13 @@ class DebounceKeyupDirective extends AbstractDebounceDirective {
         event.preventDefault();
         this.emitEvent$.next(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DebounceKeyupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]", host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DebounceKeyupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DebounceKeyupDirective, isStandalone: false, selector: "input[debounceKeyUp]", host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DebounceKeyupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DebounceKeyupDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: 'input[debounceKeyUp]'
                 }]
         }], ctorParameters: () => [], propDecorators: { onKeyUp: [{
@@ -1291,13 +1328,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class InputSearchComponent {
-    placeholder = '';
-    smallPadding = false;
-    id;
-    innerValue = '';
-    changeDebounced = new EventEmitter(); // debounced
-    onTouchedCallback = () => { };
-    onChangeCallback = () => { };
+    constructor() {
+        this.placeholder = '';
+        this.smallPadding = false;
+        this.innerValue = '';
+        this.changeDebounced = new EventEmitter(); // debounced
+        this.onTouchedCallback = () => { };
+        this.onChangeCallback = () => { };
+    }
     get value() {
         return this.innerValue;
     }
@@ -1321,12 +1359,12 @@ class InputSearchComponent {
     handleDebouncedKeyUp(event) {
         this.changeDebounced.emit(event.target.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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]" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: InputSearchComponent, isStandalone: false, 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: "18.2.5", ngImport: i0, type: InputSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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: [{
@@ -1338,18 +1376,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class AlertComponent {
-    icon = true;
-    warning = false;
-    success = false;
-    iconClass = 'fa-solid fa-info';
-    constructor() { }
+    constructor() {
+        this.icon = true;
+        this.warning = false;
+        this.success = false;
+        this.iconClass = 'fa-solid fa-info';
+    }
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AlertComponent, isStandalone: false, 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:.875rem;line-height:1.5625rem;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:.875rem;line-height:1.5625rem}\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: "18.2.5", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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:.875rem;line-height:1.5625rem;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:.875rem;line-height:1.5625rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], warning: [{
@@ -1361,33 +1400,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class PexelLibComponent {
-    wzImgLibService;
-    alertService;
-    translateService;
-    uploadService;
-    changeDetectorRef;
-    stateDisplayed;
-    searchValue = '';
-    /** Pass to true to hide search input */
-    disableSearch = false;
-    perPage = 30;
-    searchUpdated = new Subject();
-    oldSearchValue;
-    nbResult = 0;
-    wzImgLibDto;
-    currentPage = 1;
-    isLoading = true;
-    initComponent = true;
-    photosColumns = [];
-    nbColumns = 6;
-    responsiveColumns = [1250, 1050, 750, 500];
-    outerElement = null;
-    uploadingImg = 'ImgManager.PexelLib.uploadingImg';
-    untitled = 'ImgManager.PexelLib.untitled';
-    successUploadPhoto = 'ImgManager.PexelLib.successImport';
-    errorUploadPhoto = 'ImgManager.PexelLib.errorUploadPhoto';
-    errorRetrievePhotos = 'ImgManager.PexelLib.errorRetrievePhotos';
-    subs = [];
     set content(control) {
         this.outerElement = control;
     }
@@ -1397,6 +1409,25 @@ class PexelLibComponent {
         this.translateService = translateService;
         this.uploadService = uploadService;
         this.changeDetectorRef = changeDetectorRef;
+        this.searchValue = '';
+        /** Pass to true to hide search input */
+        this.disableSearch = false;
+        this.perPage = 30;
+        this.searchUpdated = new Subject();
+        this.nbResult = 0;
+        this.currentPage = 1;
+        this.isLoading = true;
+        this.initComponent = true;
+        this.photosColumns = [];
+        this.nbColumns = 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 = [];
     }
     ngAfterViewInit() {
         this.oldSearchValue = this.searchValue;
@@ -1527,18 +1558,18 @@ class PexelLibComponent {
     ngOnDestroy() {
         this.subs.forEach(sub => sub.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: PexelLibComponent, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\r\n\r\n  <ng-scrollbar\r\n    [reachedOffset]=\"300\"\r\n    class=\"pexels-lib__scroll\"\r\n    [ngClass]=\"{\r\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\r\n      'pexels-lib__scroll--noResult': !nbResult,\r\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\r\n    }\"\r\n    (reachedBottom)=\"onBottomReached()\"\r\n  >\r\n      <div\r\n        *ngIf=\"!disableSearch\"\r\n        class=\"pexels-lib__search\"\r\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\r\n        >\r\n        <wz-input-search\r\n          [(ngModel)]=\"searchValue\"\r\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n          (changeDebounced)=\"onSearchNameChanged()\"\r\n          [smallPadding]=\"stateDisplayed === 'small'\">\r\n        </wz-input-search>\r\n      </div>\r\n\r\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\r\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\r\n\r\n        <div class=\"pexels-lib__wrapper__result\">\r\n\r\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\r\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\r\n\r\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\r\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\r\n\r\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\r\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\r\n                  {{ photo.width }} x {{ photo.height}}\r\n                </span>\r\n\r\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\r\n                  <div class=\"dropdown-trigger\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\r\n                      aria-haspopup=\"true\"\r\n                      aria-controls=\"dropdown-menu\">\r\n\r\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\r\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\r\n                        <span class=\"icon is-small\">\r\n                          <i class=\"fa-solid fa-angle-up\" aria-hidden=\"true\"></i>\r\n                        </span>\r\n                        <ng-container *ngIf=\"photo.uploaded\">\r\n                          &nbsp;<i class=\"fal fa-check\"></i>\r\n                        </ng-container>\r\n                      </div>\r\n\r\n                      <ng-container *ngIf=\"photo.uploading\">\r\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\r\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\r\n                      </ng-container>\r\n\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\r\n                    <div class=\"dropdown-content\">\r\n                      <div class=\"dropdown-content__wrapper\">\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\r\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\r\n                          <i class=\"fal fa-check iPortrait\"></i>\r\n                        </div>\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\r\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\r\n                          <i class=\"fal fa-check iLandscape\"></i>\r\n                        </div>\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\r\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\r\n                          <i class=\"fal fa-check iOriginal\"></i>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n  </ng-scrollbar>\r\n\r\n  <ng-container *ngIf=\"isLoading\">\r\n    <wz-loader></wz-loader>\r\n  </ng-container>\r\n  <div\r\n    *ngIf=\"!isLoading && !nbResult\"\r\n    class=\"pexels-lib__alert\"\r\n    [@easeInOut]=\"'in'\">\r\n      <wz-alert [warning]=\"true\">\r\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\r\n      </wz-alert>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PexelLibComponent, deps: [{ token: PexelsService }, { token: AlertService }, { token: i3.TranslateService }, { token: UploadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PexelLibComponent, isStandalone: false, selector: "pexels-lib", inputs: { stateDisplayed: "stateDisplayed", searchValue: "searchValue", disableSearch: "disableSearch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["outerElement"], descendants: true }], ngImport: i0, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n      'pexels-lib__scroll--noResult': !nbResult,\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n    }\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fa-solid fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n\n  </ng-scrollbar>\n\n  <ng-container *ngIf=\"isLoading\">\n    <wz-loader></wz-loader>\n  </ng-container>\n  <div\n    *ngIf=\"!isLoading && !nbResult\"\n    class=\"pexels-lib__alert\"\n    [@easeInOut]=\"'in'\">\n      <wz-alert [warning]=\"true\">\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\n      </wz-alert>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "directive", type: i8.NgScrollReached, selector: "ng-scrollbar[reachedTop], ng-scrollbar[reachedBottom], ng-scrollbar[reachedStart], ng-scrollbar[reachedEnd]", inputs: ["reachedOffset", "reachedTopOffset", "reachedBottomOffset", "reachedStartOffset", "reachedEndOffset", "disableReached"], outputs: ["reachedTop", "reachedBottom", "reachedStart", "reachedEnd"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: AlertComponent, selector: "wz-alert", inputs: ["icon", "warning", "success", "iconClass"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
             easeInOut,
             listAnnimation
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PexelLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PexelLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pexels-lib', animations: [
+            args: [{ standalone: false, selector: 'pexels-lib', animations: [
                         easeInOut,
                         listAnnimation
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\r\n\r\n  <ng-scrollbar\r\n    [reachedOffset]=\"300\"\r\n    class=\"pexels-lib__scroll\"\r\n    [ngClass]=\"{\r\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\r\n      'pexels-lib__scroll--noResult': !nbResult,\r\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\r\n    }\"\r\n    (reachedBottom)=\"onBottomReached()\"\r\n  >\r\n      <div\r\n        *ngIf=\"!disableSearch\"\r\n        class=\"pexels-lib__search\"\r\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\r\n        >\r\n        <wz-input-search\r\n          [(ngModel)]=\"searchValue\"\r\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n          (changeDebounced)=\"onSearchNameChanged()\"\r\n          [smallPadding]=\"stateDisplayed === 'small'\">\r\n        </wz-input-search>\r\n      </div>\r\n\r\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\r\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\r\n\r\n        <div class=\"pexels-lib__wrapper__result\">\r\n\r\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\r\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\r\n\r\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\r\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\r\n\r\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\r\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\r\n                  {{ photo.width }} x {{ photo.height}}\r\n                </span>\r\n\r\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\r\n                  <div class=\"dropdown-trigger\">\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\r\n                      aria-haspopup=\"true\"\r\n                      aria-controls=\"dropdown-menu\">\r\n\r\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\r\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\r\n                        <span class=\"icon is-small\">\r\n                          <i class=\"fa-solid fa-angle-up\" aria-hidden=\"true\"></i>\r\n                        </span>\r\n                        <ng-container *ngIf=\"photo.uploaded\">\r\n                          &nbsp;<i class=\"fal fa-check\"></i>\r\n                        </ng-container>\r\n                      </div>\r\n\r\n                      <ng-container *ngIf=\"photo.uploading\">\r\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\r\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\r\n                      </ng-container>\r\n\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\r\n                    <div class=\"dropdown-content\">\r\n                      <div class=\"dropdown-content__wrapper\">\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\r\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\r\n                          <i class=\"fal fa-check iPortrait\"></i>\r\n                        </div>\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\r\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\r\n                          <i class=\"fal fa-check iLandscape\"></i>\r\n                        </div>\r\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\r\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\r\n                          <i class=\"fal fa-check iOriginal\"></i>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n  </ng-scrollbar>\r\n\r\n  <ng-container *ngIf=\"isLoading\">\r\n    <wz-loader></wz-loader>\r\n  </ng-container>\r\n  <div\r\n    *ngIf=\"!isLoading && !nbResult\"\r\n    class=\"pexels-lib__alert\"\r\n    [@easeInOut]=\"'in'\">\r\n      <wz-alert [warning]=\"true\">\r\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\r\n      </wz-alert>\r\n  </div>\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n\n  <ng-scrollbar\n    [reachedOffset]=\"300\"\n    class=\"pexels-lib__scroll\"\n    [ngClass]=\"{\n      'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small',\n      'pexels-lib__scroll--noResult': !nbResult,\n      'pexels-lib__scroll--hide': (!nbResult && disableSearch)\n    }\"\n    (reachedBottom)=\"onBottomReached()\"\n  >\n      <div\n        *ngIf=\"!disableSearch\"\n        class=\"pexels-lib__search\"\n        [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n        >\n        <wz-input-search\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n          (changeDebounced)=\"onSearchNameChanged()\"\n          [smallPadding]=\"stateDisplayed === 'small'\">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n        <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n        <div class=\"pexels-lib__wrapper__result\">\n\n          <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\"  [@listAnimation]=\"photosColumn.photos.length\">\n            <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n              <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n                  class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n              <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n                <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n                  <div class=\"dropdown-trigger\">\n                    <button\n                      type=\"button\"\n                      class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n                      aria-haspopup=\"true\"\n                      aria-controls=\"dropdown-menu\">\n\n                      <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                        <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n                        <span class=\"icon is-small\">\n                          <i class=\"fa-solid fa-angle-up\" aria-hidden=\"true\"></i>\n                        </span>\n                        <ng-container *ngIf=\"photo.uploaded\">\n                          &nbsp;<i class=\"fal fa-check\"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf=\"photo.uploading\">\n                        {{ 'ImgManager.PexelLib.importation' | translate }}\n                        <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n                    <div class=\"dropdown-content\">\n                      <div class=\"dropdown-content__wrapper\">\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n                          <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n                          <i class=\"fal fa-check iPortrait\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n                          <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n                          <i class=\"fal fa-check iLandscape\"></i>\n                        </div>\n                        <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n                          <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n                          <i class=\"fal fa-check iOriginal\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n\n  </ng-scrollbar>\n\n  <ng-container *ngIf=\"isLoading\">\n    <wz-loader></wz-loader>\n  </ng-container>\n  <div\n    *ngIf=\"!isLoading && !nbResult\"\n    class=\"pexels-lib__alert\"\n    [@easeInOut]=\"'in'\">\n      <wz-alert [warning]=\"true\">\n        {{ 'ImgManager.PexelLib.noResult' | translate }}\n      </wz-alert>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PexelsService }, { type: AlertService }, { type: i3.TranslateService }, { type: UploadService }, { type: i0.ChangeDetectorRef }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], searchValue: [{
@@ -1551,8 +1582,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class CopyClipboardDirective {
-    payload;
-    copied = new EventEmitter();
+    constructor() {
+        this.copied = new EventEmitter();
+    }
     onClick(event) {
         event.preventDefault();
         if (!this.payload)
@@ -1567,12 +1599,12 @@ class CopyClipboardDirective {
         document.execCommand("copy");
         document.removeEventListener("copy", listener, false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CopyClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: CopyClipboardDirective, selector: "[copy-clipboard]", inputs: { payload: ["copy-clipboard", "payload"] }, outputs: { copied: "copied" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CopyClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: CopyClipboardDirective, isStandalone: false, 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: "18.2.5", ngImport: i0, type: CopyClipboardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CopyClipboardDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[copy-clipboard]' }]
+            args: [{ standalone: false, selector: '[copy-clipboard]' }]
         }], propDecorators: { payload: [{
                 type: Input,
                 args: ["copy-clipboard"]
@@ -1585,21 +1617,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class EditorInfoSectionComponent {
-    alertService;
-    imgToEdit;
     set isNameModified(isNameModified) {
         this._isNameModified = isNameModified;
     }
     get isNameModified() {
         return this._isNameModified;
     }
-    _isNameModified = false;
-    isNameModifiedChange = new EventEmitter();
-    imgName;
-    imgRoute;
-    msgCopyToClipBoard = 'ImgManager.ImgEditor.copytoClipBoard';
     constructor(alertService) {
         this.alertService = alertService;
+        this._isNameModified = false;
+        this.isNameModifiedChange = new EventEmitter();
+        this.msgCopyToClipBoard = 'ImgManager.ImgEditor.copytoClipBoard';
     }
     ngOnInit() {
         this.init();
@@ -1616,12 +1644,12 @@ class EditorInfoSectionComponent {
     onNameChange() {
         this.isNameModifiedChange.emit(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: EditorInfoSectionComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: EditorInfoSectionComponent, selector: "info-section", inputs: { imgToEdit: "imgToEdit", isNameModified: "isNameModified" }, outputs: { isNameModifiedChange: "isNameModifiedChange" }, ngImport: i0, template: "\r\n<!-- Img properties -->\r\n<div class=\"img-editor__infoSection__propertyEditable\">\r\n    <p class=\"mainColor\">\r\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\r\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\r\n    </p>\r\n    <input\r\n      type=\"text\"\r\n      class=\"img-editor__infoSection__propertyEditable__input\"\r\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\r\n      [(ngModel)]=\"imgToEdit.display_name\"\r\n      debounceKeyUp\r\n      [debounceTime]=\"500\"\r\n      (onEventChange)=\"onNameChange()\">\r\n</div>\r\n<div class=\"img-editor__infoSection__propertyEditable\">\r\n    <p class=\"mainColor\">\r\n      {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\r\n      <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\r\n    </p>\r\n    <button type=\"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>\r\n</div>\r\n<div class=\"img-editor__infoSection__property\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\r\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\r\n</div>\r\n<div class=\"img-editor__infoSection__property\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\r\n    <p >{{getFileSize()}}&nbsp;ko</p>\r\n</div>\r\n\r\n<!-- SEO info -->\r\n\r\n<span class=\"img-editor__infoSection__divider\"></span>\r\n\r\n<div class=\"img-editor__infoSection__titleSEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\r\n</div>\r\n\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorInfoSectionComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EditorInfoSectionComponent, isStandalone: false, 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=\"fa-solid 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\">\n      {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\n      <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n    </p>\n    <button type=\"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=\"fa-solid 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=\"fa-solid 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=\"fa-solid 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=\"fa-solid 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: EditorInfoSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorInfoSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'info-section', template: "\r\n<!-- Img properties -->\r\n<div class=\"img-editor__infoSection__propertyEditable\">\r\n    <p class=\"mainColor\">\r\n        {{ 'ImgManager.UploadList.properties.imgName' | translate }}\r\n        <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.ImgEditor.NameInfo' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\r\n    </p>\r\n    <input\r\n      type=\"text\"\r\n      class=\"img-editor__infoSection__propertyEditable__input\"\r\n      placeholder=\"{{'ImgManager.ImgEditor.nameEx' | translate}} \"\r\n      [(ngModel)]=\"imgToEdit.display_name\"\r\n      debounceKeyUp\r\n      [debounceTime]=\"500\"\r\n      (onEventChange)=\"onNameChange()\">\r\n</div>\r\n<div class=\"img-editor__infoSection__propertyEditable\">\r\n    <p class=\"mainColor\">\r\n      {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\r\n      <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\r\n    </p>\r\n    <button type=\"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>\r\n</div>\r\n<div class=\"img-editor__infoSection__property\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgSize' | translate }}&nbsp;:</p>\r\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\r\n</div>\r\n<div class=\"img-editor__infoSection__property\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.properties.imgWeight' | translate }}&nbsp;:</p>\r\n    <p >{{getFileSize()}}&nbsp;ko</p>\r\n</div>\r\n\r\n<!-- SEO info -->\r\n\r\n<span class=\"img-editor__infoSection__divider\"></span>\r\n\r\n<div class=\"img-editor__infoSection__titleSEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.title' | translate }}</p>\r\n</div>\r\n\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.reziseTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.webpTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n  <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.cdnTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n\r\n</div>\r\n<div class=\"img-editor__infoSection__propertySEO\">\r\n    <p class=\"mainColor\">{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\r\n    <p><i class=\"fal fa-check\"></i>&nbsp;100%</p>\r\n    <p class=\"img-editor__infoSection__propertySEO__tooltips\" [nwbToolTip]=\"'ImgManager.UploadList.seo.lazyloadingTooltips' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></p>\r\n</div>\r\n" }]
+            args: [{ standalone: false, 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=\"fa-solid 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\">\n      {{ 'ImgManager.UploadList.properties.imgURL' | translate }}\n      <span class=\"img-editor__infoSection__propertyEditable__tooltips\" [nwbToolTip]=\"'ImgManager.editImg.changeName' | translate\" [nwbToolTipIsMultiline]=\"true\" nwbToolTipPosition=\"right\"><i class=\"fa-solid fa-info-circle\"></i></span>\n    </p>\n    <button type=\"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=\"fa-solid 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=\"fa-solid 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=\"fa-solid 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=\"fa-solid fa-info-circle\"></i></p>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AlertService }], propDecorators: { imgToEdit: [{
                 type: Input
             }], isNameModified: [{
@@ -1630,6 +1658,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 type: Output
             }] } });
 
+class VideoInfoService {
+    constructor(http) {
+        this.http = http;
+        this.YT_API_KEY = '';
+        this.YT_API_URL = 'https://www.googleapis.com/youtube/v3/videos';
+    }
+    getVideoInfo(videoUrl) {
+        if (!videoUrl)
+            return null;
+        if (this.isYouTube(videoUrl)) {
+            const id = this.extractYoutubeId(videoUrl);
+            return this.getYouTubeInfo(id);
+        }
+        if (this.isVimeo(videoUrl)) {
+            const id = this.extractVimeoId(videoUrl);
+            return this.getVimeoInfo(id);
+        }
+        return null;
+    }
+    isYouTube(url) {
+        return url.includes('youtube.com') || url.includes('youtu.be');
+    }
+    isVimeo(url) {
+        return url.includes('vimeo.com');
+    }
+    extractYoutubeId(url) {
+        const regExp = /^.*(youtu.be\/|v=|embed\/)([^#\&\?]*).*/;
+        const match = url.match(regExp);
+        return match && match[2] ? match[2] : null;
+    }
+    extractVimeoId(url) {
+        const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
+        const match = url.match(regExp);
+        return match ? match[1] : null;
+    }
+    getYouTubeInfo(id) {
+        return this.http.get(`${this.YT_API_URL}?id=${id}&part=contentDetails,snippet&key=${this.YT_API_KEY}`)
+            .pipe(map(res => {
+            const item = res.items?.[0];
+            if (!item)
+                return null;
+            return {
+                duration: this.formatYoutubeDuration(item.contentDetails.duration),
+                publishDate: this.formatDate(item.snippet.publishedAt)
+            };
+        }));
+    }
+    formatYoutubeDuration(duration) {
+        const match = duration.match(/PT(\d+M)?(\d+S)?/);
+        const minutes = match?.[1] ? parseInt(match[1]) : 0;
+        const seconds = match?.[2] ? parseInt(match[2]) : 0;
+        return `${minutes} min ${seconds} sec`;
+    }
+    getVimeoInfo(id) {
+        return this.http.get(`https://vimeo.com/api/v2/video/${id}.json`)
+            .pipe(map(res => {
+            const item = res?.[0];
+            if (!item)
+                return null;
+            return {
+                duration: this.formatVimeoDuration(item.duration),
+                publishDate: this.formatDate(item.upload_date)
+            };
+        }));
+    }
+    formatVimeoDuration(seconds) {
+        const min = Math.floor(seconds / 60);
+        const sec = seconds % 60;
+        return `${min} min ${sec} sec`;
+    }
+    formatDate(dateStr) {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString('fr-FR');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: VideoInfoService, deps: [{ token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: VideoInfoService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: VideoInfoService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3$1.HttpClient }] });
+
+class EditorInfoVideoComponent {
+    constructor(videoInfoService) {
+        this.videoInfoService = videoInfoService;
+        this.videoLink = '';
+        this.videoLinkChange = new EventEmitter();
+        this.isVideoModified = false;
+        this.isVideoModifiedChange = new EventEmitter();
+        this.deleteVideo = new EventEmitter();
+        this.videoDuration = '';
+        this.videoPublishDate = '';
+    }
+    ngOnInit() {
+        this.loadVideoInfos();
+    }
+    onVideoLinkChange(value) {
+        this.videoLink = value;
+        this.videoLinkChange.emit(value);
+        this.isVideoModifiedChange.emit(true);
+        this.loadVideoInfos();
+    }
+    loadVideoInfos() {
+        const obs = this.videoInfoService.getVideoInfo(this.videoLink);
+        if (!obs) {
+            this.videoDuration = '';
+            this.videoPublishDate = '';
+            return;
+        }
+        obs.subscribe(data => {
+            if (!data)
+                return;
+            this.videoDuration = data.duration;
+            this.videoPublishDate = data.publishDate;
+        });
+    }
+    onDelete() {
+        this.deleteVideo.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorInfoVideoComponent, deps: [{ token: VideoInfoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EditorInfoVideoComponent, isStandalone: false, selector: "info-video", inputs: { videoLink: "videoLink", isVideoModified: "isVideoModified" }, outputs: { videoLinkChange: "videoLinkChange", isVideoModifiedChange: "isVideoModifiedChange", deleteVideo: "deleteVideo" }, ngImport: i0, template: "<div class=\"info-video\">\n  <div class=\"info-video__wrapper\">\n\n    <div class=\"info-video__wrapper__top\">\n      <label for=\"input-video\">\n        {{ 'ImgManager.ImgEditor.UrlVideo' | translate }}\n        <i class=\"fa-solid fa-circle-info\"></i>\n      </label>\n\n      <input\n        type=\"text\"\n        id=\"input-video\"\n        [ngModel]=\"videoLink\"\n        (ngModelChange)=\"onVideoLinkChange($event)\"\n      />\n\n      <span>{{ 'ImgManager.ImgEditor.tooltipsIframe' | translate }}</span>\n    </div>\n\n    <a *ngIf=\"videoLink\" (click)=\"onDelete()\">{{ 'ImgManager.ImgEditor.deleteVideo' | translate }}</a>\n  </div>\n</div>\n", dependencies: [{ 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: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorInfoVideoComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'info-video', template: "<div class=\"info-video\">\n  <div class=\"info-video__wrapper\">\n\n    <div class=\"info-video__wrapper__top\">\n      <label for=\"input-video\">\n        {{ 'ImgManager.ImgEditor.UrlVideo' | translate }}\n        <i class=\"fa-solid fa-circle-info\"></i>\n      </label>\n\n      <input\n        type=\"text\"\n        id=\"input-video\"\n        [ngModel]=\"videoLink\"\n        (ngModelChange)=\"onVideoLinkChange($event)\"\n      />\n\n      <span>{{ 'ImgManager.ImgEditor.tooltipsIframe' | translate }}</span>\n    </div>\n\n    <a *ngIf=\"videoLink\" (click)=\"onDelete()\">{{ 'ImgManager.ImgEditor.deleteVideo' | translate }}</a>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: VideoInfoService }], propDecorators: { videoLink: [{
+                type: Input
+            }], videoLinkChange: [{
+                type: Output
+            }], isVideoModified: [{
+                type: Input
+            }], isVideoModifiedChange: [{
+                type: Output
+            }], deleteVideo: [{
+                type: Output
+            }] } });
+
+class EditorShowIframeComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.videoLink = '';
+        this.safeUrl = null;
+    }
+    ngOnChanges() {
+        this.safeUrl = this.buildSafeIframeUrl(this.videoLink);
+    }
+    buildSafeIframeUrl(url) {
+        if (!url)
+            return null;
+        if (this.isYouTubeUrl(url)) {
+            const { videoId, playlistId } = this.extractYouTubeIds(url);
+            if (!videoId && playlistId) {
+                const embed = `https://www.youtube.com/embed/videoseries?list=${encodeURIComponent(playlistId)}`;
+                return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
+            }
+            if (!videoId)
+                return null;
+            const base = `https://www.youtube.com/embed/${encodeURIComponent(videoId)}`;
+            const params = new URLSearchParams();
+            params.set('playsinline', '1');
+            if (playlistId)
+                params.set('list', playlistId);
+            const embed = params.toString() ? `${base}?${params.toString()}` : base;
+            return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
+        }
+        // --- Vimeo
+        if (url.includes('vimeo.com')) {
+            const videoId = this.extractVimeoId(url);
+            if (!videoId)
+                return null;
+            const embed = `https://player.vimeo.com/video/${encodeURIComponent(videoId)}`;
+            return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
+        }
+        return null;
+    }
+    isYouTubeUrl(url) {
+        try {
+            const u = new URL(url);
+            return (u.hostname === 'youtu.be' ||
+                u.hostname.endsWith('youtube.com') ||
+                u.hostname.endsWith('youtube-nocookie.com'));
+        }
+        catch {
+            return url.includes('youtube.com') || url.includes('youtu.be') || url.includes('youtube-nocookie.com');
+        }
+    }
+    extractYouTubeIds(rawUrl) {
+        try {
+            const url = new URL(rawUrl);
+            const host = url.hostname.toLowerCase();
+            const playlistId = url.searchParams.get('list');
+            if (host === 'youtu.be') {
+                const id = url.pathname.split('/').filter(Boolean)[0] ?? null;
+                return { videoId: id, playlistId };
+            }
+            const v = url.searchParams.get('v');
+            if (v)
+                return { videoId: v, playlistId };
+            const parts = url.pathname.split('/').filter(Boolean); // e.g. ["shorts","NquBrAU-iY8"]
+            const idx = parts.findIndex(p => p === 'shorts' || p === 'embed');
+            if (idx !== -1 && parts[idx + 1]) {
+                return { videoId: parts[idx + 1], playlistId };
+            }
+            const liveIdx = parts.findIndex(p => p === 'live');
+            if (liveIdx !== -1 && parts[liveIdx + 1]) {
+                return { videoId: parts[liveIdx + 1], playlistId };
+            }
+            if (parts[0] === 'playlist' && playlistId) {
+                return { videoId: null, playlistId };
+            }
+            return { videoId: null, playlistId };
+        }
+        catch {
+            const playlistMatch = rawUrl.match(/[?&]list=([^&#]+)/);
+            const playlistId = playlistMatch ? decodeURIComponent(playlistMatch[1]) : null;
+            const regExp = /^.*(youtu\.be\/|v=|embed\/|shorts\/|live\/)([^#&?\/]+).*/;
+            const match = rawUrl.match(regExp);
+            const videoId = match && match[2] ? match[2] : null;
+            return { videoId, playlistId };
+        }
+    }
+    extractVimeoId(url) {
+        const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
+        const match = url.match(regExp);
+        return match ? match[1] : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorShowIframeComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EditorShowIframeComponent, isStandalone: false, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\n  <div class=\"video-container\">\n    <iframe\n      [src]=\"safeUrl\"\n      frameborder=\"0\"\n      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      allowfullscreen>\n    </iframe>\n  </div>\n</div>\n\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditorShowIframeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\n  <div class=\"video-container\">\n    <iframe\n      [src]=\"safeUrl\"\n      frameborder=\"0\"\n      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n      allowfullscreen>\n    </iframe>\n  </div>\n</div>\n\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { videoLink: [{
+                type: Input
+            }] } });
+
 const insertRemove = // the fade-in/fade-out animation.
  trigger('insertRemoveAnnim', [
     transition(':enter', [
@@ -1639,17 +1903,17 @@ const insertRemove = // the fade-in/fade-out animation.
 ]);
 
 class DropdownComponent {
-    dropDownMenuClass;
-    disable = false;
-    constructor() { }
+    constructor() {
+        this.disable = false;
+    }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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"] }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DropdownComponent, isStandalone: false, 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: "18.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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>" }]
+            args: [{ standalone: false, 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: () => [], propDecorators: { dropDownMenuClass: [{
                 type: Input
             }], disable: [{
@@ -1657,8 +1921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class CropperComponent {
-    imgCDNService;
-    imgToEdit;
     set isImgModified(isImgModified) {
         this._isImgModified = isImgModified;
         if (!isImgModified) {
@@ -1668,17 +1930,6 @@ class CropperComponent {
     get isImgModified() {
         return this._isImgModified;
     }
-    _isImgModified = false;
-    isImgModifiedChange = new EventEmitter();
-    editClosed = new EventEmitter();
-    currentCroppedImageChange = new EventEmitter();
-    msgFailLoad = 'ImgManager.ImgEditor.msgFailLoad';
-    isNameModified = false;
-    isCropperReady = false; // Use to not display the crop validation btn, after the img is loaded or changed
-    currentCroppedImage = ''; // Img modified return in base64
-    isCropped = false;
-    isLoading = false;
-    _isImgCropped = false;
     set isImgCropped(isImgCropped) {
         setTimeout(() => {
             this._isImgCropped = isImgCropped;
@@ -1687,100 +1938,107 @@ class CropperComponent {
     get isImgCropped() {
         return this._isImgCropped;
     }
-    imgCropperChange = new Subject();
-    skipNextImgCropped = 1;
-    // Image Cropper properties
-    imgType;
-    imgRoute;
-    imageChangedEvent = '';
-    croppedImage = '';
-    canvasRotation = 0;
-    rotation = 0;
-    scale = 1;
-    showCropper = false;
-    containWithinAspectRatio = false;
-    transform = {};
-    defaultAspectRatio;
-    // dropdown list
-    resolutionConfig = [
-        {
-            label: 'ImgManager.ImgEditor.config.origin',
-            config: {
-                maintainAspectRatio: true
+    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
+            {
+                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
+                }
             },
-            active: true
-        },
-        {
-            label: 'ImgManager.ImgEditor.config.square',
-            config: {
-                maintainAspectRatio: true,
-                aspectRatio: 1 / 1
+            {
+                label: 'ImgManager.ImgEditor.config.landscape',
+                config: {
+                    maintainAspectRatio: true,
+                    aspectRatio: 5 / 3
+                }
             }
-        },
-        {
-            label: 'ImgManager.ImgEditor.config.Portrait',
-            config: {
-                maintainAspectRatio: true,
-                aspectRatio: 3 / 4
+        ];
+        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"
             }
-        },
-        {
-            label: 'ImgManager.ImgEditor.config.landscape',
-            config: {
-                maintainAspectRatio: true,
-                aspectRatio: 5 / 3
+        ];
+        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"
             }
-        }
-    ];
-    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"
-        }
-    ];
-    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
-    imgCropperConfig = {
-        maintainAspectRatio: false,
-        aspectRatio: undefined
-    };
-    constructor(imgCDNService) {
-        this.imgCDNService = imgCDNService;
+        ];
+        // Img cropper variables
+        this.imgCropperConfig = {
+            maintainAspectRatio: false,
+            aspectRatio: undefined
+        };
     }
     ngOnInit() {
         this.init();
@@ -1936,16 +2194,16 @@ class CropperComponent {
     applyMethod(method) {
         this[method](); // call the method contains in zoomConfig or rotationConfig
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CropperComponent, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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\">\r\n\r\n    <div *ngIf=\"isImgCropped\">\r\n        <div\r\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\r\n          (click)=\"confirmCrop()\"\r\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\r\n          nwbToolTipPosition=\"left\"\r\n        >\r\n            <i class=\"far fa-check\"></i>\r\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resolution -->\r\n    <dropdown dropdownId=\"dropdown-resolution\">\r\n        <ng-container label>\r\n            <div\r\n              class=\"img-editor__container__toolsContainer__tool\"\r\n            >\r\n                <i class=\"far fa-crop\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\r\n            <div\r\n                class=\"dropdown-item\"\r\n                [ngClass]=\"{'active-item': item.active}\"\r\n                (click)=\"changeResolutionSize(index)\">\r\n                <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <!-- Zoom -->\r\n    <dropdown dropdownId=\"dropdown-rotation\">\r\n        <ng-container label>\r\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\r\n                <i class=\"far fa-expand-arrows-alt\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\r\n            <div\r\n              class=\"dropdown-item\"\r\n              [ngClass]=\"{'active-item': item.active}\"\r\n              (click)=\"applyMethod(item.method)\">\r\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\r\n                    <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <!-- Rotation -->\r\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\r\n        <ng-container label>\r\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\r\n                <i class=\"far fa-redo\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\r\n            <div\r\n              class=\"dropdown-item\"\r\n              [ngClass]=\"{'active-item': item.active}\"\r\n              (click)=\"applyMethod(item.method)\">\r\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\r\n                    <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <div\r\n        class=\"img-editor__container__toolsContainer__tool\"\r\n        (click)=\"onRestart()\"\r\n        @insertRemoveAnnim\r\n    >\r\n        <i class=\"far fa-retweet-alt\"></i>\r\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"img-editor__image-cropper\" >\r\n    <image-cropper\r\n        [imageURL]=\"imgRoute\"\r\n        [imageBase64]=\"croppedImage\"\r\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\r\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\r\n        [onlyScaleDown]=\"true\"\r\n        [roundCropper]=\"false\"\r\n        [canvasRotation]=\"canvasRotation\"\r\n        [transform]=\"transform\"\r\n        [alignImage]=\"'center'\"\r\n        [style.display]=\"showCropper ? null : 'none'\"\r\n        [format]=\"imgType\"\r\n        [backgroundColor]=\"'white'\"\r\n        (imageCropped)=\"imageCropped($event)\"\r\n        (imageLoaded)=\"imageLoaded()\"\r\n        (cropperReady)=\"cropperReady()\"\r\n        (loadImageFailed)=\"loadImageFailed()\"\r\n    ></image-cropper>\r\n</div>\r\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$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CropperComponent, deps: [{ token: ImgCDNService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CropperComponent, isStandalone: false, 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$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
             insertRemove
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CropperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CropperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cropper', animations: [
+            args: [{ standalone: false, selector: 'cropper', animations: [
                         insertRemove
-                    ], template: "<div class=\"img-editor__container__toolsContainer\">\r\n\r\n    <div *ngIf=\"isImgCropped\">\r\n        <div\r\n          class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\r\n          (click)=\"confirmCrop()\"\r\n          [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\r\n          nwbToolTipPosition=\"left\"\r\n        >\r\n            <i class=\"far fa-check\"></i>\r\n            <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resolution -->\r\n    <dropdown dropdownId=\"dropdown-resolution\">\r\n        <ng-container label>\r\n            <div\r\n              class=\"img-editor__container__toolsContainer__tool\"\r\n            >\r\n                <i class=\"far fa-crop\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\r\n            <div\r\n                class=\"dropdown-item\"\r\n                [ngClass]=\"{'active-item': item.active}\"\r\n                (click)=\"changeResolutionSize(index)\">\r\n                <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <!-- Zoom -->\r\n    <dropdown dropdownId=\"dropdown-rotation\">\r\n        <ng-container label>\r\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\r\n                <i class=\"far fa-expand-arrows-alt\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\r\n            <div\r\n              class=\"dropdown-item\"\r\n              [ngClass]=\"{'active-item': item.active}\"\r\n              (click)=\"applyMethod(item.method)\">\r\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\r\n                    <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <!-- Rotation -->\r\n    <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\r\n        <ng-container label>\r\n            <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\r\n                <i class=\"far fa-redo\"></i>\r\n                <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\r\n            <div\r\n              class=\"dropdown-item\"\r\n              [ngClass]=\"{'active-item': item.active}\"\r\n              (click)=\"applyMethod(item.method)\">\r\n                    <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\r\n                    <p>{{item.label | translate}}</p>\r\n            </div>\r\n        </ng-container>\r\n    </dropdown>\r\n\r\n    <div\r\n        class=\"img-editor__container__toolsContainer__tool\"\r\n        (click)=\"onRestart()\"\r\n        @insertRemoveAnnim\r\n    >\r\n        <i class=\"far fa-retweet-alt\"></i>\r\n        <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"img-editor__image-cropper\" >\r\n    <image-cropper\r\n        [imageURL]=\"imgRoute\"\r\n        [imageBase64]=\"croppedImage\"\r\n        [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\r\n        [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n        [aspectRatio]=\"imgCropperConfig.aspectRatio\"\r\n        [onlyScaleDown]=\"true\"\r\n        [roundCropper]=\"false\"\r\n        [canvasRotation]=\"canvasRotation\"\r\n        [transform]=\"transform\"\r\n        [alignImage]=\"'center'\"\r\n        [style.display]=\"showCropper ? null : 'none'\"\r\n        [format]=\"imgType\"\r\n        [backgroundColor]=\"'white'\"\r\n        (imageCropped)=\"imageCropped($event)\"\r\n        (imageLoaded)=\"imageLoaded()\"\r\n        (cropperReady)=\"cropperReady()\"\r\n        (loadImageFailed)=\"loadImageFailed()\"\r\n    ></image-cropper>\r\n</div>\r\n" }]
+                    ], 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: () => [{ type: ImgCDNService }], propDecorators: { imgToEdit: [{
                 type: Input
             }], isImgModified: [{
@@ -1959,41 +2217,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class ImgEditorComponent {
-    imgManagerService;
-    renamePictureService;
-    stateDisplayed;
-    imgToEdit;
-    editClosed = new EventEmitter();
-    isLoading = false;
-    isImgModified = false;
-    isNameModified = false;
-    currentCroppedImage = ''; // Img modified return in base64 by the cropper
-    previousName;
-    msgFailSave = 'ImgManager.ImgEditor.msgFailSave';
-    msgFailLoad = 'ImgManager.ImgEditor.msgFailLoad';
-    msgSuccessEdit = "Les modifications de l'image ont bien été enregistrées.";
+    set isVideoEdit(value) {
+        this._isVideoEdit = value;
+        if (value === true) {
+            this.isEditorLinkActive = true;
+        }
+    }
+    get isVideoEdit() {
+        return this._isVideoEdit;
+    }
     constructor(imgManagerService, renamePictureService) {
         this.imgManagerService = imgManagerService;
         this.renamePictureService = renamePictureService;
+        this._isVideoEdit = false;
+        this.editClosed = new EventEmitter();
+        this.isLoading = false;
+        this.isImgModified = false;
+        this.isNameModified = false;
+        this.currentCroppedImage = ''; // Img modified return in base64 by the cropper
+        this.isEditorLinkActive = false;
+        this.isVideoModified = false;
+        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;
+        this.previousVideoLink = this.imgToEdit.video_link;
     }
     onSave() {
         if (this.isLoading) {
             return;
         }
         this.isLoading = true;
-        if (!this.isImgModified && !this.isNameModified) {
+        if (!this.isImgModified && !this.isNameModified && !this.isVideoModified) {
             this.isLoading = false;
             this.onEditClosed();
         }
         const obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
         const obsChangeImgName = this.renamePictureService.changeImageName(this.imgToEdit.display_name, this.imgToEdit.id_file);
+        const obsChangeVideoLink = this.renamePictureService.changeVideoLink(this.imgToEdit.video_link, this.imgToEdit.id_file);
         if (this.isImgModified && this.isNameModified) {
             this.renameAndReplaceImg(obsChangeImgName, obsReplaceImg);
             return;
         }
+        if (this.isVideoModified && !this.isImgModified && !this.isNameModified) {
+            obsChangeVideoLink.subscribe({
+                next: () => {
+                    this.isLoading = false;
+                    this.previousVideoLink = this.imgToEdit.video_link;
+                    this.onEditClosed(this.msgSuccessEdit);
+                },
+                error: () => {
+                    this.isLoading = false;
+                    this.imgToEdit.video_link = this.previousVideoLink;
+                    this.onEditClosed(this.msgFailSave);
+                }
+            });
+            return;
+        }
         if (this.isImgModified) {
             obsReplaceImg.subscribe({
                 next: data => {
@@ -2038,6 +2320,10 @@ class ImgEditorComponent {
     onImgCropped(imgBase64) {
         this.currentCroppedImage = imgBase64;
     }
+    onDeleteVideo() {
+        this.imgToEdit.video_link = null;
+        this.isVideoModified = true;
+    }
     renameAndReplaceImg(obsChangeImgName, obsReplaceImg) {
         // Avoid to use forkjoin, because it can create conflict and loose the img
         obsChangeImgName.subscribe({
@@ -2056,34 +2342,33 @@ class ImgEditorComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit" }, outputs: { editClosed: "editClosed" }, ngImport: i0, template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n            <info-section\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: 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: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImgEditorComponent, isStandalone: false, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, 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          type=\"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    <ng-scrollbar\n        class=\"img-editor__scroll\"\n        style=\"min-height: 500px\"\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\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n          <ul class=\"img-editorVideo__tabs\">\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\n          </ul>\n\n            <info-section\n              *ngIf=\"!isEditorLinkActive\"\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n           <info-video\n             *ngIf=\"isEditorLinkActive\"\n             [(videoLink)]=\"imgToEdit.video_link\"\n             [(isVideoModified)]=\"isVideoModified\"\n             (deleteVideo)=\"onDeleteVideo()\">\n           </info-video>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              *ngIf=\"!isEditorLinkActive\"\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n          <show-iframe\n            style=\"display: block;width: 100%\"\n            [videoLink]=\"imgToEdit.video_link\"\n            *ngIf=\"isEditorLinkActive\">\n\n          </show-iframe>\n        </div>\n    </div>\n    </ng-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: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: EditorInfoSectionComponent, selector: "info-section", inputs: ["imgToEdit", "isNameModified"], outputs: ["isNameModifiedChange"] }, { kind: "component", type: EditorInfoVideoComponent, selector: "info-video", inputs: ["videoLink", "isVideoModified"], outputs: ["videoLinkChange", "isVideoModifiedChange", "deleteVideo"] }, { kind: "component", type: EditorShowIframeComponent, selector: "show-iframe", inputs: ["videoLink"] }, { kind: "component", type: CropperComponent, selector: "cropper", inputs: ["imgToEdit", "isImgModified"], outputs: ["isImgModifiedChange", "editClosed", "currentCroppedImageChange"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
             easeInOut
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-editor', animations: [
+            args: [{ standalone: false, selector: 'img-editor', animations: [
                         easeInOut
-                    ], template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\r\n\r\n    <!-- Button Action Section -->\r\n\r\n    <div class=\"img-editor__infoSection__actions\">\r\n      <div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"button img-editor__infoSection__actions__cancel\"\r\n          (click)=\"onCancel()\"\r\n          [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\r\n        >\r\n          {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n        </button>\r\n        <div\r\n          class=\"button danger button img-editor__infoSection__actions__save\"\r\n          [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\r\n          (click)=\"onSave()\"\r\n        >\r\n          {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\r\n          <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <ng-scrollbar\r\n        class=\"img-editor__scroll\"\r\n        [ngClass]=\"{\r\n            'img-editor__scroll--full': stateDisplayed === 'full',\r\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\r\n            'img-editor__scroll--window': stateDisplayed === 'window'\r\n        }\"\r\n    >\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n            <info-section\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
+                    ], 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          type=\"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    <ng-scrollbar\n        class=\"img-editor__scroll\"\n        style=\"min-height: 500px\"\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\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n          <ul class=\"img-editorVideo__tabs\">\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\n          </ul>\n\n            <info-section\n              *ngIf=\"!isEditorLinkActive\"\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n           <info-video\n             *ngIf=\"isEditorLinkActive\"\n             [(videoLink)]=\"imgToEdit.video_link\"\n             [(isVideoModified)]=\"isVideoModified\"\n             (deleteVideo)=\"onDeleteVideo()\">\n           </info-video>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              *ngIf=\"!isEditorLinkActive\"\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n          <show-iframe\n            style=\"display: block;width: 100%\"\n            [videoLink]=\"imgToEdit.video_link\"\n            *ngIf=\"isEditorLinkActive\">\n\n          </show-iframe>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ImgManagerService }, { type: RenamePictureService }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgToEdit: [{
                 type: Input
+            }], isVideoEdit: [{
+                type: Input
             }], editClosed: [{
                 type: Output
             }] } });
 
 class AutoHideDirective {
-    _elementRef;
-    domService;
-    triggerElement;
-    forceOn = null;
     constructor(_elementRef, domService) {
         this._elementRef = _elementRef;
         this.domService = domService;
+        this.forceOn = null;
+        this.clickOutside = new EventEmitter();
     }
-    clickOutside = new EventEmitter();
     ngAfterViewInit() {
         this.domService.documentEvent().subscribe((targetElement) => {
             const clickedInside = this._elementRef.nativeElement.contains(targetElement);
@@ -2104,12 +2389,13 @@ class AutoHideDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AutoHideDirective, deps: [{ token: i0.ElementRef }, { token: DomService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: { triggerElement: "triggerElement", forceOn: "forceOn" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutoHideDirective, deps: [{ token: i0.ElementRef }, { token: DomService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: AutoHideDirective, isStandalone: false, selector: "[wzAutoHide]", inputs: { triggerElement: "triggerElement", forceOn: "forceOn" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AutoHideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutoHideDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[wzAutoHide]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DomService }], propDecorators: { triggerElement: [{
@@ -2122,32 +2408,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class CanvaBtnComponent {
-    canvaService;
-    stateDisplayed;
-    showImgUploaded = new EventEmitter();
-    canvaApi;
-    canvaLogoRouteAssets;
-    imgLoading = false;
-    availableFormat = {
-        'ImgManager.CanvaBtn.smallSquare': {
-            'width': 500,
-            'height': 500
-        },
-        'ImgManager.CanvaBtn.mediumSquare': {
-            'width': 1000,
-            'height': 1000
-        },
-        'ImgManager.CanvaBtn.bigSquare': {
-            'width': 2500,
-            'height': 2500
-        }
-    };
-    openDropDownMenu = false;
-    expectedHeight;
-    expectedWidth;
-    subs = [];
     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();
@@ -2173,12 +2453,12 @@ class CanvaBtnComponent {
     ngOnDestroy() {
         this.subs.forEach(sub => sub.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CanvaBtnComponent, deps: [{ token: CanvaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: CanvaBtnComponent, selector: "canva-btn", inputs: { stateDisplayed: "stateDisplayed" }, outputs: { showImgUploaded: "showImgUploaded" }, ngImport: i0, template: "<div class=\"canva dropdown is-right is-hoverable\"\r\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\r\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\r\n    >\r\n    <div class=\"dropdown-trigger\">\r\n        <div\r\n          class=\"button canva-btn\"\r\n          aria-controls=\"dropdown-menuCanva\"\r\n          (click)=\"openDropDownMenu = true;\"\r\n          >\r\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\r\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\r\n\r\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"dropdown-menu dropDownShadow\"\r\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\r\n      id=\"dropdown-menuCanva\"\r\n      role=\"menu\">\r\n        <ng-scrollbar\r\n            class=\"smallScroll\"\r\n            >\r\n            <div class=\"dropdown-content\">\r\n                <div class=\"dropdownTitle\">\r\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\r\n                </div>\r\n\r\n                <div class=\"infoItem\">\r\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\r\n                </div>\r\n\r\n                <ng-container >\r\n                    <div\r\n                      *ngIf=\"expectedWidth && expectedHeight\"\r\n                      class=\"dropdown-item-wrapper\"\r\n                      >\r\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\r\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div\r\n                  *ngFor=\"let format of availableFormat| keyvalue\"\r\n                  class=\"dropdown-item-wrapper\">\r\n                    <div\r\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\r\n                      class=\"dropdown-item\">\r\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-scrollbar>\r\n    </div>\r\n</div>\r\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: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CanvaBtnComponent, deps: [{ token: CanvaService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CanvaBtnComponent, isStandalone: false, 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        <ng-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        </ng-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: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { 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: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CanvaBtnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CanvaBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'canva-btn', template: "<div class=\"canva dropdown is-right is-hoverable\"\r\n     wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\r\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\r\n    >\r\n    <div class=\"dropdown-trigger\">\r\n        <div\r\n          class=\"button canva-btn\"\r\n          aria-controls=\"dropdown-menuCanva\"\r\n          (click)=\"openDropDownMenu = true;\"\r\n          >\r\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\r\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\r\n\r\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"dropdown-menu dropDownShadow\"\r\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\r\n      id=\"dropdown-menuCanva\"\r\n      role=\"menu\">\r\n        <ng-scrollbar\r\n            class=\"smallScroll\"\r\n            >\r\n            <div class=\"dropdown-content\">\r\n                <div class=\"dropdownTitle\">\r\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\r\n                </div>\r\n\r\n                <div class=\"infoItem\">\r\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\r\n                </div>\r\n\r\n                <ng-container >\r\n                    <div\r\n                      *ngIf=\"expectedWidth && expectedHeight\"\r\n                      class=\"dropdown-item-wrapper\"\r\n                      >\r\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\r\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div\r\n                  *ngFor=\"let format of availableFormat| keyvalue\"\r\n                  class=\"dropdown-item-wrapper\">\r\n                    <div\r\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\r\n                      class=\"dropdown-item\">\r\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-scrollbar>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ standalone: false, 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        <ng-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        </ng-scrollbar>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvaService }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], showImgUploaded: [{
@@ -2198,12 +2478,13 @@ class PagniationIsLastPage {
         }
         return currentPage === Math.ceil(totalItems / itemsPerPage);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationIsLastPage, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: PagniationIsLastPage, name: "IsLastPage" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationIsLastPage, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: PagniationIsLastPage, isStandalone: false, name: "IsLastPage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationIsLastPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationIsLastPage, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'IsLastPage'
                 }]
         }] });
@@ -2224,12 +2505,13 @@ class PagniationArrayTotalPages {
             .map(Number.call, Number)
             .map((x) => x + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationArrayTotalPages, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: PagniationArrayTotalPages, name: "ArrayTotalPages" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationArrayTotalPages, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: PagniationArrayTotalPages, isStandalone: false, name: "ArrayTotalPages" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationArrayTotalPages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationArrayTotalPages, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'ArrayTotalPages'
                 }]
         }] });
@@ -2275,12 +2557,13 @@ class LargeNumberOfPagePipe {
         }
         return arrayWithPageNumber;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LargeNumberOfPagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: LargeNumberOfPagePipe, name: "LargeNumberOfPage" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LargeNumberOfPagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: LargeNumberOfPagePipe, isStandalone: false, name: "LargeNumberOfPage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LargeNumberOfPagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LargeNumberOfPagePipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'LargeNumberOfPage'
                 }]
         }] });
@@ -2292,7 +2575,6 @@ class PageSelectorComponent {
     get pagination() {
         return this._pagination;
     }
-    _pagination;
     set totalItems(totalItems) {
         this.numberOfPage = Math.ceil(totalItems / this.pagination.itemsPerPage);
         this.largeNumberOfPage = this.numberOfPage > 30;
@@ -2300,12 +2582,12 @@ class PageSelectorComponent {
     get totalItems() {
         return this._totalItems;
     }
-    _totalItems;
-    openAbsoluteSelect = false;
-    largeNumberOfPage = false;
-    numberOfPage = 0;
-    pageChange = new EventEmitter();
-    constructor() { }
+    constructor() {
+        this.openAbsoluteSelect = false;
+        this.largeNumberOfPage = false;
+        this.numberOfPage = 0;
+        this.pageChange = new EventEmitter();
+    }
     onGotoPageChange(event, directValue) {
         if (directValue) {
             this.pageChange.emit(event);
@@ -2315,12 +2597,12 @@ class PageSelectorComponent {
             this.pageChange.emit(parseInt(event.target.value));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: PageSelectorComponent, selector: "wz-page-selector", inputs: { pagination: "pagination", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"wz-selector\">\r\n\r\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\r\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\r\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\r\n      <i class=\"fa-solid fa-sort-down\"></i>\r\n    </div>\r\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\r\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\r\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\r\n          <span>{{ pageIndex.display }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!largeNumberOfPage\">\r\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\r\n      <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\r\n        <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\r\n          {{ pageIndex }}\r\n        </option>\r\n      </ng-container>\r\n    </select>\r\n  </ng-container>\r\n</div>\r\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" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PageSelectorComponent, isStandalone: false, 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=\"fa-solid 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: "18.2.5", ngImport: i0, type: PageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wz-page-selector', template: "<div class=\"wz-selector\">\r\n\r\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\r\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\r\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\r\n      <i class=\"fa-solid fa-sort-down\"></i>\r\n    </div>\r\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\r\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\r\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\r\n          <span>{{ pageIndex.display }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!largeNumberOfPage\">\r\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\r\n      <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\r\n        <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\r\n          {{ pageIndex }}\r\n        </option>\r\n      </ng-container>\r\n    </select>\r\n  </ng-container>\r\n</div>\r\n" }]
+            args: [{ standalone: false, 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=\"fa-solid 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: () => [], propDecorators: { pagination: [{
                 type: Input
             }], totalItems: [{
@@ -2330,7 +2612,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class PagniationText {
-    translateService;
     constructor(translateService) {
         this.translateService = translateService;
     }
@@ -2351,12 +2632,13 @@ class PagniationText {
         }
         return this.translateService.instant('PaginationComponent.on', { low: currentItemsLow, high: currentItemsHigh, total: totalItems });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationText, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: PagniationText, name: "customPagniationText" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationText, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: PagniationText, isStandalone: false, name: "customPagniationText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PagniationText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PagniationText, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'customPagniationText'
                 }]
         }], ctorParameters: () => [{ type: i3.TranslateService }] });
@@ -2368,9 +2650,9 @@ class PaginationComponent {
     get pagination() {
         return this._pagination;
     }
-    _pagination;
-    pageChange = new EventEmitter();
-    constructor() { }
+    constructor() {
+        this.pageChange = new EventEmitter();
+    }
     decrementPage() {
         if (this.pagination.currentPage <= 1) {
             return;
@@ -2390,12 +2672,12 @@ class PaginationComponent {
         this.pagination.currentPage = parseInt(pageNumber);
         this.pageChange.emit(this.pagination);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: PagniationIsLastPage, name: "IsLastPage" }, { kind: "pipe", type: PagniationText, name: "customPagniationText" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PaginationComponent, isStandalone: false, 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: PagniationIsLastPage, name: "IsLastPage" }, { kind: "pipe", type: PagniationText, name: "customPagniationText" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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: () => [], propDecorators: { pagination: [{
                 type: Input
             }], pageChange: [{
@@ -2406,23 +2688,22 @@ class NumberToArray {
     transform(number) {
         return Array.from('x'.repeat(number));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NumberToArray, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: NumberToArray, name: "numberToArray" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberToArray, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: NumberToArray, isStandalone: false, name: "numberToArray" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NumberToArray, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberToArray, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'numberToArray'
                 }]
         }] });
 
 class MosaicViewComponent extends ImagesActionHandler {
-    tabDisplayed;
-    fullSize;
-    nbFakeImg = 0;
-    switchDisplayWindow = new EventEmitter();
     constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
         super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
+        this.nbFakeImg = 0;
+        this.switchDisplayWindow = new EventEmitter();
     }
     ngOnInit() {
     }
@@ -2442,16 +2723,16 @@ class MosaicViewComponent extends ImagesActionHandler {
     trackById(index, picture) {
         return picture.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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}\">\r\n  <!-- Search section -->\r\n  <div\r\n    class=\"mosaic__search\"\r\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\r\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n      <wz-input-search\r\n        [(ngModel)]=\"tableFilters.searchValue\"\r\n        (changeDebounced)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n        [smallPadding]=\"stateDisplayed === 'small'\"\r\n      ></wz-input-search>\r\n  </div>\r\n\r\n  <!-- Cards section -->\r\n  <div\r\n    class=\"mosaic__container__cards\"\r\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\r\n    [@listAnimation]=\"picturesList.length\"\r\n    *ngIf=\"!isLoading && !displayPexelsResults\"\r\n    >\r\n      <img-card\r\n        *ngFor=\"let picture of picturesList; let index = index; trackBy: trackById \"\r\n        [picture]=\"picture\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [tabDisplayed]=\"tabDisplayed\"\r\n        [disable]=\"disable\"\r\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\r\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\r\n        [fullSize]=\"fullSize\"\r\n      ></img-card>\r\n      <div\r\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\r\n        class=\"mosaic__container__cards__fakeImg\"\r\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\r\n      </div>\r\n  </div>\r\n\r\n  <!-- Loader section -->\r\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\r\n    <wz-loader [small]=\"true\"></wz-loader>\r\n  </div>\r\n\r\n  <!-- Pagination section -->\r\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\r\n    <wz-pagination\r\n    [pagination]=\"tableFilters\"\r\n    (pageChange)=\"onFiltersChange()\"\r\n    >\r\n    </wz-pagination>\r\n  </div>\r\n\r\n</div>\r\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MosaicViewComponent, isStandalone: false, 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; trackBy: trackById \"\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\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
             listAnnimation
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: MosaicViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MosaicViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mosaic-view', animations: [
+            args: [{ standalone: false, selector: 'mosaic-view', animations: [
                         listAnnimation
-                    ], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\r\n  <!-- Search section -->\r\n  <div\r\n    class=\"mosaic__search\"\r\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\r\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n      <wz-input-search\r\n        [(ngModel)]=\"tableFilters.searchValue\"\r\n        (changeDebounced)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n        [smallPadding]=\"stateDisplayed === 'small'\"\r\n      ></wz-input-search>\r\n  </div>\r\n\r\n  <!-- Cards section -->\r\n  <div\r\n    class=\"mosaic__container__cards\"\r\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\r\n    [@listAnimation]=\"picturesList.length\"\r\n    *ngIf=\"!isLoading && !displayPexelsResults\"\r\n    >\r\n      <img-card\r\n        *ngFor=\"let picture of picturesList; let index = index; trackBy: trackById \"\r\n        [picture]=\"picture\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [tabDisplayed]=\"tabDisplayed\"\r\n        [disable]=\"disable\"\r\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\r\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\r\n        [fullSize]=\"fullSize\"\r\n      ></img-card>\r\n      <div\r\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\r\n        class=\"mosaic__container__cards__fakeImg\"\r\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\r\n      </div>\r\n  </div>\r\n\r\n  <!-- Loader section -->\r\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\r\n    <wz-loader [small]=\"true\"></wz-loader>\r\n  </div>\r\n\r\n  <!-- Pagination section -->\r\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\r\n    <wz-pagination\r\n    [pagination]=\"tableFilters\"\r\n    (pageChange)=\"onFiltersChange()\"\r\n    >\r\n    </wz-pagination>\r\n  </div>\r\n\r\n</div>\r\n" }]
+                    ], 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; trackBy: trackById \"\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\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: () => [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }], propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
@@ -2463,19 +2744,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class FiltersTableService {
-    filterRoutingBuilder;
-    filterGroups = new Map();
-    dataTableFilters = {
-        sort: undefined,
-        order: undefined,
-        searchValue: undefined,
-        totalItems: 0,
-        itemsPerPage: 0,
-        currentPage: 0
-    };
-    sortSubject = new Subject();
     constructor(filterRoutingBuilder) {
         this.filterRoutingBuilder = filterRoutingBuilder;
+        this.filterGroups = new Map();
+        this.dataTableFilters = {
+            sort: undefined,
+            order: undefined,
+            type: '',
+            searchValue: undefined,
+            totalItems: 0,
+            itemsPerPage: 0,
+            currentPage: 0
+        };
+        this.sortSubject = new Subject();
     }
     getTableFilterGroup(dataTableName) {
         if (this.filterGroups.has(dataTableName)) {
@@ -2511,25 +2792,21 @@ class FiltersTableService {
             currentPage: filterGroup.get('currentPage') ? parseInt(filterGroup.get('currentPage')) : currentPage
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FiltersTableService, deps: [{ token: i1.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FiltersTableService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FiltersTableService, deps: [{ token: i1.NwbFilterRoutingBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FiltersTableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FiltersTableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FiltersTableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NwbFilterRoutingBuilder }] });
 
 class CheckboxComponent {
-    label = '';
-    value;
-    type;
-    alone = false;
-    checked = false;
-    id = '';
-    name;
-    disabled = false;
-    constructor() { }
-    _onChange;
-    _onTouched;
+    constructor() {
+        this.label = '';
+        this.alone = false;
+        this.checked = false;
+        this.id = '';
+        this.disabled = false;
+    }
     registerOnChange(fn) {
         this._onChange = fn;
     }
@@ -2547,12 +2824,12 @@ class CheckboxComponent {
             this._onChange(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: CheckboxComponent, isStandalone: false, 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: "18.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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: () => [], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -2570,30 +2847,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class TableComponent {
-    filtersTableService;
-    /// Input/Output of table filters ///
-    tableFilters;
-    tableFiltersChange = new EventEmitter();
-    tableRoutingName; // Name of the table
-    placeholder = '';
-    _filterGroup;
-    /// Input/Output of checkbox ///
-    /** Pass to true to display checkbox in the header table */
-    checkbox = false;
-    /** Emit new header checboxValue */
-    toggleAllCheckBox = new EventEmitter();
-    /// Input to disable section ///
-    /** Pass to true to hide search input */
-    disableSearch = false;
-    /** Pass to true to hide the pagniator */
-    disablePagniation = false;
-    /// Input for loader on table body ///
-    isLoading = false;
-    /// Private variables ///
-    headerCheckBoxId;
-    filterGroupChangeSub;
     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
@@ -2645,6 +2914,7 @@ class TableComponent {
             sort: this._filterGroup.get('sort'),
             order: this._filterGroup.get('order'),
             searchValue: this._filterGroup.get('searchValue'),
+            type: this._filterGroup.get('type'),
             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
@@ -2656,12 +2926,12 @@ class TableComponent {
             this.filterGroupChangeSub.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableComponent, deps: [{ token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableComponent, deps: [{ token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TableComponent, isStandalone: false, 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: "18.2.5", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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" }]
+            args: [{ standalone: false, 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: () => [{ type: FiltersTableService }], propDecorators: { tableFilters: [{
                 type: Input
             }], tableFiltersChange: [{
@@ -2683,16 +2953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class TableColumn {
-    currentCell;
-    renderer;
-    document;
-    columnSize; // Optional.
-    centerCell; // Optional. left|center|right
-    centerCellValue = ['left', 'center', 'right'];
     constructor(currentCell, renderer, document) {
         this.currentCell = currentCell;
         this.renderer = renderer;
         this.document = document;
+        this.centerCellValue = ['left', 'center', 'right'];
     }
     ngAfterViewInit() {
         this.applyCustomStylesOnCell();
@@ -2708,12 +2973,13 @@ class TableColumn {
             this.renderer.addClass(this.currentCell.nativeElement, className);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableColumn, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: TableColumn, selector: "[tableColumn]", inputs: { columnSize: "columnSize", centerCell: "centerCell" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableColumn, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TableColumn, isStandalone: false, selector: "[tableColumn]", inputs: { columnSize: "columnSize", centerCell: "centerCell" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableColumn, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[tableColumn]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -2728,27 +2994,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class CheckBoxRow {
-    currentRow;
-    appRef;
-    renderer;
-    document;
-    resolver;
-    injector;
-    checkBoxId;
-    checkBoxName;
     set checkBoxValue(value) {
         this._value = value;
         if (this.checkboxComponentRef) {
             this.setCheckBoxValue();
         }
     }
-    _value;
     get checkBoxValue() {
         return this._value;
     }
-    checkBoxValueChange = new EventEmitter();
-    checkboxComponentRef;
-    htmlContainer;
     constructor(currentRow, appRef, renderer, document, resolver, injector) {
         this.currentRow = currentRow;
         this.appRef = appRef;
@@ -2756,6 +3010,7 @@ class CheckBoxRow {
         this.document = document;
         this.resolver = resolver;
         this.injector = injector;
+        this.checkBoxValueChange = new EventEmitter();
     }
     ngOnInit() {
         this.createCheckBoxComponent();
@@ -2794,12 +3049,13 @@ class CheckBoxRow {
     ngOnDestroy() {
         this.htmlContainer.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: { checkBoxId: "checkBoxId", checkBoxName: "checkBoxName", checkBoxValue: "checkBoxValue" }, outputs: { checkBoxValueChange: "checkBoxValueChange" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: CheckBoxRow, isStandalone: false, selector: "[checkBoxRow]", inputs: { checkBoxId: "checkBoxId", checkBoxName: "checkBoxName", checkBoxValue: "checkBoxValue" }, outputs: { checkBoxValueChange: "checkBoxValueChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CheckBoxRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckBoxRow, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[checkBoxRow]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -2818,17 +3074,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 type: Output
             }] } });
 class HtmlContainer {
-    hostElement;
-    appRef;
-    componentFactoryResolver;
-    injector;
-    attached = false;
-    disposeFn;
     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) {
@@ -2853,35 +3104,24 @@ class HtmlContainer {
 }
 
 class TableColumnHeader {
-    currentCell;
-    renderer;
-    document;
-    filtersTableService;
     set headerName(value) {
         this._headerName = value;
         this.setHeaderName();
     }
-    _headerName = '';
     get headerName() {
         return this._headerName;
     }
-    columnSize; // Optional.
-    filterRouting = false; // Optional. Set to true to use Filter Routing.
-    tableName; // Optional, but mandatory to handle sorting
-    sortName; // Optional, but mandatory to handle sorting
-    centerCell; // Optional. left|center|right
-    onSortChange = new EventEmitter(); // Emit the sort value (true, false, undefuned) of the current sort icon when clicking
-    tableFilters;
-    tableFiltersChange = new EventEmitter();
-    centerCellValue = ['left', 'center', 'right'];
-    contentHeader;
-    filterGroup;
-    subscriptions = [];
     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 = [];
     }
     ngOnInit() {
         if (this.tableName && this.sortName) {
@@ -3022,12 +3262,13 @@ class TableColumnHeader {
             subscription.unsubscribe();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableColumnHeader, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableColumnHeader, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: FiltersTableService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TableColumnHeader, isStandalone: false, 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: "18.2.5", ngImport: i0, type: TableColumnHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableColumnHeader, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     // The selector has the same name as the headerCell selector in table.component.html
                     selector: '[headerCell]'
                 }]
@@ -3061,9 +3302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class TableRow {
-    currentCell;
-    renderer;
-    document;
     constructor(currentCell, renderer, document) {
         this.currentCell = currentCell;
         this.renderer = renderer;
@@ -3075,12 +3313,13 @@ class TableRow {
     applyCustomStylesOnCell() {
         this.renderer.addClass(this.currentCell.nativeElement, 'wz-table__body__line');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableRow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: TableRow, selector: "[tableRow]", ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableRow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TableRow, isStandalone: false, selector: "[tableRow]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableRow, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     // The selector has the same name as the tableRaw selector in table.component.html
                     selector: '[tableRow]',
                 }]
@@ -3090,130 +3329,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }] }] });
 
 class TableViewComponent extends ImagesActionHandler {
-    dataTableName = 'imgagesView'; // Name of your table
     constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService) {
         super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, apiService);
+        this.dataTableName = 'imgagesView'; // Name of your table
     }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+    // Copy the image link to clipboard
+    async copyImageLink(file_name) {
+        const url = this.imgCDNService.getUrlImg('raw') + file_name;
+        const success = await this.imgManager.copyToClipboard(url);
+        if (success) {
+            this.alertService.openAlert('ImgManager.ImgList.linkCopied');
+        }
+        else {
+            this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TableViewComponent, isStandalone: false, 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 *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\n                <i class=\"fa-solid fa-play\"></i>\n                <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\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)=\"redirectToVideo(picture)\"\n            >\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | 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)=\"copyImageLink(picture.file_name)\"\n            >\n                <i class=\"far fa-copy copy\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.Link' | 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
             listAnnimation
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TableViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'table-view', animations: [
+            args: [{ standalone: false, 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" }]
+                    ], 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 *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\n                <i class=\"fa-solid fa-play\"></i>\n                <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\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)=\"redirectToVideo(picture)\"\n            >\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | 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)=\"copyImageLink(picture.file_name)\"\n            >\n                <i class=\"far fa-copy copy\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.Link' | 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: () => [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }] });
 
 class ImagesViewComponent {
-    imgManager;
-    imgEventService;
-    imgSelectionService;
-    alertService;
-    userSettingsService;
-    renamePictureService;
-    changeDetectorRef;
-    stateDisplayed;
-    tabDisplayed;
-    fullSize;
-    nbRowToShow;
-    listDisplayed = false; // Display format list or mosaic
-    multipleImgMode = false;
-    switchDisplayWindow = new EventEmitter();
-    imgLibContainer;
-    widthLargeCard = 219; // Default value of a card width 199 + margin 20
-    widthSmallCard = 160; // Default value of a card width 140 + margin 20
-    nbMinImgPerLine;
-    nbMaxImgPerLine;
-    nbFakeImg = 0;
-    imgFullWidthConfig = [
-        {
-            max: 419,
-            largeImgWidthFactor: 1,
-            smallImgWidthFactor: 0.5
-        },
-        {
-            max: 499,
-            largeImgWidthFactor: 1,
-            smallImgWidthFactor: 0.5
-        },
-        {
-            max: 719, // tablet
-            largeImgWidthFactor: 0.5,
-            smallImgWidthFactor: 0.3333
-        },
-        {
-            max: 1023, // deskop
-            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
-        }
-    ];
-    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
-        }
-    ];
-    nbImgToDelSelected = 0;
-    disable = false; // Use to disable action during server request
-    delListImgLoader = false;
-    initComponent = true;
-    failLoaded = false;
-    confirmImgSup = false;
-    previousSearchValue;
     get searchImagesParameters$() {
         return this.imgManager.searchImagesParameters$;
     }
-    // Api Img manager Params
-    params;
-    errorGetAllImg = 'ImgManager.ImgLib.errorGetAllImg';
-    errorGetTotalImg = 'ImgManager.ImgLib.errorGetTotalImg';
-    errorGetImg = 'ImgManager.ImgLib.errorGetCanvaImg';
-    errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
-    destroy$ = new Subject();
-    vm$;
     constructor(imgManager, imgEventService, imgSelectionService, alertService, userSettingsService, renamePictureService, changeDetectorRef) {
         this.imgManager = imgManager;
         this.imgEventService = imgEventService;
@@ -3222,26 +3370,106 @@ class ImagesViewComponent {
         this.userSettingsService = userSettingsService;
         this.renamePictureService = renamePictureService;
         this.changeDetectorRef = changeDetectorRef;
-    }
-    ngOnInit() {
+        this.listDisplayed = false; // Display format list or mosaic
+        this.multipleImgMode = false;
+        this.switchDisplayWindow = new EventEmitter();
+        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, // tablet
+                largeImgWidthFactor: 0.5,
+                smallImgWidthFactor: 0.3333
+            },
+            {
+                max: 1023, // deskop
+                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.nbImgToDelSelected = 0;
+        this.disable = false; // Use to disable action during server request
+        this.delListImgLoader = false;
+        this.initComponent = true;
+        this.failLoaded = false;
+        this.confirmImgSup = false;
+        this.errorGetAllImg = 'ImgManager.ImgLib.errorGetAllImg';
+        this.errorGetTotalImg = 'ImgManager.ImgLib.errorGetTotalImg';
+        this.errorGetImg = 'ImgManager.ImgLib.errorGetCanvaImg';
+        this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
+        this.destroy$ = new Subject();
         this.vm$ = combineLatest({
             imageSelection: this.imgSelectionService.imgSelection$,
             imageListData: this.imgManager.imageList$,
             isLoading: this.imgManager.isLoading$,
             searchImagesParameters: this.imgManager.searchImagesParameters$,
         }).pipe(map$1(({ imageSelection, imageListData: { imageList, imageTotal }, isLoading, searchImagesParameters }) => {
-            this.initVariables(true); // Si cette méthode est nécessaire à l'initialisation
-            this.calculateNbImgFake(imageList.data.length); // Même chose ici
+            this.initVariables(true);
+            this.calculateNbImgFake(imageList.data.length);
             const picturesList = this.setSelectedProperty(imageSelection, imageList.data);
             this.renamePictureService.setPicturesList(picturesList);
             const tableFilters = this.getTableFilters(searchImagesParameters, imageTotal);
-            const keepImagesDisplayed = (this.tabDisplayed === 'img-upload' && searchImagesParameters.page === '1') ||
-                (this.tabDisplayed === 'images-view' && imageList.data.length && searchImagesParameters.page === '1');
+            const keepImagesDisplayed = (this.tabDisplayed === 'img-upload' && searchImagesParameters.page === '1') || (this.tabDisplayed === 'images-view' && imageList.data.length && searchImagesParameters.page === '1');
             const skipSetImagesToDisplay = !!picturesList?.length && this.tabDisplayed === 'img-upload' && searchImagesParameters.page === '1';
-            const hideUntilFetchedFirstPageImagesForTabUpload = this.tabDisplayed === 'img-upload' &&
-                (searchImagesParameters.page !== '1' || imageList?.page !== 1);
+            const hideUntilFetchedFirstPageImagesForTabUpload = this.tabDisplayed === 'img-upload' && (searchImagesParameters.page !== '1' || imageList?.page !== 1);
             return {
-                isLoading: hideUntilFetchedFirstPageImagesForTabUpload || (!keepImagesDisplayed && isLoading),
+                isLoading: hideUntilFetchedFirstPageImagesForTabUpload || !keepImagesDisplayed && isLoading,
                 displayPexelsResults: !isLoading && imageTotal === 0,
                 picturesList,
                 imageTotal,
@@ -3254,6 +3482,7 @@ class ImagesViewComponent {
         return {
             sort: undefined,
             order: undefined,
+            type: searchImagesParameters.type,
             searchValue: searchImagesParameters.search,
             totalItems: imageTotal,
             itemsPerPage: parseInt(searchImagesParameters.limit),
@@ -3393,6 +3622,7 @@ class ImagesViewComponent {
         return {
             limit: tableFilters.itemsPerPage.toString(),
             page: tableFilters.currentPage.toString(),
+            type: tableFilters.type,
             ...(tableFilters.searchValue && { search: tableFilters.searchValue.toString() }),
         };
     }
@@ -3443,18 +3673,18 @@ class ImagesViewComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n    <div\r\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n    class=\"images-view__container\"\r\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n    >\r\n\r\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n      </div>\r\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n      </div>\r\n\r\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n          <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n              <!-- Select -->\r\n              <button\r\n                class=\"button success images-view__container__boxAction__import\"\r\n                @insertRemoveAnnim\r\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n                (click)=\"selectImgChosen(vm.picturesList)\"\r\n                type=\"button\"\r\n                >\r\n                  <i class=\"fal fa-check\"></i>\r\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n              </button>\r\n\r\n              <!-- Display btn del multiple img -->\r\n              <button\r\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n                (click)=\"displayConfirmImgSup()\"\r\n                class=\"button images-view__container__boxAction__delBtn danger\"\r\n                @insertRemoveAnnim\r\n                type=\"button\"\r\n              >\r\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n              </button>\r\n\r\n              <!-- Confirm action -->\r\n              <div\r\n                class=\"images-view__container__boxAction__confirmSup\"\r\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n                  <div>\r\n                      <button\r\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n                        (click)=\"cancelSup()\"\r\n                        type=\"button\"\r\n                      >\r\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n                      </button>\r\n                      <button\r\n                        (click)=\"removeListImg(vm.picturesList)\"\r\n                        class=\"button images-view__container__delBtn danger\"\r\n                        type=\"button\"\r\n                      >\r\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n                    </button>\r\n                  </div>\r\n              </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Swith mosaic/list forma -->\r\n          <div class=\"field has-addons images-view__container__buttonBox\">\r\n              <div class=\"control\">\r\n                  <div\r\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n                    (click)=\"onSwitchFormatDisplayed(false)\"\r\n                  >\r\n                      <span class=\"icon is-small\">\r\n                        <i class=\"fa-solid fa-th\"></i>\r\n                      </span>\r\n                  </div>\r\n              </div>\r\n\r\n              <div class=\"control\">\r\n                  <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n                          [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n                          (click)=\"onSwitchFormatDisplayed(true)\"\r\n                  >\r\n                    <span class=\"icon is-small\">\r\n                        <i class=\"fa-solid fa-bars\"></i>\r\n                    </span>\r\n                </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n    <!-- Images section -->\r\n  <ng-scrollbar\r\n    class=\"images-view__scroll\"\r\n    [ngClass]=\"{\r\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n      'images-view__scroll--full': stateDisplayed === 'full',\r\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n      'images-view__scroll--window': stateDisplayed === 'window'\r\n  }\"\r\n  >\r\n    <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n          <mosaic-view\r\n            [picturesList]=\"vm.picturesList\"\r\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n            [tableFilters]=\"vm.tableFilters\"\r\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n            [(disable)]=\"disable\"\r\n            (pictureNameChange)=\"onRenamePicture($event)\"\r\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n            [nbFakeImg]=\"nbFakeImg\"\r\n            [stateDisplayed]=\"stateDisplayed\"\r\n            [tabDisplayed]=\"tabDisplayed\"\r\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n            [isLoading]=\"vm.isLoading\"\r\n            [fullSize]=\"fullSize\"\r\n          >\r\n          </mosaic-view>\r\n        </div>\r\n\r\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n          <table-view\r\n            [picturesList]=\"vm.picturesList\"\r\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n            [tableFilters]=\"vm.tableFilters\"\r\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n            [(disable)]=\"disable\"\r\n            (pictureNameChange)=\"onRenamePicture($event)\"\r\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n            [stateDisplayed]=\"stateDisplayed\"\r\n            [isLoading]=\"vm.isLoading\"\r\n            >\r\n          </table-view>\r\n        </div>\r\n    </div>\r\n  </ng-scrollbar>\r\n\r\n  <!-- Pexels Section - When no img found -->\r\n  <div\r\n    *ngIf=\"vm.displayPexelsResults\"\r\n    class=\"images-view--pexels\"\r\n    [@easeInOut]=\"'in'\">\r\n    <pexels-lib\r\n      [searchValue]=\"vm.tableFilters.searchValue\"\r\n      [disableSearch]=\"true\"\r\n    >\r\n    </pexels-lib>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImagesViewComponent, isStandalone: false, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n    <div\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n    class=\"images-view__container\"\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n    >\n\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n      </div>\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n      </div>\n\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\n          <div class=\"images-view__container__boxAction\">\n\n\n              <!-- Select -->\n              <button\n                class=\"button success images-view__container__boxAction__import\"\n                @insertRemoveAnnim\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n                (click)=\"selectImgChosen(vm.picturesList)\"\n                type=\"button\"\n                >\n                  <i class=\"fal fa-check\"></i>\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n              </button>\n\n              <!-- Display btn del multiple img -->\n              <button\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n                (click)=\"displayConfirmImgSup()\"\n                class=\"button images-view__container__boxAction__delBtn danger\"\n                @insertRemoveAnnim\n                type=\"button\"\n              >\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n              </button>\n\n              <!-- Confirm action -->\n              <div\n                class=\"images-view__container__boxAction__confirmSup\"\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <div>\n                      <button\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                        (click)=\"cancelSup()\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                      </button>\n                      <button\n                        (click)=\"removeListImg(vm.picturesList)\"\n                        class=\"button images-view__container__delBtn danger\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\n                    </button>\n                  </div>\n              </div>\n\n          </div>\n\n\n          <!-- Swith mosaic/list forma -->\n          <div class=\"field has-addons images-view__container__buttonBox\">\n              <div class=\"control\">\n                  <div\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                    (click)=\"onSwitchFormatDisplayed(false)\"\n                  >\n                      <span class=\"icon is-small\">\n                        <i class=\"fa-solid 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=\"fa-solid fa-bars\"></i>\n                    </span>\n                </div>\n              </div>\n          </div>\n      </div>\n    </div>\n  </div>\n\n\n    <!-- Images section -->\n  <ng-scrollbar\n    class=\"images-view__scroll\"\n    [ngClass]=\"{\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n      'images-view__scroll--full': stateDisplayed === 'full',\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n      'images-view__scroll--window': stateDisplayed === 'window'\n  }\"\n  >\n\n    <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <label class=\"checkbox images-view__container__filterVideo\">\n        <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\n        <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\n          <option selected value=\"\">\n            {{ 'ImgManager.ImgLib.allFiles' | translate }}\n          </option>\n          <option value=\"image\">\n            {{ 'ImgManager.ImgLib.onlyImages' | translate }}\n          </option>\n          <option value=\"video\">\n            {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\n          </option>\n        </select>\n      </label>\n    </div>\n\n    <div #imgLibContainer class=\"images-view__wrapper\">\n\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n          <mosaic-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n            [nbFakeImg]=\"nbFakeImg\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [tabDisplayed]=\"tabDisplayed\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [isLoading]=\"vm.isLoading\"\n            [fullSize]=\"fullSize\"\n          >\n          </mosaic-view>\n        </div>\n\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n          <table-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [isLoading]=\"vm.isLoading\"\n            >\n          </table-view>\n        </div>\n    </div>\n  </ng-scrollbar>\n\n  <!-- Pexels Section - When no img found -->\n  <div\n    *ngIf=\"vm.displayPexelsResults\"\n    class=\"images-view--pexels\"\n    [@easeInOut]=\"'in'\">\n    <pexels-lib\n      [searchValue]=\"vm.tableFilters.searchValue\"\n      [disableSearch]=\"true\"\n    >\n    </pexels-lib>\n  </div>\n</ng-container>\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
             easeInOut,
             insertRemove
-        ] });
+        ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImagesViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagesViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'images-view', animations: [
+            args: [{ standalone: false, selector: 'images-view', animations: [
                         easeInOut,
                         insertRemove
-                    ], template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\r\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\r\n    <div\r\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\r\n    class=\"images-view__container\"\r\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\r\n    >\r\n\r\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\r\n      </div>\r\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\r\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\r\n      </div>\r\n\r\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n\r\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\r\n          <div class=\"images-view__container__boxAction\">\r\n\r\n\r\n              <!-- Select -->\r\n              <button\r\n                class=\"button success images-view__container__boxAction__import\"\r\n                @insertRemoveAnnim\r\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\r\n                (click)=\"selectImgChosen(vm.picturesList)\"\r\n                type=\"button\"\r\n                >\r\n                  <i class=\"fal fa-check\"></i>\r\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\r\n              </button>\r\n\r\n              <!-- Display btn del multiple img -->\r\n              <button\r\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\r\n                (click)=\"displayConfirmImgSup()\"\r\n                class=\"button images-view__container__boxAction__delBtn danger\"\r\n                @insertRemoveAnnim\r\n                type=\"button\"\r\n              >\r\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\r\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\r\n              </button>\r\n\r\n              <!-- Confirm action -->\r\n              <div\r\n                class=\"images-view__container__boxAction__confirmSup\"\r\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\r\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\r\n                  <div>\r\n                      <button\r\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\r\n                        (click)=\"cancelSup()\"\r\n                        type=\"button\"\r\n                      >\r\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\r\n                      </button>\r\n                      <button\r\n                        (click)=\"removeListImg(vm.picturesList)\"\r\n                        class=\"button images-view__container__delBtn danger\"\r\n                        type=\"button\"\r\n                      >\r\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\r\n                    </button>\r\n                  </div>\r\n              </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Swith mosaic/list forma -->\r\n          <div class=\"field has-addons images-view__container__buttonBox\">\r\n              <div class=\"control\">\r\n                  <div\r\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\r\n                    (click)=\"onSwitchFormatDisplayed(false)\"\r\n                  >\r\n                      <span class=\"icon is-small\">\r\n                        <i class=\"fa-solid fa-th\"></i>\r\n                      </span>\r\n                  </div>\r\n              </div>\r\n\r\n              <div class=\"control\">\r\n                  <div class=\"button is-lighted images-view__container__buttonBox__btn\"\r\n                          [ngClass]=\"{'actifDisplayed': listDisplayed}\"\r\n                          (click)=\"onSwitchFormatDisplayed(true)\"\r\n                  >\r\n                    <span class=\"icon is-small\">\r\n                        <i class=\"fa-solid fa-bars\"></i>\r\n                    </span>\r\n                </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n    <!-- Images section -->\r\n  <ng-scrollbar\r\n    class=\"images-view__scroll\"\r\n    [ngClass]=\"{\r\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\r\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\r\n      'images-view__scroll--full': stateDisplayed === 'full',\r\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\r\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\r\n      'images-view__scroll--window': stateDisplayed === 'window'\r\n  }\"\r\n  >\r\n    <div #imgLibContainer class=\"images-view__wrapper\">\r\n\r\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\r\n          <mosaic-view\r\n            [picturesList]=\"vm.picturesList\"\r\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n            [tableFilters]=\"vm.tableFilters\"\r\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n            [(disable)]=\"disable\"\r\n            (pictureNameChange)=\"onRenamePicture($event)\"\r\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\r\n            [nbFakeImg]=\"nbFakeImg\"\r\n            [stateDisplayed]=\"stateDisplayed\"\r\n            [tabDisplayed]=\"tabDisplayed\"\r\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n            [isLoading]=\"vm.isLoading\"\r\n            [fullSize]=\"fullSize\"\r\n          >\r\n          </mosaic-view>\r\n        </div>\r\n\r\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\r\n          <table-view\r\n            [picturesList]=\"vm.picturesList\"\r\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\r\n            [tableFilters]=\"vm.tableFilters\"\r\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\r\n            [(disable)]=\"disable\"\r\n            (pictureNameChange)=\"onRenamePicture($event)\"\r\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\r\n            [stateDisplayed]=\"stateDisplayed\"\r\n            [isLoading]=\"vm.isLoading\"\r\n            >\r\n          </table-view>\r\n        </div>\r\n    </div>\r\n  </ng-scrollbar>\r\n\r\n  <!-- Pexels Section - When no img found -->\r\n  <div\r\n    *ngIf=\"vm.displayPexelsResults\"\r\n    class=\"images-view--pexels\"\r\n    [@easeInOut]=\"'in'\">\r\n    <pexels-lib\r\n      [searchValue]=\"vm.tableFilters.searchValue\"\r\n      [disableSearch]=\"true\"\r\n    >\r\n    </pexels-lib>\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], template: "<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n    <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n    <div\n    *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n    class=\"images-view__container\"\n    [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n    >\n\n      <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n          <p class=\"mainColor\" [ngClass]=\"{'images-view__container__total--hide': vm.displayPexelsResults}\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{vm.imageTotal}}</p>\n      </div>\n      <div *ngIf=\"tabDisplayed === 'img-upload'\">\n          <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n      </div>\n\n      <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n          <!-- For listforma : Display btn del multiple img & Confirm action -->\n          <div class=\"images-view__container__boxAction\">\n\n\n              <!-- Select -->\n              <button\n                class=\"button success images-view__container__boxAction__import\"\n                @insertRemoveAnnim\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n                (click)=\"selectImgChosen(vm.picturesList)\"\n                type=\"button\"\n                >\n                  <i class=\"fal fa-check\"></i>\n                  {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n              </button>\n\n              <!-- Display btn del multiple img -->\n              <button\n                *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n                (click)=\"displayConfirmImgSup()\"\n                class=\"button images-view__container__boxAction__delBtn danger\"\n                @insertRemoveAnnim\n                type=\"button\"\n              >\n                  <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n                  <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n              </button>\n\n              <!-- Confirm action -->\n              <div\n                class=\"images-view__container__boxAction__confirmSup\"\n                [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n                  <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n                  <div>\n                      <button\n                        class=\"button images-view__container__boxAction__confirmSup__cancel\"\n                        (click)=\"cancelSup()\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                      </button>\n                      <button\n                        (click)=\"removeListImg(vm.picturesList)\"\n                        class=\"button images-view__container__delBtn danger\"\n                        type=\"button\"\n                      >\n                        {{ 'ImgManager.ImgLib.confirm' | translate }}\n                    </button>\n                  </div>\n              </div>\n\n          </div>\n\n\n          <!-- Swith mosaic/list forma -->\n          <div class=\"field has-addons images-view__container__buttonBox\">\n              <div class=\"control\">\n                  <div\n                    class=\"button is-lighted images-view__container__buttonBox__btn\"\n                    [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n                    (click)=\"onSwitchFormatDisplayed(false)\"\n                  >\n                      <span class=\"icon is-small\">\n                        <i class=\"fa-solid 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=\"fa-solid fa-bars\"></i>\n                    </span>\n                </div>\n              </div>\n          </div>\n      </div>\n    </div>\n  </div>\n\n\n    <!-- Images section -->\n  <ng-scrollbar\n    class=\"images-view__scroll\"\n    [ngClass]=\"{\n      'images-view__scroll--hide--mosaic': vm.displayPexelsResults && !listDisplayed,\n      'images-view__scroll--hide--table': vm.displayPexelsResults && listDisplayed,\n      'images-view__scroll--full': stateDisplayed === 'full',\n      'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n      'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n      'images-view__scroll--window': stateDisplayed === 'window'\n  }\"\n  >\n\n    <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <label class=\"checkbox images-view__container__filterVideo\">\n        <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\n        <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\n          <option selected value=\"\">\n            {{ 'ImgManager.ImgLib.allFiles' | translate }}\n          </option>\n          <option value=\"image\">\n            {{ 'ImgManager.ImgLib.onlyImages' | translate }}\n          </option>\n          <option value=\"video\">\n            {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\n          </option>\n        </select>\n      </label>\n    </div>\n\n    <div #imgLibContainer class=\"images-view__wrapper\">\n\n        <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n          <mosaic-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n            [nbFakeImg]=\"nbFakeImg\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [tabDisplayed]=\"tabDisplayed\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [isLoading]=\"vm.isLoading\"\n            [fullSize]=\"fullSize\"\n          >\n          </mosaic-view>\n        </div>\n\n        <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n          <table-view\n            [picturesList]=\"vm.picturesList\"\n            (picturesListChange)=\"onPicturesListChange(vm.picturesList)\"\n            [tableFilters]=\"vm.tableFilters\"\n            (filtersChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\"\n            [(disable)]=\"disable\"\n            (pictureNameChange)=\"onRenamePicture($event)\"\n            [displayPexelsResults]=\"vm.displayPexelsResults\"\n            [stateDisplayed]=\"stateDisplayed\"\n            [isLoading]=\"vm.isLoading\"\n            >\n          </table-view>\n        </div>\n    </div>\n  </ng-scrollbar>\n\n  <!-- Pexels Section - When no img found -->\n  <div\n    *ngIf=\"vm.displayPexelsResults\"\n    class=\"images-view--pexels\"\n    [@easeInOut]=\"'in'\">\n    <pexels-lib\n      [searchValue]=\"vm.tableFilters.searchValue\"\n      [disableSearch]=\"true\"\n    >\n    </pexels-lib>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }, { type: i0.ChangeDetectorRef }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], tabDisplayed: [{
@@ -3475,10 +3705,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class ZindexToggleDirective {
-    currentElement;
-    renderer;
-    isActived = false;
-    onEventChange;
     set isActive(value) {
         this.isActived = value;
         this.switchToggle();
@@ -3489,6 +3715,7 @@ class ZindexToggleDirective {
     constructor(currentElement, renderer) {
         this.currentElement = currentElement;
         this.renderer = renderer;
+        this.isActived = false;
     }
     ngOnInit() {
     }
@@ -3502,12 +3729,13 @@ class ZindexToggleDirective {
     }
     ngOnDestroy() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ZindexToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: { isActive: ["zIndexToggle", "isActive"] }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ZindexToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ZindexToggleDirective, isStandalone: false, selector: "[zIndexToggle]", inputs: { isActive: ["zIndexToggle", "isActive"] }, outputs: { onEventChange: "onEventChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ZindexToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ZindexToggleDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[zIndexToggle]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onEventChange: [{
@@ -3524,35 +3752,32 @@ class SelectFiltersPipe {
             return regexp.test(item.name);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SelectFiltersPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SelectFiltersPipe, name: "selectFilters" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectFiltersPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SelectFiltersPipe, isStandalone: false, name: "selectFilters" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SelectFiltersPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectFiltersPipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: false,
                     name: 'selectFilters'
                 }]
         }] });
 
 class SelectComponent {
-    translateService;
-    items;
-    placeholder;
-    label;
-    maxWidthItems;
-    search = false;
-    type = 'default';
-    callToAction;
-    maxWidth = '100%';
-    disabled = false;
-    selectValue = new EventEmitter();
-    clickOnCallToAction = new EventEmitter();
-    searchElement;
-    openCategories = false;
-    searchValue = '';
-    indexItemSelected = -1;
     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);
@@ -3590,9 +3815,6 @@ class SelectComponent {
     setIndexItemSelected(id) {
         this.indexItemSelected = this.items.findIndex(item => item.id === id);
     }
-    // ControlValueAccessor methods
-    onChange = () => { };
-    onTouch = () => { };
     writeValue(selectItem) {
         if (!selectItem) {
             return;
@@ -3607,12 +3829,12 @@ class SelectComponent {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SelectComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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>\r\n\r\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\r\n\r\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\r\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\r\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fa-solid fa-chevron-down\"></i></span>\r\n  </div>\r\n\r\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\r\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\r\n      <i class=\"far fa-search\"></i>\r\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\r\n    </div>\r\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\r\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\r\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fa-solid fa-chevron-down\"></i></span>\r\n  </div>\r\n\r\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\r\n    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\r\n\r\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\r\n        <div (click)=\"onClickCallToAction()\">\r\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\r\n          ><span>{{ callToAction?.name }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\r\n        (click)=\"onClose()\"\r\n        class=\"wac-select__content__item\"\r\n        >\r\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\r\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\r\n          </div>\r\n      </div>\r\n\r\n    </ng-scrollbar>\r\n\r\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\r\n      <span>{{'wac.datatable.noresult' | translate}}</span>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\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.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: i4.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: SelectComponent, isStandalone: false, 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=\"fa-solid 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=\"fa-solid 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    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\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    </ng-scrollbar>\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>\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.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: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", 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>\r\n\r\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\r\n\r\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\r\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\r\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fa-solid fa-chevron-down\"></i></span>\r\n  </div>\r\n\r\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\r\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\r\n      <i class=\"far fa-search\"></i>\r\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\r\n    </div>\r\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\r\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\r\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fa-solid fa-chevron-down\"></i></span>\r\n  </div>\r\n\r\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\r\n    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\r\n\r\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\r\n        <div (click)=\"onClickCallToAction()\">\r\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\r\n          ><span>{{ callToAction?.name }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\r\n        (click)=\"onClose()\"\r\n        class=\"wac-select__content__item\"\r\n        >\r\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\r\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\r\n          </div>\r\n      </div>\r\n\r\n    </ng-scrollbar>\r\n\r\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\r\n      <span>{{'wac.datatable.noresult' | translate}}</span>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: false, 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=\"fa-solid 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=\"fa-solid 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    <ng-scrollbar *ngIf=\"items.length\" style=\"height: 110px; width: 100%;\">\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    </ng-scrollbar>\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>\n" }]
         }], ctorParameters: () => [{ type: i3.TranslateService }], propDecorators: { items: [{
                 type: Input
             }], placeholder: [{
@@ -3641,60 +3863,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class ImgTabsComponent {
-    imgEventEditService;
-    alertService;
-    route;
-    multipleImgMode = false;
-    stateDisplayed;
-    listDisplayed = false;
-    imgManagerClosed = new EventEmitter();
-    currentTab = new EventEmitter();
-    switchDisplayWindow = new EventEmitter();
-    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
-        }
-    ];
-    tabActive = this.tabs[0];
-    /* tabActive = 'images-view';
-    tabs: string[] = ['img-upload', 'images-view', 'pexels-lib', 'img-edition']; */
-    editTab = false;
-    imgToEdit;
-    imgUpload = false;
-    imgUploadedComponent;
-    snackBarNewVersionConfig = {
-        message: '',
-        duration: 3000
-    };
     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.isVideoEdit = false;
+        this.snackBarNewVersionConfig = {
+            message: '',
+            duration: 3000
+        };
     }
     ngOnInit() {
         this.imgEventEditService.getImgToEditEventListener().subscribe(imgToEdit => {
             this.tabActive = this.tabs[3];
             this.imgToEdit = imgToEdit;
             this.editTab = true;
+            this.isVideoEdit = false;
+            this.currentTab.emit(this.tabs[3]);
+        });
+        this.imgEventEditService.getImgToVideoEventListener().subscribe(imgToEdit => {
+            this.tabActive = this.tabs[3];
+            this.imgToEdit = imgToEdit;
+            this.editTab = true;
+            this.isVideoEdit = true;
             this.currentTab.emit(this.tabs[3]);
         });
     }
@@ -3726,12 +3951,12 @@ class ImgTabsComponent {
     onImgManagerClosed() {
         this.imgManagerClosed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", 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\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgTabsComponent, deps: [{ token: ImgEventService }, { token: AlertService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImgTabsComponent, isStandalone: false, selector: "img-tabs", inputs: { multipleImgMode: "multipleImgMode", stateDisplayed: "stateDisplayed", listDisplayed: "listDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed", currentTab: "currentTab", switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgUploadedComponent", first: true, predicate: ["imgUploadedImg"], descendants: true }], ngImport: i0, template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        [isVideoEdit]=\"isVideoEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgUploadComponent, selector: "img-upload", inputs: ["stateDisplayed"], outputs: ["imgUploaded"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: UploadListComponent, selector: "upload-list", inputs: ["stateDisplayed", "tabDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: ImgEditorComponent, selector: "img-editor", inputs: ["stateDisplayed", "imgToEdit", "isVideoEdit"], outputs: ["editClosed"] }, { kind: "component", type: CanvaBtnComponent, selector: "canva-btn", inputs: ["stateDisplayed"], outputs: ["showImgUploaded"] }, { kind: "component", type: ImagesViewComponent, selector: "images-view", inputs: ["stateDisplayed", "tabDisplayed", "fullSize", "nbRowToShow", "listDisplayed", "multipleImgMode"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: SelectComponent, selector: "wac-select", inputs: ["items", "placeholder", "label", "maxWidthItems", "search", "type", "callToAction", "maxWidth", "disabled"], outputs: ["selectValue", "clickOnCallToAction"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-tabs', template: "<div\r\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\r\n  <div class=\"wrapper-tabs\">\r\n    <div\r\n      class=\"tabs\"\r\n      [ngClass]=\"\r\n        {\r\n          'tabs--notWindow': stateDisplayed !== 'window',\r\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\r\n        }\">\r\n\r\n      <ul>\r\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\r\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\r\n      </ul>\r\n      <div\r\n        class=\"img-tabs__canva\"\r\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\r\n        <canva-btn\r\n          (showImgUploaded)=\"onShowImgUploaded()\"\r\n          [stateDisplayed]=\"stateDisplayed\">\r\n        </canva-btn>\r\n      </div>\r\n    </div>\r\n    <div class=\"select-mobile-page\">\r\n      <wac-select\r\n        [(ngModel)]=\"tabActive\"\r\n        name=\"tabs\"\r\n        [items]=\"tabs\"\r\n      ></wac-select>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload section -->\r\n  <div\r\n    class=\"columns img-tabs__tabsFirst\"\r\n    [ngClass]=\"{\r\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\r\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\r\n    }\"\r\n    *ngIf=\"tabActive.value === tabs[0].value\">\r\n    <div class=\"column img-tabs__tabsFirst__upload\">\r\n      <img-upload\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (imgUploaded)=\"onImgUploaded($event)\"\r\n      ></img-upload>\r\n    </div>\r\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\r\n      'img-tabs__tabsFirst__list--upload': imgUpload\r\n    }\">\r\n      <images-view\r\n        *ngIf=\"!imgUpload\"\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"false\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        [nbRowToShow]=\"2\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"false\">\r\n      </images-view>\r\n\r\n\r\n      <div [hidden]=\"!imgUpload\">\r\n        <upload-list\r\n          #imgUploadedImg\r\n          [stateDisplayed]=\"stateDisplayed\"\r\n          [tabDisplayed]=\"tabActive.value\"\r\n          [multipleImgMode]=\"multipleImgMode\"\r\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n          >\r\n        </upload-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Images section -->\r\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\r\n    <div class=\"column\">\r\n\r\n      <images-view\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [tabDisplayed]=\"tabActive.value\"\r\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\r\n        [fullSize]=\"true\">\r\n      </images-view>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Pexels img section -->\r\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\r\n    <div class=\"column\">\r\n      <pexels-lib\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        (showImgUploaded)=\"onShowImgUploaded()\">\r\n      </pexels-lib>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Edition section -->\r\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\r\n    <div class=\"column\">\r\n      <img-editor\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [imgToEdit]=\"imgToEdit\"\r\n        (editClosed)=\"onEditClosed($event)\">\r\n      </img-editor>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'img-tabs', template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexels img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        [isVideoEdit]=\"isVideoEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: ImgEventService }, { type: AlertService }, { type: i3$2.Router }], propDecorators: { multipleImgMode: [{
                 type: Input
             }], stateDisplayed: [{
@@ -3750,24 +3975,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class ImgSelectionComponent {
-    imgSelectionService;
-    tabDisplayed;
-    imgManagerClosed = new EventEmitter();
-    removingAll = false;
-    cancellingAll = false;
-    importingAll = false;
-    dragStart = false;
-    vm$;
-    trashPositionIndex = 0;
-    trashPositionLeft = '-5px';
     constructor(imgSelectionService) {
         this.imgSelectionService = imgSelectionService;
-    }
-    ngOnInit() {
+        this.imgManagerClosed = new EventEmitter();
+        this.removingAll = false;
+        this.cancellingAll = false;
+        this.importingAll = false;
+        this.dragStart = false;
         this.vm$ = combineLatest({
             imgSelectedList: this.imgSelectionService.imgSelection$,
             isLoading: this.imgSelectionService.imgSelectedListLoading$
         });
+        this.trashPositionIndex = 0;
+        this.trashPositionLeft = '-5px';
     }
     init() {
         this.removingAll = false;
@@ -3785,12 +4005,12 @@ class ImgSelectionComponent {
     removeImgFromSelection(event) {
         this.imgSelectionService.removeImgSelectedByIndex(event.previousIndex);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ImgSelectionComponent, selector: "img-selection", inputs: { tabDisplayed: "tabDisplayed" }, outputs: { imgManagerClosed: "imgManagerClosed" }, ngImport: i0, template: "<div\r\n  class=\"trash\"\r\n  cdkDropList\r\n  #unSelectList=\"cdkDropList\"\r\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n  <div\r\n  class=\"img-selection\"\r\n  *ngIf=\"!vm.isLoading; else Loading\"\r\n  [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n  >\r\n\r\n      <div\r\n        cdkDropList\r\n        #selectionList=\"cdkDropList\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        class=\"list_img_selection\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n        [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n        >\r\n\r\n          <div\r\n            class=\"img_box\"\r\n            *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n            cdkDrag\r\n            (cdkDragStarted)=\"dragStart = true;\"\r\n            (cdkDragEnded)=\"dragStart = false;\"\r\n            >\r\n\r\n            <img\r\n              *ngIf=\"index < 1\"\r\n              class=\"drag__img\"\r\n              [src]=\"picture.file_name | imgSrc : '400'\"\r\n              [title]=\"picture.display_name\"\r\n            />\r\n\r\n            <img\r\n              *ngIf=\"index > 0\"\r\n              class=\"drag__img\"\r\n              [src]=\"picture.file_name | imgSrc : '200'\"\r\n              [title]=\"picture.display_name\"\r\n            />\r\n\r\n            <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n            <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n          </div>\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n  <wz-loader></wz-loader>\r\n</ng-template>\r\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", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ImgSelectionComponent, isStandalone: false, 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<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div\n  class=\"img-selection\"\n  *ngIf=\"!vm.isLoading; else Loading\"\n  [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\n  >\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 vm.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 *ngIf=\"picture.video_link\" class=\"img_box__video\">\n              <i class=\"fa-solid fa-play\"></i>\n            </div>\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</ng-container>\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\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", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ImgSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImgSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'img-selection', template: "<div\r\n  class=\"trash\"\r\n  cdkDropList\r\n  #unSelectList=\"cdkDropList\"\r\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\r\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\r\n</div>\r\n\r\n<ng-container *ngIf=\"vm$ | async as vm\">\r\n\r\n  <div\r\n  class=\"img-selection\"\r\n  *ngIf=\"!vm.isLoading; else Loading\"\r\n  [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\r\n  >\r\n\r\n      <div\r\n        cdkDropList\r\n        #selectionList=\"cdkDropList\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        class=\"list_img_selection\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n        [cdkDropListConnectedTo]=\"[unSelectList]\"\r\n        >\r\n\r\n          <div\r\n            class=\"img_box\"\r\n            *ngFor=\"let picture of vm.imgSelectedList; let index = index\"\r\n            cdkDrag\r\n            (cdkDragStarted)=\"dragStart = true;\"\r\n            (cdkDragEnded)=\"dragStart = false;\"\r\n            >\r\n\r\n            <img\r\n              *ngIf=\"index < 1\"\r\n              class=\"drag__img\"\r\n              [src]=\"picture.file_name | imgSrc : '400'\"\r\n              [title]=\"picture.display_name\"\r\n            />\r\n\r\n            <img\r\n              *ngIf=\"index > 0\"\r\n              class=\"drag__img\"\r\n              [src]=\"picture.file_name | imgSrc : '200'\"\r\n              [title]=\"picture.display_name\"\r\n            />\r\n\r\n            <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\r\n\r\n            <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\r\n\r\n          </div>\r\n      </div>\r\n  </div>\r\n</ng-container>\r\n<!-- Loader -->\r\n<ng-template #Loading>\r\n  <wz-loader></wz-loader>\r\n</ng-template>\r\n" }]
+            args: [{ standalone: false, 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<ng-container *ngIf=\"vm$ | async as vm\">\n\n  <div\n  class=\"img-selection\"\n  *ngIf=\"!vm.isLoading; else Loading\"\n  [ngClass]=\"{'img-selection--visible' : vm.imgSelectedList && vm.imgSelectedList.length}\"\n  >\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 vm.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 *ngIf=\"picture.video_link\" class=\"img_box__video\">\n              <i class=\"fa-solid fa-play\"></i>\n            </div>\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</ng-container>\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: ImgSelectionService }], propDecorators: { tabDisplayed: [{
                 type: Input
             }], imgManagerClosed: [{
@@ -3798,15 +4018,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class WzImgManagerComponent {
-    imgSelectionService;
-    userSettingsService;
-    canvaService;
-    imgEventService;
-    domService;
-    uploadService;
-    iconService;
-    stateDisplayed;
-    showSelection = false;
     // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
     // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
     set forceToOpenCanva(forceToOpenCanva) {
@@ -3816,8 +4027,6 @@ class WzImgManagerComponent {
         }
         this.canvaService.expectedImgSizesChange(forceToOpenCanva);
     }
-    imgManagerClosed = new EventEmitter();
-    _multipleImgMode = false;
     set multipleImgMode(activate) {
         this._multipleImgMode = activate;
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
@@ -3825,7 +4034,6 @@ class WzImgManagerComponent {
     get multipleImgMode() {
         return this._multipleImgMode;
     }
-    _showImgManagerModule = false;
     set showImgManagerModule(activate) {
         this._showImgManagerModule = activate;
         if (activate) {
@@ -3840,16 +4048,6 @@ class WzImgManagerComponent {
             this.onClose();
         }
     }
-    imgSelectionChange = new EventEmitter();
-    imageUploaded = new EventEmitter();
-    close = false;
-    selectImgEvent;
-    listDisplayed = false;
-    listDisplayedEvent;
-    hideTab = false;
-    // Save the default overflow apply to html tag, when the module is full open
-    overflowHTML;
-    bodyPadding;
     constructor(imgSelectionService, userSettingsService, canvaService, imgEventService, domService, uploadService, iconService) {
         this.imgSelectionService = imgSelectionService;
         this.userSettingsService = userSettingsService;
@@ -3858,21 +4056,26 @@ class WzImgManagerComponent {
         this.domService = domService;
         this.uploadService = uploadService;
         this.iconService = iconService;
+        this.showSelection = false;
+        this.imgManagerClosed = new EventEmitter();
+        this._multipleImgMode = false;
+        this._showImgManagerModule = false;
+        this.imgSelectionChange = this.imgSelectionService.imgSelection$;
+        this.imageUploaded = this.uploadService.imageUploaded$;
+        this.close = false;
+        this.listDisplayed = false;
+        this.hideTab = false;
         this.iconService.loadIconLib();
     }
     ngOnInit() {
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
         this.imgSelectionService.initImgSelectedList(null);
         this.selectImgEvent = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
-            this.imgSelectionChange.emit(imgSelection);
             if (imgSelection && imgSelection.length && this.checkCloseImgManager()) {
                 // Close the img manager
                 this.onClose();
             }
         });
-        this.uploadService.imageUploaded$.subscribe(uploadedImage => {
-            this.imageUploaded.emit(uploadedImage);
-        });
         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);
@@ -3959,12 +4162,12 @@ class WzImgManagerComponent {
         this.canvaService.expectedImgSizesChange(null);
         this.listDisplayedEvent.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }, { token: UploadService }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange", imageUploaded: "imageUploaded" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\r\n  <!-- Img selection handler -->\r\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\r\n    <img-selection></img-selection>\r\n  </div>\r\n\r\n  <!-- Img manager module -->\r\n  <div\r\n    *ngIf=\"_showImgManagerModule\"\r\n    class=\"wz-img-manager__module\"\r\n    [ngClass]=\"{\r\n      'wz-img-manager__module--small': stateDisplayed === 'small',\r\n      'wz-img-manager__module--full': stateDisplayed === 'full',\r\n      'wz-img-manager__module--window': stateDisplayed === 'window',\r\n      'wz-img-manager__module--edit': hideTab}\"\r\n  >\r\n\r\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\r\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\r\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\r\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\r\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\r\n    </div>\r\n\r\n    <div\r\n      class=\"wz-img-manager__module__content wz-block\"\r\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\r\n      <img-tabs\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        (imgManagerClosed)=\"onImgManagerClosed()\"\r\n        (switchDisplayWindow)=\"changeDisplayTab()\"\r\n        (currentTab)=\"setCurrentTab($event)\">\r\n      </img-tabs>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\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"] }] });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }, { token: UploadService }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WzImgManagerComponent, isStandalone: false, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange", imageUploaded: "imageUploaded" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img selection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\r\n  <!-- Img selection handler -->\r\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\r\n    <img-selection></img-selection>\r\n  </div>\r\n\r\n  <!-- Img manager module -->\r\n  <div\r\n    *ngIf=\"_showImgManagerModule\"\r\n    class=\"wz-img-manager__module\"\r\n    [ngClass]=\"{\r\n      'wz-img-manager__module--small': stateDisplayed === 'small',\r\n      'wz-img-manager__module--full': stateDisplayed === 'full',\r\n      'wz-img-manager__module--window': stateDisplayed === 'window',\r\n      'wz-img-manager__module--edit': hideTab}\"\r\n  >\r\n\r\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\r\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\r\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\r\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\r\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\r\n    </div>\r\n\r\n    <div\r\n      class=\"wz-img-manager__module__content wz-block\"\r\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\r\n      <img-tabs\r\n        [stateDisplayed]=\"stateDisplayed\"\r\n        [multipleImgMode]=\"multipleImgMode\"\r\n        [listDisplayed]=\"listDisplayed\"\r\n        (imgManagerClosed)=\"onImgManagerClosed()\"\r\n        (switchDisplayWindow)=\"changeDisplayTab()\"\r\n        (currentTab)=\"setCurrentTab($event)\">\r\n      </img-tabs>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\n  <!-- Img selection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }, { type: UploadService }, { type: IconService }], propDecorators: { stateDisplayed: [{
                 type: Input
             }], showSelection: [{
@@ -3987,21 +4190,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 class SnackBarService {
-    nwbSnackbar;
-    translateService;
-    actionMsg = 'ImgManager.snackBar.action';
-    snackBarConfigAction = {
-        message: '',
-        duration: 5000
-    };
-    snackBarConfig = {
-        message: '',
-        duration: 5000
-    };
-    snackBarRefComponent;
     constructor(nwbSnackbar, translateService) {
         this.nwbSnackbar = nwbSnackbar;
         this.translateService = translateService;
+        this.actionMsg = 'ImgManager.snackBar.action';
+        this.snackBarConfigAction = {
+            message: '',
+            duration: 5000
+        };
+        this.snackBarConfig = {
+            message: '',
+            duration: 5000
+        };
     }
     openSnackBar(msgKey) {
         this.closePreviousSnackbar();
@@ -4039,10 +4239,10 @@ class SnackBarService {
             this.snackBarRefComponent.dismiss(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SnackBarService, deps: [{ token: i1.NwbSnackbarService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SnackBarService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService, deps: [{ token: i1.NwbSnackbarService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SnackBarService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NwbSnackbarService }, { type: i3.TranslateService }] });
 
@@ -4056,6 +4256,8 @@ const components = [
     UploadListComponent,
     ImgEditorComponent,
     EditorInfoSectionComponent,
+    EditorInfoVideoComponent,
+    EditorShowIframeComponent,
     CanvaBtnComponent,
     ImgSelectionComponent,
     LoaderComponent,
@@ -4117,8 +4319,8 @@ class WzImgManagerModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerModule, declarations: [WzImgManagerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerModule, declarations: [WzImgManagerComponent,
             ImgTabsComponent,
             ImgUploadComponent,
             PexelLibComponent,
@@ -4126,6 +4328,8 @@ class WzImgManagerModule {
             UploadListComponent,
             ImgEditorComponent,
             EditorInfoSectionComponent,
+            EditorInfoVideoComponent,
+            EditorShowIframeComponent,
             CanvaBtnComponent,
             ImgSelectionComponent,
             LoaderComponent,
@@ -4160,24 +4364,23 @@ class WzImgManagerModule {
             HttpClientModule,
             FormsModule,
             NgScrollbarModule,
-            NgScrollbarReachedModule,
+            NgScrollReached,
             NwbAllModule,
-            ImageCropperModule,
+            ImageCropperComponent,
             CdkTableModule,
             DragDropModule,
-            TranslateModule], exports: [WzImgManagerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerModule, imports: [CommonModule,
+            TranslateModule], exports: [WzImgManagerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerModule, imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             NgScrollbarModule,
-            NgScrollbarReachedModule,
             NwbAllModule,
-            ImageCropperModule,
+            ImageCropperComponent,
             CdkTableModule,
             DragDropModule,
-            TranslateModule] });
+            TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WzImgManagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WzImgManagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4190,9 +4393,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         HttpClientModule,
                         FormsModule,
                         NgScrollbarModule,
-                        NgScrollbarReachedModule,
+                        NgScrollReached,
                         NwbAllModule,
-                        ImageCropperModule,
+                        ImageCropperComponent,
                         CdkTableModule,
                         DragDropModule,
                         TranslateModule,
@@ -4205,25 +4408,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
         }] });
 
 class CanvaButtonApi {
-    createDesign;
-    editDesign;
 }
 ;
 
 class ImgApiDto {
-    shop_token;
-    image_manager_route = '';
-    pexels_token;
-    pexels_route = '';
-    shop_category;
-    canva_token;
-    canva_url = '';
-    assets_route = 'assets/img-manager/';
+    constructor() {
+        this.image_manager_route = '';
+        this.pexels_route = '';
+        this.canva_url = '';
+        this.assets_route = 'assets/img-manager/';
+    }
 }
 
 class ImgManagerConfigDto {
-    api;
-    imgCDNConfig;
 }
 
 /*