@wizishop/img-manager 15.1.2 → 15.2.1

package/lib/components/images-view/images-actions-handler.d.ts

@@ -5,12 +5,12 @@ import { stateDisplayed } from "../../dto/export-dtos.api";
 import { PictureNameUpdate } from "../../dto/picture-name-update.dto";
 import { ImgPictureDTO } from "../../dto/img-manager.dto";
 import { AlertService } from "../../services/alert.service";
-import { ImgManagerConfigService } from "../../services/config/external-config.service";
 import { ImgCDNService } from "../../services/config/img-cdn.service";
 import { ImgEventService } from "../../services/img-event.service";
 import { ImgManagerService } from "../../services/img-manager.service";
 import { ImgSelectionService } from "../../services/img-selection.service";
 import { TableFilters } from "../../services/table/filters-table.service";
+import { ApiService } from "../../services/api.service";
 import * as i0 from "@angular/core";
 export declare abstract class ImagesActionHandler {
     protected imgManager: ImgManagerService;
@@ -20,7 +20,7 @@ export declare abstract class ImagesActionHandler {
     protected imgEventCardService: ImgEventService;
     protected alertService: AlertService;
     protected translateService: TranslateService;
-    protected externalService: ImgManagerConfigService;
+    private apiService;
     picturesList: ImgPictureDTO[];
     picturesListChange: EventEmitter<void>;
     tableFilters: TableFilters;
@@ -36,7 +36,7 @@ export declare abstract class ImagesActionHandler {
     private getDataAPISub;
     private errorRemoveImg;
     private errorAlreadyUsedImg;
-    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, externalService: ImgManagerConfigService);
+    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, apiService: ApiService);
     /** Event emit when the header checkbox is checked */
     onToggleAllCheckBoxRow(event: any): void;
     onToggleDelSelection(index: number): void;

package/lib/components/images-view/mosaic-view/img-card/img-card.component.d.ts

@@ -5,11 +5,11 @@ import { HttpClient } from '@angular/common/http';
 import { ImgManagerService } from '../../../../services/img-manager.service';
 import { ImgSelectionService } from '../../../../services/img-selection.service';
 import { ImgCDNService } from '../../../../services/config/img-cdn.service';
-import { ImgManagerConfigService } from '../../../../services/config/external-config.service';
 import { TranslateService } from '@ngx-translate/core';
 import { ImagesActionHandler } from '../../images-actions-handler';
 import { tabDisplayed } from '../../../../dto/export-dtos.api';
 import { AlertService } from '../../../../services/alert.service';
+import { ApiService } from '../../../../services/api.service';
 import * as i0 from "@angular/core";
 export declare class ImgCardComponent extends ImagesActionHandler implements OnInit {
     tabDisplayed: tabDisplayed;
@@ -21,7 +21,7 @@ export declare class ImgCardComponent extends ImagesActionHandler implements OnI
     switchDisplayWindow: EventEmitter<boolean>;
     isUploadSection: boolean;
     activeConfirmDelete: boolean;
-    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, externalService: ImgManagerConfigService);
+    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, apiService: ApiService);
     ngOnInit(): void;
     displayLargeWindow(): void;
     onToggleImgSelected(): void;

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

@@ -3,19 +3,19 @@ import { EventEmitter, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { PictureNameUpdate, tabDisplayed } from '../../../dto/export-dtos.api';
 import { AlertService } from '../../../services/alert.service';
-import { ImgManagerConfigService } from '../../../services/config/external-config.service';
 import { ImgCDNService } from '../../../services/config/img-cdn.service';
 import { ImgEventService } from '../../../services/img-event.service';
 import { ImgManagerService } from '../../../services/img-manager.service';
 import { ImgSelectionService } from '../../../services/img-selection.service';
 import { ImagesActionHandler } from '../images-actions-handler';
+import { ApiService } from '../../../services/api.service';
 import * as i0 from "@angular/core";
 export declare class MosaicViewComponent extends ImagesActionHandler implements OnInit {
     tabDisplayed: tabDisplayed;
     fullSize: boolean;
     nbFakeImg: number;
     switchDisplayWindow: EventEmitter<boolean>;
-    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, externalService: ImgManagerConfigService);
+    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, apiService: ApiService);
     ngOnInit(): void;
     onSearchChange(event: string): void;
     onCardRenamePicture(pictureRenamed: PictureNameUpdate): void;

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

