@wizishop/img-manager 0.2.75 → 0.2.79

package/assets/i18n/en.json

@@ -1 +1 @@
-{"ImgManager.CanvaBtn.bigSquare":"Big","ImgManager.CanvaBtn.createImg":"Create an image with","ImgManager.CanvaBtn.createImg.title":"Create an image with Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Error: the title of the image from Canva could not be retrieved.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Error: the image from Canva could not be uploaded.","ImgManager.CanvaBtn.info":"Select a format","ImgManager.CanvaBtn.mediumSquare":"Medium","ImgManager.CanvaBtn.publish":"Import","ImgManager.CanvaBtn.recommanded":"Recommended","ImgManager.CanvaBtn.smallSquare":"Small","ImgManager.CanvaBtn.successImport":"Your image has been imported.","ImgManager.CanvaBtn.uploadingImg":"Image loading.","ImgManager.ImgCard.confirmDeleteImg":"Are you sure you want to delete this image?","ImgManager.ImgCard.del":"Delete","ImgManager.ImgCard.download":"Download","ImgManager.ImgCard.edit":"Edit","ImgManager.ImgCard.select":"Select","ImgManager.ImgCard.validImgSmall":"Select","ImgManager.ImgEditor.nameEx":"Ex: Black T-shirt","ImgManager.ImgEditor.restart":"Refresh","ImgManager.ImgEditor.Valid":"Confirm","ImgManager.ImgEditor.ValidtToolTip":"Click here to crop the image","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image to delete: Are you sure?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images to delete: Are you sure?","ImgManager.ImgLib.delMlt":"Delete","ImgManager.ImgLib.errorGetCanvaImg":"Error: the image from Canva could not be retrieved.","ImgManager.ImgLib.imgNameSaved":"Image name saved.","ImgManager.ImgLib.lastImgs":"Your last images","ImgManager.ImgLib.nbImg":"Number of images","ImgManager.ImgLib.savingImgName":"Backup in progress...","ImgManager.ImgList.download":"Download","ImgManager.ImgList.edit":"Edit","ImgManager.ImgList.errorAlreadyUsed":"This image can not be deleted as it is being used.","ImgManager.ImgList.remove":"Delete","ImgManager.ImgList.titleImgName":"Image name","ImgManager.ImgList.titleResolution":"Resolution","ImgManager.ImgSelection.deleteImg":"Delete","ImgManager.ImgSelection.tooltips":"Click to change the order of the images","ImgManager.ImgUpload.dropImg":"Drag and drop your image here","ImgManager.ImgUpload.loading":"Loading...","ImgManager.ImgUpload.or":"or","ImgManager.ImgUpload.selectImg":"Select the images to be imported","ImgManager.PexelLib.errorUploadPhoto":"Error: the image could not be imported","ImgManager.PexelLib.import":"Import","ImgManager.PexelLib.importation":"Import","ImgManager.PexelLib.nbImgFound":"Number if images found","ImgManager.PexelLib.successImport":"Image imported","ImgManager.SearchBar.placeholder":"Name of the image to search","ImgManager.snackBar.action":"View image","ImgManager.Tabs.addImg":"Add an image","ImgManager.Tabs.freeImgLib":"Free image library","ImgManager.Tabs.imgLib":"Your images","ImgManager.UploadList.imgSuccessImport":"Images successfully imported","ImgManager.UploadList.properties.imgSize":"Size of original image","ImgManager.UploadList.properties.imgWeight":"Size of original file","ImgManager.UploadList.seo.cdn":"Addition in the CDN.","ImgManager.UploadList.seo.lazyloading":"Automatic lazyloading.","ImgManager.UploadList.seo.rezise":"Resizing and compression.","ImgManager.UploadList.seo.webp":"Webp generation","ImgManager.webElement.infoBulle":"The image manager allows you to <strong>download</strong> images, <strong> select them </strong> and apply some <strong>effects</strong> (crop, rotations...).<br/><br/>We recommend using <strong>several photos</strong> of the product (3 or 4) in various positions or environments.","ImgManager.webElement.OpenBtn":"Add photos","no":"no","PaginationComponent.on":"{{low}}-{{high}} on {{total}}","PaginationComponent.page":"Go to page","yes":"yes"}
+{"ImgManager.CanvaBtn.bigSquare":"Big","ImgManager.CanvaBtn.createImg":"Create an image with","ImgManager.CanvaBtn.createImg.title":"Create an image with Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Error: the title of the image from Canva could not be retrieved.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Error: the image from Canva could not be uploaded.","ImgManager.CanvaBtn.info":"Select a format","ImgManager.CanvaBtn.mediumSquare":"Medium","ImgManager.CanvaBtn.publish":"Import","ImgManager.CanvaBtn.recommanded":"Recommended","ImgManager.CanvaBtn.smallSquare":"Small","ImgManager.CanvaBtn.successImport":"Your image has been imported.","ImgManager.CanvaBtn.uploadingImg":"Image loading.","ImgManager.ImgCard.confirmDeleteImg":"Are you sure you want to delete this image?","ImgManager.ImgCard.del":"Delete","ImgManager.ImgCard.download":"Download","ImgManager.ImgCard.edit":"Edit","ImgManager.ImgCard.select":"Select","ImgManager.ImgCard.validImgSmall":"Select","ImgManager.ImgEditor.config.AntiSchedule":"Anti-clockwise","ImgManager.ImgEditor.config.dezoom":"Zoom less","ImgManager.ImgEditor.config.flipHoriz":"Turn horizontally","ImgManager.ImgEditor.config.flipVert":"Vertical Reversal","ImgManager.ImgEditor.config.free":"Free size","ImgManager.ImgEditor.config.landscape":"Landscape","ImgManager.ImgEditor.config.origin":"Original format","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Clockwise","ImgManager.ImgEditor.config.square":"Square","ImgManager.ImgEditor.config.zoom":"Zoom more","ImgManager.ImgEditor.copytoClipBoard":"Copied!","ImgManager.ImgEditor.crop":"Crop","ImgManager.ImgEditor.display":"Zoom","ImgManager.ImgEditor.msgFailLoad":"Error: please start again.","ImgManager.ImgEditor.msgFailSave":"Error: The image could not be saved.<br/>Please try again.","ImgManager.ImgEditor.nameEx":"Ex: Black T-shirt","ImgManager.ImgEditor.NameInfo":"The name of the image is used to define the alt attribute.","ImgManager.ImgEditor.restart":"Refresh","ImgManager.ImgEditor.rotation":"Rotate","ImgManager.ImgEditor.saveBtn":"Save and close","ImgManager.ImgEditor.Valid":"Confirm","ImgManager.ImgEditor.ValidtToolTip":"Click here to crop the image","ImgManager.ImgLib.cancel":"Cancel","ImgManager.ImgLib.confirm":"Confirm","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image to delete: Are you sure?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images to delete: Are you sure?","ImgManager.ImgLib.delMlt":"Delete","ImgManager.ImgLib.errorGetAllImg":"Error: Your images could not be recovered.","ImgManager.ImgLib.errorGetCanvaImg":"Error: the image from Canva could not be retrieved.","ImgManager.ImgLib.errorGetTotalImg":"Error: The total number of images has not been recovered.","ImgManager.ImgLib.imgNameSaved":"Image name saved.","ImgManager.ImgLib.lastImgs":"Your last images","ImgManager.ImgLib.nbImg":"Number of images","ImgManager.ImgLib.noImgFound":"No images found.<br/>Display free images.","ImgManager.ImgLib.savingImgName":"Backup in progress...","ImgManager.ImgLib.select":"Select","ImgManager.ImgList.download":"Download","ImgManager.ImgList.edit":"Edit","ImgManager.ImgList.errorAlreadyUsed":"This image can not be deleted as it is being used.","ImgManager.ImgList.errorRemoveImg":"Error: Some images could not be deleted.","ImgManager.ImgList.errorRenameImg":"Error: Some images could not be renamed.","ImgManager.ImgList.remove":"Delete","ImgManager.ImgList.titleImgName":"Image name","ImgManager.ImgList.titleResolution":"Resolution","ImgManager.ImgSelection.deleteImg":"Delete","ImgManager.ImgSelection.tooltips":"Click to change the order of the images","ImgManager.ImgSelection.unselect":"Drag the image here to remove it from the selection","ImgManager.ImgUpload.dropImg":"Drag and drop your image here","ImgManager.ImgUpload.errorNotImg":"Error: Only images can be imported.","ImgManager.ImgUpload.errorUploadingImg":"Error: An image could not be imported.","ImgManager.ImgUpload.loading":"Loading...","ImgManager.ImgUpload.or":"or","ImgManager.ImgUpload.selectImg":"Select the images to be imported","ImgManager.PexelLib.errorRetrievePhotos":"Error: The Pexel images have not been recovered.","ImgManager.PexelLib.errorUploadPhoto":"Error: the image could not be imported","ImgManager.PexelLib.import":"Import","ImgManager.PexelLib.importation":"Import","ImgManager.PexelLib.landscape":"Landscape","ImgManager.PexelLib.nbImgFound":"Number if images found","ImgManager.PexelLib.noResult":"No image found.","ImgManager.PexelLib.original":"Original.","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Image imported","ImgManager.PexelLib.untitled":"No title","ImgManager.PexelLib.uploadingImg":"Loading the current image.","ImgManager.SearchBar.placeholder":"Name of the image to search","ImgManager.snackBar.action":"View image","ImgManager.Tabs.addImg":"Add an image","ImgManager.Tabs.Editor":"Image editor","ImgManager.Tabs.freeImgLib":"Free image library","ImgManager.Tabs.imgLib":"Your images","ImgManager.UploadList.imgSuccessImport":"Images successfully imported","ImgManager.UploadList.imgSuccessImportOne":"imported image optimized for SEO","ImgManager.UploadList.properties.imgName":"Image name","ImgManager.UploadList.properties.imgSize":"Size of original image","ImgManager.UploadList.properties.imgURL":"Image URL","ImgManager.UploadList.properties.imgWeight":"Size of original file","ImgManager.UploadList.seo.cdn":"Addition in the CDN.","ImgManager.UploadList.seo.cdnTooltips":"The images you add to your website are sent directly to our CDN (Content Delivery Network). This allows the visuals to be loaded from the servers closest to the user.","ImgManager.UploadList.seo.lazyloading":"Automatic lazyloading.","ImgManager.UploadList.seo.lazyloadingTooltips":"With lazyloading, the content is loaded as the user scrolls down the page. This allows to load only the visible content.","ImgManager.UploadList.seo.rezise":"Resizing and compression.","ImgManager.UploadList.seo.reziseTooltips":"When importing your image on WiziShop, more than 22 formats are created to adapt to different screen sizes. This optimization allows us to send a different size of visual and compressed according to the support of the Internet user.","ImgManager.UploadList.seo.title":"SEO Optimizations","ImgManager.UploadList.seo.webp":"Webp generation","ImgManager.UploadList.seo.webpTooltips":"As soon as you add an image to your site, it will be accessible in the standard format, but it will also be automatically converted to the WebP format for Google. This format allows you to compress, as much as possible, the images present on your store to load them very quickly.","ImgManager.webElement.infoBulle":"The image manager allows you to <strong>download</strong> images, <strong> select them </strong> and apply some <strong>effects</strong> (crop, rotations...).<br/><br/>We recommend using <strong>several photos</strong> of the product (3 or 4) in various positions or environments.","ImgManager.webElement.OpenBtn":"Add photos","ImgManager.webElement.photosTitle":"Photos","no":"no","PaginationComponent.on":"{{low}}-{{high}} on {{total}}","PaginationComponent.page":"Go to page","yes":"yes"}

