npm - @wizishop/img-manager - Versions diffs - 0.2.38 → 0.2.42 - Mend

@wizishop/img-manager 0.2.38 → 0.2.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/fesm2015/wizishop-img-manager.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { ReplaySubject, Observable, BehaviorSubject, Subject, forkJoin } from 'r
 import { HttpParams, HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { NwbAlertService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
+import { NwbAlertService, NwbDialogService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
 import { debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -570,6 +570,7 @@ let WzImgManagerComponent = class WzImgManagerComponent {
         }
     }
     setCurrentTab(event) {
+        console.log(event);
         if (event === 'img-edition') {
             this.hideTab = true;
             return;
@@ -577,7 +578,6 @@ let WzImgManagerComponent = class WzImgManagerComponent {
         this.hideTab = false;
     }
     displaySmall() {
-        //Use for open annimation display
         if (this.stateDisplayed !== 'window') {
             setTimeout(() => {
                 this.stateDisplayed = 'small';
@@ -685,7 +685,7 @@ __decorate([
 WzImgManagerComponent = __decorate([
     Component({
         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' || stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><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        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n"
+        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'\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n      <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n      <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><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        (currentTab)=\"setCurrentTab($event)\">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n"
     }),
     __metadata("design:paramtypes", [ImgSelectionService,
         ImgManagerConfigService,
@@ -1008,22 +1008,6 @@ let ImgTabsComponent = class ImgTabsComponent {
             message: '',
             duration: 3000
         };
-        this.fakeEditImg = {
-            big_miniature: "501",
-            category: "produits",
-            cropped: "0",
-            date: "2020-12-03",
-            display_name: "Nordique-maison-d-coration-accessoires-fleur-vase-d-coration-maison-Terrarium-verre-Vases-tubes-essai-pour",
-            file_name: "5942/3261/46/nordique-maison-d-coration-accessoires-fleur-vase-d-coration-maison-terrarium-verre-vases-tubes-essai-pour.jpeg",
-            g_id: "10",
-            id_file: "5942",
-            id_shop: "131",
-            nb_used: "1",
-            old_file_name: "",
-            raw_height: "800",
-            raw_width: "800",
-            size: "64062",
-        };
     }
     ngOnInit() {
         this.imgEventEditService.getImgToEditEventListner().subscribe(imgToEdit => {
@@ -1048,6 +1032,7 @@ let ImgTabsComponent = class ImgTabsComponent {
         if (msgKey) {
             this.alertService.openAlert(msgKey);
         }
+        this.currentTab.emit('close');
     }
     onShowImgUploaded() {
         this.tabActive = this.tabs[1];
@@ -1271,6 +1256,9 @@ let PexelLibComponent = class PexelLibComponent {
     }
     setNbColumnsToDisplayPhoto() {
         const width = this.outerElement.nativeElement.offsetWidth;
+        if (this.stateDisplayed !== 'window') {
+            this.nbColumuns = 8;
+        }
         this.responsiveColumns.forEach(value => {
             if (width < value) {
                 this.nbColumuns--;
@@ -1426,7 +1414,7 @@ PexelLibComponent = __decorate([
 ], PexelLibComponent);
 let ImagesActionHandler = class ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialog) {
         this.imgManager = imgManager;
         this.imgSelectionService = imgSelectionService;
         this.http = http;
@@ -1435,6 +1423,7 @@ let ImagesActionHandler = class ImagesActionHandler {
         this.alertService = alertService;
         this.translateService = translateService;
         this.externalService = externalService;
+        this.nwbDialog = nwbDialog;
         this.picturesList = [];
         this.picturesListChange = new EventEmitter();
         this.tableFilters = {
@@ -1453,6 +1442,13 @@ let ImagesActionHandler = class ImagesActionHandler {
         this.isLoading = false;
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
         this.errorAlreadyUsedImg = 'ImgManager.ImgList.errorAlreadyUsed';
+        this.dialogConfig = {
+            title: 'ImgManager.ImgList.deleteImg',
+            message: 'ImgManager.ImgList.areYouSureDeleteImg',
+            okButtonText: 'ImgManager.ImgList.confirmDelete',
+            cancelButtonText: 'ImgManager.ImgList.cancelDelete',
+            loading: false
+        };
         this.fakeImgRoute = this.externalService.getRouteAssets() + 'img/fake.png';
     }
     /** Event emit when the header checkbox is checked */
@@ -1490,14 +1486,19 @@ let ImagesActionHandler = class ImagesActionHandler {
         }
     }
     onRemoveImg(picture) {
-        picture.deleted = true;
-        this.imgManager.removeImg(picture.id_file).subscribe(data => {
-            this.imgEventCardService.emitImgRemoved(picture.id_file);
-            this.imgSelectionService.removeImgSelectedById(picture.id_file);
-        }, error => {
-            const msg = error.status === 409 ? this.errorAlreadyUsedImg : this.errorRemoveImg;
-            picture.deleted = false;
-            this.alertService.openAlert(msg);
+        const dialog = this.nwbDialog.open(this.dialogConfig);
+        dialog.afterClosed().subscribe(ok => {
+            if (ok) {
+                picture.deleted = true;
+                this.imgManager.removeImg(picture.id_file).subscribe(data => {
+                    this.imgEventCardService.emitImgRemoved(picture.id_file);
+                    this.imgSelectionService.removeImgSelectedById(picture.id_file);
+                }, error => {
+                    const msg = error.status === 409 ? this.errorAlreadyUsedImg : this.errorRemoveImg;
+                    picture.deleted = false;
+                    this.alertService.openAlert(msg);
+                });
+            }
         });
     }
     onPictureNotLoading(event) {
@@ -1539,7 +1540,8 @@ ImagesActionHandler.ctorParameters = () => [
     { type: ImgEventService },
     { type: AlertService },
     { type: TranslateService },
-    { type: ImgManagerConfigService }
+    { type: ImgManagerConfigService },
+    { type: NwbDialogService }
 ];
 __decorate([
     Input(),
@@ -1590,12 +1592,13 @@ ImagesActionHandler = __decorate([
         ImgEventService,
         AlertService,
         TranslateService,
-        ImgManagerConfigService])
+        ImgManagerConfigService,
+        NwbDialogService])
 ], ImagesActionHandler);
 let ImgCardComponent = class ImgCardComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService);
         this.focusInput = false;
         this.toggleImgSelected = new EventEmitter();
         this.isUploadSection = false;
@@ -1615,7 +1618,8 @@ ImgCardComponent.ctorParameters = () => [
     { type: ImgEventService },
     { type: AlertService },
     { type: TranslateService },
-    { type: ImgManagerConfigService }
+    { type: ImgManagerConfigService },
+    { type: NwbDialogService }
 ];
 __decorate([
     Input(),
@@ -1640,7 +1644,7 @@ __decorate([
 ImgCardComponent = __decorate([
     Component({
         selector: 'img-card',
-        template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button class=\"deleted\" (click)=\"onRemoveImg(picture)\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n",
+        template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button class=\"deleted\" (click)=\"onRemoveImg(picture)\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n",
         animations: [
             easeInOut
         ]
@@ -1652,7 +1656,8 @@ ImgCardComponent = __decorate([
         ImgEventService,
         AlertService,
         TranslateService,
-        ImgManagerConfigService])
+        ImgManagerConfigService,
+        NwbDialogService])
 ], ImgCardComponent);
 let ImgEditorComponent = class ImgEditorComponent {
@@ -1889,7 +1894,7 @@ __decorate([
 CanvaBtnComponent = __decorate([
     Component({
         selector: 'canva-btn',
-        template: "<div class=\"canva dropdown is-right\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'is-hoverable noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <button\n          class=\"button canva-btn\"\n          aria-haspopup=\"true\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true\"\n          [nwbToolTip]=\"'ImgManager.CanvaBtn.createImg.title' | translate\" nwbToolTipPosition=\"left\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </button>\n    </div>\n    <div\n      wzAutoHide (clickOutside)=\"openDropDownMenu = false;\" [triggerElement]=\"'canva-btn'\"\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <ng-scrollbar\n            #scrollable\n            [visibility]=\"'hover'\"\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n"
+        template: "<div class=\"canva dropdown is-right\"\n    [ngClass]=\"{'is-up': stateDisplayed === 'small', 'is-hoverable noTooltip': stateDisplayed !== 'small'}\"\n    >\n    <div class=\"dropdown-trigger\">\n        <button\n          class=\"button canva-btn\"\n          aria-controls=\"dropdown-menuCanva\"\n          (click)=\"openDropDownMenu = true\"\n          >\n            <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n            <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n            <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n        </button>\n    </div>\n    <div\n      wzAutoHide (clickOutside)=\"openDropDownMenu = false;\" [triggerElement]=\"'canva-btn'\"\n      class=\"dropdown-menu dropDownShadow\"\n      [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n      id=\"dropdown-menuCanva\"\n      role=\"menu\">\n        <ng-scrollbar\n            #scrollable\n            [visibility]=\"'hover'\"\n            class=\"smallScroll\"\n            >\n            <div class=\"dropdown-content\">\n                <div class=\"dropdownTitle\">\n                    <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n                </div>\n\n                <div class=\"infoItem\">\n                    <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf=\"expectedWidth && expectedHeight\"\n                      class=\"dropdown-item-wrapper\"\n                      >\n                        <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n                            <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor=\"let format of availableFormat| keyvalue\"\n                  class=\"dropdown-item-wrapper\">\n                    <div\n                      (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n                      class=\"dropdown-item\">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n"
     }),
     __metadata("design:paramtypes", [CanvaService,
         ImgManagerService,
@@ -2888,8 +2893,8 @@ ImagesViewComponent = __decorate([
 ], ImagesViewComponent);
 let MosaicViewComponent = class MosaicViewComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService);
         this.nbFakeImg = 0;
     }
     ngOnInit() {
@@ -2913,7 +2918,8 @@ MosaicViewComponent.ctorParameters = () => [
     { type: ImgEventService },
     { type: AlertService },
     { type: TranslateService },
-    { type: ImgManagerConfigService }
+    { type: ImgManagerConfigService },
+    { type: NwbDialogService }
 ];
 __decorate([
     Input(),
@@ -2930,7 +2936,7 @@ __decorate([
 MosaicViewComponent = __decorate([
     Component({
         selector: 'mosaic-view',
-        template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n",
+        template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n",
         animations: [
             listAnnimation
         ]
@@ -2942,12 +2948,13 @@ MosaicViewComponent = __decorate([
         ImgEventService,
         AlertService,
         TranslateService,
-        ImgManagerConfigService])
+        ImgManagerConfigService,
+        NwbDialogService])
 ], MosaicViewComponent);
 let TableViewComponent = class TableViewComponent extends ImagesActionHandler {
-    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService);
+    constructor(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        super(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService);
         this.dataTableName = 'imgagesView'; // Name of your table
     }
     ngOnInit() {
@@ -2961,12 +2968,13 @@ TableViewComponent.ctorParameters = () => [
     { type: ImgEventService },
     { type: AlertService },
     { type: TranslateService },
-    { type: ImgManagerConfigService }
+    { type: ImgManagerConfigService },
+    { type: NwbDialogService }
 ];
 TableViewComponent = __decorate([
     Component({
         selector: 'table-view',
-        template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (ngModelChange)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p>{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>",
+        template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n",
         animations: [
             listAnnimation
         ]
@@ -2978,7 +2986,8 @@ TableViewComponent = __decorate([
         ImgEventService,
         AlertService,
         TranslateService,
-        ImgManagerConfigService])
+        ImgManagerConfigService,
+        NwbDialogService])
 ], TableViewComponent);
 let FiltersTableService = class FiltersTableService {
@@ -3289,7 +3298,7 @@ __decorate([
 PaginationComponent = __decorate([
     Component({
         selector: 'wz-pagination',
-        template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <select name=\"page\" (change)=\"onGotoPageChange($event)\">\n        <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n          <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n            {{ pageIndex }}\n          </option>\n        </ng-container>\n      </select>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n"
+        template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <select name=\"page\" (change)=\"onGotoPageChange($event)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n        <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n          <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n            {{ pageIndex }}\n          </option>\n        </ng-container>\n      </select>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n"
     }),
     __metadata("design:paramtypes", [])
 ], PaginationComponent);