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/fesm5/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';
@@ -615,6 +615,7 @@ var WzImgManagerComponent = /** @class */ (function () {
         }
     };
     WzImgManagerComponent.prototype.setCurrentTab = function (event) {
+        console.log(event);
         if (event === 'img-edition') {
             this.hideTab = true;
             return;
@@ -623,7 +624,6 @@ var WzImgManagerComponent = /** @class */ (function () {
     };
     WzImgManagerComponent.prototype.displaySmall = function () {
         var _this = this;
-        //Use for open annimation display
         if (this.stateDisplayed !== 'window') {
             setTimeout(function () {
                 _this.stateDisplayed = 'small';
@@ -731,7 +731,7 @@ var WzImgManagerComponent = /** @class */ (function () {
     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,
@@ -1102,22 +1102,6 @@ var ImgTabsComponent = /** @class */ (function () {
             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",
-        };
     }
     ImgTabsComponent.prototype.ngOnInit = function () {
         var _this = this;
@@ -1143,6 +1127,7 @@ var ImgTabsComponent = /** @class */ (function () {
         if (msgKey) {
             this.alertService.openAlert(msgKey);
         }
+        this.currentTab.emit('close');
     };
     ImgTabsComponent.prototype.onShowImgUploaded = function () {
         this.tabActive = this.tabs[1];
@@ -1375,6 +1360,9 @@ var PexelLibComponent = /** @class */ (function () {
     PexelLibComponent.prototype.setNbColumnsToDisplayPhoto = function () {
         var _this = this;
         var width = this.outerElement.nativeElement.offsetWidth;
+        if (this.stateDisplayed !== 'window') {
+            this.nbColumuns = 8;
+        }
         this.responsiveColumns.forEach(function (value) {
             if (width < value) {
                 _this.nbColumuns--;
@@ -1533,7 +1521,7 @@ var PexelLibComponent = /** @class */ (function () {
 }());
 var ImagesActionHandler = /** @class */ (function () {
-    function ImagesActionHandler(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
+    function ImagesActionHandler(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialog) {
         this.imgManager = imgManager;
         this.imgSelectionService = imgSelectionService;
         this.http = http;
@@ -1542,6 +1530,7 @@ var ImagesActionHandler = /** @class */ (function () {
         this.alertService = alertService;
         this.translateService = translateService;
         this.externalService = externalService;
+        this.nwbDialog = nwbDialog;
         this.picturesList = [];
         this.picturesListChange = new EventEmitter();
         this.tableFilters = {
@@ -1560,6 +1549,13 @@ var ImagesActionHandler = /** @class */ (function () {
         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 */
@@ -1598,14 +1594,19 @@ var ImagesActionHandler = /** @class */ (function () {
     };
     ImagesActionHandler.prototype.onRemoveImg = function (picture) {
         var _this = this;
-        picture.deleted = true;
-        this.imgManager.removeImg(picture.id_file).subscribe(function (data) {
-            _this.imgEventCardService.emitImgRemoved(picture.id_file);
-            _this.imgSelectionService.removeImgSelectedById(picture.id_file);
-        }, function (error) {
-            var msg = error.status === 409 ? _this.errorAlreadyUsedImg : _this.errorRemoveImg;
-            picture.deleted = false;
-            _this.alertService.openAlert(msg);
+        var dialog = this.nwbDialog.open(this.dialogConfig);
+        dialog.afterClosed().subscribe(function (ok) {
+            if (ok) {
+                picture.deleted = true;
+                _this.imgManager.removeImg(picture.id_file).subscribe(function (data) {
+                    _this.imgEventCardService.emitImgRemoved(picture.id_file);
+                    _this.imgSelectionService.removeImgSelectedById(picture.id_file);
+                }, function (error) {
+                    var msg = error.status === 409 ? _this.errorAlreadyUsedImg : _this.errorRemoveImg;
+                    picture.deleted = false;
+                    _this.alertService.openAlert(msg);
+                });
+            }
         });
     };
     ImagesActionHandler.prototype.onPictureNotLoading = function (event) {
@@ -1647,7 +1648,8 @@ var ImagesActionHandler = /** @class */ (function () {
         { type: ImgEventService },
         { type: AlertService },
         { type: TranslateService },
-        { type: ImgManagerConfigService }
+        { type: ImgManagerConfigService },
+        { type: NwbDialogService }
     ]; };
     __decorate([
         Input(),
@@ -1698,15 +1700,16 @@ var ImagesActionHandler = /** @class */ (function () {
             ImgEventService,
             AlertService,
             TranslateService,
-            ImgManagerConfigService])
+            ImgManagerConfigService,
+            NwbDialogService])
     ], ImagesActionHandler);
     return ImagesActionHandler;
 }());
 var ImgCardComponent = /** @class */ (function (_super) {
     __extends(ImgCardComponent, _super);
-    function ImgCardComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) || this;
+    function ImgCardComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) || this;
         _this.focusInput = false;
         _this.toggleImgSelected = new EventEmitter();
         _this.isUploadSection = false;
@@ -1726,7 +1729,8 @@ var ImgCardComponent = /** @class */ (function (_super) {
         { type: ImgEventService },
         { type: AlertService },
         { type: TranslateService },
-        { type: ImgManagerConfigService }
+        { type: ImgManagerConfigService },
+        { type: NwbDialogService }
     ]; };
     __decorate([
         Input(),
@@ -1751,7 +1755,7 @@ var ImgCardComponent = /** @class */ (function (_super) {
     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
             ]
@@ -1763,7 +1767,8 @@ var ImgCardComponent = /** @class */ (function (_super) {
             ImgEventService,
             AlertService,
             TranslateService,
-            ImgManagerConfigService])
+            ImgManagerConfigService,
+            NwbDialogService])
     ], ImgCardComponent);
     return ImgCardComponent;
 }(ImagesActionHandler));
@@ -2011,7 +2016,7 @@ var CanvaBtnComponent = /** @class */ (function () {
     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,
@@ -3074,8 +3079,8 @@ var ImagesViewComponent = /** @class */ (function () {
 var MosaicViewComponent = /** @class */ (function (_super) {
     __extends(MosaicViewComponent, _super);
-    function MosaicViewComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) || this;
+    function MosaicViewComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) || this;
         _this.nbFakeImg = 0;
         return _this;
     }
@@ -3099,7 +3104,8 @@ var MosaicViewComponent = /** @class */ (function (_super) {
         { type: ImgEventService },
         { type: AlertService },
         { type: TranslateService },
-        { type: ImgManagerConfigService }
+        { type: ImgManagerConfigService },
+        { type: NwbDialogService }
     ]; };
     __decorate([
         Input(),
@@ -3116,7 +3122,7 @@ var MosaicViewComponent = /** @class */ (function (_super) {
     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
             ]
@@ -3128,15 +3134,16 @@ var MosaicViewComponent = /** @class */ (function (_super) {
             ImgEventService,
             AlertService,
             TranslateService,
-            ImgManagerConfigService])
+            ImgManagerConfigService,
+            NwbDialogService])
     ], MosaicViewComponent);
     return MosaicViewComponent;
 }(ImagesActionHandler));
 var TableViewComponent = /** @class */ (function (_super) {
     __extends(TableViewComponent, _super);
-    function TableViewComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
-        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) || this;
+    function TableViewComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) {
+        var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService, nwbDialogService) || this;
         _this.dataTableName = 'imgagesView'; // Name of your table
         return _this;
     }
@@ -3150,12 +3157,13 @@ var TableViewComponent = /** @class */ (function (_super) {
         { 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
             ]
@@ -3167,7 +3175,8 @@ var TableViewComponent = /** @class */ (function (_super) {
             ImgEventService,
             AlertService,
             TranslateService,
-            ImgManagerConfigService])
+            ImgManagerConfigService,
+            NwbDialogService])
     ], TableViewComponent);
     return TableViewComponent;
 }(ImagesActionHandler));
@@ -3495,7 +3504,7 @@ var PaginationComponent = /** @class */ (function () {
     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);