@colijnit/corecomponents_v12 12.0.50 → 12.0.53

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -6352,7 +6352,7 @@
     InputDatePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date",
-                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    [readonly]=\"readonly\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputDatePickerComponent; })
                         }, {
@@ -6434,7 +6434,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n      [readonly]=\"readonly\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -9809,6 +9809,144 @@
         handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
     };
 
+    var PaginationBarComponent = /** @class */ (function () {
+        function PaginationBarComponent() {
+            this.directionLinks = true;
+            this.previousLabel = 'Vorige pagina';
+            this.nextLabel = 'Volgende pagina';
+            this.currentPage = 1;
+            this.itemsPerPage = 20;
+            this.totalItems = 1;
+            this.paginationRange = 8;
+            this.previousClick = new core.EventEmitter();
+            this.nextClick = new core.EventEmitter();
+            this.pageClick = new core.EventEmitter();
+            this.pages = [];
+        }
+        PaginationBarComponent.prototype.showClass = function () {
+            return true;
+        };
+        PaginationBarComponent.prototype.ngOnInit = function () {
+            this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+            this.pages = this._createPageArray();
+        };
+        PaginationBarComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['currentPage'].currentValue !== changes['currentPage'].previousValue) {
+                this.pages = this._createPageArray();
+            }
+        };
+        PaginationBarComponent.prototype.isOnFirstPage = function () {
+            return this.currentPage === 1;
+        };
+        PaginationBarComponent.prototype.isOnLastPage = function () {
+            return this.pages.length === this.currentPage;
+        };
+        PaginationBarComponent.prototype.onPreviousClick = function () {
+            this.previousClick.emit();
+        };
+        PaginationBarComponent.prototype.onNextClick = function () {
+            this.nextClick.emit();
+        };
+        PaginationBarComponent.prototype.onPageClick = function (value) {
+            this.currentPage = value;
+            this.pageClick.emit(value);
+        };
+        // Returns an array of IPage objects to use in the pagination controls.
+        PaginationBarComponent.prototype._createPageArray = function () {
+            // paginationRange could be a string if passed from attribute, so cast to number.
+            this.paginationRange = +this.paginationRange;
+            var pages = [];
+            var halfWay = Math.ceil(this.paginationRange / 2);
+            var isStart = this.currentPage <= halfWay;
+            var isEnd = this.totalPages - halfWay < this.currentPage;
+            var isMiddle = !isStart && !isEnd;
+            var ellipsesNeeded = this.paginationRange < this.totalPages;
+            var i = 1;
+            while (i <= this.totalPages && i <= this.paginationRange) {
+                var label = void 0;
+                var pageNumber = this._calculatePageNumber(i);
+                var openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
+                var closingEllipsesNeeded = (i === this.paginationRange - 1 && (isMiddle || isStart));
+                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+                    label = '...';
+                }
+                else {
+                    label = '' + pageNumber;
+                }
+                pages.push({
+                    label: label,
+                    value: pageNumber
+                });
+                i++;
+            }
+            return pages;
+        };
+        // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
+        PaginationBarComponent.prototype._calculatePageNumber = function (i) {
+            var halfWay = Math.ceil(this.paginationRange / 2);
+            if (i === this.paginationRange) {
+                return this.totalPages;
+            }
+            else if (i === 1) {
+                return i;
+            }
+            else if (this.paginationRange < this.totalPages) {
+                if (this.totalPages - halfWay < this.currentPage) {
+                    return this.totalPages - this.paginationRange + i;
+                }
+                else if (halfWay < this.currentPage) {
+                    return this.currentPage - halfWay + i;
+                }
+                else {
+                    return i;
+                }
+            }
+            else {
+                return i;
+            }
+        };
+        return PaginationBarComponent;
+    }());
+    PaginationBarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-pagination-bar",
+                    template: "\n    <ul class=\"pagination\">\n      <li *ngIf=\"directionLinks\" class=\"pagination-previous\">\n        <a (click)=\"onPreviousClick()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n      </li>\n      <li *ngFor=\"let page of pages\" [class.current]=\"currentPage === page.value\" (click)=\"onPageClick(page.value)\">\n        <span>{{page.label}}</span>\n      </li>\n      <li *ngIf=\"directionLinks\" class=\"pagination-next\">\n        <a (click)=\"onNextClick()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n      </li>\n    </ul>\n    ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    PaginationBarComponent.propDecorators = {
+        directionLinks: [{ type: core.Input }],
+        previousLabel: [{ type: core.Input }],
+        nextLabel: [{ type: core.Input }],
+        currentPage: [{ type: core.Input }],
+        itemsPerPage: [{ type: core.Input }],
+        totalItems: [{ type: core.Input }],
+        paginationRange: [{ type: core.Input }],
+        previousClick: [{ type: core.Output }],
+        nextClick: [{ type: core.Output }],
+        pageClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-pagination-bar",] }]
+    };
+
+    var PaginationBarModule = /** @class */ (function () {
+        function PaginationBarModule() {
+        }
+        return PaginationBarModule;
+    }());
+    PaginationBarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        PaginationBarComponent
+                    ],
+                    exports: [
+                        PaginationBarComponent
+                    ]
+                },] }
+    ];
+
     var PaginationService = /** @class */ (function () {
         function PaginationService() {
             this.change = new rxjs.Subject();
@@ -9900,6 +10038,111 @@
     ];
     PaginationService.ctorParameters = function () { return []; };
 
+    var LARGE_NUMBER = 999999999;
+    var PaginatePipe = /** @class */ (function () {
+        function PaginatePipe(paginateService) {
+            this.paginateService = paginateService;
+            // store the values from the last time the pipe
+            this.state = {};
+        }
+        PaginatePipe.prototype.transform = function (collection, args) {
+            // When an observable is passed through the AsyncPipe, it will output
+            // `null` until the subscription resolves. In this case, we want to
+            // use the cached data from the `state` object to prevent the NgFor
+            // from flashing empty until the real values arrive.
+            if (!(collection instanceof Array)) {
+                var _id = args.id || this.paginateService.DEFAULT_ID;
+                if (this.state[_id]) {
+                    return this.state[_id].slice;
+                }
+                else {
+                    return collection;
+                }
+            }
+            var serverSideMode = args.totalItems !== undefined;
+            var instance = this._createInstance(collection, args);
+            var id = instance.id;
+            var start;
+            var end;
+            var perPage = instance.itemsPerPage;
+            this.paginateService.register(instance);
+            if (!serverSideMode && collection instanceof Array) {
+                perPage = perPage || LARGE_NUMBER;
+                start = (instance.currentPage - 1) * perPage;
+                end = start + perPage;
+                var isIdentical = this._stateIsIdentical(id, collection, start, end);
+                if (isIdentical) {
+                    return this.state[id].slice;
+                }
+                else {
+                    var slice = collection.slice(start, end);
+                    this._saveState(id, collection, slice, start, end);
+                    this.paginateService.change.next(id);
+                    return slice;
+                }
+            }
+            // save the state for server-side collection to avoid null
+            // flash as new data loads.
+            this._saveState(id, collection, collection, start, end);
+            return collection;
+        };
+        // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
+        PaginatePipe.prototype._createInstance = function (collection, args) {
+            var config = args;
+            this._checkConfig(config);
+            return {
+                id: config.id || this.paginateService.DEFAULT_ID,
+                itemsPerPage: config.itemsPerPage || 0,
+                currentPage: config.currentPage || 1,
+                totalItems: config.totalItems || collection.length
+            };
+        };
+        // Ensure the argument passed to the filter contains the required properties.
+        PaginatePipe.prototype._checkConfig = function (config) {
+            var required = ["itemsPerPage", "currentPage"];
+            var missing = required.filter(function (prop) { return !config.hasOwnProperty(prop); });
+            if (0 < missing.length) {
+                throw new Error("PaginatePipe: Argument is missing the following required properties: " + missing.join(", "));
+            }
+        };
+        /**
+         * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
+         * array for a given id. This means that the next time the pipe is run on this collection & id, we just
+         * need to check that the collection, start and end points are all identical, and if so, return the
+         * last sliced array.
+         */
+        PaginatePipe.prototype._saveState = function (id, collection, slice, start, end) {
+            this.state[id] = {
+                collection: collection,
+                size: collection.length,
+                slice: slice,
+                start: start,
+                end: end
+            };
+        };
+        // For a given id, returns true if the collection, size, start and end values are identical.
+        PaginatePipe.prototype._stateIsIdentical = function (id, collection, start, end) {
+            var state = this.state[id];
+            if (!state) {
+                return false;
+            }
+            return state.collection === collection &&
+                state.size === collection.length &&
+                state.start === start &&
+                state.end === end;
+        };
+        return PaginatePipe;
+    }());
+    PaginatePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'paginate',
+                    pure: false
+                },] }
+    ];
+    PaginatePipe.ctorParameters = function () { return [
+        { type: PaginationService }
+    ]; };
+
     var PaginationComponent = /** @class */ (function () {
         function PaginationComponent(_paginationService) {
             var _this = this;
@@ -9912,7 +10155,8 @@
             // Emits the new page number.
             this.pageChange = new core.EventEmitter();
             this.showClass = true;
-            this.pages = [];
+            this.totalItems = 1;
+            this.itemsPerPage = 20;
             this.changeSub = this._paginationService.change.subscribe(function (id) {
                 if (_this.id === id) {
                     _this._updatePageLinks();
@@ -9971,11 +10215,12 @@
          */
         PaginationComponent.prototype._updatePageLinks = function () {
             var paginationInstance = this._paginationService.getInstance(this.id);
-            this.pages = this.createPageArray(paginationInstance.currentPage, paginationInstance.itemsPerPage, paginationInstance.totalItems, this.maxSize);
             var correctedCurrentPage = this.outOfBoundCorrection(paginationInstance);
             if (correctedCurrentPage !== paginationInstance.currentPage) {
                 this.setCurrentPage(correctedCurrentPage);
             }
+            this.totalItems = paginationInstance.totalItems;
+            this.itemsPerPage = paginationInstance.itemsPerPage;
         };
         PaginationComponent.prototype.getCurrentPage = function () {
             return this._paginationService.getCurrentPage(this.id);
@@ -9998,67 +10243,12 @@
             }
             return instance.currentPage;
         };
-        // Returns an array of IPage objects to use in the pagination controls.
-        PaginationComponent.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
-            // paginationRange could be a string if passed from attribute, so cast to number.
-            paginationRange = +paginationRange;
-            var pages = [];
-            var totalPages = Math.ceil(totalItems / itemsPerPage);
-            var halfWay = Math.ceil(paginationRange / 2);
-            var isStart = currentPage <= halfWay;
-            var isEnd = totalPages - halfWay < currentPage;
-            var isMiddle = !isStart && !isEnd;
-            var ellipsesNeeded = paginationRange < totalPages;
-            var i = 1;
-            while (i <= totalPages && i <= paginationRange) {
-                var label = void 0;
-                var pageNumber = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
-                var openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
-                var closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
-                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
-                    label = '...';
-                }
-                else {
-                    label = '' + pageNumber;
-                }
-                pages.push({
-                    label: label,
-                    value: pageNumber
-                });
-                i++;
-            }
-            return pages;
-        };
-        // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
-        PaginationComponent.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
-            var halfWay = Math.ceil(paginationRange / 2);
-            if (i === paginationRange) {
-                return totalPages;
-            }
-            else if (i === 1) {
-                return i;
-            }
-            else if (paginationRange < totalPages) {
-                if (totalPages - halfWay < currentPage) {
-                    return totalPages - paginationRange + i;
-                }
-                else if (halfWay < currentPage) {
-                    return currentPage - halfWay + i;
-                }
-                else {
-                    return i;
-                }
-            }
-            else {
-                return i;
-            }
-        };
         return PaginationComponent;
     }());
     PaginationComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-pagination',
