@wizishop/img-manager 15.2.63-beta → 15.2.63

package/lib/components/images-view/images-view.component.d.ts

@@ -1,6 +1,7 @@
 import { ElementRef, AfterViewInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ImgPictureDTO, ParamsImgManagerDTO } from '../../dto/img-manager.dto';
 import { ImgManagerService } from '../../services/img-manager.service';
+import { BehaviorSubject } from 'rxjs';
 import { ImgEventService } from '../../services/img-event.service';
 import { ImgSelectionService } from '../../services/img-selection.service';
 import { UserSettingsService } from '../../services/user-settings.service';
@@ -39,8 +40,7 @@ export declare class ImagesViewComponent implements AfterViewInit {
     initComponent: boolean;
     failLoaded: boolean;
     confirmImgSup: boolean;
-    previousSearchValue: string;
-    get searchImagesParameters$(): import("rxjs").BehaviorSubject<ParamsImgManagerDTO>;
+    get searchImagesParameters$(): BehaviorSubject<ParamsImgManagerDTO>;
     params: ParamsImgManagerDTO;
     private errorGetAllImg;
     private errorGetTotalImg;
@@ -88,6 +88,7 @@ export declare class ImagesViewComponent implements AfterViewInit {
         search: string;
         limit: string;
         page: string;
+        type: string;
     };
     private initVariables;
     private setSelectedProperty;

package/lib/components/img-editor/show-iframe/show-iframe.component.d.ts

@@ -8,7 +8,8 @@ export declare class EditorShowIframeComponent implements OnChanges {
     constructor(sanitizer: DomSanitizer);
     ngOnChanges(): void;
     private buildSafeIframeUrl;
-    private extractYoutubeId;
+    private isYouTubeUrl;
+    private extractYouTubeIds;
     private extractVimeoId;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorShowIframeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EditorShowIframeComponent, "show-iframe", never, { "videoLink": "videoLink"; }, {}, never, never, false, never>;

package/lib/dto/img-manager.dto.d.ts

@@ -31,4 +31,12 @@ export interface ParamsImgManagerDTO {
     limit: string;
     page: string;
     search?: string;
+    type?: string;
+}
+export interface ImageListData {
+    imageList: {
+        data: ImgPictureDTO[];
+        page: number;
+    };
+    imageTotal: number;
 }

package/lib/services/img-manager.service.d.ts

@@ -1,6 +1,6 @@
 import { HttpParams } from '@angular/common/http';
-import { BehaviorSubject, Subject } from "rxjs";
-import { ImgPicturesDTO, ParamsImgManagerDTO } from '../dto/img-manager.dto';
+import { BehaviorSubject, Observable, Subject } from "rxjs";
+import { ImageListData, ParamsImgManagerDTO } from '../dto/img-manager.dto';
 import { ImgManagerDisplayConfig } from '../dto/export-dtos.api';
 import { ImgManagerConfig } from '../dto/config/img-manager';
 import * as i0 from "@angular/core";
@@ -19,21 +19,15 @@ export declare class ImgManagerService {
     private get DEFAULT_DATA_LIST();
     searchImagesParameters$: BehaviorSubject<ParamsImgManagerDTO>;
     refreshImageList$: Subject<void>;
-    resetImageList$: import("rxjs").Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
+    resetImageList$: Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
     isLoading$: BehaviorSubject<boolean>;
     private fetchImagesList$;
-    imageList$: import("rxjs").Observable<{
-        imageList: ImgPicturesDTO;
-        imageTotal: number;
-    } | {
-        imageList: ImgPicturesDTO;
-        imageTotal: number;
-    }>;
+    imageList$: Observable<ImageListData>;
     getHttpParameters(params?: ParamsImgManagerDTO): HttpParams;
-    getShopImg(idFile: string): import("rxjs").Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
-    replaceImg(imageBase64: string, id_file: string): import("rxjs").Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
-    removeImg(id_file: string): import("rxjs").Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
-    removeMultipleImg(id_array: string[]): import("rxjs").Observable<import("../dto/img-manager.dto").ImgPictureDTO[]>;
+    getShopImg(idFile: string): Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
+    replaceImg(imageBase64: string, id_file: string): Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
+    removeImg(id_file: string): Observable<import("../dto/img-manager.dto").ImgPictureDTO>;
+    removeMultipleImg(id_array: string[]): Observable<import("../dto/img-manager.dto").ImgPictureDTO[]>;
     getImgManagerDisplayConfig(displayName: ImgManagerConfig): ImgManagerDisplayConfig;
     getAllImgManagerDisplayConfig(): ImgManagerDisplayConfig[];
     ngOnDestroy(): void;

package/lib/services/table/filters-table.service.d.ts

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
 export interface TableFilters extends PaginationFilters {
     sort: string;
     order: boolean;
+    type: string;
     searchValue: string;
 }
 export declare class FiltersTableService {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/img-manager",
-  "version": "15.2.63-beta",
+  "version": "15.2.63",
   "description": "The best and the most beautiful image manager.",
   "repository": {
     "type": "git",

package/wz-img-manager.scss

@@ -592,6 +592,22 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
     overflow: scroll;
   }
 }
+
+.img-tabs {
+  &.small {
+    @include media('>=desktop') {
+      .img-tabs__tabsFirst__upload + .img-tabs__tabsFirst__list {
+        .img-card {
+          &:hover, &:focus {
+            .img-card__container__video {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .wz-img-manager {
 
   &__selectionHandler {
@@ -987,7 +1003,7 @@ $tag-radius: rem(20px)!default;
     &__container {
         display: flex;
         justify-content: space-between;
-        margin: 0 0 rem(20);
+        margin: 0 0;
 
       > div {
         display: flex;
@@ -998,7 +1014,7 @@ $tag-radius: rem(20px)!default;
       }
 
         &--window {
-            margin: rem(30) 0 rem(20);
+            margin: rem(30) 0 0;
         }
 
         &--uploadTab {
@@ -1150,6 +1166,32 @@ $tag-radius: rem(20px)!default;
         }
     }
 }
+
+.filter-video {
+  width: 100%;
+  margin: 0 0 20px;
+  label {
+    display: flex;
+    gap: 10px;
+    width: fit-content;
+    align-items: center;
+  }
+  span {
+    font-weight: 500;
+  }
+  select {
+    padding: 0 10px;
+    min-height: 25px;
+    line-height: 25px;
+    border: 1px solid $img-input-border;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+  }
+}
 .wz-img-manager .img-editor {
     &__scroll {
         position: relative;
@@ -1530,6 +1572,27 @@ $tag-radius: rem(20px)!default;
       transition: opacity .3s ease .1s, transform .3s ease  .1s, visibility 0s linear 0s;
     }
   }
+  &__video {
+    width: fit-content;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: rgba(29, 42, 59, 0.8);
+    gap: 5px;
+    border-radius: 3px;
+    padding: 0 10px;
+    color: white;
+    font-size: rem(12);
+    font-weight: 500;
+    i {
+      color: white;
+      font-size: rem(14);
+    }
+  }
   .delete-btn {
     position: absolute;
     top: 100%;
@@ -2591,6 +2654,28 @@ $tag-radius: rem(20px)!default;
                     padding-top: 100%;
                 }
 
+                &__container__video {
+                  height: 16px;
+                  width: 60px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  position: absolute;
+                  bottom: 0;
+                  left: 0;
+                  background-color: rgba(29, 42, 59, 0.8);
+                  gap: 5px;
+                  border-radius: 3px;
+                  padding: 0;
+                  color: white;
+                  font-size: rem(10);
+                  font-weight: 500;
+                  i {
+                    color: white;
+                    font-size: rem(10);
+                  }
+                }
+
                 &__img {
                     margin: 0!important;
                     position: absolute;
@@ -2691,35 +2776,51 @@ $tag-radius: rem(20px)!default;
 
 .grey {
   color: $img-grey-color;
-} 
+}
 
-.buttonCopy { 
+.buttonCopy {
   background-color: $img-green-color; // Vert léger
   border: 1px solid $img-green-color; // Bordure verte légère
   border-radius: 4px;
   padding: 8px 12px;
   cursor: pointer;
   transition: all 0.2s ease;
-  
+
   i {
     color: $img-white; // Icône verte
     transition: color 0.2s ease;
   }
-  
+
   &:hover {
     background-color: $img-green-color-secondary; // Vert plus foncé au survol
     border-color: $img-green-color-secondary;
-    
+
     i {
       color: $img-white; // Icône verte plus foncée au survol
     }
   }
-  
+
   &:active {
     background-color: #b1dfbb;
     transform: scale(0.98);
   }
-}image-cropper {
+}
+
+.wrap-name-info {
+  width: 100%;
+  > p {
+    padding: 0 0 0 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: $wizishop-blue;
+    font-size: rem(14);
+    i {
+      color: $wizishop-blue;
+    }
+  }
+}
+image-cropper {
     max-height: 60vh;
   }.img-editor__infoSection__propertySEO__tooltips {
   i {
@@ -2823,11 +2924,6 @@ $tag-radius: rem(20px)!default;
     }
   }
 }
-iframe {
-  width: 100%!important;
-  height: 309px;
-}
-
 .show-iframe {
   box-sizing: border-box;
   padding: 20px;
@@ -2837,8 +2933,22 @@ iframe {
     font-size: rem(16);
     font-weight: 600;
     color: $main-text;
+    padding: 20px 0;
+  }
+}
+
+.video-container {
+  width: 100%;
+  max-width: 600px;
+  aspect-ratio: 16 / 9;
+  margin: 0 auto;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
   }
 }
+
 $default-color-p-alert: #1e5568;
 $success-color-p-alert: #11552e;
 $warning-color-p-alert: #3a0505;