@wizishop/img-manager 0.2.96 → 0.2.99

package/fesm5/wizishop-img-manager.js

@@ -1229,7 +1229,7 @@ var ImgTabsComponent = /** @class */ (function () {
     ImgTabsComponent = __decorate([
         Component({
             selector: 'img-tabs',
-            template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
+            template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [nbRowToShow]=\"2\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
         }),
         __metadata("design:paramtypes", [ImgEventService,
             AlertService,
@@ -2764,9 +2764,9 @@ var ImagesViewComponent = /** @class */ (function () {
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
     }
     ImagesViewComponent.prototype.ngOnInit = function () {
-        if (this.maxLengthCardShow) {
-            this.reducePictureListMaxLength();
-        }
+        /* if (this.maxLengthCardShow) {
+          this.reducePictureListMaxLength();
+        } */
         this.setEvents();
         this.imgSelectedList = this.imgSelectionService.getImgSelection();
     };
@@ -2777,9 +2777,9 @@ var ImagesViewComponent = /** @class */ (function () {
             this.savePictureList = this.picturesList;
         }
     };
-    ImagesViewComponent.prototype.reducePictureListMaxLength = function () {
-        this.picturesList.splice(0, this.maxLengthCardShow);
-    };
+    /* reducePictureListMaxLength() {
+      this.picturesList.splice(0, this.maxLengthCardShow);
+    } */
     ImagesViewComponent.prototype.getImgList = function () {
         this.filtersChanged.next();
     };
@@ -2805,6 +2805,7 @@ var ImagesViewComponent = /** @class */ (function () {
         this.getImgList();
     };
     ImagesViewComponent.prototype.onRenamePicture = function (pictureRenamed) {
+        console.log('onRenamePicture pictureRenamed', pictureRenamed);
         this.renamePictureService.onRenamePicture(pictureRenamed);
     };
     ImagesViewComponent.prototype.removeListImg = function () {
@@ -2911,6 +2912,10 @@ var ImagesViewComponent = /** @class */ (function () {
         return imgSizesConfig;
     };
     ImagesViewComponent.prototype.getTotalImgPerPage = function () {
+        if (this.nbRowToShow) {
+            var nbImgPerLine = this.stateDisplayed === 'full' ? this.nbMinImgPerLine : this.nbMaxImgPerLine;
+            return nbImgPerLine * this.nbRowToShow;
+        }
         var total = this.nbMinImgPerLine;
         while (total < 30 || total % this.nbMaxImgPerLine !== 0 || total % this.nbMinImgPerLine !== 0) {
             total += this.nbMinImgPerLine;
@@ -2918,8 +2923,9 @@ var ImagesViewComponent = /** @class */ (function () {
         return total;
     };
     ImagesViewComponent.prototype.setParams = function () {
+        var _a;
         this.params = {
-            limit: this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString(),
+            limit: ((_a = this.maxLengthCardShow) === null || _a === void 0 ? void 0 : _a.toString()) || (this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage.toString() : this.pageSize.toString()),
             page: this.tableFilters.currentPage.toString()
         };
         if (this.tableFilters.searchValue) {
@@ -3066,9 +3072,6 @@ var ImagesViewComponent = /** @class */ (function () {
             _this.length = _this.isTotalRetieved ? _this.length : data.totalRecords;
             _this.tableFilters.totalItems = _this.isTotalRetieved ? _this.tableFilters.totalItems : data.totalRecords;
             _this.tableFilters.itemsPerPage = _this.tableFilters.itemsPerPage ? _this.tableFilters.itemsPerPage : _this.pageSize;
-            if (_this.maxLengthCardShow) {
-                _this.picturesList = _this.picturesList.splice(0, 8);
-            }
             // Display Pexels if no result
             if (data.totalRecords === 0) {
                 _this.displayPexelsLib();
@@ -3129,6 +3132,10 @@ var ImagesViewComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Number)
     ], ImagesViewComponent.prototype, "maxLengthCardShow", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], ImagesViewComponent.prototype, "nbRowToShow", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)