-                    template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n      <ul class=\"pagination\">\n        <li *ngIf=\"directionLinks\" class=\"pagination-previous\">\n          <a (click)=\"goToPreviousPage()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n        </li>\n        <li *ngFor=\"let page of pages\" [class.current]=\"getCurrentPage() === page.value\" (click)=\"setCurrentPage(page.value)\">\n          <span>{{page.label}}</span>\n        </li>\n        <li *ngIf=\"directionLinks\" class=\"pagination-next\">\n          <a (click)=\"goToNextPage()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n        </li>\n      </ul>\n    </div>\n  ",
+                    template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n\n      <co-pagination-bar\n        [currentPage]=\"getCurrentPage()\"\n        [totalItems]=\"totalItems\"\n        [itemsPerPage]=\"itemsPerPage\"\n        [directionLinks]=\"directionLinks\"\n        [previousLabel]=\"previousLabel\"\n        [nextLabel]=\"nextLabel\"\n        (previousClick)=\"goToPreviousPage()\"\n        (nextClick)=\"goToNextPage()\"\n        (pageClick)=\"setCurrentPage($event)\"\n      ></co-pagination-bar>\n    </div>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -10077,111 +10267,6 @@
         showClass: [{ type: core.HostBinding, args: ['class.co-pagination',] }]
     };
 