package/bundles/wizishop-img-manager.umd.js

@@ -1984,6 +1984,10 @@
                 return;
             }
             this.isLoading = true;
+            if (!this.isImgModified && !this.isNameModified) {
+                this.isLoading = false;
+                this.onEditClosed();
+            }
             var obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
             var obsChangeImgName = this.imgManagerService.changeImgName(this.imgToEdit.display_name, this.imgToEdit.id_file);
             if (this.isImgModified && this.isNameModified) {
@@ -2059,7 +2063,7 @@
         ImgEditorComponent = __decorate([
             core.Component({
                 selector: 'img-editor',
-                template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <button\n                      class=\"button img-editor__infoSection__actions__cancel\"\n                      (click)=\"onCancel()\"\n                      [disabled]=\"isLoading\"\n                    >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <div\n                        class=\"button danger button img-editor__infoSection__actions__save\"\n                        [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n                        (click)=\"onSave()\"\n                    >\n                        {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n                        <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n",
+                template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <button\n                      class=\"button img-editor__infoSection__actions__cancel\"\n                      (click)=\"onCancel()\"\n                      [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n                    >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <div\n                        class=\"button danger button img-editor__infoSection__actions__save\"\n                        [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n                        (click)=\"onSave()\"\n                    >\n                        {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n                        <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n",
                 animations: [
                     easeInOut
                 ]
@@ -3183,8 +3187,8 @@
             var _this = this;
             this.isLoading = true;
             this.displayPexelsResults = false;
-            this.isTotalRetieved = false;
             this.setParams();
+            this.refreshTotalImgList();
             this.imgManager.getShopImgList(this.params).pipe(operators.take(1)).subscribe(function (data) {
                 _this.initVariables(true);
                 var nbImgDisplayed = data.data.length;
@@ -3202,7 +3206,6 @@
                 if (data.totalRecords === 0) {
                     _this.displayPexelsLib();
                 }
-                _this.refreshTotalImgList();
             }, function (error) {
                 _this.alertService.openAlert(_this.errorGetAllImg);
                 _this.initVariables(false);
@@ -3210,12 +3213,19 @@
         };
         ImagesViewComponent.prototype.refreshTotalImgList = function () {
             var _this = this;
+            var searchValue = this.tableFilters.searchValue;
+            if (this.isTotalRetieved && searchValue === this.previousSearchValue) {
+                // Keep current total result
+                return;
+            }
+            this.isTotalRetieved = false;
             this.imgManager.getShopTotalImgList(this.params).pipe(operators.take(1)).subscribe(function (data) {
+                _this.previousSearchValue = searchValue;
                 _this.isTotalRetieved = true;
                 _this.length = data.totalRecords;
                 _this.tableFilters.totalItems = data.totalRecords;
             }, function (error) {
-                _this.alertService.openAlert(_this.errorGetTotalImg);
+                //this.alertService.openAlert(this.errorGetTotalImg);
                 _this.initVariables(false);
             });
         };
@@ -3687,8 +3697,8 @@
             this.pagination.currentPage++;
             this.pageChange.emit(this.pagination);
         };
-        PaginationComponent.prototype.onGotoPageChange = function (event) {
-            this.pagination.currentPage = parseInt(event.target.value);
+        PaginationComponent.prototype.onGotoPageChange = function (pageNumber) {
+            this.pagination.currentPage = parseInt(pageNumber);
             this.pageChange.emit(this.pagination);
         };
         __decorate([
@@ -3703,7 +3713,7 @@
         PaginationComponent = __decorate([
             core.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)\" [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"
+                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      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\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);
@@ -4422,6 +4432,118 @@
         return NumberToArray;
     }());
 
+    var PageSelectorComponent = /** @class */ (function () {
+        function PageSelectorComponent() {
+            this.openAbsoluteSelect = false;
+            this.largeNumberOfPage = false;
+            this.numberOfPage = 0;
+            this.pageChange = new core.EventEmitter();
+        }
+        Object.defineProperty(PageSelectorComponent.prototype, "pagination", {
+            get: function () {
+                return this._pagination;
+            },
+            set: function (pagination) {
+                this._pagination = pagination;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PageSelectorComponent.prototype, "totalItems", {
+            get: function () {
+                return this._totalItems;
+            },
+            set: function (totalItems) {
+                this.numberOfPage = Math.ceil(totalItems / this.pagination.itemsPerPage);
+                this.largeNumberOfPage = this.numberOfPage > 30;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PageSelectorComponent.prototype.onGotoPageChange = function (event, directValue) {
+            if (directValue) {
+                this.pageChange.emit(event);
+                this.openAbsoluteSelect = false;
+            }
+            else {
+                this.pageChange.emit(parseInt(event.target.value));
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], PageSelectorComponent.prototype, "pagination", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number),
+            __metadata("design:paramtypes", [Number])
+        ], PageSelectorComponent.prototype, "totalItems", null);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], PageSelectorComponent.prototype, "pageChange", void 0);
+        PageSelectorComponent = __decorate([
+            core.Component({
+                selector: 'wz-page-selector',
+                template: "<div class=\"wz-selector\">\n\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n      <i class=\"fas fa-sort-down\"></i>\n    </div>\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n          <span>{{ pageIndex.display }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!largeNumberOfPage\">\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [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  </ng-container>\n</div>\n"
+            }),
+            __metadata("design:paramtypes", [])
+        ], PageSelectorComponent);
+        return PageSelectorComponent;
+    }());
+
+    var LargeNumberOfPagePipe = /** @class */ (function () {
+        function LargeNumberOfPagePipe() {
+        }
+        /**
+         * Return an incremental array
+         * Display 30 pages, from -15 to +15 of the current page
+         * @param totalItems
+         * @param itemsPerPage
+         */
+        LargeNumberOfPagePipe.prototype.transform = function (totalItems, itemsPerPage, currentPage) {
+            if (!(totalItems >= 0 && itemsPerPage >= 0)) {
+                throw new Error('totalItems or itemsPerPage missing in ArrayTotalPages pipe.');
+            }
+            var arrayLength = 32;
+            var startAtPage = currentPage <= 15 ? 0 : currentPage - 15;
+            var totalPage = Math.ceil(totalItems / itemsPerPage);
+            var arrayWithPageNumber = Array.apply(null, { length: arrayLength })
+                .map(Number.call, Number)
+                .map(function (x) {
+                var pageIndex = {
+                    display: startAtPage + x + 1,
+                    value: startAtPage + x + 1
+                };
+                if (x === arrayLength - 2) {
+                    pageIndex.display = '...';
+                }
+                if (x === arrayLength - 1) {
+                    pageIndex.display = totalPage;
+                    pageIndex.value = totalPage;
+                }
+                return pageIndex;
+            });
+            if (startAtPage) {
+                arrayWithPageNumber.unshift({
+                    display: 1,
+                    value: 1
+                }, {
+                    display: "...",
+                    value: 2
+                });
+            }
+            return arrayWithPageNumber;
+        };
+        LargeNumberOfPagePipe = __decorate([
+            core.Pipe({
+                name: 'LargeNumberOfPage'
+            })
+        ], LargeNumberOfPagePipe);
+        return LargeNumberOfPagePipe;
+    }());
+
     ;
     var components = [
         WzImgManagerComponent,
@@ -4444,7 +4566,8 @@
         InputSearchComponent,
         PaginationComponent,
         CheckboxComponent,
-        AlertComponent
+        AlertComponent,
+        PageSelectorComponent,
     ];
     var directives = [
         DragDropDirective,
@@ -4463,7 +4586,8 @@
         PagniationIsLastPage,
         PagniationText,
         ImageSrcPipe,
-        NumberToArray
+        NumberToArray,
+        LargeNumberOfPagePipe
     ];
     var WzImgManagerModule = /** @class */ (function () {
         function WzImgManagerModule() {
@@ -4538,21 +4662,23 @@
     exports.ɵbd = PaginationComponent;
     exports.ɵbe = CheckboxComponent;
     exports.ɵbf = AlertComponent;
-    exports.ɵbg = DragDropDirective;
-    exports.ɵbh = LoadingDirective;
-    exports.ɵbi = AutoHideDirective;
-    exports.ɵbj = CopyClipboardDirective;
-    exports.ɵbk = TableColumn;
-    exports.ɵbl = CheckBoxRow;
-    exports.ɵbm = TableColumnHeader;
-    exports.ɵbn = TableRow;
-    exports.ɵbo = AbstractDebounceDirective;
-    exports.ɵbp = DebounceKeyupDirective;
-    exports.ɵbq = PagniationArrayTotalPages;
-    exports.ɵbr = PagniationIsLastPage;
-    exports.ɵbs = PagniationText;
-    exports.ɵbt = ImageSrcPipe;
-    exports.ɵbu = NumberToArray;
+    exports.ɵbg = PageSelectorComponent;
+    exports.ɵbh = DragDropDirective;
+    exports.ɵbi = LoadingDirective;
+    exports.ɵbj = AutoHideDirective;
+    exports.ɵbk = CopyClipboardDirective;
+    exports.ɵbl = TableColumn;
+    exports.ɵbm = CheckBoxRow;
+    exports.ɵbn = TableColumnHeader;
+    exports.ɵbo = TableRow;
+    exports.ɵbp = AbstractDebounceDirective;
+    exports.ɵbq = DebounceKeyupDirective;
+    exports.ɵbr = PagniationArrayTotalPages;
+    exports.ɵbs = PagniationIsLastPage;
+    exports.ɵbt = PagniationText;
+    exports.ɵbu = ImageSrcPipe;
+    exports.ɵbv = NumberToArray;
+    exports.ɵbw = LargeNumberOfPagePipe;
     exports.ɵc = UserSettingsService;
     exports.ɵd = ImgEventService;
     exports.ɵe = DomService;