@@ -2,16 +2,16 @@ import { HttpClient } from '@angular/common/http';
 import { OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertService } from '../../../services/alert.service';
-import { ImgManagerConfigService } from '../../../services/config/external-config.service';
 import { ImgCDNService } from '../../../services/config/img-cdn.service';
 import { ImgEventService } from '../../../services/img-event.service';
 import { ImgManagerService } from '../../../services/img-manager.service';
 import { ImgSelectionService } from '../../../services/img-selection.service';
 import { ImagesActionHandler } from '../images-actions-handler';
+import { ApiService } from '../../../services/api.service';
 import * as i0 from "@angular/core";
 export declare class TableViewComponent extends ImagesActionHandler implements OnInit {
     dataTableName: string;
-    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, externalService: ImgManagerConfigService);
+    constructor(imgManager: ImgManagerService, imgSelectionService: ImgSelectionService, http: HttpClient, imgCDNService: ImgCDNService, imgEventCardService: ImgEventService, alertService: AlertService, translateService: TranslateService, apiService: ApiService);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TableViewComponent, "table-view", never, {}, {}, never, never, false, never>;

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

@@ -1,9 +1,11 @@
 import { OnInit, EventEmitter } from '@angular/core';
 import { ImgPictureDTO } from '../../dto/img-manager.dto';
 import { ImgManagerService } from '../../services/img-manager.service';
