@colijnit/corecomponents_v12 12.0.53 → 12.0.56

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                    [readonly]=\"readonly\"\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                    (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      [(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  ",
+                    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  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -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                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9818,6 +9823,7 @@
             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();
@@ -9831,9 +9837,7 @@
             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;
@@ -9842,15 +9846,27 @@
             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);
         };
+        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.
@@ -9910,7 +9926,7 @@
     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\" *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
                 },] }
     ];
@@ -9922,6 +9938,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 }],
@@ -10176,29 +10193,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;
@@ -10225,10 +10230,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.
@@ -10565,7 +10566,8 @@
                         InputTextModule,
                         FormModule,
                         ObserveVisibilityModule,
-                        PaginationModule
+                        PaginationModule,
+                        PaginationBarModule
                     ],
                     declarations: [
                         SimpleGridComponent,