@paddls/ngx-easy-table
Version:
Angular easy table
78 lines • 14.7 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from './template';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./pagination-controls.directive";
function coerceToBoolean(input) {
return !!input && input !== 'false';
}
/**
* The default pagination controls component. Actually just a default implementation of a custom template.
*/
export class PaginationControlsComponent {
constructor() {
this.maxSize = 7;
this.previousLabel = 'Previous';
this.nextLabel = 'Next';
this.screenReaderPaginationLabel = 'Pagination';
this.screenReaderPageLabel = 'page';
this.screenReaderCurrentLabel = `You're on page`;
this.pageChange = new EventEmitter();
this.pageBoundsCorrection = new EventEmitter();
this._directionLinks = true;
this._autoHide = false;
this._responsive = false;
}
get directionLinks() {
return this._directionLinks;
}
set directionLinks(value) {
this._directionLinks = coerceToBoolean(value);
}
get autoHide() {
return this._autoHide;
}
set autoHide(value) {
this._autoHide = coerceToBoolean(value);
}
get responsive() {
return this._responsive;
}
set responsive(value) {
this._responsive = coerceToBoolean(value);
}
trackByIndex(index) {
return index;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationControlsComponent, selector: "pagination-controls", inputs: { id: "id", maxSize: "maxSize", directionLinks: "directionLinks", autoHide: "autoHide", responsive: "responsive", previousLabel: "previousLabel", nextLabel: "nextLabel", screenReaderPaginationLabel: "screenReaderPaginationLabel", screenReaderPageLabel: "screenReaderPageLabel", screenReaderCurrentLabel: "screenReaderCurrentLabel" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection" }, ngImport: i0, template: "\n <pagination-template #p=\"paginationApi\"\n [id]=\"id\"\n [maxSize]=\"maxSize\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n <nav role=\"navigation\" [attr.aria-label]=\"screenReaderPaginationLabel\">\n <ul class=\"ngx-pagination\" \n [class.responsive]=\"responsive\"\n *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n <a tabindex=\"0\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\" (click)=\"p.previous()\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"p.isFirstPage()\" aria-disabled=\"true\">\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li> \n\n <li class=\"small-screen\">\n {{ p.getCurrent() }} / {{ p.getLastPage() }}\n </li>\n\n <li [class.current]=\"p.getCurrent() === page.value\" \n [class.ellipsis]=\"page.label === '...'\"\n *ngFor=\"let page of p.pages; trackBy: trackByIndex\">\n <a tabindex=\"0\" (keyup.enter)=\"p.setCurrent(page.value)\" (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n </a>\n <ng-container *ngIf=\"p.getCurrent() === page.value\">\n <span aria-live=\"polite\">\n <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span> \n </span>\n </ng-container>\n </li>\n\n <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n <a tabindex=\"0\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\" (click)=\"p.next()\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </a>\n <span *ngIf=\"p.isLastPage()\" aria-disabled=\"true\">\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n </span>\n </li>\n\n </ul>\n </nav>\n </pagination-template>\n ", isInline: true, styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem}.ngx-pagination:before,.ngx-pagination:after{content:\" \";display:table}.ngx-pagination:after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination li{display:inline-block}.ngx-pagination a,.ngx-pagination button{color:#0a0a0a;display:block;padding:.1875rem .625rem;border-radius:0}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#2199e8;color:#fefefe;cursor:default}.ngx-pagination .disabled{padding:.1875rem .625rem;color:#cacaca;cursor:default}.ngx-pagination .disabled:hover{background:transparent}.ngx-pagination a,.ngx-pagination button{cursor:pointer}.ngx-pagination .pagination-previous a:before,.ngx-pagination .pagination-previous.disabled:before{content:\"\\ab\";display:inline-block;margin-right:.5rem}.ngx-pagination .pagination-next a:after,.ngx-pagination .pagination-next.disabled:after{content:\"\\bb\";display:inline-block;margin-left:.5rem}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationControlsComponent, decorators: [{
type: Component,
args: [{ selector: 'pagination-controls', template: DEFAULT_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem}.ngx-pagination:before,.ngx-pagination:after{content:\" \";display:table}.ngx-pagination:after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination li{display:inline-block}.ngx-pagination a,.ngx-pagination button{color:#0a0a0a;display:block;padding:.1875rem .625rem;border-radius:0}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#2199e8;color:#fefefe;cursor:default}.ngx-pagination .disabled{padding:.1875rem .625rem;color:#cacaca;cursor:default}.ngx-pagination .disabled:hover{background:transparent}.ngx-pagination a,.ngx-pagination button{cursor:pointer}.ngx-pagination .pagination-previous a:before,.ngx-pagination .pagination-previous.disabled:before{content:\"\\ab\";display:inline-block;margin-right:.5rem}.ngx-pagination .pagination-next a:after,.ngx-pagination .pagination-next.disabled:after{content:\"\\bb\";display:inline-block;margin-left:.5rem}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}\n"] }]
}], propDecorators: { id: [{
type: Input
}], maxSize: [{
type: Input
}], directionLinks: [{
type: Input
}], autoHide: [{
type: Input
}], responsive: [{
type: Input
}], previousLabel: [{
type: Input
}], nextLabel: [{
type: Input
}], screenReaderPaginationLabel: [{
type: Input
}], screenReaderPageLabel: [{
type: Input
}], screenReaderCurrentLabel: [{
type: Input
}], pageChange: [{
type: Output
}], pageBoundsCorrection: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi1jb250cm9scy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZWFzeS10YWJsZS9zcmMvbGliL2ZlYXR1cmVzL3BhZ2luYXRpb24vcGFnaW5hdGlvbi1jb250cm9scy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQTtBQUNoSCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUUsY0FBYyxFQUFDLE1BQU0sWUFBWSxDQUFDOzs7O0FBRTVELFNBQVMsZUFBZSxDQUFDLEtBQXVCO0lBQzVDLE9BQU8sQ0FBQyxDQUFDLEtBQUssSUFBSSxLQUFLLEtBQUssT0FBTyxDQUFDO0FBQ3hDLENBQUM7QUFFRDs7R0FFRztBQVFILE1BQU0sT0FBTywyQkFBMkI7SUFQeEM7UUFVYSxZQUFPLEdBQVcsQ0FBQyxDQUFDO1FBc0JwQixrQkFBYSxHQUFXLFVBQVUsQ0FBQztRQUNuQyxjQUFTLEdBQVcsTUFBTSxDQUFDO1FBQzNCLGdDQUEyQixHQUFXLFlBQVksQ0FBQztRQUNuRCwwQkFBcUIsR0FBVyxNQUFNLENBQUM7UUFDdkMsNkJBQXdCLEdBQVcsZ0JBQWdCLENBQUM7UUFDbkQsZUFBVSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBQzlELHlCQUFvQixHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBRTFFLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0IsZ0JBQVcsR0FBWSxLQUFLLENBQUM7S0FLeEM7SUFwQ0csSUFDSSxjQUFjO1FBQ2QsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDO0lBQ2hDLENBQUM7SUFDRCxJQUFJLGNBQWMsQ0FBQyxLQUFjO1FBQzdCLElBQUksQ0FBQyxlQUFlLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFDRCxJQUNJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDMUIsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxlQUFlLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUNELElBQ0ksVUFBVTtRQUNWLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUM1QixDQUFDO0lBQ0QsSUFBSSxVQUFVLENBQUMsS0FBYztRQUN6QixJQUFJLENBQUMsV0FBVyxHQUFHLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBYUQsWUFBWSxDQUFDLEtBQWE7UUFDdEIsT0FBTyxLQUFLLENBQUM7SUFDakIsQ0FBQzs4R0F2Q1EsMkJBQTJCO2tHQUEzQiwyQkFBMkI7OzJGQUEzQiwyQkFBMkI7a0JBUHZDLFNBQVM7K0JBQ0kscUJBQXFCLFlBQ3JCLGdCQUFnQixtQkFFVCx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJOzhCQUk1QixFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUVGLGNBQWM7c0JBRGpCLEtBQUs7Z0JBUUYsUUFBUTtzQkFEWCxLQUFLO2dCQVFGLFVBQVU7c0JBRGIsS0FBSztnQkFPRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csMkJBQTJCO3NCQUFuQyxLQUFLO2dCQUNHLHFCQUFxQjtzQkFBN0IsS0FBSztnQkFDRyx3QkFBd0I7c0JBQWhDLEtBQUs7Z0JBQ0ksVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxvQkFBb0I7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQge0RFRkFVTFRfVEVNUExBVEUsIERFRkFVTFRfU1RZTEVTfSBmcm9tICcuL3RlbXBsYXRlJztcblxuZnVuY3Rpb24gY29lcmNlVG9Cb29sZWFuKGlucHV0OiBzdHJpbmcgfCBib29sZWFuKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhaW5wdXQgJiYgaW5wdXQgIT09ICdmYWxzZSc7XG59XG5cbi8qKlxuICogVGhlIGRlZmF1bHQgcGFnaW5hdGlvbiBjb250cm9scyBjb21wb25lbnQuIEFjdHVhbGx5IGp1c3QgYSBkZWZhdWx0IGltcGxlbWVudGF0aW9uIG9mIGEgY3VzdG9tIHRlbXBsYXRlLlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BhZ2luYXRpb24tY29udHJvbHMnLFxuICAgIHRlbXBsYXRlOiBERUZBVUxUX1RFTVBMQVRFLFxuICAgIHN0eWxlczogW0RFRkFVTFRfU1RZTEVTXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2luYXRpb25Db250cm9sc0NvbXBvbmVudCB7XG5cbiAgICBASW5wdXQoKSBpZDogc3RyaW5nO1xuICAgIEBJbnB1dCgpIG1heFNpemU6IG51bWJlciA9IDc7XG4gICAgQElucHV0KClcbiAgICBnZXQgZGlyZWN0aW9uTGlua3MoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9kaXJlY3Rpb25MaW5rcztcbiAgICB9XG4gICAgc2V0IGRpcmVjdGlvbkxpbmtzKHZhbHVlOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX2RpcmVjdGlvbkxpbmtzID0gY29lcmNlVG9Cb29sZWFuKHZhbHVlKTtcbiAgICB9XG4gICAgQElucHV0KClcbiAgICBnZXQgYXV0b0hpZGUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9hdXRvSGlkZTtcbiAgICB9XG4gICAgc2V0IGF1dG9IaWRlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX2F1dG9IaWRlID0gY29lcmNlVG9Cb29sZWFuKHZhbHVlKTtcbiAgICB9XG4gICAgQElucHV0KClcbiAgICBnZXQgcmVzcG9uc2l2ZSgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3Jlc3BvbnNpdmU7XG4gICAgfVxuICAgIHNldCByZXNwb25zaXZlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX3Jlc3BvbnNpdmUgPSBjb2VyY2VUb0Jvb2xlYW4odmFsdWUpO1xuICAgIH1cbiAgICBASW5wdXQoKSBwcmV2aW91c0xhYmVsOiBzdHJpbmcgPSAnUHJldmlvdXMnO1xuICAgIEBJbnB1dCgpIG5leHRMYWJlbDogc3RyaW5nID0gJ05leHQnO1xuICAgIEBJbnB1dCgpIHNjcmVlblJlYWRlclBhZ2luYXRpb25MYWJlbDogc3RyaW5nID0gJ1BhZ2luYXRpb24nO1xuICAgIEBJbnB1dCgpIHNjcmVlblJlYWRlclBhZ2VMYWJlbDogc3RyaW5nID0gJ3BhZ2UnO1xuICAgIEBJbnB1dCgpIHNjcmVlblJlYWRlckN1cnJlbnRMYWJlbDogc3RyaW5nID0gYFlvdSdyZSBvbiBwYWdlYDtcbiAgICBAT3V0cHV0KCkgcGFnZUNoYW5nZTogRXZlbnRFbWl0dGVyPG51bWJlcj4gPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcbiAgICBAT3V0cHV0KCkgcGFnZUJvdW5kc0NvcnJlY3Rpb246IEV2ZW50RW1pdHRlcjxudW1iZXI+ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBwcml2YXRlIF9kaXJlY3Rpb25MaW5rczogYm9vbGVhbiA9IHRydWU7XG4gICAgcHJpdmF0ZSBfYXV0b0hpZGU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBwcml2YXRlIF9yZXNwb25zaXZlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICB0cmFja0J5SW5kZXgoaW5kZXg6IG51bWJlcikge1xuICAgICAgICByZXR1cm4gaW5kZXg7XG4gICAgfVxufVxuIl19