UNPKG

30.6 kBJavaScriptView Raw
1import * as i0 from '@angular/core';
2import { EventEmitter, Pipe, Directive, Input, Output, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
3import * as i2 from '@angular/common';
4import { CommonModule } from '@angular/common';
5
6class 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 * Register a PaginationInstance with this service. Returns a
15 * boolean value signifying whether the instance is new or
16 * updated (true = new or updated, false = unchanged).
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 * Check each property of the instance and update any that have changed. Return
32 * true if any changes were made, else return false.
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 * Returns the current page number.
46 */
47 getCurrentPage(id) {
48 if (this.instances[id]) {
49 return this.instances[id].currentPage;
50 }
51 return 1;
52 }
53 /**
54 * Sets the current page number.
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 * Sets the value of instance.totalItems
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 * Sets the value of instance.itemsPerPage.
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 * Returns a clone of the pagination instance object matching the id. If no
86 * id specified, returns the instance corresponding to the default id.
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 * Perform a shallow clone of an object.
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
108const LARGE_NUMBER = Number.MAX_SAFE_INTEGER;
109class PaginatePipe {
110 constructor(service) {
111 this.service = service;
112 // store the values from the last time the pipe was invoked
113 this.state = {};
114 }
115 transform(collection, args) {
116 // When an observable is passed through the AsyncPipe, it will output
117 // `null` until the subscription resolves. In this case, we want to
118 // use the cached data from the `state` object to prevent the NgFor
119 // from flashing empty until the real values arrive.
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 // save the state for server-side collection to avoid null
155 // flash as new data loads.
156 this.saveState(id, collection, collection, start, end);
157 return collection;
158 }
159 }
160 /**
161 * Create an PaginationInstance object, using defaults for any optional properties not supplied.
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 * Ensure the argument passed to the filter contains the required properties.
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 * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
184 * array for a given id. This means that the next time the pipe is run on this collection & id, we just
185 * need to check that the collection, start and end points are all identical, and if so, return the
186 * last sliced array.
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 * For a given id, returns true if the collection, size, start and end values are identical.
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}
214PaginatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginatePipe, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Pipe });
215PaginatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginatePipe, name: "paginate", pure: false });
216i0.ɵɵ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 * The default template and styles for the pagination links are borrowed directly
226 * from Zurb Foundation 6: http://foundation.zurb.com/sites/docs/pagination.html
227 */
228const 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 `;
280const 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 * This directive is what powers all pagination controls components, including the default one.
350 * It exposes an API which is hooked up to the PaginationService to keep the PaginatePipe in sync
351 * with the pagination controls.
352 */
353class 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 * Go to the previous page
384 */
385 previous() {
386 this.checkValidId();
387 this.setCurrent(this.getCurrent() - 1);
388 }
389 /**
390 * Go to the next page
391 */
392 next() {
393 this.checkValidId();
394 this.setCurrent(this.getCurrent() + 1);
395 }
396 /**
397 * Returns true if current page is first page
398 */
399 isFirstPage() {
400 return this.getCurrent() === 1;
401 }
402 /**
403 * Returns true if current page is last page
404 */
405 isLastPage() {
406 return this.getLastPage() === this.getCurrent();
407 }
408 /**
409 * Set the current page number.
410 */
411 setCurrent(page) {
412 this.pageChange.emit(page);
413 }
414 /**
415 * Get the current page number.
416 */
417 getCurrent() {
418 return this.service.getCurrentPage(this.id);
419 }
420 /**
421 * Returns the last page number
422 */
423 getLastPage() {
424 let inst = this.service.getInstance(this.id);
425 if (inst.totalItems < 1) {
426 // when there are 0 or fewer (an error case) items, there are no "pages" as such,
427 // but it makes sense to consider a single, empty page as the last page.
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 * Updates the page links and checks that the current page is valid. Should run whenever the
442 * PaginationService.change stream emits a value matching the current ID, or when any of the
443 * input values changes.
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 * Checks that the instance.currentPage property is within bounds for the current page range.
460 * If not, return a correct value for currentPage, or the current value if OK.
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 * Returns an array of Page objects to use in the pagination controls.
474 */
475 createPageArray(currentPage, itemsPerPage, totalItems, paginationRange) {
476 // paginationRange could be a string if passed from attribute, so cast to number.
477 paginationRange = +paginationRange;
478 let pages = [];
479 // Return 1 as default page number
480 // Make sense to show 1 instead of empty when there are no items
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 * Given the position in the sequence of pagination links [i],
509 * figure out what page number corresponds to that position.
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}
535PaginationControlsDirective.ɵ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 });
536PaginationControlsDirective.ɵ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 });
537i0.ɵɵ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
553function coerceToBoolean(input) {
554 return !!input && input !== 'false';
555}
556/**
557 * The default pagination controls component. Actually just a default implementation of a custom template.
558 */
559class 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}
595PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
596PaginationControlsComponent.ɵ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 });
597i0.ɵɵ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
632class NgxPaginationModule {
633}
634NgxPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
635NgxPaginationModule.ɵ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] });
638NgxPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NgxPaginationModule, providers: [PaginationService], imports: [[CommonModule]] });
639i0.ɵɵ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 * Public API Surface of ngx-pagination
655 */
656
657/**
658 * Generated bundle index. Do not edit.
659 */
660
661export { NgxPaginationModule, PaginatePipe, PaginationControlsComponent, PaginationControlsDirective, PaginationService };
662//# sourceMappingURL=ngx-pagination.mjs.map