ngx-easy-table
Version:
Angular easy table
122 lines • 13.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, ViewChild, } from '@angular/core';
import { PaginationControlsDirective } from 'ngx-pagination';
/**
* @record
*/
export function PaginationRange() { }
if (false) {
/** @type {?} */
PaginationRange.prototype.page;
/** @type {?} */
PaginationRange.prototype.limit;
}
export class PaginationComponent {
constructor() {
this.updateRange = new EventEmitter();
this.ranges = [5, 10, 25, 50, 100];
this.showRange = false;
this.screenReaderPaginationLabel = 'Pagination';
this.screenReaderPageLabel = 'page';
this.screenReaderCurrentLabel = 'You are on page';
this.previousLabel = '';
this.nextLabel = '';
this.directionLinks = true;
}
/**
* @param {?} targetElement
* @return {?}
*/
onClick(targetElement) {
if (this.paginationRange && !this.paginationRange.nativeElement.contains(targetElement)) {
this.showRange = false;
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
const { config } = changes;
if (config && config.currentValue) {
this.selectedLimit = this.config.rows;
}
}
/**
* @param {?} page
* @return {?}
*/
onPageChange(page) {
this.updateRange.emit({
page,
limit: this.selectedLimit,
});
}
/**
* @param {?} limit
* @param {?} callFromAPI
* @return {?}
*/
changeLimit(limit, callFromAPI) {
if (!callFromAPI) {
this.showRange = !this.showRange;
}
this.selectedLimit = limit;
this.updateRange.emit({
page: 1,
limit,
});
}
}
PaginationComponent.decorators = [
{ type: Component, args: [{
selector: 'pagination',
template: "<div class=\"ngx-pagination-wrapper\"\n [style.display]=\"config.paginationEnabled ? '' : 'none'\"\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\">\n <div class=\"ngx-pagination-steps\">\n <pagination-template\n #paginationDirective=\"paginationApi\"\n id=\"pagination-controls\"\n [id]=\"id\"\n [class.ngx-table__table--dark-pagination]=\"config.tableLayout.theme === 'dark'\"\n [maxSize]=\"config.paginationMaxSize || 5\"\n (pageChange)=\"onPageChange($event)\">\n <ul class=\"ngx-pagination\"\n role=\"navigation\"\n [attr.aria-label]=\"screenReaderPaginationLabel\"\n [class.responsive]=\"true\">\n <li class=\"pagination-previous\" [class.disabled]=\"paginationDirective.isFirstPage()\" *ngIf=\"directionLinks\">\n <a tabindex=\"0\" *ngIf=\"1 < paginationDirective.getCurrent()\" (keyup.enter)=\"paginationDirective.previous()\"\n (click)=\"paginationDirective.previous()\"\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"paginationDirective.isFirstPage()\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n <li class=\"small-screen\">\n {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\n </li>\n <li [class.current]=\"paginationDirective.getCurrent() === page.value\"\n [class.ellipsis]=\"page.label === '...'\"\n *ngFor=\"let page of paginationDirective.pages\">\n <a tabindex=\"0\" (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\n (click)=\"paginationDirective.setCurrent(page.value)\"\n *ngIf=\"paginationDirective.getCurrent() !== page.value\">\n <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n <span>{{ page.label }}</span>\n </a>\n <ng-container *ngIf=\"paginationDirective.getCurrent() === page.value\">\n <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n <span>{{ page.label }}</span>\n </ng-container>\n </li>\n <li class=\"pagination-next\" [class.disabled]=\"paginationDirective.isLastPage()\" *ngIf=\"directionLinks\">\n <a tabindex=\"0\" *ngIf=\"!paginationDirective.isLastPage()\" (keyup.enter)=\"paginationDirective.next()\"\n (click)=\"paginationDirective.next()\"\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"paginationDirective.isLastPage()\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n </ul>\n </pagination-template>\n </div>\n <div class=\"ngx-pagination-range\"\n #paginationRange\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\n *ngIf=\"config.paginationRangeEnabled\">\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\"\n id=\"rowAmount\">\n <div class=\"ngx-btn-group\">\n <div class=\"ngx-pagination-range-dropdown-button\"\n (click)=\"showRange = !showRange\">\n {{selectedLimit}} <i class=\"ngx-icon ngx-icon-arrow-down\"></i>\n </div>\n <ul class=\"ngx-menu\" *ngIf=\"showRange\">\n <li class=\"ngx-pagination-range-dropdown-button-item\"\n [class.ngx-pagination-range--selected]=\"limit === selectedLimit\"\n (click)=\"changeLimit(limit, false)\"\n *ngFor=\"let limit of ranges\">\n <span>{{limit}}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
PaginationComponent.propDecorators = {
paginationDirective: [{ type: ViewChild, args: ['paginationDirective', { static: true },] }],
paginationRange: [{ type: ViewChild, args: ['paginationRange', { static: false },] }],
pagination: [{ type: Input }],
config: [{ type: Input }],
id: [{ type: Input }],
updateRange: [{ type: Output }],
onClick: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
};
if (false) {
/** @type {?} */
PaginationComponent.prototype.paginationDirective;
/** @type {?} */
PaginationComponent.prototype.paginationRange;
/** @type {?} */
PaginationComponent.prototype.pagination;
/** @type {?} */
PaginationComponent.prototype.config;
/** @type {?} */
PaginationComponent.prototype.id;
/** @type {?} */
PaginationComponent.prototype.updateRange;
/** @type {?} */
PaginationComponent.prototype.ranges;
/** @type {?} */
PaginationComponent.prototype.selectedLimit;
/** @type {?} */
PaginationComponent.prototype.showRange;
/** @type {?} */
PaginationComponent.prototype.screenReaderPaginationLabel;
/** @type {?} */
PaginationComponent.prototype.screenReaderPageLabel;
/** @type {?} */
PaginationComponent.prototype.screenReaderCurrentLabel;
/** @type {?} */
PaginationComponent.prototype.previousLabel;
/** @type {?} */
PaginationComponent.prototype.nextLabel;
/** @type {?} */
PaginationComponent.prototype.directionLinks;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZWFzeS10YWJsZS8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL3BhZ2luYXRpb24vcGFnaW5hdGlvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFFTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFFN0QscUNBR0M7OztJQUZDLCtCQUFhOztJQUNiLGdDQUFjOztBQVFoQixNQUFNLE9BQU8sbUJBQW1CO0lBTGhDO1FBV3FCLGdCQUFXLEdBQWtDLElBQUksWUFBWSxFQUFFLENBQUM7UUFDNUUsV0FBTSxHQUFhLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBRXhDLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsZ0NBQTJCLEdBQUcsWUFBWSxDQUFDO1FBQzNDLDBCQUFxQixHQUFHLE1BQU0sQ0FBQztRQUMvQiw2QkFBd0IsR0FBRyxpQkFBaUIsQ0FBQztRQUM3QyxrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2YsbUJBQWMsR0FBRyxJQUFJLENBQUM7SUFpQy9CLENBQUM7Ozs7O0lBOUJRLE9BQU8sQ0FBQyxhQUFrQjtRQUMvQixJQUFJLElBQUksQ0FBQyxlQUFlLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLEVBQUU7WUFDdkYsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7U0FDeEI7SUFDSCxDQUFDOzs7OztJQUVELFdBQVcsQ0FBQyxPQUFzQjtjQUMxQixFQUFFLE1BQU0sRUFBRSxHQUFHLE9BQU87UUFDMUIsSUFBSSxNQUFNLElBQUksTUFBTSxDQUFDLFlBQVksRUFBRTtZQUNqQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDO1NBQ3ZDO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxZQUFZLENBQUMsSUFBWTtRQUN2QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztZQUNwQixJQUFJO1lBQ0osS0FBSyxFQUFFLElBQUksQ0FBQyxhQUFhO1NBQzFCLENBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVELFdBQVcsQ0FBQyxLQUFhLEVBQUUsV0FBb0I7UUFDN0MsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztTQUNsQztRQUNELElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDO1lBQ3BCLElBQUksRUFBRSxDQUFDO1lBQ1AsS0FBSztTQUNOLENBQUMsQ0FBQztJQUNMLENBQUM7OztZQXBERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLCs5SEFBZ0M7Z0JBQ2hDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2FBQ2hEOzs7a0NBRUUsU0FBUyxTQUFDLHFCQUFxQixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTs4QkFDakQsU0FBUyxTQUFDLGlCQUFpQixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTt5QkFDOUMsS0FBSztxQkFDTCxLQUFLO2lCQUNMLEtBQUs7MEJBQ0wsTUFBTTtzQkFXTixZQUFZLFNBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxlQUFlLENBQUM7Ozs7SUFoQmpELGtEQUFxRzs7SUFDckcsOENBQWlFOztJQUNqRSx5Q0FBb0I7O0lBQ3BCLHFDQUF3Qjs7SUFDeEIsaUNBQVk7O0lBQ1osMENBQW1GOztJQUNuRixxQ0FBK0M7O0lBQy9DLDRDQUE2Qjs7SUFDN0Isd0NBQXlCOztJQUN6QiwwREFBa0Q7O0lBQ2xELG9EQUFzQzs7SUFDdEMsdURBQW9EOztJQUNwRCw0Q0FBMEI7O0lBQzFCLHdDQUFzQjs7SUFDdEIsNkNBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbmZpZyB9IGZyb20gJy4uLy4uJztcbmltcG9ydCB7IFBhZ2luYXRpb25Db250cm9sc0RpcmVjdGl2ZSB9IGZyb20gJ25neC1wYWdpbmF0aW9uJztcblxuZXhwb3J0IGludGVyZmFjZSBQYWdpbmF0aW9uUmFuZ2Uge1xuICBwYWdlOiBudW1iZXI7XG4gIGxpbWl0OiBudW1iZXI7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3BhZ2luYXRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnaW5hdGlvbi5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2luYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBAVmlld0NoaWxkKCdwYWdpbmF0aW9uRGlyZWN0aXZlJywgeyBzdGF0aWM6IHRydWUgfSkgcGFnaW5hdGlvbkRpcmVjdGl2ZTogUGFnaW5hdGlvbkNvbnRyb2xzRGlyZWN0aXZlO1xuICBAVmlld0NoaWxkKCdwYWdpbmF0aW9uUmFuZ2UnLCB7IHN0YXRpYzogZmFsc2UgfSkgcGFnaW5hdGlvblJhbmdlO1xuICBASW5wdXQoKSBwYWdpbmF0aW9uO1xuICBASW5wdXQoKSBjb25maWc6IENvbmZpZztcbiAgQElucHV0KCkgaWQ7XG4gIEBPdXRwdXQoKSByZWFkb25seSB1cGRhdGVSYW5nZTogRXZlbnRFbWl0dGVyPFBhZ2luYXRpb25SYW5nZT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIHB1YmxpYyByYW5nZXM6IG51bWJlcltdID0gWzUsIDEwLCAyNSwgNTAsIDEwMF07XG4gIHB1YmxpYyBzZWxlY3RlZExpbWl0OiBudW1iZXI7XG4gIHB1YmxpYyBzaG93UmFuZ2UgPSBmYWxzZTtcbiAgcHVibGljIHNjcmVlblJlYWRlclBhZ2luYXRpb25MYWJlbCA9ICdQYWdpbmF0aW9uJztcbiAgcHVibGljIHNjcmVlblJlYWRlclBhZ2VMYWJlbCA9ICdwYWdlJztcbiAgcHVibGljIHNjcmVlblJlYWRlckN1cnJlbnRMYWJlbCA9ICdZb3UgYXJlIG9uIHBhZ2UnO1xuICBwdWJsaWMgcHJldmlvdXNMYWJlbCA9ICcnO1xuICBwdWJsaWMgbmV4dExhYmVsID0gJyc7XG4gIHB1YmxpYyBkaXJlY3Rpb25MaW5rcyA9IHRydWU7XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudC50YXJnZXQnXSlcbiAgcHVibGljIG9uQ2xpY2sodGFyZ2V0RWxlbWVudDogYW55KTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFnaW5hdGlvblJhbmdlICYmICF0aGlzLnBhZ2luYXRpb25SYW5nZS5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKHRhcmdldEVsZW1lbnQpKSB7XG4gICAgICB0aGlzLnNob3dSYW5nZSA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBjb25zdCB7IGNvbmZpZyB9ID0gY2hhbmdlcztcbiAgICBpZiAoY29uZmlnICYmIGNvbmZpZy5jdXJyZW50VmFsdWUpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRMaW1pdCA9IHRoaXMuY29uZmlnLnJvd3M7XG4gICAgfVxuICB9XG5cbiAgb25QYWdlQ2hhbmdlKHBhZ2U6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMudXBkYXRlUmFuZ2UuZW1pdCh7XG4gICAgICBwYWdlLFxuICAgICAgbGltaXQ6IHRoaXMuc2VsZWN0ZWRMaW1pdCxcbiAgICB9KTtcbiAgfVxuXG4gIGNoYW5nZUxpbWl0KGxpbWl0OiBudW1iZXIsIGNhbGxGcm9tQVBJOiBib29sZWFuKTogdm9pZCB7XG4gICAgaWYgKCFjYWxsRnJvbUFQSSkge1xuICAgICAgdGhpcy5zaG93UmFuZ2UgPSAhdGhpcy5zaG93UmFuZ2U7XG4gICAgfVxuICAgIHRoaXMuc2VsZWN0ZWRMaW1pdCA9IGxpbWl0O1xuICAgIHRoaXMudXBkYXRlUmFuZ2UuZW1pdCh7XG4gICAgICBwYWdlOiAxLFxuICAgICAgbGltaXQsXG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==