@wizishop/img-manager 0.2.76 → 0.2.77

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

@@ -3697,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([
@@ -3713,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);
@@ -4432,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,
@@ -4454,7 +4566,8 @@
         InputSearchComponent,
         PaginationComponent,
         CheckboxComponent,
-        AlertComponent
+        AlertComponent,
+        PageSelectorComponent,
     ];
     var directives = [
         DragDropDirective,
@@ -4473,7 +4586,8 @@
         PagniationIsLastPage,
         PagniationText,
         ImageSrcPipe,
-        NumberToArray
+        NumberToArray,
+        LargeNumberOfPagePipe
     ];
     var WzImgManagerModule = /** @class */ (function () {
         function WzImgManagerModule() {
@@ -4548,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;