@colijnit/corecomponents_v12 12.0.51 → 12.0.54

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -6246,7 +6246,7 @@
     InputComboBoxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-combo-box",
-                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
@@ -9775,9 +9775,14 @@
             }
             this._detectChanges();
         };
-        SimpleGridComponent.prototype.pageChange = function (page) {
+        SimpleGridComponent.prototype.goToPreviousPage = function () {
+            this.currentPage -= 1;
+        };
+        SimpleGridComponent.prototype.goToNextPage = function () {
+            this.currentPage += 1;
+        };
+        SimpleGridComponent.prototype.setCurrentPage = function (page) {
             this.currentPage = page;
-            //this.gridBody.nativeElement.scrollTop = 0;
         };
         SimpleGridComponent.prototype._detectChanges = function () {
             this._changeDetection.detectChanges();
@@ -9787,7 +9792,7 @@
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"inlineEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n               [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\" (visible)=\"rowVisible.next(row)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination *ngIf=\"data?.length > rowsPerPage\" [autoHide]=\"true\" (pageChange)=\"pageChange($event)\"></co-pagination>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"inlineEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n               [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\" (visible)=\"rowVisible.next(row)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9811,18 +9816,30 @@
 
     var PaginationBarComponent = /** @class */ (function () {
         function PaginationBarComponent() {
-            this.pages = [];
             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;
         };
@@ -9830,30 +9847,90 @@
             return this.pages.length === this.currentPage;
         };
         PaginationBarComponent.prototype.onPreviousClick = function () {
-            this.previousClick.emit();
+            if (!this.isOnFirstPage()) {
+                this.previousClick.emit();
+            }
         };
         PaginationBarComponent.prototype.onNextClick = function () {
-            this.nextClick.emit();
+            if (!this.isOnLastPage()) {
+                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    ",
+                    template: "\n    <ul class=\"pagination\">\n      <li *ngIf=\"directionLinks\" class=\"pagination-previous\" [class.disabled]=\"isOnFirstPage()\">\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\" [class.disabled]=\"isOnLastPage()\">\n        <a (click)=\"onNextClick()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n      </li>\n    </ul>\n    ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     PaginationBarComponent.propDecorators = {
-        pages: [{ type: core.Input }],
         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 }],
@@ -10087,7 +10164,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();
@@ -10146,11 +10224,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);
@@ -10173,67 +10252,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\n      <co-pagination-bar\n        [pages]=\"pages\"\n        [directionLinks]=\"directionLinks\"\n        [previousLabel]=\"previousLabel\"\n        [nextLabel]=\"nextLabel\"\n        [currentPage]=\"getCurrentPage()\"\n        (previousClick)=\"goToPreviousPage()\"\n        (nextClick)=\"goToNextPage()\"\n        (pageClick)=\"setCurrentPage($event)\"\n      ></co-pagination-bar>\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
                 },] }
     ];
@@ -10550,7 +10574,8 @@
                         InputTextModule,
                         FormModule,
                         ObserveVisibilityModule,
-                        PaginationModule
+                        PaginationModule,
+                        PaginationBarModule
                     ],
                     declarations: [
                         SimpleGridComponent,