| import { EventEmitter, Component, ChangeDetectionStrategy, Optional, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core'; |
| import { CommonModule } from '@angular/common'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { MatButtonModule } from '@angular/material/button'; |
| import { coerceNumberProperty } from '@angular/cdk/coercion'; |
| import { Dir } from '@angular/cdk/bidi'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: paging-bar.component.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * @record |
| */ |
| function IPageChangeEvent() { } |
| if (false) { |
| /** @type {?} */ |
| IPageChangeEvent.prototype.page; |
| /** @type {?} */ |
| IPageChangeEvent.prototype.maxPage; |
| /** @type {?} */ |
| IPageChangeEvent.prototype.pageSize; |
| /** @type {?} */ |
| IPageChangeEvent.prototype.total; |
| /** @type {?} */ |
| IPageChangeEvent.prototype.fromRow; |
| /** @type {?} */ |
| IPageChangeEvent.prototype.toRow; |
| } |
| 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.change = 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; |
| } |
| /** |
| * @private |
| * @return {?} |
| */ |
| _calculateRows() { |
| /** @type {?} */ |
| const 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 |
| * @private |
| * @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 {?} */ |
| const 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; |
| } |
| } |
| } |
| /** |
| * @private |
| * @return {?} |
| */ |
| _handleOnChange() { |
| this._calculateRows(); |
| this._calculatePageLinks(); |
| /** @type {?} */ |
| const event = { |
| page: this._page, |
| maxPage: this.maxPage, |
| pageSize: this._pageSize, |
| total: this._total, |
| fromRow: this._fromRow, |
| toRow: this._toRow, |
| }; |
| this._changeDetectorRef.markForCheck(); |
| this.change.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\n mat-icon-button\n class=\"td-paging-bar-first-page\"\n type=\"button\"\n *ngIf=\"firstLast\"\n [disabled]=\"isMinPage()\"\n (click)=\"firstPage()\"\n >\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\n class=\"td-paging-bar-link-page\"\n mat-icon-button\n type=\"button\"\n [color]=\"page === link ? 'accent' : undefined\"\n (click)=\"navigateToPage(link)\"\n >\n {{ link }}\n </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\n mat-icon-button\n class=\"td-paging-bar-last-page\"\n type=\"button\"\n *ngIf=\"firstLast\"\n [disabled]=\"isMaxPage()\"\n (click)=\"lastPage()\"\n >\n <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon>\n </button>\n </div>\n</div>\n", |
| styles: [":host{display:block}:host .td-paging-bar{-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-line-pack:center;-ms-flex-pack:end;align-content:center;align-items:center;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;height:48px;justify-content:flex-end;max-width:100%}: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 }], |
| initialPage: [{ type: Input }], |
| pageLinkCount: [{ type: Input, args: ['pageLinkCount',] }], |
| pageSize: [{ type: Input, args: ['pageSize',] }], |
| total: [{ type: Input, args: ['total',] }], |
| change: [{ type: Output }] |
| }; |
| if (false) { |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._pageSize; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._total; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._page; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._fromRow; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._toRow; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._initialized; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._pageLinks; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._pageLinkCount; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._hitEnd; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._hitStart; |
| /** |
| * firstLast?: boolean |
| * Shows or hides the first and last page buttons of the paging bar. Defaults to 'false' |
| * @type {?} |
| */ |
| TdPagingBarComponent.prototype.firstLast; |
| /** |
| * initialPage?: number |
| * Sets starting page for the paging bar. Defaults to '1' |
| * @type {?} |
| */ |
| TdPagingBarComponent.prototype.initialPage; |
| /** |
| * change?: function |
| * Method to be executed when page size changes or any button is clicked in the paging bar. |
| * Emits an [IPageChangeEvent] implemented object. |
| * @type {?} |
| */ |
| TdPagingBarComponent.prototype.change; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._dir; |
| /** |
| * @type {?} |
| * @private |
| */ |
| TdPagingBarComponent.prototype._changeDetectorRef; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: paging.module.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class CovalentPagingModule { |
| } |
| CovalentPagingModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [CommonModule, MatIconModule, MatButtonModule], |
| declarations: [TdPagingBarComponent], |
| exports: [TdPagingBarComponent], |
| },] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: public-api.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: index.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: covalent-core-paging.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentPagingModule, TdPagingBarComponent }; |
| //# sourceMappingURL=covalent-core-paging.js.map |