+import { RenamePictureService } from '../../services/rename-picture.service';
 import * as i0 from "@angular/core";
 export declare class ImgEditorComponent implements OnInit {
     private imgManagerService;
+    private renamePictureService;
     stateDisplayed: any;
     imgToEdit: ImgPictureDTO;
     editClosed: EventEmitter<any>;
@@ -15,14 +17,14 @@ export declare class ImgEditorComponent implements OnInit {
     msgFailSave: string;
     msgFailLoad: string;
     msgSuccessEdit: string;
-    constructor(imgManagerService: ImgManagerService);
+    constructor(imgManagerService: ImgManagerService, renamePictureService: RenamePictureService);
     ngOnInit(): void;
     onSave(): void;
     onEditClosed(msgKey?: string): void;
     onRestartEdit(): void;
     onCancel(): void;
     onImgCropped(imgBase64: string): void;
-    private ranameAndReplaceImg;
+    private renameAndReplaceImg;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImgEditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ImgEditorComponent, "img-editor", never, { "stateDisplayed": "stateDisplayed"; "imgToEdit": "imgToEdit"; }, { "editClosed": "editClosed"; }, never, never, false, never>;
 }

package/lib/components/img-upload/img-upload.component.d.ts

@@ -1,16 +1,16 @@
 import { OnInit, EventEmitter, ElementRef } from '@angular/core';
-import { ImgManagerService } from '../../services/img-manager.service';
 import { ImgPictureDTO } from '../../dto/img-manager.dto';
-import { ImgManagerConfigService } from "../../services/config/external-config.service";
 import { stateDisplayed } from '../../dto/export-dtos.api';
 import { AlertService } from '../../services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
+import { UploadService } from '../../services/upload.service';
+import { ApiService } from '../../services/api.service';
 import * as i0 from "@angular/core";
 export declare class ImgUploadComponent implements OnInit {
-    private imgManager;
     private alertService;
-    private externalConfigService;
+    private apiService;
     private translateService;
+    private uploadService;
     files: any;
     isLoading: boolean;
     assetsIcon: string;
@@ -21,7 +21,7 @@ export declare class ImgUploadComponent implements OnInit {
     errorUploadingImg: string;
     errorNotImg: string;
     MAX_IMAGE_SIZE: number;
-    constructor(imgManager: ImgManagerService, alertService: AlertService, externalConfigService: ImgManagerConfigService, translateService: TranslateService);
+    constructor(alertService: AlertService, apiService: ApiService, translateService: TranslateService, uploadService: UploadService);
     ngOnInit(): void;
     filesChangeByClick(event: any): void;
     getAssets(): string;

package/lib/components/pexels-lib/pexels-lib.component.d.ts

@@ -2,16 +2,16 @@ import { AfterViewInit, ElementRef, OnInit, EventEmitter } from '@angular/core';
 import { PexelsService } from '../../services/pexels.service';
 import { Subject } from 'rxjs';
 import { WzImgLibDto, PhotosColumns, WzImgLibPhotoDto } from '../../dto/pexels-img.dto';
-import { ImgManagerService } from '../../services/img-manager.service';
 import { TranslateService } from '@ngx-translate/core';
 import { stateDisplayed } from '../../dto/export-dtos.api';
 import { AlertService } from '../../services/alert.service';
+import { UploadService } from '../../services/upload.service';
 import * as i0 from "@angular/core";
 export declare class PexelLibComponent implements OnInit, AfterViewInit {
     private wzImgLibService;
-    private imgManager;
     private alertService;
     private translateService;
+    private uploadService;
     stateDisplayed: stateDisplayed;
     searchValue: string;
     /** Pass to true to hide search input */
@@ -36,7 +36,7 @@ export declare class PexelLibComponent implements OnInit, AfterViewInit {
     errorRetrievePhotos: string;
     private subs;
     set content(control: ElementRef);
-    constructor(wzImgLibService: PexelsService, imgManager: ImgManagerService, alertService: AlertService, translateService: TranslateService);
+    constructor(wzImgLibService: PexelsService, alertService: AlertService, translateService: TranslateService, uploadService: UploadService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     setNbColumnsToDisplayPhoto(): void;

package/lib/dto/config/image-cdn/image-cdn-config.dto.d.ts

@@ -1,4 +1,4 @@
-export declare class ImgCDNConfigDTO {
+export interface ImgCDNConfigDTO {
     url_raw_image: string;
     url_100_image: string;
     url_200_image: string;

package/lib/services/alert.service.d.ts

@@ -10,7 +10,7 @@ export declare class AlertService {
     private alertRefComponent;
     constructor(nwbAlertService: NwbAlertService, translateService: TranslateService);
     openAlert(msgKey: string): void;
-    openAlertWithBackendRespons(msgKey: string, msgBackend: string): void;
+    openAlertWithBackendResponse(msgKey: string, msgBackend: string): void;
     private closePreviousAlert;
     private setAlertColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertService, never>;

package/lib/services/api.service.d.ts

@@ -0,0 +1,27 @@
+import { ImgPictureDTO, ImgPicturesDTO, ParamsImgManagerDTO } from '../dto/img-manager.dto';
+import { Observable } from 'rxjs';
+import { ImgCDNConfigDTO } from '../dto/export-dtos.api';
+import * as i0 from "@angular/core";
+export declare abstract class ApiService {
+    abstract CONFIG: {
+        image_manager_route: string;
+        canva_token: string;
+        canva_url: string;
+        pexels_token: string;
+        pexels_route: string;
+        shop_category: string;
+        assets_route: string;
+    };
+    abstract IMG_SIZE: ImgCDNConfigDTO;
+    abstract getShopImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO>;
+    abstract getShopTotalImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO>;
+    abstract getShopImg(idFile: string): Observable<ImgPictureDTO>;
+    abstract uploadFile(formData: FormData): any;
+    abstract uploadFileByUrl(url: string, fileName?: string): any;
+    abstract replaceImg(imageBase64: string, id_file: string): any;
+    abstract changeImgName(fileName: string, id_file: string): any;
+    abstract removeImg(id_file: string): any;
+    abstract removeMultipleImg(id_array: string[]): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ApiService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ApiService>;
+}

package/lib/services/canva.service.d.ts

@@ -1,22 +1,21 @@
 import { Observable } from 'rxjs';
 import { CanvaButtonApi } from '../dto/canva.dto';
-import { ImgManagerConfigService } from './config/external-config.service';
 import { WiziBlockMediaDto } from '../dto/wizi-block-media.dto';
 import { AlertService } from './alert.service';
-import { ImgManagerService } from './img-manager.service';
 import { ImgEventService } from './img-event.service';
 import { TranslateService } from '@ngx-translate/core';
+import { UploadService } from './upload.service';
+import { ApiService } from './api.service';
 import * as i0 from "@angular/core";
 export declare class CanvaService {
-    private externalConfigService;
-    private imgManager;
     private wzImgEventService;
     private alertService;
     private translateService;
+    private uploadService;
+    private apiService;
     canvaApi: any;
-    canvaApiURL: string;
-    canvaApiKey: string;
-    canvaLogoRoute: string;
+    get canvaApiURL(): string;
+    get canvaApiKey(): string;
     imgLoading: boolean;
     uploadingImg: string;
     successUploadPhoto: string;
@@ -25,8 +24,7 @@ export declare class CanvaService {
     forceToOpenCanva: boolean;
     private bindExpectedImgSizeEvent;
     private bindExpectedSizeDone;
-    constructor(externalConfigService: ImgManagerConfigService, imgManager: ImgManagerService, wzImgEventService: ImgEventService, alertService: AlertService, translateService: TranslateService);
-    private setCanvaApiConfig;
+    constructor(wzImgEventService: ImgEventService, alertService: AlertService, translateService: TranslateService, uploadService: UploadService, apiService: ApiService);
     getCanvaLogo(): string;
     bindEventExepectedImgSizeChange(): Observable<WiziBlockMediaDto>;
     expectedImgSizesChange(mediaDTO: WiziBlockMediaDto): void;

package/lib/services/config/img-cdn.service.d.ts

@@ -2,8 +2,6 @@ import { ImgCDNConfigDTO } from '../../dto/config/image-cdn/image-cdn-config.dto
 import * as i0 from "@angular/core";
 export declare class ImgCDNService {
     imgCDNConfig: ImgCDNConfigDTO;
-    constructor();
-    setImgCDNConfig(imgCDNConfig: ImgCDNConfigDTO): void;
     getUrlImg(size: '100' | '200' | '400' | '800' | 'raw' | string): any;
     getAllSize(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ImgCDNService, never>;

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

@@ -1,36 +1,36 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { Optional } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
 import { Observable } from "rxjs";
 import { ImgPictureDTO, ImgPicturesDTO, ParamsImgManagerDTO } from '../dto/img-manager.dto';
 import { ImgManagerDisplayConfig } from '../dto/export-dtos.api';
 import { ImgManagerConfig } from '../dto/config/img-manager';
+import { ApiService } from './api.service';
 import * as i0 from "@angular/core";
 export declare class ImgManagerService {
-    private http;
-    imgManagerRoute: string;
-    shopToken: string;
+    private apiService;
     params: HttpParams;
     private pageFicheProductConfig;
     private angularFicheProductConfig;
     private wiziblockConfig;
     private simpleWithButtonOpenerConfig;
     private fullWindowConfig;
-    constructor(http: HttpClient);
-    setApiConfig(img_manager_route: string, shop_token: string): void;
-    private getOptionsHeaders;
+    constructor(apiService: ApiService);
     shopImgList: ImgPicturesDTO;
     previousParams: ParamsImgManagerDTO;
     getShopImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO>;
     getShopTotalImgList(params?: ParamsImgManagerDTO): Observable<any>;
-    getShopImg(idFile: string): Observable<any>;
+    getShopImg(idFile: string): Observable<ImgPictureDTO>;
     resetParams(params: ParamsImgManagerDTO): void;
-    uploadFile(formData: FormData): Observable<Object>;
-    uploadFileByUrl(url: string, fileName?: string): Observable<ImgPictureDTO>;
-    replaceImg(imageBase64: string, id_file: string): Observable<Object>;
-    changeImgName(fileName: string, id_file: string): Observable<Object>;
-    removeImg(id_file: string): Observable<Object>;
-    removeMultipleImg(id_array: string[]): Observable<Object>;
+    replaceImg(imageBase64: string, id_file: string): any;
+    removeImg(id_file: string): any;
+    removeMultipleImg(id_array: string[]): any;
     getImgManagerDisplayConfig(displayName: ImgManagerConfig): ImgManagerDisplayConfig;
     getAllImgManagerDisplayConfig(): ImgManagerDisplayConfig[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ImgManagerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ImgManagerService>;
 }
+export declare const ImgManagerServiceProvider: {
+    provide: typeof ImgManagerService;
+    useFactory: (parentService: ImgManagerService, apiService: ApiService) => ImgManagerService;
+    deps: (Optional[] | typeof ApiService)[];
+};

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

@@ -1,3 +1,4 @@
+import { Optional } from '@angular/core';
 import { ImgPictureDTO } from '../dto/img-manager.dto';
 import { BehaviorSubject } from 'rxjs';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -25,3 +26,8 @@ export declare class ImgSelectionService {
     static ɵfac: i0.ɵɵFactoryDeclaration<ImgSelectionService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ImgSelectionService>;
 }
+export declare const ImgSelectionServiceProvider: {
+    provide: typeof ImgSelectionService;
+    useFactory: (parentService: ImgSelectionService) => ImgSelectionService;
+    deps: Optional[][];
+};

package/lib/services/pexels.service.d.ts

@@ -1,15 +1,15 @@
 import { HttpClient } from '@angular/common/http';
 import { Observable } from "rxjs";
 import { WzImgLibDto } from "../dto/pexels-img.dto";
-import { ImgManagerConfigService } from './config/external-config.service';
 import { TranslateService } from '@ngx-translate/core';
+import { ApiService } from './api.service';
 import * as i0 from "@angular/core";
 export declare class PexelsService {
     private http;
-    private externalConfigService;
+    private apiService;
     private translateService;
-    apiBaseUrl: any;
-    apiKey: any;
+    get apiBaseUrl(): string;
+    get apiKey(): string;
     lang: string;
     languages: {
         fr: string;
@@ -17,7 +17,7 @@ export declare class PexelsService {
         it: string;
         es: string;
     };
-    constructor(http: HttpClient, externalConfigService: ImgManagerConfigService, translateService: TranslateService);
+    constructor(http: HttpClient, apiService: ApiService, translateService: TranslateService);
     setLang(lang: string): void;
     searchOnPexels(toSearch: string, perPage: number, page: number): Observable<WzImgLibDto>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PexelsService, never>;

package/lib/services/rename-picture.service.d.ts

@@ -1,21 +1,19 @@
-import { ImgManagerService } from './img-manager.service';
 import { AlertService } from './alert.service';
 import { ImgPictureDTO } from '../dto/img-manager.dto';
 import { PictureNameUpdate } from '../dto/picture-name-update.dto';
+import { ApiService } from './api.service';
 import * as i0 from "@angular/core";
 export declare class RenamePictureService {
-    private imgManager;
+    private apiService;
     private alertService;
     private picturesList;
-    private pictureNameChanged;
     private errorRenameImg;
     private msgSavingImgName;
     private msgImgNameSaved;
-    constructor(imgManager: ImgManagerService, alertService: AlertService);
+    constructor(apiService: ApiService, alertService: AlertService);
     setPicturesList(picturesList: ImgPictureDTO[]): void;
-    onRenamePicture(pictureRenamed: PictureNameUpdate): void;
-    private setEvents;
-    private renamePicture;
+    renamePicture(pictureNameUpdate: PictureNameUpdate): void;
+    changeImageName(name: string, idFile: string): any;
     private getPictureById;
     static ɵfac: i0.ɵɵFactoryDeclaration<RenamePictureService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<RenamePictureService>;

package/lib/services/upload.service.d.ts

@@ -0,0 +1,10 @@
+import { ApiService } from './api.service';
+import * as i0 from "@angular/core";
+export declare class UploadService {
+    private apiService;
+    constructor(apiService: ApiService);
+    uploadFile(formData: FormData): any;
+    uploadFileByUrl(url: string, fileName?: string): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UploadService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UploadService>;
+}

package/lib/wz-img-manager.component.d.ts

@@ -1,7 +1,5 @@
 import { OnInit, EventEmitter } from '@angular/core';
 import { ImgSelectionService } from './services/img-selection.service';
-import { ImgManagerConfigDto } from './dto/config/external/external-config.dto';
-import { ImgManagerConfigService } from './services/config/external-config.service';
 import { Subscription } from 'rxjs';
 import { UserSettingsService } from './services/user-settings.service';
 import { CanvaService } from './services/canva.service';
@@ -12,14 +10,12 @@ import { WiziBlockMediaDto } from './dto/wizi-block-media.dto';
 import * as i0 from "@angular/core";
 export declare class WzImgManagerComponent implements OnInit {
     private imgSelectionService;
-    private externalConfigService;
     private userSettingsService;
     private canvaService;
     private imgEventService;
     private domService;
     stateDisplayed: stateDisplayed;
     showSelection: boolean;
-    externalConfig: ImgManagerConfigDto;
     set forceToOpenCanva(forceToOpenCanva: boolean | WiziBlockMediaDto);
     imgManagerClosed: EventEmitter<any>;
     private _multipleImgMode;
@@ -37,7 +33,7 @@ export declare class WzImgManagerComponent implements OnInit {
     hideTab: boolean;
     private overflowHTML;
     private bodyPadding;
-    constructor(imgSelectionService: ImgSelectionService, externalConfigService: ImgManagerConfigService, userSettingsService: UserSettingsService, canvaService: CanvaService, imgEventService: ImgEventService, domService: DomService);
+    constructor(imgSelectionService: ImgSelectionService, userSettingsService: UserSettingsService, canvaService: CanvaService, imgEventService: ImgEventService, domService: DomService);
     ngOnInit(): void;
     checkUserDisplayPreference(): void;
     setCurrentTab(event: any): void;
@@ -57,5 +53,5 @@ export declare class WzImgManagerComponent implements OnInit {
     changeDisplayTab(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WzImgManagerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WzImgManagerComponent, "wz-img-manager", never, { "stateDisplayed": "stateDisplayed"; "showSelection": "showSelection"; "externalConfig": "externalConfig"; "forceToOpenCanva": "forceToOpenCanva"; "multipleImgMode": "multipleImgMode"; "showImgManagerModule": "showImgManagerModule"; }, { "imgManagerClosed": "imgManagerClosed"; "imgSelectionChange": "imgSelectionChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WzImgManagerComponent, "wz-img-manager", never, { "stateDisplayed": "stateDisplayed"; "showSelection": "showSelection"; "forceToOpenCanva": "forceToOpenCanva"; "multipleImgMode": "multipleImgMode"; "showImgManagerModule": "showImgManagerModule"; }, { "imgManagerClosed": "imgManagerClosed"; "imgSelectionChange": "imgSelectionChange"; }, never, never, false, never>;
 }

package/lib/wz-img-manager.module.d.ts

@@ -1,3 +1,4 @@
+import { ModuleWithProviders, Provider } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./wz-img-manager.component";
 import * as i2 from "./components/img-tabs/img-tabs.component";
@@ -51,6 +52,7 @@ import * as i49 from "@angular/cdk/table";
 import * as i50 from "@angular/cdk/drag-drop";
 import * as i51 from "@ngx-translate/core";
 export declare class WzImgManagerModule {
+    static withConfig(ApiService: Provider): ModuleWithProviders<WzImgManagerModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WzImgManagerModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<WzImgManagerModule, [typeof i1.WzImgManagerComponent, typeof i2.ImgTabsComponent, typeof i3.ImgUploadComponent, typeof i4.PexelLibComponent, typeof i5.ImgCardComponent, typeof i6.UploadListComponent, typeof i7.ImgEditorComponent, typeof i8.EditorInfoSectionComponent, typeof i9.CanvaBtnComponent, typeof i10.ImgSelectionComponent, typeof i11.LoaderComponent, typeof i12.DropdownComponent, typeof i13.CropperComponent, typeof i14.ImagesViewComponent, typeof i15.MosaicViewComponent, typeof i16.TableViewComponent, typeof i17.TableComponent, typeof i18.InputSearchComponent, typeof i19.PaginationComponent, typeof i20.CheckboxComponent, typeof i21.AlertComponent, typeof i22.PageSelectorComponent, typeof i23.SelectComponent, typeof i24.DragDropDirective, typeof i25.LoadingDirective, typeof i26.AutoHideDirective, typeof i27.CopyClipboardDirective, typeof i28.TableColumn, typeof i29.CheckBoxRow, typeof i30.TableColumnHeader, typeof i31.TableRow, typeof i32.AbstractDebounceDirective, typeof i33.DebounceKeyupDirective, typeof i34.ZindexToggleDirective, typeof i35.PagniationArrayTotalPages, typeof i36.PagniationIsLastPage, typeof i37.PagniationText, typeof i38.ImageSrcPipe, typeof i39.NumberToArray, typeof i40.LargeNumberOfPagePipe, typeof i41.SelectFiltersPipe], [typeof i42.CommonModule, typeof i43.HttpClientModule, typeof i44.FormsModule, typeof i45.NgScrollbarModule, typeof i46.NgScrollbarReachedModule, typeof i47.NwbAllModule, typeof i48.ImageCropperModule, typeof i49.CdkTableModule, typeof i50.DragDropModule, typeof i51.TranslateModule], [typeof i1.WzImgManagerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<WzImgManagerModule>;

package/package.json

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

package/public-api.d.ts

@@ -3,6 +3,7 @@ export { WzImgManagerComponent } from './lib/wz-img-manager.component';
 export { ImgSelectionService } from './lib/services/img-selection.service';
 export { ImgManagerService } from './lib/services/img-manager.service';
 export { RenamePictureService } from './lib/services/rename-picture.service';
+export { ApiService } from './lib/services/api.service';
 export { CanvaService } from './lib/services/canva.service';
 export * from './lib/dto/ImgManagerDisplayConfig.dto';
 export * from './lib/dto/export-dtos.api';

package/wz-img-manager.scss

@@ -2941,64 +2941,7 @@ $green-color: #2ecc71;
 
 .dropdownWizi:not(.is-hoverable) {
     cursor: not-allowed;
-}.wz-img-manager  .input-search.field {
-  padding: 10px 20px;
-  background-color: $gray-background;
-  @include media('<tablet') {
-    padding: 0!important;
-    background-color: $white;
-  }
-  &.small-padding {
-    padding: 10px 20px;
-  }
-  .input,
-  .input:focus,
-  .input.is-focused,
-  .input:active,
-  .input.is-active {
-    font-size: rem(14);
-    color: $main-text;
-    border: rem(1) solid $input-border-search;
-    box-shadow: none;
-    padding: rem(13.5) rem(20) rem(13.5) rem(48);
-    border-radius: rem(3);
-    margin: 0;
-    height: auto;
-    min-height: unset;
-
-    &::placeholder {
-      color: $placeholder-color;
-      font-weight: normal;
-    }
-  }
-
-  .input:focus,
-  .input.is-focused,
-  .input:active,
-  .input.is-active {
-    border-color: $wizishop-blue;
-  }
-
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 20px;
-    font-size: rem(18);
-    transform: translateY(-50%);
-    pointer-events: none;
-    font-weight: 400;
-    color: $placeholder-color;
-    margin: 0;
-    width: rem(18);
-    height: rem(18);
-  }
-}
-
-.wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .pexels-lib__search  .input-search.field {
-  padding: 0;
-  background-color: transparent;
-}
-.wz-img-manager  .wz-pagination {
+}.wz-img-manager  .wz-pagination {
   width: 100%;
   padding: 0;
 
@@ -3110,6 +3053,63 @@ $green-color: #2ecc71;
     }
   }
 }
+.wz-img-manager  .input-search.field {
+  padding: 10px 20px;
+  background-color: $gray-background;
+  @include media('<tablet') {
+    padding: 0!important;
+    background-color: $white;
+  }
+  &.small-padding {
+    padding: 10px 20px;
+  }
+  .input,
+  .input:focus,
+  .input.is-focused,
+  .input:active,
+  .input.is-active {
+    font-size: rem(14);
+    color: $main-text;
+    border: rem(1) solid $input-border-search;
+    box-shadow: none;
+    padding: rem(13.5) rem(20) rem(13.5) rem(48);
+    border-radius: rem(3);
+    margin: 0;
+    height: auto;
+    min-height: unset;
+
+    &::placeholder {
+      color: $placeholder-color;
+      font-weight: normal;
+    }
+  }
+
+  .input:focus,
+  .input.is-focused,
+  .input:active,
+  .input.is-active {
+    border-color: $wizishop-blue;
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    font-size: rem(18);
+    transform: translateY(-50%);
+    pointer-events: none;
+    font-weight: 400;
+    color: $placeholder-color;
+    margin: 0;
+    width: rem(18);
+    height: rem(18);
+  }
+}
+
+.wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .pexels-lib__search  .input-search.field {
+  padding: 0;
+  background-color: transparent;
+}
 
 
 .wac {