| 1 | import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
|
| 2 | import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from './template';
|
| 3 | import * as i0 from "@angular/core";
|
| 4 | import * as i1 from "./pagination-controls.directive";
|
| 5 | import * as i2 from "@angular/common";
|
| 6 | function coerceToBoolean(input) {
|
| 7 | return !!input && input !== 'false';
|
| 8 | }
|
| 9 | |
| 10 | |
| 11 |
|
| 12 | export class PaginationControlsComponent {
|
| 13 | constructor() {
|
| 14 | this.maxSize = 7;
|
| 15 | this.previousLabel = 'Previous';
|
| 16 | this.nextLabel = 'Next';
|
| 17 | this.screenReaderPaginationLabel = 'Pagination';
|
| 18 | this.screenReaderPageLabel = 'page';
|
| 19 | this.screenReaderCurrentLabel = `You're on page`;
|
| 20 | this.pageChange = new EventEmitter();
|
| 21 | this.pageBoundsCorrection = new EventEmitter();
|
| 22 | this._directionLinks = true;
|
| 23 | this._autoHide = false;
|
| 24 | this._responsive = false;
|
| 25 | }
|
| 26 | get directionLinks() {
|
| 27 | return this._directionLinks;
|
| 28 | }
|
| 29 | set directionLinks(value) {
|
| 30 | this._directionLinks = coerceToBoolean(value);
|
| 31 | }
|
| 32 | get autoHide() {
|
| 33 | return this._autoHide;
|
| 34 | }
|
| 35 | set autoHide(value) {
|
| 36 | this._autoHide = coerceToBoolean(value);
|
| 37 | }
|
| 38 | get responsive() {
|
| 39 | return this._responsive;
|
| 40 | }
|
| 41 | set responsive(value) {
|
| 42 | this._responsive = coerceToBoolean(value);
|
| 43 | }
|
| 44 | trackByIndex(index) {
|
| 45 | return index;
|
| 46 | }
|
| 47 | }
|
| 48 | PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
| 49 | PaginationControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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"], directives: [{ type: i1.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
| 50 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsComponent, decorators: [{
|
| 51 | type: Component,
|
| 52 | args: [{
|
| 53 | selector: 'pagination-controls',
|
| 54 | template: DEFAULT_TEMPLATE,
|
| 55 | styles: [DEFAULT_STYLES],
|
| 56 | changeDetection: ChangeDetectionStrategy.OnPush,
|
| 57 | encapsulation: ViewEncapsulation.None
|
| 58 | }]
|
| 59 | }], propDecorators: { id: [{
|
| 60 | type: Input
|
| 61 | }], maxSize: [{
|
| 62 | type: Input
|
| 63 | }], directionLinks: [{
|
| 64 | type: Input
|
| 65 | }], autoHide: [{
|
| 66 | type: Input
|
| 67 | }], responsive: [{
|
| 68 | type: Input
|
| 69 | }], previousLabel: [{
|
| 70 | type: Input
|
| 71 | }], nextLabel: [{
|
| 72 | type: Input
|
| 73 | }], screenReaderPaginationLabel: [{
|
| 74 | type: Input
|
| 75 | }], screenReaderPageLabel: [{
|
| 76 | type: Input
|
| 77 | }], screenReaderCurrentLabel: [{
|
| 78 | type: Input
|
| 79 | }], pageChange: [{
|
| 80 | type: Output
|
| 81 | }], pageBoundsCorrection: [{
|
| 82 | type: Output
|
| 83 | }] } });
|
| 84 | |
| \ | No newline at end of file |