| 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 |
| */ |
| |
| 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; |
| 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(); |
| } |
| /** |
| * 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() { |
| let /** @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 {?} |
| */ |
| _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 |
| let /** @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 |
| let /** @type {?} */ middlePageLinks = Math.floor(actualPageLinkCount / 2); |
| for (let /** @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 {?} |
| */ |
| _handleOnChange() { |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| let /** @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); |
| } |
| } |
| TdPagingBarComponent.decorators = [ |
| { type: Component, args: [{ |
| changeDetection: ChangeDetectionStrategy.OnPush, |
| selector: 'td-paging-bar', |
| template: `<div class="td-paging-bar" (change)="$event.stopPropagation()" > |
| <ng-content></ng-content> |
| <div class="td-paging-bar-navigation"> |
| <button mat-icon-button class="td-paging-bar-first-page" type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()"> |
| <mat-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</mat-icon> |
| </button> |
| <button mat-icon-button class="td-paging-bar-prev-page" type="button" [disabled]="isMinPage()" (click)="prevPage()"> |
| <mat-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</mat-icon> |
| </button> |
| <ng-template *ngIf="pageLinkCount > 0" let-link let-index="index" ngFor [ngForOf]="pageLinks"> |
| <button class="td-paging-bar-link-page" mat-icon-button type="button" [color]="page === link ? 'accent' : ''" (click)="navigateToPage(link)">{{link}}</button> |
| </ng-template> |
| <button mat-icon-button class="td-paging-bar-next-page" type="button" [disabled]="isMaxPage()" (click)="nextPage()"> |
| <mat-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</mat-icon> |
| </button> |
| <button mat-icon-button class="td-paging-bar-last-page" type="button" *ngIf="firstLast" [disabled]="isMaxPage()" (click)="lastPage()"> |
| <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon> |
| </button> |
| </div> |
| </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:normal; } |
| `], |
| },] }, |
| ]; |
| /** @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} checked by tsc |
| */ |
| class CovalentPagingModule { |
| } |
| CovalentPagingModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| CommonModule, |
| MatIconModule, |
| MatButtonModule, |
| ], |
| declarations: [ |
| TdPagingBarComponent, |
| ], |
| exports: [ |
| TdPagingBarComponent, |
| ], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| CovalentPagingModule.ctorParameters = () => []; |
| |
| /** |
| * @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 |
