@wizishop/img-manager 15.2.6 → 15.2.8

package/fesm2020/wizishop-img-manager.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
-import { BehaviorSubject, Subject, Observable, of, delay, tap, forkJoin } from 'rxjs';
+import { BehaviorSubject, Subject, tap, Observable, of, delay, forkJoin, combineLatest } from 'rxjs';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@wizishop/ng-wizi-bulma';
@@ -213,13 +213,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class UploadService {
     constructor() {
+        this.imageUploaded$ = new Subject();
         this.apiService = inject(ApiService);
     }
     uploadFile(formData) {
-        return this.apiService.uploadFile(formData);
+        return this.apiService.uploadFile(formData).pipe(tap((img) => this.imageUploaded$.next(img)));
     }
     uploadFileByUrl(url, fileName) {
-        return this.apiService.uploadFileByUrl(url, fileName);
+        return this.apiService.uploadFileByUrl(url, fileName).pipe(tap((img) => this.imageUploaded$.next(img)));
     }
 }
 UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -513,20 +514,16 @@ class ImgManagerService {
             && this.previousParams.search === params.search) {
             return of(this.shopImgList).pipe(delay(0));
         }
-        if (params) {
-            this.resetParams(params);
-        }
-        return this.apiService.getShopImgList(params).pipe(tap((shopImgList) => {
+        const httpParams = params ? this.resetParams(params) : undefined;
+        return this.apiService.getShopImgList(httpParams).pipe(tap((shopImgList) => {
             this.shopImgList = shopImgList;
             this.previousParams = params;
         }));
         ;
     }
     getShopTotalImgList(params) {
-        if (params) {
-            this.resetParams(params);
-        }
-        return this.apiService.getShopTotalImgList(params);
+        const httpParams = params ? this.resetParams(params) : undefined;
+        return this.apiService.getShopTotalImgList(httpParams);
     }
     getShopImg(idFile) {
         return this.apiService.getShopImg(idFile);
@@ -540,6 +537,7 @@ class ImgManagerService {
         if (params.search) {
             this.params = this.params.set('display_name:contains', params.search);
         }
+        return this.params;
     }
     replaceImg(imageBase64, id_file) {
         return this.apiService.replaceImg(imageBase64, id_file);
@@ -3249,14 +3247,17 @@ class ImagesViewComponent {
         }
     }
     getImg(id_file) {
-        this.imgManager.getShopImg(id_file).pipe(take(1)).subscribe((picture) => {
-            if (!this.imgAlreadyExist(picture.id_file)) {
-                // check the img is not already present
-                this.picturesList.unshift(picture);
-                this.length += 1;
+        this.imgManager.getShopImg(id_file).pipe(take(1)).subscribe({
+            next: (picture) => {
+                if (!this.imgAlreadyExist(picture.id_file)) {
+                    // check the img is not already present
+                    this.picturesList.unshift(picture);
+                    this.length += 1;
+                }
+            },
+            error: () => {
+                this.alertService.openAlert(this.errorGetImg);
             }
-        }, error => {
-            this.alertService.openAlert(this.errorGetImg);
         });
     }
     imgAlreadyExist(id_file) {
@@ -3661,26 +3662,24 @@ class ImgSelectionComponent {
     constructor(imgSelectionService) {
         this.imgSelectionService = imgSelectionService;
         this.imgManagerClosed = new EventEmitter();
-        this.imgSelectedList = [];
+        this.imgSelectedList$ = this.imgSelectionService.imgSelection$;
         this.removingAll = false;
         this.cancellingAll = false;
         this.importingAll = false;
         this.dragStart = false;
         this.isLoading$ = this.imgSelectionService.imgSelectedListLoading$;
+        this.vm$ = combineLatest({
+            tableList: this.imgSelectedList$,
+            isLoading: this.isLoading$
+        });
         this.trashPositionIndex = 0;
         this.trashPositionLeft = '-5px';
     }
-    ngOnInit() {
-        this.getImgSelected();
-    }
     init() {
         this.removingAll = false;
         this.cancellingAll = false;
         this.importingAll = false;
     }
-    getImgSelected() {
-        this.imgSelectedList = this.imgSelectionService.getImgSelection();
-    }
     removeImg(index) {
         this.imgSelectionService.removeImgSelectedByIndex(index);
     }
@@ -3694,10 +3693,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\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!(isLoading$ | async); else Loading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], 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\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n *ngIf=\"(imgSelectedList$ | async) as imgSelectedList; else Loading\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n\n >\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], 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\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!(isLoading$ | async); else Loading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n" }]
+            args: [{ selector: 'img-selection', template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n *ngIf=\"(imgSelectedList$ | async) as imgSelectedList; else Loading\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n\n >\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-template #Loading>\n  <wz-loader></wz-loader>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: ImgSelectionService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], imgManagerClosed: [{
@@ -3705,21 +3704,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class WzImgManagerComponent {
-    constructor(imgSelectionService, userSettingsService, canvaService, imgEventService, domService) {
+    constructor(imgSelectionService, userSettingsService, canvaService, imgEventService, domService, uploadService) {
         this.imgSelectionService = imgSelectionService;
         this.userSettingsService = userSettingsService;
         this.canvaService = canvaService;
         this.imgEventService = imgEventService;
         this.domService = domService;
+        this.uploadService = uploadService;
         this.showSelection = false;
         this.imgManagerClosed = new EventEmitter();
         this._multipleImgMode = false;
         this._showImgManagerModule = false;
         this.imgSelectionChange = this.imgSelectionService.imgSelection$;
+        this.imageUploaded = this.uploadService.imageUploaded$;
         this.close = false;
         this.listDisplayed = false;
         this.hideTab = false;
-        console.log('WzImgManagerComponent');
     }
     // If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
     // If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
@@ -3752,7 +3752,6 @@ class WzImgManagerComponent {
         }
     }
     ngOnInit() {
-        console.log('WzImgManagerComponent');
         this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
         this.imgSelectionService.initImgSelectedList(null);
         this.selectImgEvent = this.imgSelectionService.imgSelection$.subscribe(imgSelection => {
@@ -3848,12 +3847,12 @@ class WzImgManagerComponent {
         this.listDisplayedEvent.unsubscribe();
     }
 }
-WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
+WzImgManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, deps: [{ token: ImgSelectionService }, { token: UserSettingsService }, { token: CanvaService }, { token: ImgEventService }, { token: DomService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
+WzImgManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WzImgManagerComponent, selector: "wz-img-manager", inputs: { stateDisplayed: "stateDisplayed", showSelection: "showSelection", forceToOpenCanva: "forceToOpenCanva", multipleImgMode: "multipleImgMode", showImgManagerModule: "showImgManagerModule" }, outputs: { imgManagerClosed: "imgManagerClosed", imgSelectionChange: "imgSelectionChange", imageUploaded: "imageUploaded" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImgTabsComponent, selector: "img-tabs", inputs: ["multipleImgMode", "stateDisplayed", "listDisplayed"], outputs: ["imgManagerClosed", "currentTab", "switchDisplayWindow"] }, { kind: "component", type: ImgSelectionComponent, selector: "img-selection", inputs: ["tabDisplayed"], outputs: ["imgManagerClosed"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WzImgManagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wz-img-manager', template: "<div class=\"wz-img-manager\">\n  <!-- Img slection handler -->\n  <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n    <img-selection></img-selection>\n  </div>\n\n  <!-- Img manager module -->\n  <div\n    *ngIf=\"_showImgManagerModule\"\n    class=\"wz-img-manager__module\"\n    [ngClass]=\"{\n      'wz-img-manager__module--small': stateDisplayed === 'small',\n      'wz-img-manager__module--full': stateDisplayed === 'full',\n      'wz-img-manager__module--window': stateDisplayed === 'window',\n      'wz-img-manager__module--edit': hideTab}\"\n  >\n\n    <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\" type=\"button\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\" type=\"button\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\" type=\"button\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n    </div>\n\n    <div\n      class=\"wz-img-manager__module__content wz-block\"\n      [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n      <img-tabs\n        [stateDisplayed]=\"stateDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [listDisplayed]=\"listDisplayed\"\n        (imgManagerClosed)=\"onImgManagerClosed()\"\n        (switchDisplayWindow)=\"changeDisplayTab()\"\n        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }]; }, propDecorators: { stateDisplayed: [{
+        }], ctorParameters: function () { return [{ type: ImgSelectionService }, { type: UserSettingsService }, { type: CanvaService }, { type: ImgEventService }, { type: DomService }, { type: UploadService }]; }, propDecorators: { stateDisplayed: [{
                 type: Input
             }], showSelection: [{
                 type: Input
@@ -3870,6 +3869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }], imgSelectionChange: [{
                 type: Output
+            }], imageUploaded: [{
+                type: Output
             }] } });
 
 class SnackBarService {
@@ -4112,3 +4113,4 @@ class ImgManagerConfigDto {
 
 export { ApiService, CanvaButtonApi, CanvaService, ImgApiDto, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule };
 //# sourceMappingURL=wizishop-img-manager.mjs.map
+//# sourceMappingURL=wizishop-img-manager.mjs.map