| import { Component, Input, Output, EventEmitter, Optional, ChangeDetectorRef, ChangeDetectionStrategy, NgModule } from '@angular/core'; |
| import { coerceNumberProperty } from '@angular/cdk/coercion'; |
| import { Dir } from '@angular/cdk/bidi'; |
| import { CommonModule } from '@angular/common'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { MatButtonModule } from '@angular/material/button'; |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @record |
| */ |
| var TdPagingBarComponent = /** @class */ (function () { |
| /** |
| * @param {?} _dir |
| * @param {?} _changeDetectorRef |
| */ |
| function TdPagingBarComponent(_dir, _changeDetectorRef) { |
| this._dir = _dir; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._pageSize = 50; |
| this._total = 0; |
| this._page = 1; |
| this._fromRow = 1; |
| this._toRow = 1; |
| this._initialized = false; |
| this._pageLinks = []; |
| this._pageLinkCount = 0; |
| this._hitEnd = false; |
| this._hitStart = false; |
| /** |
| * firstLast?: boolean |
| * Shows or hides the first and last page buttons of the paging bar. Defaults to 'false' |
| */ |
| this.firstLast = true; |
| /** |
| * initialPage?: number |
| * Sets starting page for the paging bar. Defaults to '1' |
| */ |
| this.initialPage = 1; |
| /** |
| * change?: function |
| * Method to be executed when page size changes or any button is clicked in the paging bar. |
| * Emits an [IPageChangeEvent] implemented object. |
| */ |
| this.onChange = new EventEmitter(); |
| } |
| Object.defineProperty(TdPagingBarComponent.prototype, "pageLinkCount", { |
| /** |
| * @return {?} |
| */ |
| get: function () { |
| return this._pageLinkCount; |
| }, |
| /** |
| * pageLinkCount?: number |
| * Amount of page navigation links for the paging bar. Defaults to '0' |
| * @param {?} pageLinkCount |
| * @return {?} |
| */ |
| set: function (pageLinkCount) { |
| this._pageLinkCount = coerceNumberProperty(pageLinkCount); |
| this._calculatePageLinks(); |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "pageSize", { |
| /** |
| * @return {?} |
| */ |
| get: function () { |
| return this._pageSize; |
| }, |
| /** |
| * pageSize?: number |
| * Selected page size for the pagination. Defaults 50. |
| * @param {?} pageSize |
| * @return {?} |
| */ |
| set: function (pageSize) { |
| this._pageSize = coerceNumberProperty(pageSize); |
| this._page = 1; |
| if (this._initialized) { |
| this._handleOnChange(); |
| } |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "total", { |
| /** |
| * @return {?} |
| */ |
| get: function () { |
| return this._total; |
| }, |
| /** |
| * total: number |
| * Total rows for the pagination. |
| * @param {?} total |
| * @return {?} |
| */ |
| set: function (total) { |
| this._total = coerceNumberProperty(total); |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "pageLinks", { |
| /** |
| * pageLinks: number[] |
| * Returns the pageLinks in an array |
| * @return {?} |
| */ |
| get: function () { |
| return this._pageLinks; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "range", { |
| /** |
| * range: string |
| * Returns the range of the rows. |
| * @return {?} |
| */ |
| get: function () { |
| return (!this._toRow ? 0 : this._fromRow) + "-" + this._toRow; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "page", { |
| /** |
| * page: number |
| * Returns the current page. |
| * @return {?} |
| */ |
| get: function () { |
| return this._page; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "maxPage", { |
| /** |
| * page: number |
| * Returns the max page for the current pageSize and total. |
| * @return {?} |
| */ |
| get: function () { |
| return Math.ceil(this._total / this._pageSize); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(TdPagingBarComponent.prototype, "isRTL", { |
| /** |
| * @return {?} |
| */ |
| get: function () { |
| if (this._dir) { |
| return this._dir.dir === 'rtl'; |
| } |
| return false; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.ngOnInit = function () { |
| this._page = coerceNumberProperty(this.initialPage); |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| this._initialized = true; |
| this._changeDetectorRef.markForCheck(); |
| }; |
| /** |
| * navigateToPage?: function |
| * Navigates to a specific valid page. Returns 'true' if page is valid, else 'false'. |
| * @param {?} page |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.navigateToPage = function (page) { |
| if (page === 1 || (page >= 1 && page <= this.maxPage)) { |
| this._page = coerceNumberProperty(Math.floor(page)); |
| this._handleOnChange(); |
| return true; |
| } |
| return false; |
| }; |
| /** |
| * firstPage?: function |
| * Navigates to the first page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.firstPage = function () { |
| return this.navigateToPage(1); |
| }; |
| /** |
| * prevPage?: function |
| * Navigates to the previous page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.prevPage = function () { |
| return this.navigateToPage(this._page - 1); |
| }; |
| /** |
| * nextPage?: function |
| * Navigates to the next page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.nextPage = function () { |
| return this.navigateToPage(this._page + 1); |
| }; |
| /** |
| * lastPage?: function |
| * Navigates to the last page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.lastPage = function () { |
| return this.navigateToPage(this.maxPage); |
| }; |
| /** |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.isMinPage = function () { |
| return this._page <= 1; |
| }; |
| /** |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype.isMaxPage = function () { |
| return this._page >= this.maxPage; |
| }; |
| /** |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype._calculateRows = function () { |
| var /** @type {?} */ top = (this._pageSize * this._page); |
| this._fromRow = (this._pageSize * (this._page - 1)) + 1; |
| this._toRow = this._total > top ? top : this._total; |
| }; |
| /** |
| * _calculatePageLinks?: function |
| * Calculates the page links that should be shown to the user based on the current state of the paginator |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype._calculatePageLinks = function () { |
| // special case when 2 pageLinks, detect when hit end of pages so can lead in correct direction |
| if (this.isMaxPage()) { |
| this._hitEnd = true; |
| this._hitStart = false; |
| } |
| // special case when 2 pageLinks, detect when hit start of pages so can lead in correct direction |
| if (this.isMinPage()) { |
| this._hitEnd = false; |
| this._hitStart = true; |
| } |
| // If the pageLinkCount goes above max possible pages based on perpage setting then reset it to maxPage |
| var /** @type {?} */ actualPageLinkCount = this.pageLinkCount; |
| if (this.pageLinkCount > this.maxPage) { |
| actualPageLinkCount = this.maxPage; |
| } |
| // reset the pageLinks array |
| this._pageLinks = []; |
| // fill in the array with the pageLinks based on the current selected page |
| var /** @type {?} */ middlePageLinks = Math.floor(actualPageLinkCount / 2); |
| for (var /** @type {?} */ x = 0; x < actualPageLinkCount; x++) { |
| // don't go past the maxPage in the pageLinks |
| // have to handle even and odd pageLinkCounts differently so can still lead to the next numbers |
| if ((actualPageLinkCount % 2 === 0 && (this.page + middlePageLinks > this.maxPage)) || |
| (actualPageLinkCount % 2 !== 0 && (this.page + middlePageLinks >= this.maxPage))) { |
| this._pageLinks[x] = this.maxPage - (actualPageLinkCount - (x + 1)); |
| // if the selected page is after the middle then set that page as middle and get the correct balance on left and right |
| // special handling when there are only 2 pageLinks to just drop to next if block so can lead to next numbers when moving to right |
| // when moving to the left then go into this block |
| } |
| else if ((actualPageLinkCount > 2 || actualPageLinkCount <= 2 && this._hitEnd) && (this.page - middlePageLinks) > 0) { |
| this._pageLinks[x] = (this.page - middlePageLinks) + x; |
| // if the selected page is before the middle then set the pages based on the x index leading up to and after selected page |
| } |
| else if ((this.page - middlePageLinks) <= 0) { |
| this._pageLinks[x] = x + 1; |
| // other wise just set the array in order starting from the selected page |
| } |
| else { |
| this._pageLinks[x] = this.page + x; |
| } |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| TdPagingBarComponent.prototype._handleOnChange = function () { |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| var /** @type {?} */ event = { |
| page: this._page, |
| maxPage: this.maxPage, |
| pageSize: this._pageSize, |
| total: this._total, |
| fromRow: this._fromRow, |
| toRow: this._toRow, |
| }; |
| this._changeDetectorRef.markForCheck(); |
| this.onChange.emit(event); |
| }; |
| return TdPagingBarComponent; |
| }()); |
| TdPagingBarComponent.decorators = [ |
| { type: Component, args: [{ |
| changeDetection: ChangeDetectionStrategy.OnPush, |
| selector: 'td-paging-bar', |
| template: "<div class=\"td-paging-bar\" (change)=\"$event.stopPropagation()\" >\n <ng-content></ng-content>\n <div class=\"td-paging-bar-navigation\">\n <button mat-icon-button class=\"td-paging-bar-first-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMinPage()\" (click)=\"firstPage()\">\n <mat-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</mat-icon>\n </button>\n <button mat-icon-button class=\"td-paging-bar-prev-page\" type=\"button\" [disabled]=\"isMinPage()\" (click)=\"prevPage()\">\n <mat-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</mat-icon>\n </button>\n <ng-template *ngIf=\"pageLinkCount > 0\" let-link let-index=\"index\" ngFor [ngForOf]=\"pageLinks\">\n <button class=\"td-paging-bar-link-page\" mat-icon-button type=\"button\" [color]=\"page === link ? 'accent' : ''\" (click)=\"navigateToPage(link)\">{{link}}</button>\n </ng-template>\n <button mat-icon-button class=\"td-paging-bar-next-page\" type=\"button\" [disabled]=\"isMaxPage()\" (click)=\"nextPage()\">\n <mat-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</mat-icon>\n </button>\n <button mat-icon-button class=\"td-paging-bar-last-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMaxPage()\" (click)=\"lastPage()\">\n <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon>\n </button>\n </div>\n</div>", |
| styles: [":host{\n display:block; }\n :host .td-paging-bar{\n height:48px;\n -webkit-box-sizing:border-box;\n box-sizing:border-box;\n display:-webkit-box;\n display:-ms-flexbox;\n display:flex;\n -webkit-box-orient:horizontal;\n -webkit-box-direction:normal;\n -ms-flex-direction:row;\n flex-direction:row;\n -webkit-box-align:center;\n -ms-flex-align:center;\n align-items:center;\n -ms-flex-line-pack:center;\n align-content:center;\n max-width:100%;\n -webkit-box-pack:end;\n -ms-flex-pack:end;\n justify-content:flex-end; }\n :host .td-paging-bar ::ng-deep > *{\n margin:0 10px; }\n :host .td-paging-bar [mat-icon-button]{\n font-size:12px;\n font-weight:normal; }\n"], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| TdPagingBarComponent.ctorParameters = function () { return [ |
| { type: Dir, decorators: [{ type: Optional },] }, |
| { type: ChangeDetectorRef, }, |
| ]; }; |
| TdPagingBarComponent.propDecorators = { |
| "firstLast": [{ type: Input, args: ['firstLast',] },], |
| "initialPage": [{ type: Input, args: ['initialPage',] },], |
| "pageLinkCount": [{ type: Input, args: ['pageLinkCount',] },], |
| "pageSize": [{ type: Input, args: ['pageSize',] },], |
| "total": [{ type: Input, args: ['total',] },], |
| "onChange": [{ type: Output, args: ['change',] },], |
| }; |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var CovalentPagingModule = /** @class */ (function () { |
| function CovalentPagingModule() { |
| } |
| return CovalentPagingModule; |
| }()); |
| CovalentPagingModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| CommonModule, |
| MatIconModule, |
| MatButtonModule, |
| ], |
| declarations: [ |
| TdPagingBarComponent, |
| ], |
| exports: [ |
| TdPagingBarComponent, |
| ], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| CovalentPagingModule.ctorParameters = function () { return []; }; |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * Generated bundle index. Do not edit. |
| */ |
| export { CovalentPagingModule, TdPagingBarComponent }; |
| //# sourceMappingURL=covalent-core-paging.js.map |