-    var LARGE_NUMBER = 999999999;
-    var PaginatePipe = /** @class */ (function () {
-        function PaginatePipe(paginateService) {
-            this.paginateService = paginateService;
-            // store the values from the last time the pipe
-            this.state = {};
-        }
-        PaginatePipe.prototype.transform = function (collection, args) {
-            // When an observable is passed through the AsyncPipe, it will output
-            // `null` until the subscription resolves. In this case, we want to
-            // use the cached data from the `state` object to prevent the NgFor
-            // from flashing empty until the real values arrive.
-            if (!(collection instanceof Array)) {
-                var _id = args.id || this.paginateService.DEFAULT_ID;
-                if (this.state[_id]) {
-                    return this.state[_id].slice;
-                }
-                else {
-                    return collection;
-                }
-            }
-            var serverSideMode = args.totalItems !== undefined;
-            var instance = this._createInstance(collection, args);
-            var id = instance.id;
-            var start;
-            var end;
-            var perPage = instance.itemsPerPage;
-            this.paginateService.register(instance);
-            if (!serverSideMode && collection instanceof Array) {
-                perPage = perPage || LARGE_NUMBER;
-                start = (instance.currentPage - 1) * perPage;
-                end = start + perPage;
-                var isIdentical = this._stateIsIdentical(id, collection, start, end);
-                if (isIdentical) {
-                    return this.state[id].slice;
-                }
-                else {
-                    var slice = collection.slice(start, end);
-                    this._saveState(id, collection, slice, start, end);
-                    this.paginateService.change.next(id);
-                    return slice;
-                }
-            }
-            // save the state for server-side collection to avoid null
-            // flash as new data loads.
-            this._saveState(id, collection, collection, start, end);
-            return collection;
-        };
-        // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
-        PaginatePipe.prototype._createInstance = function (collection, args) {
-            var config = args;
-            this._checkConfig(config);
-            return {
-                id: config.id || this.paginateService.DEFAULT_ID,
-                itemsPerPage: config.itemsPerPage || 0,
-                currentPage: config.currentPage || 1,
-                totalItems: config.totalItems || collection.length
-            };
-        };
-        // Ensure the argument passed to the filter contains the required properties.
-        PaginatePipe.prototype._checkConfig = function (config) {
-            var required = ["itemsPerPage", "currentPage"];
-            var missing = required.filter(function (prop) { return !config.hasOwnProperty(prop); });
-            if (0 < missing.length) {
-                throw new Error("PaginatePipe: Argument is missing the following required properties: " + missing.join(", "));
-            }
-        };
-        /**
-         * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
-         * array for a given id. This means that the next time the pipe is run on this collection & id, we just
-         * need to check that the collection, start and end points are all identical, and if so, return the
-         * last sliced array.
-         */
-        PaginatePipe.prototype._saveState = function (id, collection, slice, start, end) {
-            this.state[id] = {
-                collection: collection,
-                size: collection.length,
-                slice: slice,
-                start: start,
-                end: end
-            };
-        };
-        // For a given id, returns true if the collection, size, start and end values are identical.
-        PaginatePipe.prototype._stateIsIdentical = function (id, collection, start, end) {
-            var state = this.state[id];
-            if (!state) {
-                return false;
-            }
-            return state.collection === collection &&
-                state.size === collection.length &&
-                state.start === start &&
-                state.end === end;
-        };
-        return PaginatePipe;
-    }());
-    PaginatePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'paginate',
-                    pure: false
-                },] }
-    ];
-    PaginatePipe.ctorParameters = function () { return [
-        { type: PaginationService }
-    ]; };
-
     var PaginationModule = /** @class */ (function () {
         function PaginationModule() {
         }
@@ -10190,7 +10275,8 @@
     PaginationModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        common.CommonModule
+                        common.CommonModule,
+                        PaginationBarModule
                     ],
                     providers: [
                         PaginationService
@@ -11017,6 +11103,8 @@
     exports.MultiSelectListComponent = MultiSelectListComponent;
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
+    exports.PaginationBarComponent = PaginationBarComponent;
+    exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
     exports.PaginationModule = PaginationModule;
     exports.PopupButtonsComponent = PopupButtonsComponent;