| import { CommonModule } from '@angular/common'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { MatButtonModule } from '@angular/material/button'; |
| import { Component, Input, Output, EventEmitter, Optional, ChangeDetectorRef, ChangeDetectionStrategy, NgModule } from '@angular/core'; |
| import { coerceNumberProperty } from '@angular/cdk/coercion'; |
| import { Dir } from '@angular/cdk/bidi'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class TdPagingBarComponent { |
| /** |
| * @param {?} _dir |
| * @param {?} _changeDetectorRef |
| */ |
| constructor(_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; |
| // special case when 2 pageLinks, detect when hit end of pages so can lead in correct direction |
| this._hitEnd = false; |
| // special case when 2 pageLinks, detect when hit start of pages so can lead in correct direction |
| 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(); |
| } |
| /** |
| * pageLinkCount?: number |
| * Amount of page navigation links for the paging bar. Defaults to '0' |
| * @param {?} pageLinkCount |
| * @return {?} |
| */ |
| set pageLinkCount(pageLinkCount) { |
| this._pageLinkCount = coerceNumberProperty(pageLinkCount); |
| this._calculatePageLinks(); |
| this._changeDetectorRef.markForCheck(); |
| } |
| /** |
| * @return {?} |
| */ |
| get pageLinkCount() { |
| return this._pageLinkCount; |
| } |
| /** |
| * pageSize?: number |
| * Selected page size for the pagination. Defaults 50. |
| * @param {?} pageSize |
| * @return {?} |
| */ |
| set pageSize(pageSize) { |
| this._pageSize = coerceNumberProperty(pageSize); |
| this._page = 1; |
| if (this._initialized) { |
| this._handleOnChange(); |
| } |
| this._changeDetectorRef.markForCheck(); |
| } |
| /** |
| * @return {?} |
| */ |
| get pageSize() { |
| return this._pageSize; |
| } |
| /** |
| * total: number |
| * Total rows for the pagination. |
| * @param {?} total |
| * @return {?} |
| */ |
| set total(total) { |
| this._total = coerceNumberProperty(total); |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| this._changeDetectorRef.markForCheck(); |
| } |
| /** |
| * @return {?} |
| */ |
| get total() { |
| return this._total; |
| } |
| /** |
| * pageLinks: number[] |
| * Returns the pageLinks in an array |
| * @return {?} |
| */ |
| get pageLinks() { |
| return this._pageLinks; |
| } |
| /** |
| * range: string |
| * Returns the range of the rows. |
| * @return {?} |
| */ |
| get range() { |
| return `${!this._toRow ? 0 : this._fromRow}-${this._toRow}`; |
| } |
| /** |
| * page: number |
| * Returns the current page. |
| * @return {?} |
| */ |
| get page() { |
| return this._page; |
| } |
| /** |
| * page: number |
| * Returns the max page for the current pageSize and total. |
| * @return {?} |
| */ |
| get maxPage() { |
| return Math.ceil(this._total / this._pageSize); |
| } |
| /** |
| * @return {?} |
| */ |
| get isRTL() { |
| if (this._dir) { |
| return this._dir.dir === 'rtl'; |
| } |
| return false; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnInit() { |
| 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 {?} |
| */ |
| navigateToPage(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 {?} |
| */ |
| firstPage() { |
| return this.navigateToPage(1); |
| } |
| /** |
| * prevPage?: function |
| * Navigates to the previous page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| prevPage() { |
| return this.navigateToPage(this._page - 1); |
| } |
| /** |
| * nextPage?: function |
| * Navigates to the next page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| nextPage() { |
| return this.navigateToPage(this._page + 1); |
| } |
| /** |
| * lastPage?: function |
| * Navigates to the last page. Returns 'true' if page is valid, else 'false'. |
| * @return {?} |
| */ |
| lastPage() { |
| return this.navigateToPage(this.maxPage); |
| } |
| /** |
| * @return {?} |
| */ |
| isMinPage() { |
| return this._page <= 1; |
| } |
| /** |
| * @return {?} |
| */ |
| isMaxPage() { |
| return this._page >= this.maxPage; |
| } |
| /** |
| * @return {?} |
| */ |
| _calculateRows() { |
| /** @type {?} */ |
| let 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 {?} |
| */ |
| _calculatePageLinks() { |
| // 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 |
| /** @type {?} */ |
| let 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 |
| /** @type {?} */ |
| let middlePageLinks = Math.floor(actualPageLinkCount / 2); |
| for (let 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 {?} |
| */ |
| _handleOnChange() { |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| /** @type {?} */ |
| let 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); |
| } |
| } |
| 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{display:block}:host .td-paging-bar{height:48px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-paging-bar ::ng-deep>*{margin:0 10px}:host .td-paging-bar [mat-icon-button]{font-size:12px;font-weight:400}"] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdPagingBarComponent.ctorParameters = () => [ |
| { 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,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class CovalentPagingModule { |
| } |
| CovalentPagingModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| CommonModule, |
| MatIconModule, |
| MatButtonModule, |
| ], |
| declarations: [ |
| TdPagingBarComponent, |
| ], |
| exports: [ |
| TdPagingBarComponent, |
| ], |
| },] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentPagingModule, TdPagingBarComponent }; |
| |
| //# sourceMappingURL=covalent-core-paging.js.map |