1 | import * as i0 from '@angular/core';
|
2 | import { EventEmitter, Pipe, Directive, Input, Output, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
|
3 | import * as i2 from '@angular/common';
|
4 | import { CommonModule } from '@angular/common';
|
5 |
|
6 | class PaginationService {
|
7 | constructor() {
|
8 | this.change = new EventEmitter();
|
9 | this.instances = {};
|
10 | this.DEFAULT_ID = 'DEFAULT_PAGINATION_ID';
|
11 | }
|
12 | defaultId() { return this.DEFAULT_ID; }
|
13 | |
14 |
|
15 |
|
16 |
|
17 |
|
18 | register(instance) {
|
19 | if (instance.id == null) {
|
20 | instance.id = this.DEFAULT_ID;
|
21 | }
|
22 | if (!this.instances[instance.id]) {
|
23 | this.instances[instance.id] = instance;
|
24 | return true;
|
25 | }
|
26 | else {
|
27 | return this.updateInstance(instance);
|
28 | }
|
29 | }
|
30 | |
31 |
|
32 |
|
33 |
|
34 | updateInstance(instance) {
|
35 | let changed = false;
|
36 | for (let prop in this.instances[instance.id]) {
|
37 | if (instance[prop] !== this.instances[instance.id][prop]) {
|
38 | this.instances[instance.id][prop] = instance[prop];
|
39 | changed = true;
|
40 | }
|
41 | }
|
42 | return changed;
|
43 | }
|
44 | |
45 |
|
46 |
|
47 | getCurrentPage(id) {
|
48 | if (this.instances[id]) {
|
49 | return this.instances[id].currentPage;
|
50 | }
|
51 | return 1;
|
52 | }
|
53 | |
54 |
|
55 |
|
56 | setCurrentPage(id, page) {
|
57 | if (this.instances[id]) {
|
58 | let instance = this.instances[id];
|
59 | let maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
|
60 | if (page <= maxPage && 1 <= page) {
|
61 | this.instances[id].currentPage = page;
|
62 | this.change.emit(id);
|
63 | }
|
64 | }
|
65 | }
|
66 | |
67 |
|
68 |
|
69 | setTotalItems(id, totalItems) {
|
70 | if (this.instances[id] && 0 <= totalItems) {
|
71 | this.instances[id].totalItems = totalItems;
|
72 | this.change.emit(id);
|
73 | }
|
74 | }
|
75 | |
76 |
|
77 |
|
78 | setItemsPerPage(id, itemsPerPage) {
|
79 | if (this.instances[id]) {
|
80 | this.instances[id].itemsPerPage = itemsPerPage;
|
81 | this.change.emit(id);
|
82 | }
|
83 | }
|
84 | |
85 |
|
86 |
|
87 |
|
88 | getInstance(id = this.DEFAULT_ID) {
|
89 | if (this.instances[id]) {
|
90 | return this.clone(this.instances[id]);
|
91 | }
|
92 | return {};
|
93 | }
|
94 | |
95 |
|
96 |
|
97 | clone(obj) {
|
98 | var target = {};
|
99 | for (var i in obj) {
|
100 | if (obj.hasOwnProperty(i)) {
|
101 | target[i] = obj[i];
|
102 | }
|
103 | }
|
104 | return target;
|
105 | }
|
106 | }
|
107 |
|
108 | const LARGE_NUMBER = Number.MAX_SAFE_INTEGER;
|
109 | class PaginatePipe {
|
110 | constructor(service) {
|
111 | this.service = service;
|
112 |
|
113 | this.state = {};
|
114 | }
|
115 | transform(collection, args) {
|
116 |
|
117 |
|
118 |
|
119 |
|
120 | if (!(collection instanceof Array)) {
|
121 | let _id = args.id || this.service.defaultId();
|
122 | if (this.state[_id]) {
|
123 | return this.state[_id].slice;
|
124 | }
|
125 | else {
|
126 | return collection;
|
127 | }
|
128 | }
|
129 | let serverSideMode = args.totalItems && args.totalItems !== collection.length;
|
130 | let instance = this.createInstance(collection, args);
|
131 | let id = instance.id;
|
132 | let start, end;
|
133 | let perPage = instance.itemsPerPage;
|
134 | let emitChange = this.service.register(instance);
|
135 | if (!serverSideMode && collection instanceof Array) {
|
136 | perPage = +perPage || LARGE_NUMBER;
|
137 | start = (instance.currentPage - 1) * perPage;
|
138 | end = start + perPage;
|
139 | let isIdentical = this.stateIsIdentical(id, collection, start, end);
|
140 | if (isIdentical) {
|
141 | return this.state[id].slice;
|
142 | }
|
143 | else {
|
144 | let slice = collection.slice(start, end);
|
145 | this.saveState(id, collection, slice, start, end);
|
146 | this.service.change.emit(id);
|
147 | return slice;
|
148 | }
|
149 | }
|
150 | else {
|
151 | if (emitChange) {
|
152 | this.service.change.emit(id);
|
153 | }
|
154 |
|
155 |
|
156 | this.saveState(id, collection, collection, start, end);
|
157 | return collection;
|
158 | }
|
159 | }
|
160 | |
161 |
|
162 |
|
163 | createInstance(collection, config) {
|
164 | this.checkConfig(config);
|
165 | return {
|
166 | id: config.id != null ? config.id : this.service.defaultId(),
|
167 | itemsPerPage: +config.itemsPerPage || 0,
|
168 | currentPage: +config.currentPage || 1,
|
169 | totalItems: +config.totalItems || collection.length
|
170 | };
|
171 | }
|
172 | |
173 |
|
174 |
|
175 | checkConfig(config) {
|
176 | const required = ['itemsPerPage', 'currentPage'];
|
177 | const missing = required.filter(prop => !(prop in config));
|
178 | if (0 < missing.length) {
|
179 | throw new Error(`PaginatePipe: Argument is missing the following required properties: ${missing.join(', ')}`);
|
180 | }
|
181 | }
|
182 | |
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | saveState(id, collection, slice, start, end) {
|
189 | this.state[id] = {
|
190 | collection,
|
191 | size: collection.length,
|
192 | slice,
|
193 | start,
|
194 | end
|
195 | };
|
196 | }
|
197 | |
198 |
|
199 |
|
200 | stateIsIdentical(id, collection, start, end) {
|
201 | let state = this.state[id];
|
202 | if (!state) {
|
203 | return false;
|
204 | }
|
205 | let isMetaDataIdentical = state.size === collection.length &&
|
206 | state.start === start &&
|
207 | state.end === end;
|
208 | if (!isMetaDataIdentical) {
|
209 | return false;
|
210 | }
|
211 | return state.slice.every((element, index) => element === collection[start + index]);
|
212 | }
|
213 | }
|
214 | PaginatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginatePipe, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Pipe });
|
215 | PaginatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginatePipe, name: "paginate", pure: false });
|
216 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginatePipe, decorators: [{
|
217 | type: Pipe,
|
218 | args: [{
|
219 | name: 'paginate',
|
220 | pure: false
|
221 | }]
|
222 | }], ctorParameters: function () { return [{ type: PaginationService }]; } });
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 | const DEFAULT_TEMPLATE = `
|
229 | <pagination-template #p="paginationApi"
|
230 | [id]="id"
|
231 | [maxSize]="maxSize"
|
232 | (pageChange)="pageChange.emit($event)"
|
233 | (pageBoundsCorrection)="pageBoundsCorrection.emit($event)">
|
234 | <nav role="navigation" [attr.aria-label]="screenReaderPaginationLabel">
|
235 | <ul class="ngx-pagination"
|
236 | [class.responsive]="responsive"
|
237 | *ngIf="!(autoHide && p.pages.length <= 1)">
|
238 |
|
239 | <li class="pagination-previous" [class.disabled]="p.isFirstPage()" *ngIf="directionLinks">
|
240 | <a tabindex="0" *ngIf="1 < p.getCurrent()" (keyup.enter)="p.previous()" (click)="p.previous()">
|
241 | {{ previousLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>
|
242 | </a>
|
243 | <span *ngIf="p.isFirstPage()" aria-disabled="true">
|
244 | {{ previousLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>
|
245 | </span>
|
246 | </li>
|
247 |
|
248 | <li class="small-screen">
|
249 | {{ p.getCurrent() }} / {{ p.getLastPage() }}
|
250 | </li>
|
251 |
|
252 | <li [class.current]="p.getCurrent() === page.value"
|
253 | [class.ellipsis]="page.label === '...'"
|
254 | *ngFor="let page of p.pages; trackBy: trackByIndex">
|
255 | <a tabindex="0" (keyup.enter)="p.setCurrent(page.value)" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
|
256 | <span class="show-for-sr">{{ screenReaderPageLabel }} </span>
|
257 | <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>
|
258 | </a>
|
259 | <ng-container *ngIf="p.getCurrent() === page.value">
|
260 | <span aria-live="polite">
|
261 | <span class="show-for-sr">{{ screenReaderCurrentLabel }} </span>
|
262 | <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>
|
263 | </span>
|
264 | </ng-container>
|
265 | </li>
|
266 |
|
267 | <li class="pagination-next" [class.disabled]="p.isLastPage()" *ngIf="directionLinks">
|
268 | <a tabindex="0" *ngIf="!p.isLastPage()" (keyup.enter)="p.next()" (click)="p.next()">
|
269 | {{ nextLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>
|
270 | </a>
|
271 | <span *ngIf="p.isLastPage()" aria-disabled="true">
|
272 | {{ nextLabel }} <span class="show-for-sr">{{ screenReaderPageLabel }}</span>
|
273 | </span>
|
274 | </li>
|
275 |
|
276 | </ul>
|
277 | </nav>
|
278 | </pagination-template>
|
279 | `;
|
280 | const DEFAULT_STYLES = `
|
281 | .ngx-pagination {
|
282 | margin-left: 0;
|
283 | margin-bottom: 1rem; }
|
284 | .ngx-pagination::before, .ngx-pagination::after {
|
285 | content: ' ';
|
286 | display: table; }
|
287 | .ngx-pagination::after {
|
288 | clear: both; }
|
289 | .ngx-pagination li {
|
290 | -moz-user-select: none;
|
291 | -webkit-user-select: none;
|
292 | -ms-user-select: none;
|
293 | margin-right: 0.0625rem;
|
294 | border-radius: 0; }
|
295 | .ngx-pagination li {
|
296 | display: inline-block; }
|
297 | .ngx-pagination a,
|
298 | .ngx-pagination button {
|
299 | color: #0a0a0a;
|
300 | display: block;
|
301 | padding: 0.1875rem 0.625rem;
|
302 | border-radius: 0; }
|
303 | .ngx-pagination a:hover,
|
304 | .ngx-pagination button:hover {
|
305 | background: #e6e6e6; }
|
306 | .ngx-pagination .current {
|
307 | padding: 0.1875rem 0.625rem;
|
308 | background: #2199e8;
|
309 | color: #fefefe;
|
310 | cursor: default; }
|
311 | .ngx-pagination .disabled {
|
312 | padding: 0.1875rem 0.625rem;
|
313 | color: #cacaca;
|
314 | cursor: default; }
|
315 | .ngx-pagination .disabled:hover {
|
316 | background: transparent; }
|
317 | .ngx-pagination a, .ngx-pagination button {
|
318 | cursor: pointer; }
|
319 |
|
320 | .ngx-pagination .pagination-previous a::before,
|
321 | .ngx-pagination .pagination-previous.disabled::before {
|
322 | content: '«';
|
323 | display: inline-block;
|
324 | margin-right: 0.5rem; }
|
325 |
|
326 | .ngx-pagination .pagination-next a::after,
|
327 | .ngx-pagination .pagination-next.disabled::after {
|
328 | content: '»';
|
329 | display: inline-block;
|
330 | margin-left: 0.5rem; }
|
331 |
|
332 | .ngx-pagination .show-for-sr {
|
333 | position: absolute !important;
|
334 | width: 1px;
|
335 | height: 1px;
|
336 | overflow: hidden;
|
337 | clip: rect(0, 0, 0, 0); }
|
338 | .ngx-pagination .small-screen {
|
339 | display: none; }
|
340 | @media screen and (max-width: 601px) {
|
341 | .ngx-pagination.responsive .small-screen {
|
342 | display: inline-block; }
|
343 | .ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next) {
|
344 | display: none; }
|
345 | }
|
346 | `;
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 | class PaginationControlsDirective {
|
354 | constructor(service, changeDetectorRef) {
|
355 | this.service = service;
|
356 | this.changeDetectorRef = changeDetectorRef;
|
357 | this.maxSize = 7;
|
358 | this.pageChange = new EventEmitter();
|
359 | this.pageBoundsCorrection = new EventEmitter();
|
360 | this.pages = [];
|
361 | this.changeSub = this.service.change
|
362 | .subscribe(id => {
|
363 | if (this.id === id) {
|
364 | this.updatePageLinks();
|
365 | this.changeDetectorRef.markForCheck();
|
366 | this.changeDetectorRef.detectChanges();
|
367 | }
|
368 | });
|
369 | }
|
370 | ngOnInit() {
|
371 | if (this.id === undefined) {
|
372 | this.id = this.service.defaultId();
|
373 | }
|
374 | this.updatePageLinks();
|
375 | }
|
376 | ngOnChanges(changes) {
|
377 | this.updatePageLinks();
|
378 | }
|
379 | ngOnDestroy() {
|
380 | this.changeSub.unsubscribe();
|
381 | }
|
382 | |
383 |
|
384 |
|
385 | previous() {
|
386 | this.checkValidId();
|
387 | this.setCurrent(this.getCurrent() - 1);
|
388 | }
|
389 | |
390 |
|
391 |
|
392 | next() {
|
393 | this.checkValidId();
|
394 | this.setCurrent(this.getCurrent() + 1);
|
395 | }
|
396 | |
397 |
|
398 |
|
399 | isFirstPage() {
|
400 | return this.getCurrent() === 1;
|
401 | }
|
402 | |
403 |
|
404 |
|
405 | isLastPage() {
|
406 | return this.getLastPage() === this.getCurrent();
|
407 | }
|
408 | |
409 |
|
410 |
|
411 | setCurrent(page) {
|
412 | this.pageChange.emit(page);
|
413 | }
|
414 | |
415 |
|
416 |
|
417 | getCurrent() {
|
418 | return this.service.getCurrentPage(this.id);
|
419 | }
|
420 | |
421 |
|
422 |
|
423 | getLastPage() {
|
424 | let inst = this.service.getInstance(this.id);
|
425 | if (inst.totalItems < 1) {
|
426 |
|
427 |
|
428 | return 1;
|
429 | }
|
430 | return Math.ceil(inst.totalItems / inst.itemsPerPage);
|
431 | }
|
432 | getTotalItems() {
|
433 | return this.service.getInstance(this.id).totalItems;
|
434 | }
|
435 | checkValidId() {
|
436 | if (this.service.getInstance(this.id).id == null) {
|
437 | console.warn(`PaginationControlsDirective: the specified id "${this.id}" does not match any registered PaginationInstance`);
|
438 | }
|
439 | }
|
440 | |
441 |
|
442 |
|
443 |
|
444 |
|
445 | updatePageLinks() {
|
446 | let inst = this.service.getInstance(this.id);
|
447 | const correctedCurrentPage = this.outOfBoundCorrection(inst);
|
448 | if (correctedCurrentPage !== inst.currentPage) {
|
449 | setTimeout(() => {
|
450 | this.pageBoundsCorrection.emit(correctedCurrentPage);
|
451 | this.pages = this.createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, this.maxSize);
|
452 | });
|
453 | }
|
454 | else {
|
455 | this.pages = this.createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, this.maxSize);
|
456 | }
|
457 | }
|
458 | |
459 |
|
460 |
|
461 |
|
462 | outOfBoundCorrection(instance) {
|
463 | const totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
|
464 | if (totalPages < instance.currentPage && 0 < totalPages) {
|
465 | return totalPages;
|
466 | }
|
467 | else if (instance.currentPage < 1) {
|
468 | return 1;
|
469 | }
|
470 | return instance.currentPage;
|
471 | }
|
472 | |
473 |
|
474 |
|
475 | createPageArray(currentPage, itemsPerPage, totalItems, paginationRange) {
|
476 |
|
477 | paginationRange = +paginationRange;
|
478 | let pages = [];
|
479 |
|
480 |
|
481 | const totalPages = Math.max(Math.ceil(totalItems / itemsPerPage), 1);
|
482 | const halfWay = Math.ceil(paginationRange / 2);
|
483 | const isStart = currentPage <= halfWay;
|
484 | const isEnd = totalPages - halfWay < currentPage;
|
485 | const isMiddle = !isStart && !isEnd;
|
486 | let ellipsesNeeded = paginationRange < totalPages;
|
487 | let i = 1;
|
488 | while (i <= totalPages && i <= paginationRange) {
|
489 | let label;
|
490 | let pageNumber = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
|
491 | let openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
|
492 | let closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
|
493 | if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
|
494 | label = '...';
|
495 | }
|
496 | else {
|
497 | label = pageNumber;
|
498 | }
|
499 | pages.push({
|
500 | label: label,
|
501 | value: pageNumber
|
502 | });
|
503 | i++;
|
504 | }
|
505 | return pages;
|
506 | }
|
507 | |
508 |
|
509 |
|
510 |
|
511 | calculatePageNumber(i, currentPage, paginationRange, totalPages) {
|
512 | let halfWay = Math.ceil(paginationRange / 2);
|
513 | if (i === paginationRange) {
|
514 | return totalPages;
|
515 | }
|
516 | else if (i === 1) {
|
517 | return i;
|
518 | }
|
519 | else if (paginationRange < totalPages) {
|
520 | if (totalPages - halfWay < currentPage) {
|
521 | return totalPages - paginationRange + i;
|
522 | }
|
523 | else if (halfWay < currentPage) {
|
524 | return currentPage - halfWay + i;
|
525 | }
|
526 | else {
|
527 | return i;
|
528 | }
|
529 | }
|
530 | else {
|
531 | return i;
|
532 | }
|
533 | }
|
534 | }
|
535 | PaginationControlsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsDirective, deps: [{ token: PaginationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
536 | PaginationControlsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 });
|
537 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsDirective, decorators: [{
|
538 | type: Directive,
|
539 | args: [{
|
540 | selector: 'pagination-template,[pagination-template]',
|
541 | exportAs: 'paginationApi'
|
542 | }]
|
543 | }], ctorParameters: function () { return [{ type: PaginationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
544 | type: Input
|
545 | }], maxSize: [{
|
546 | type: Input
|
547 | }], pageChange: [{
|
548 | type: Output
|
549 | }], pageBoundsCorrection: [{
|
550 | type: Output
|
551 | }] } });
|
552 |
|
553 | function coerceToBoolean(input) {
|
554 | return !!input && input !== 'false';
|
555 | }
|
556 |
|
557 |
|
558 |
|
559 | class PaginationControlsComponent {
|
560 | constructor() {
|
561 | this.maxSize = 7;
|
562 | this.previousLabel = 'Previous';
|
563 | this.nextLabel = 'Next';
|
564 | this.screenReaderPaginationLabel = 'Pagination';
|
565 | this.screenReaderPageLabel = 'page';
|
566 | this.screenReaderCurrentLabel = `You're on page`;
|
567 | this.pageChange = new EventEmitter();
|
568 | this.pageBoundsCorrection = new EventEmitter();
|
569 | this._directionLinks = true;
|
570 | this._autoHide = false;
|
571 | this._responsive = false;
|
572 | }
|
573 | get directionLinks() {
|
574 | return this._directionLinks;
|
575 | }
|
576 | set directionLinks(value) {
|
577 | this._directionLinks = coerceToBoolean(value);
|
578 | }
|
579 | get autoHide() {
|
580 | return this._autoHide;
|
581 | }
|
582 | set autoHide(value) {
|
583 | this._autoHide = coerceToBoolean(value);
|
584 | }
|
585 | get responsive() {
|
586 | return this._responsive;
|
587 | }
|
588 | set responsive(value) {
|
589 | this._responsive = coerceToBoolean(value);
|
590 | }
|
591 | trackByIndex(index) {
|
592 | return index;
|
593 | }
|
594 | }
|
595 | PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
596 | 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: 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 });
|
597 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsComponent, decorators: [{
|
598 | type: Component,
|
599 | args: [{
|
600 | selector: 'pagination-controls',
|
601 | template: DEFAULT_TEMPLATE,
|
602 | styles: [DEFAULT_STYLES],
|
603 | changeDetection: ChangeDetectionStrategy.OnPush,
|
604 | encapsulation: ViewEncapsulation.None
|
605 | }]
|
606 | }], propDecorators: { id: [{
|
607 | type: Input
|
608 | }], maxSize: [{
|
609 | type: Input
|
610 | }], directionLinks: [{
|
611 | type: Input
|
612 | }], autoHide: [{
|
613 | type: Input
|
614 | }], responsive: [{
|
615 | type: Input
|
616 | }], previousLabel: [{
|
617 | type: Input
|
618 | }], nextLabel: [{
|
619 | type: Input
|
620 | }], screenReaderPaginationLabel: [{
|
621 | type: Input
|
622 | }], screenReaderPageLabel: [{
|
623 | type: Input
|
624 | }], screenReaderCurrentLabel: [{
|
625 | type: Input
|
626 | }], pageChange: [{
|
627 | type: Output
|
628 | }], pageBoundsCorrection: [{
|
629 | type: Output
|
630 | }] } });
|
631 |
|
632 | class NgxPaginationModule {
|
633 | }
|
634 | NgxPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
635 | NgxPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, declarations: [PaginatePipe,
|
636 | PaginationControlsComponent,
|
637 | PaginationControlsDirective], imports: [CommonModule], exports: [PaginatePipe, PaginationControlsComponent, PaginationControlsDirective] });
|
638 | NgxPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, providers: [PaginationService], imports: [[CommonModule]] });
|
639 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, decorators: [{
|
640 | type: NgModule,
|
641 | args: [{
|
642 | imports: [CommonModule],
|
643 | declarations: [
|
644 | PaginatePipe,
|
645 | PaginationControlsComponent,
|
646 | PaginationControlsDirective
|
647 | ],
|
648 | providers: [PaginationService],
|
649 | exports: [PaginatePipe, PaginationControlsComponent, PaginationControlsDirective]
|
650 | }]
|
651 | }] });
|
652 |
|
653 |
|
654 |
|
655 |
|
656 |
|
657 |
|
658 |
|
659 |
|
660 |
|
661 | export { NgxPaginationModule, PaginatePipe, PaginationControlsComponent, PaginationControlsDirective, PaginationService };
|
662 |
|