@wizishop/img-manager 15.2.63-beta → 15.2.63

package/fesm2020/wizishop-img-manager.mjs

@@ -486,11 +486,12 @@ class ImgManagerService {
             imageList: this.apiService.getShopImgList(params).pipe(take$1(1)),
             imageTotal: this.apiService.getShopTotalImgList(params).pipe(take$1(1))
         })), tap(() => this.isLoading$.next(false)));
-        this.imageList$ = merge(this.fetchImagesList$, this.resetImageList$.pipe(tap(() => this.isLoading$.next(true)), tap(() => this.searchImagesParameters$.next(this.DEFAULT_SEARCH_PARAMS)), map(() => this.DEFAULT_DATA_LIST))).pipe(startWith(this.DEFAULT_DATA_LIST), shareReplay(1));
+        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',
         };
     }
@@ -554,7 +555,7 @@ class ImgManagerService {
         ];
     }
     ngOnDestroy() {
-        this.destroy$.next();
+        this.destroy$.next(null);
         this.destroy$.complete();
     }
     copyToClipboard(url) {
@@ -711,6 +712,7 @@ class ImagesActionHandler {
             order: undefined,
             searchValue: '',
             totalItems: 0,
+            type: '',
             itemsPerPage: 30,
             currentPage: 1
         };
@@ -1800,26 +1802,77 @@ class EditorShowIframeComponent {
     buildSafeIframeUrl(url) {
         if (!url)
             return null;
-        if (url.includes('youtube.com') || url.includes('youtu.be')) {
-            const videoId = this.extractYoutubeId(url);
+        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 embed = `https://www.youtube.com/embed/${videoId}`;
+            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/${videoId}`;
+            const embed = `https://player.vimeo.com/video/${encodeURIComponent(videoId)}`;
             return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
         }
         return null;
     }
-    extractYoutubeId(url) {
-        const regExp = /^.*(youtu.be\/|v=|embed\/)([^#\&\?]*).*/;
-        const match = url.match(regExp);
-        return match && match[2].length > 0 ? match[2] : 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+)/;
@@ -1828,10 +1881,10 @@ class EditorShowIframeComponent {
     }
 }
 EditorShowIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-EditorShowIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorShowIframeComponent, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <iframe\r\n    width=\"100%\"\r\n    [src]=\"safeUrl\"\r\n    frameborder=\"0\"\r\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n    allowfullscreen>\r\n  </iframe>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+EditorShowIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: EditorShowIframeComponent, selector: "show-iframe", inputs: { videoLink: "videoLink" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <div class=\"video-container\">\r\n    <iframe\r\n      [src]=\"safeUrl\"\r\n      frameborder=\"0\"\r\n      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n      allowfullscreen>\r\n    </iframe>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\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: "15.0.4", ngImport: i0, type: EditorShowIframeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <iframe\r\n    width=\"100%\"\r\n    [src]=\"safeUrl\"\r\n    frameborder=\"0\"\r\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n    allowfullscreen>\r\n  </iframe>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n" }]
+            args: [{ selector: 'show-iframe', template: "<div class=\"show-iframe\" *ngIf=\"safeUrl\">\r\n  <div class=\"video-container\">\r\n    <iframe\r\n      [src]=\"safeUrl\"\r\n      frameborder=\"0\"\r\n      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n      allowfullscreen>\r\n    </iframe>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"show-iframe__none\" *ngIf=\"!safeUrl\">\r\n  <p>{{ 'ImgManager.ImgEditor.NoVideo' | translate }}</p>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { videoLink: [{
                 type: Input
             }] } });
@@ -2286,14 +2339,14 @@ class ImgEditorComponent {
     }
 }
 ImgEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgEditorComponent, deps: [{ token: ImgManagerService }, { token: RenamePictureService }], target: i0.ɵɵFactoryTarget.Component });
-ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, 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        style=\"min-height: 500px\"\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\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Informations</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Associer une vid\u00E9o</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\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: 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: [
+ImgEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgEditorComponent, selector: "img-editor", inputs: { stateDisplayed: "stateDisplayed", imgToEdit: "imgToEdit", isVideoEdit: "isVideoEdit" }, 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        style=\"min-height: 500px\"\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\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\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: 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: "15.0.4", ngImport: i0, type: ImgEditorComponent, decorators: [{
             type: Component,
             args: [{ 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        style=\"min-height: 500px\"\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\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Informations</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = !isEditorLinkActive\">Associer une vid\u00E9o</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
+                    ], 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        style=\"min-height: 500px\"\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\r\n    <div class=\"columns\">\r\n        <!-- Left section -->\r\n        <div class=\"column is-one-third img-editor__infoSection\">\r\n\r\n          <ul class=\"img-editorVideo__tabs\">\r\n            <li [ngClass]=\"{'active': !isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = false;\">{{ 'ImgManager.ImgLib.informations' | translate }}</span></li>\r\n            <li [ngClass]=\"{'active': isEditorLinkActive}\"><span (click)=\"isEditorLinkActive = true;\">{{ 'ImgManager.ImgLib.associateVideo' | translate }}</span></li>\r\n          </ul>\r\n\r\n            <info-section\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isNameModified)]=\"isNameModified\"\r\n              >\r\n            </info-section>\r\n           <info-video\r\n             *ngIf=\"isEditorLinkActive\"\r\n             [(videoLink)]=\"imgToEdit.video_link\"\r\n             [(isVideoModified)]=\"isVideoModified\"\r\n             (deleteVideo)=\"onDeleteVideo()\">\r\n           </info-video>\r\n        </div>\r\n\r\n\r\n        <!-- Right section -->\r\n        <div class=\"column img-editor__container\">\r\n            <cropper\r\n              *ngIf=\"!isEditorLinkActive\"\r\n              [imgToEdit]=\"imgToEdit\"\r\n              [(isImgModified)]=\"isImgModified\"\r\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\r\n              (editClosed)=\"onEditClosed($event)\">\r\n            </cropper>\r\n          <show-iframe\r\n            style=\"display: block;width: 100%\"\r\n            [videoLink]=\"imgToEdit.video_link\"\r\n            *ngIf=\"isEditorLinkActive\">\r\n\r\n          </show-iframe>\r\n        </div>\r\n    </div>\r\n    </ng-scrollbar>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: RenamePictureService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], imgToEdit: [{
@@ -2686,6 +2739,7 @@ class FiltersTableService {
         this.dataTableFilters = {
             sort: undefined,
             order: undefined,
+            type: '',
             searchValue: undefined,
             totalItems: 0,
             itemsPerPage: 0,
@@ -2849,6 +2903,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
@@ -3278,14 +3333,14 @@ class TableViewComponent extends ImagesActionHandler {
     }
 }
 TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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 });
-TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\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.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: [
+TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n              <div *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\r\n                <i class=\"fa-solid fa-play\"></i>\r\n                <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n              </div>\r\n          </div>\r\n          <input\r\n            type=\"text\"\r\n            class=\"wzImgMngInput table-view__row__container__name\"\r\n            [(ngModel)]=\"picture.display_name\"\r\n            (focus)=\"previousName=picture.display_name\"\r\n            (blur)=\"onNameChange(picture.id_file)\"\r\n            (click)=\"onToggleDelSelection(index)\"\r\n            [ngClass]=\"{'desabled': picture.deleted}\"\r\n            [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\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.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: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-view', animations: [
                         listAnnimation
-                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n          </div>\r\n          <input\r\n              type=\"text\"\r\n              class=\"wzImgMngInput table-view__row__container__name\"\r\n              [(ngModel)]=\"picture.display_name\"\r\n              (focus)=\"previousName=picture.display_name\"\r\n              (blur)=\"onNameChange(picture.id_file)\"\r\n              (click)=\"onToggleDelSelection(index)\"\r\n              [ngClass]=\"{'desabled': picture.deleted}\"\r\n              [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\r\n  <wz-table\r\n    [checkbox]=\"true\"\r\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\r\n    [(tableFilters)]=\"tableFilters\"\r\n    (tableFiltersChange)=\"onFiltersChange()\"\r\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\r\n    [disablePagniation]=\"displayPexelsResults\"\r\n    [isLoading]=\"isLoading\"\r\n  >\r\n    <!-- Header Section -->\r\n    <div\r\n      headerCell\r\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\r\n      columnSize=\"2\"\r\n      sortName=\"name\"\r\n    ></div>\r\n    <div\r\n      headerCell\r\n      centerCell=\"center\"\r\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\r\n    ></div>\r\n    <div headerCell columnSize=\"0\"></div>\r\n\r\n    <!-- Body Section -->\r\n    <div\r\n      tableRow\r\n      checkBoxRow\r\n      [checkBoxValue]=\"picture.delSelected\"\r\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\r\n      *ngFor=\"let picture of picturesList; let index = index\"\r\n    >\r\n\r\n      <div tableColumn columnSize=\"2\">\r\n        <div class=\"table-view__row__container\">\r\n          <div\r\n            class=\"table-view__row__container__imgContainer\"\r\n            [ngClass]=\"{'imgSelected': picture.selected}\"\r\n            (click)=\"onToggleSelectImg(index)\">\r\n              <img\r\n                class=\"table-view__row__container__imgContainer__img\"\r\n                [src]=\"picture.file_name | imgSrc : '100'\"\r\n                alt=\"picture.display_name\"\r\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\r\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\r\n              />\r\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\r\n              <div\r\n                *ngIf=\"picture.imgNotLoaded\"\r\n                class=\"table-view__row__container__imgContainer__overlay\"\r\n                >\r\n                    <i class=\"fad fa-folder-times\"></i>\r\n              </div>\r\n              <div *ngIf=\"picture.video_link\" class=\"table-view__row__container__imgContainer__container__video\">\r\n                <i class=\"fa-solid fa-play\"></i>\r\n                <span>{{ 'ImgManager.ImgEditor.Video' | translate }}</span>\r\n              </div>\r\n          </div>\r\n          <input\r\n            type=\"text\"\r\n            class=\"wzImgMngInput table-view__row__container__name\"\r\n            [(ngModel)]=\"picture.display_name\"\r\n            (focus)=\"previousName=picture.display_name\"\r\n            (blur)=\"onNameChange(picture.id_file)\"\r\n            (click)=\"onToggleDelSelection(index)\"\r\n            [ngClass]=\"{'desabled': picture.deleted}\"\r\n            [disabled]=\"picture.deleted\"\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        tableColumn\r\n        centerCell=\"center\"\r\n        (click)=\"onToggleDelSelection(index)\"\r\n        >\r\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\r\n      </div>\r\n\r\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\r\n        <!-- Dropdown -->\r\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\r\n          <ng-container label>\r\n              <div class=\"table-view__dropdown-options__label rotate\">\r\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n              <div\r\n                class=\"dropdown-item\"\r\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\r\n              >\r\n                  <i class=\"far fa-download download\"></i>&nbsp;\r\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\r\n              </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"redirectToVideo(picture)\"\r\n            >\r\n              <i class=\"fa-solid fa-play\"></i>&nbsp;\r\n              <p>{{ 'ImgManager.ImgEditor.AddVideo' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onEdit(picture)\"\r\n            >\r\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"copyImageLink(picture.file_name)\"\r\n            >\r\n                <i class=\"far fa-copy copy\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container item>\r\n            <div\r\n              class=\"dropdown-item\"\r\n              (click)=\"onRemoveImg(picture)\"\r\n            >\r\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\r\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\r\n            </div>\r\n          </ng-container>\r\n        </dropdown>\r\n      </div>\r\n    </div>\r\n  </wz-table>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
 
 class ImagesViewComponent {
@@ -3412,6 +3467,7 @@ class ImagesViewComponent {
         return {
             sort: undefined,
             order: undefined,
+            type: searchImagesParameters.type,
             searchValue: searchImagesParameters.search,
             totalItems: imageTotal,
             itemsPerPage: parseInt(searchImagesParameters.limit),
@@ -3551,6 +3607,7 @@ class ImagesViewComponent {
         return {
             limit: tableFilters.itemsPerPage.toString(),
             page: tableFilters.currentPage.toString(),
+            type: tableFilters.type,
             ...(tableFilters.searchValue && { search: tableFilters.searchValue.toString() }),
         };
     }
@@ -3603,7 +3660,7 @@ class ImagesViewComponent {
     }
 }
 ImagesViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImagesViewComponent, deps: [{ token: ImgManagerService }, { token: ImgEventService }, { token: ImgSelectionService }, { token: AlertService }, { token: UserSettingsService }, { token: RenamePictureService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", 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: [
+ImagesViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImagesViewComponent, selector: "images-view", inputs: { stateDisplayed: "stateDisplayed", tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbRowToShow: "nbRowToShow", listDisplayed: "listDisplayed", multipleImgMode: "multipleImgMode" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, viewQueries: [{ propertyName: "imgLibContainer", first: true, predicate: ["imgLibContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\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\r\n    <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n      <label class=\"checkbox images-view__container__filterVideo\">\r\n        <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\r\n        <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\r\n          <option selected value=\"\">\r\n            {{ 'ImgManager.ImgLib.allFiles' | translate }}\r\n          </option>\r\n          <option value=\"image\">\r\n            {{ 'ImgManager.ImgLib.onlyImages' | translate }}\r\n          </option>\r\n          <option value=\"video\">\r\n            {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\r\n          </option>\r\n        </select>\r\n      </label>\r\n    </div>\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: "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", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PexelLibComponent, selector: "pexels-lib", inputs: ["stateDisplayed", "searchValue", "disableSearch"] }, { kind: "component", type: MosaicViewComponent, selector: "mosaic-view", inputs: ["tabDisplayed", "fullSize", "nbFakeImg"], outputs: ["switchDisplayWindow"] }, { kind: "component", type: TableViewComponent, selector: "table-view" }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [
         easeInOut,
         insertRemove
     ] });
@@ -3612,7 +3669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ 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\">\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\r\n    <div class=\"filter-video\" *ngIf=\"tabDisplayed !== 'img-upload'\">\r\n      <label class=\"checkbox images-view__container__filterVideo\">\r\n        <span>{{ 'ImgManager.ImgLib.filterVideo' | translate }}</span>\r\n        <select [(ngModel)]=\"vm.tableFilters.type\" (ngModelChange)=\"searchImagesParameters$.next(getParams(vm.tableFilters));\">\r\n          <option selected value=\"\">\r\n            {{ 'ImgManager.ImgLib.allFiles' | translate }}\r\n          </option>\r\n          <option value=\"image\">\r\n            {{ 'ImgManager.ImgLib.onlyImages' | translate }}\r\n          </option>\r\n          <option value=\"video\">\r\n            {{ 'ImgManager.ImgLib.onlyVideos' | translate }}\r\n          </option>\r\n        </select>\r\n      </label>\r\n    </div>\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" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgEventService }, { type: ImgSelectionService }, { type: AlertService }, { type: UserSettingsService }, { type: RenamePictureService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], tabDisplayed: [{
@@ -3933,10 +3990,10 @@ class ImgSelectionComponent {
     }
 }
 ImgSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgSelectionComponent, deps: [{ token: ImgSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
+ImgSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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 *ngIf=\"picture.video_link\" class=\"img_box__video\">\r\n              <i class=\"fa-solid fa-play\"></i>\r\n            </div>\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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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: [{ 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 *ngIf=\"picture.video_link\" class=\"img_box__video\">\r\n              <i class=\"fa-solid fa-play\"></i>\r\n            </div>\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" }]
         }], ctorParameters: function () { return [{ type: ImgSelectionService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], imgManagerClosed: [{
@@ -4360,4 +4417,3 @@ class ImgManagerConfigDto {
 
 export { ApiService, CanvaButtonApi, CanvaService, ImageNotFoundService, ImgApiDto, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
 //# sourceMappingURL=wizishop-img-manager.mjs.map
-//# sourceMappingURL=wizishop-img-manager.mjs.map