@colijnit/corecomponents_v12 12.0.54 → 12.0.57

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -9792,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-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  ",
+                    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                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9821,24 +9821,33 @@
             this.nextLabel = 'Volgende pagina';
             this.currentPage = 1;
             this.itemsPerPage = 20;
-            this.totalItems = 1;
             this.paginationRange = 8;
+            this.autoHide = false;
             this.previousClick = new core.EventEmitter();
             this.nextClick = new core.EventEmitter();
             this.pageClick = new core.EventEmitter();
+            this._totalItems = 20;
             this.pages = [];
         }
+        Object.defineProperty(PaginationBarComponent.prototype, "totalItems", {
+            get: function () {
+                return this._totalItems;
+            },
+            set: function (value) {
+                this._totalItems = value;
+                this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+            },
+            enumerable: false,
+            configurable: true
+        });
         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();
-            }
+            this.pages = this._createPageArray();
         };
         PaginationBarComponent.prototype.isOnFirstPage = function () {
             return this.currentPage === 1;
@@ -9860,6 +9869,14 @@
             this.currentPage = value;
             this.pageClick.emit(value);
         };
+        PaginationBarComponent.prototype.shouldBeHidden = function () {
+            if (!this.autoHide) {
+                return false;
+            }
+            else {
+                return (this.totalItems <= this.itemsPerPage);
+            }
+        };
         // 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.
@@ -9919,7 +9936,7 @@
     PaginationBarComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-pagination-bar",
-                    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    ",
+                    template: "\n    <ul class=\"pagination\" *ngIf=\"!shouldBeHidden()\">\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
                 },] }
     ];
@@ -9931,6 +9948,7 @@
         itemsPerPage: [{ type: core.Input }],
         totalItems: [{ type: core.Input }],
         paginationRange: [{ type: core.Input }],
+        autoHide: [{ type: core.Input }],
         previousClick: [{ type: core.Output }],
         nextClick: [{ type: core.Output }],
         pageClick: [{ type: core.Output }],
@@ -10185,29 +10203,17 @@
             this.changeSub.unsubscribe();
         };
         PaginationComponent.prototype.goToFirstPage = function () {
-            if (!this.isOnFirstPage()) {
-                this.setCurrentPage(1);
-            }
+            this.setCurrentPage(1);
         };
         PaginationComponent.prototype.goToPreviousPage = function () {
-            if (!this.isOnFirstPage()) {
-                this.setCurrentPage(this.getCurrentPage() - 1);
-            }
+            this.setCurrentPage(this.getCurrentPage() - 1);
         };
         PaginationComponent.prototype.goToNextPage = function () {
-            if (!this.isOnLastPage()) {
-                this.setCurrentPage(this.getCurrentPage() + 1);
-            }
+            this.setCurrentPage(this.getCurrentPage() + 1);
         };
         PaginationComponent.prototype.setCurrentPage = function (page) {
             this.pageChange.emit(page);
         };
-        PaginationComponent.prototype.isOnFirstPage = function () {
-            return this.getCurrentPage() === 1;
-        };
-        PaginationComponent.prototype.isOnLastPage = function () {
-            return this.getLastPage() === this.getCurrentPage();
-        };
         PaginationComponent.prototype.shouldBeHidden = function () {
             if (!this.autoHide) {
                 return false;
@@ -10234,10 +10240,6 @@
         PaginationComponent.prototype.getCurrentPage = function () {
             return this._paginationService.getCurrentPage(this.id);
         };
-        PaginationComponent.prototype.getLastPage = function () {
-            var instance = this._paginationService.getInstance(this.id);
-            return Math.ceil(instance.totalItems / instance.itemsPerPage);
-        };
         /**
          * Checks that the instance.currentPage property is within bounds for the current page range.
          * If not, return a correct value for currentPage, or the current value if OK.