ngx-bootstrap
Version:
Angular Bootstrap
549 lines (542 loc) • 39.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, input, output, effect, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
// todo: split
/** Provides default values for Pagination and pager components */
class PaginationConfig {
constructor() {
this.main = {
itemsPerPage: 10,
boundaryLinks: false,
directionLinks: true,
firstText: 'First',
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last',
pageBtnClass: '',
rotate: true
};
this.pager = {
itemsPerPage: 15,
previousText: '« Previous',
nextText: 'Next »',
pageBtnClass: '',
align: true
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
const PAGER_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PagerComponent),
multi: true
};
class PagerComponent {
constructor(elementRef, paginationConfig, changeDetection) {
this.elementRef = elementRef;
this.changeDetection = changeDetection;
/** if `true` aligns each link to the sides of pager */
this.align = input(false, ...(ngDevMode ? [{ debugName: "align" }] : []));
/** limit number for page links in pager */
this.maxSize = input(...(ngDevMode ? [undefined, { debugName: "maxSize" }] : []));
/** if false first and last buttons will be hidden */
this.boundaryLinks = input(false, ...(ngDevMode ? [{ debugName: "boundaryLinks" }] : []));
/** if false previous and next buttons will be hidden */
this.directionLinks = input(true, ...(ngDevMode ? [{ debugName: "directionLinks" }] : []));
// labels
/** first button text */
this.firstText = input('First', ...(ngDevMode ? [{ debugName: "firstText" }] : []));
/** previous button text */
this.previousText = input('« Previous', ...(ngDevMode ? [{ debugName: "previousText" }] : []));
/** next button text */
this.nextText = input('Next »', ...(ngDevMode ? [{ debugName: "nextText" }] : []));
/** last button text */
this.lastText = input('Last', ...(ngDevMode ? [{ debugName: "lastText" }] : []));
/** if true current page will in the middle of pages list */
this.rotate = input(true, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
// css
/** add class to <code><li\></code> */
this.pageBtnClass = input('', ...(ngDevMode ? [{ debugName: "pageBtnClass" }] : []));
/** if true pagination component will be disabled */
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
/** maximum number of items per page. If value less than 1 will display all items on one page */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.itemsPerPageInput = input(15, { ...(ngDevMode ? { debugName: "itemsPerPageInput" } : {}), alias: 'itemsPerPage' });
/** total number of items in all pages */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.totalItemsInput = input(0, { ...(ngDevMode ? { debugName: "totalItemsInput" } : {}), alias: 'totalItems' });
/** fired when total pages count changes, $event:number equals to total pages count */
this.numPages = output();
/** fired when page was changed, $event:{page, itemsPerPage} equals to
* object with current page index and number of items per page
*/
this.pageChanged = output();
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.classMap = '';
this.inited = false;
this._itemsPerPage = 15;
this._totalItems = 0;
this._totalPages = 0;
this._page = 1;
// Resolved configuration values
this._maxSize = 0;
this._rotate = true;
this._boundaryLinks = false;
this._directionLinks = true;
this._pageBtnClass = '';
this.elementRef = elementRef;
if (!this.config) {
this.configureOptions(Object.assign({}, paginationConfig.main, paginationConfig.pager));
}
// Watch for itemsPerPage changes
effect(() => {
this._itemsPerPage = this.itemsPerPageInput();
this.totalPages = this.calculateTotalPages();
});
// Watch for totalItems changes
effect(() => {
this._totalItems = this.totalItemsInput();
this.totalPages = this.calculateTotalPages();
});
}
get itemsPerPage() {
return this._itemsPerPage;
}
get totalItems() {
return this._totalItems;
}
get totalPages() {
return this._totalPages;
}
set totalPages(v) {
this._totalPages = v;
this.numPages.emit(v);
if (this.inited) {
this.selectPage(this.page);
}
}
get page() {
return this._page;
}
set page(value) {
const _previous = this._page;
this._page = value > this.totalPages ? this.totalPages : value || 1;
this.changeDetection.markForCheck();
if (_previous === this._page || typeof _previous === 'undefined') {
return;
}
this.pageChanged.emit({
page: this._page,
itemsPerPage: this.itemsPerPage
});
}
configureOptions(config) {
this.config = Object.assign({}, config);
}
ngOnInit() {
if (typeof window !== 'undefined') {
this.classMap = this.elementRef.nativeElement.getAttribute('class') || '';
}
// watch for maxSize
const maxSizeVal = this.maxSize();
this._maxSize = typeof maxSizeVal === 'undefined' ? this.config?.maxSize || 0 : maxSizeVal;
const rotateVal = this.rotate();
this._rotate = typeof rotateVal === 'undefined' ? !!this.config?.rotate : rotateVal;
const boundaryLinksVal = this.boundaryLinks();
this._boundaryLinks = typeof boundaryLinksVal === 'undefined' ? !!this.config?.boundaryLinks : boundaryLinksVal;
const directionLinksVal = this.directionLinks();
this._directionLinks = typeof directionLinksVal === 'undefined' ? !!this.config?.directionLinks : directionLinksVal;
const pageBtnClassVal = this.pageBtnClass();
this._pageBtnClass = typeof pageBtnClassVal === 'undefined' ? this.config?.pageBtnClass || '' : pageBtnClassVal;
// base class
if (typeof this.itemsPerPage === 'undefined') {
this._itemsPerPage = this.config?.itemsPerPage || 0;
}
this.totalPages = this.calculateTotalPages();
// this class
this.pages = this.getPages(this.page, this.totalPages);
this.inited = true;
}
writeValue(value) {
this.page = value;
this.pages = this.getPages(this.page, this.totalPages);
}
getText(key) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const inputVal = this[`${key}Text`]?.();
return inputVal || this.config[`${key}Text`];
}
noPrevious() {
return this.page === 1;
}
noNext() {
return this.page === this.totalPages;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
selectPage(page, event) {
if (event) {
event.preventDefault();
}
if (!this.disabled()) {
if (event && event.target) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const target = event.target;
target.blur();
}
this.writeValue(page);
this.onChange(this.page);
}
}
// Create page object used in template
makePage(num, text, active) {
return { text, number: num, active };
}
getPages(currentPage, totalPages) {
const pages = [];
const maxSize = this._maxSize;
const rotate = this._rotate;
// Default page limits
let startPage = 1;
let endPage = totalPages;
const isMaxSized = typeof maxSize !== 'undefined' && maxSize < totalPages;
// recompute if maxSize
if (isMaxSized && maxSize) {
if (rotate) {
// Current page is displayed in the middle of the visible ones
startPage = Math.max(currentPage - Math.floor(maxSize / 2), 1);
endPage = startPage + maxSize - 1;
// Adjust if limit is exceeded
if (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}
}
else {
// Visible pages are paginated with maxSize
startPage =
(Math.ceil(currentPage / maxSize) - 1) * maxSize + 1;
// Adjust last page if limit is exceeded
endPage = Math.min(startPage + maxSize - 1, totalPages);
}
}
// Add page number links
for (let num = startPage; num <= endPage; num++) {
const page = this.makePage(num, num.toString(), num === currentPage);
pages.push(page);
}
// Add links to move between page sets
if (isMaxSized && !rotate) {
if (startPage > 1) {
const previousPageSet = this.makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
}
if (endPage < totalPages) {
const nextPageSet = this.makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
}
return pages;
}
// base class
calculateTotalPages() {
const totalPages = this.itemsPerPage < 1
? 1
: Math.ceil(this.totalItems / this.itemsPerPage);
return Math.max(totalPages || 0, 1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagerComponent, deps: [{ token: i0.ElementRef }, { token: PaginationConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: PagerComponent, isStandalone: true, selector: "pager", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: true, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: true, isRequired: false, transformFunction: null }, firstText: { classPropertyName: "firstText", publicName: "firstText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, lastText: { classPropertyName: "lastText", publicName: "lastText", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, pageBtnClass: { classPropertyName: "pageBtnClass", publicName: "pageBtnClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageInput: { classPropertyName: "itemsPerPageInput", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, totalItemsInput: { classPropertyName: "totalItemsInput", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { numPages: "numPages", pageChanged: "pageChanged" }, providers: [PAGER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<ul class=\"pager\">\n <li [class.disabled]=\"noPrevious()\" [class.previous]=\"align()\"\n [ngClass]=\"{'pull-left': align(), 'float-left': align()}\"\n class=\"{{ _pageBtnClass }}\">\n <a href (click)=\"selectPage(page - 1, $event)\">{{ getText('previous') }}</a>\n </li>\n <li [class.disabled]=\"noNext()\" [class.next]=\"align()\"\n [ngClass]=\"{'pull-right': align(), 'float-right': align()}\"\n class=\"{{ _pageBtnClass }}\">\n <a href (click)=\"selectPage(page + 1, $event)\">{{ getText('next') }}</a>\n </li>\n</ul>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagerComponent, decorators: [{
type: Component,
args: [{ selector: 'pager', providers: [PAGER_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [NgClass], template: "<ul class=\"pager\">\n <li [class.disabled]=\"noPrevious()\" [class.previous]=\"align()\"\n [ngClass]=\"{'pull-left': align(), 'float-left': align()}\"\n class=\"{{ _pageBtnClass }}\">\n <a href (click)=\"selectPage(page - 1, $event)\">{{ getText('previous') }}</a>\n </li>\n <li [class.disabled]=\"noNext()\" [class.next]=\"align()\"\n [ngClass]=\"{'pull-right': align(), 'float-right': align()}\"\n class=\"{{ _pageBtnClass }}\">\n <a href (click)=\"selectPage(page + 1, $event)\">{{ getText('next') }}</a>\n </li>\n</ul>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: PaginationConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], boundaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryLinks", required: false }] }], directionLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "directionLinks", required: false }] }], firstText: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstText", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], lastText: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastText", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], pageBtnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageBtnClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemsPerPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], totalItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], numPages: [{ type: i0.Output, args: ["numPages"] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
const PAGINATION_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PaginationComponent),
multi: true
};
class PaginationComponent {
constructor(elementRef, paginationConfig, changeDetection) {
this.elementRef = elementRef;
this.changeDetection = changeDetection;
/** if `true` aligns each link to the sides of pager */
this.align = input(true, ...(ngDevMode ? [{ debugName: "align" }] : []));
/** limit number for page links in pager */
this.maxSize = input(...(ngDevMode ? [undefined, { debugName: "maxSize" }] : []));
/** if false first and last buttons will be hidden */
this.boundaryLinks = input(false, ...(ngDevMode ? [{ debugName: "boundaryLinks" }] : []));
/** if false previous and next buttons will be hidden */
this.directionLinks = input(true, ...(ngDevMode ? [{ debugName: "directionLinks" }] : []));
// labels
/** first button text */
this.firstText = input(...(ngDevMode ? [undefined, { debugName: "firstText" }] : []));
/** previous button text */
this.previousText = input(...(ngDevMode ? [undefined, { debugName: "previousText" }] : []));
/** next button text */
this.nextText = input(...(ngDevMode ? [undefined, { debugName: "nextText" }] : []));
/** last button text */
this.lastText = input(...(ngDevMode ? [undefined, { debugName: "lastText" }] : []));
/** if true current page will in the middle of pages list */
this.rotate = input(true, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
// css
/** add class to <code><li\></code> */
this.pageBtnClass = input('', ...(ngDevMode ? [{ debugName: "pageBtnClass" }] : []));
/** if true pagination component will be disabled */
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
/** custom template for page link */
this.customPageTemplate = input(...(ngDevMode ? [undefined, { debugName: "customPageTemplate" }] : []));
/** custom template for next link */
this.customNextTemplate = input(...(ngDevMode ? [undefined, { debugName: "customNextTemplate" }] : []));
/** custom template for previous link */
this.customPreviousTemplate = input(...(ngDevMode ? [undefined, { debugName: "customPreviousTemplate" }] : []));
/** custom template for first link */
this.customFirstTemplate = input(...(ngDevMode ? [undefined, { debugName: "customFirstTemplate" }] : []));
/** custom template for last link */
this.customLastTemplate = input(...(ngDevMode ? [undefined, { debugName: "customLastTemplate" }] : []));
/** maximum number of items per page. If value less than 1 will display all items on one page */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.itemsPerPageInput = input(10, { ...(ngDevMode ? { debugName: "itemsPerPageInput" } : {}), alias: 'itemsPerPage' });
/** total number of items in all pages */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.totalItemsInput = input(0, { ...(ngDevMode ? { debugName: "totalItemsInput" } : {}), alias: 'totalItems' });
/** fired when total pages count changes, $event:number equals to total pages count */
this.numPages = output();
/** fired when page was changed, $event:{page, itemsPerPage} equals to object
* with current page index and number of items per page
*/
this.pageChanged = output();
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.classMap = '';
this.inited = false;
this._itemsPerPage = 10;
this._totalItems = 0;
this._totalPages = 0;
this._page = 1;
// Resolved configuration values
this._maxSize = 0;
this._rotate = true;
this._boundaryLinks = false;
this._directionLinks = true;
this._pageBtnClass = '';
this.elementRef = elementRef;
if (!this.config) {
this.configureOptions(paginationConfig.main);
}
// Watch for itemsPerPage changes
effect(() => {
this._itemsPerPage = this.itemsPerPageInput();
this.totalPages = this.calculateTotalPages();
});
// Watch for totalItems changes
effect(() => {
this._totalItems = this.totalItemsInput();
this.totalPages = this.calculateTotalPages();
});
// Watch for rotate/maxSize changes
effect(() => {
const rotateVal = this.rotate();
const maxSizeVal = this.maxSize();
this._rotate = typeof rotateVal === 'undefined' ? !!this.config?.rotate : rotateVal;
this._maxSize = typeof maxSizeVal === 'undefined' ? this.config?.maxSize || 0 : maxSizeVal;
if (this.inited) {
this.pages = this.getPages(this.page, this.totalPages);
this.changeDetection.markForCheck();
}
});
}
get itemsPerPage() {
return this._itemsPerPage;
}
get totalItems() {
return this._totalItems;
}
get totalPages() {
return this._totalPages;
}
set totalPages(v) {
this._totalPages = v;
this.numPages.emit(v);
if (this.inited) {
this.selectPage(this.page);
}
}
get page() {
return this._page;
}
set page(value) {
const _previous = this._page;
this._page = value > this.totalPages ? this.totalPages : value || 1;
this.changeDetection.markForCheck();
if (_previous === this._page || typeof _previous === 'undefined') {
return;
}
this.pageChanged.emit({
page: this._page,
itemsPerPage: this.itemsPerPage
});
}
configureOptions(config) {
this.config = Object.assign({}, config);
}
ngOnInit() {
if (typeof window !== 'undefined') {
this.classMap = this.elementRef.nativeElement.getAttribute('class') || '';
}
// watch for maxSize
const maxSizeVal = this.maxSize();
const _maxSize = typeof maxSizeVal === 'undefined' ? this.config?.maxSize || 0 : maxSizeVal;
const rotateVal = this.rotate();
const _rotate = typeof rotateVal === 'undefined' ? !!this.config?.rotate : rotateVal;
const boundaryLinksVal = this.boundaryLinks();
const _boundaryLinks = typeof boundaryLinksVal === 'undefined' ? !!this.config?.boundaryLinks : boundaryLinksVal;
const directionLinksVal = this.directionLinks();
const _directionLinks = typeof directionLinksVal === 'undefined' ? !!this.config?.directionLinks : directionLinksVal;
const pageBtnClassVal = this.pageBtnClass();
const _pageBtnClass = typeof pageBtnClassVal === 'undefined' ? this.config?.pageBtnClass || '' : pageBtnClassVal;
// Store resolved values for use
this._maxSize = _maxSize;
this._rotate = _rotate;
this._boundaryLinks = _boundaryLinks;
this._directionLinks = _directionLinks;
this._pageBtnClass = _pageBtnClass;
// base class
if (typeof this.itemsPerPage === 'undefined') {
this._itemsPerPage = this.config?.itemsPerPage || 0;
}
this.totalPages = this.calculateTotalPages();
// this class
this.pages = this.getPages(this.page, this.totalPages);
this.inited = true;
}
writeValue(value) {
this.page = value;
this.pages = this.getPages(this.page, this.totalPages);
}
getText(key) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const inputVal = this[`${key}Text`]?.();
return inputVal || this.config[`${key}Text`];
}
noPrevious() {
return this.page === 1;
}
noNext() {
return this.page === this.totalPages;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
selectPage(page, event) {
if (event) {
event.preventDefault();
}
if (!this.disabled()) {
if (event && event.target) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const target = event.target;
target.blur();
}
this.writeValue(page);
this.onChange(this.page);
}
}
// Create page object used in template
makePage(num, text, active) {
return { text, number: num, active };
}
getPages(currentPage, totalPages) {
const pages = [];
const maxSize = this._maxSize;
const rotate = this._rotate;
// Default page limits
let startPage = 1;
let endPage = totalPages;
const isMaxSized = typeof maxSize !== 'undefined' && maxSize < totalPages;
// recompute if maxSize
if (isMaxSized && maxSize) {
if (rotate) {
// Current page is displayed in the middle of the visible ones
startPage = Math.max(currentPage - Math.floor(maxSize / 2), 1);
endPage = startPage + maxSize - 1;
// Adjust if limit is exceeded
if (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}
}
else {
// Visible pages are paginated with maxSize
startPage =
(Math.ceil(currentPage / maxSize) - 1) * maxSize + 1;
// Adjust last page if limit is exceeded
endPage = Math.min(startPage + maxSize - 1, totalPages);
}
}
// Add page number links
for (let num = startPage; num <= endPage; num++) {
const page = this.makePage(num, num.toString(), num === currentPage);
pages.push(page);
}
// Add links to move between page sets
if (isMaxSized && !rotate) {
if (startPage > 1) {
const previousPageSet = this.makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
}
if (endPage < totalPages) {
const nextPageSet = this.makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
}
return pages;
}
// base class
calculateTotalPages() {
const totalPages = this.itemsPerPage < 1
? 1
: Math.ceil(this.totalItems / this.itemsPerPage);
return Math.max(totalPages || 0, 1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ElementRef }, { token: PaginationConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaginationComponent, isStandalone: true, selector: "pagination", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: true, isRequired: false, transformFunction: null }, directionLinks: { classPropertyName: "directionLinks", publicName: "directionLinks", isSignal: true, isRequired: false, transformFunction: null }, firstText: { classPropertyName: "firstText", publicName: "firstText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, lastText: { classPropertyName: "lastText", publicName: "lastText", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, pageBtnClass: { classPropertyName: "pageBtnClass", publicName: "pageBtnClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customPageTemplate: { classPropertyName: "customPageTemplate", publicName: "customPageTemplate", isSignal: true, isRequired: false, transformFunction: null }, customNextTemplate: { classPropertyName: "customNextTemplate", publicName: "customNextTemplate", isSignal: true, isRequired: false, transformFunction: null }, customPreviousTemplate: { classPropertyName: "customPreviousTemplate", publicName: "customPreviousTemplate", isSignal: true, isRequired: false, transformFunction: null }, customFirstTemplate: { classPropertyName: "customFirstTemplate", publicName: "customFirstTemplate", isSignal: true, isRequired: false, transformFunction: null }, customLastTemplate: { classPropertyName: "customLastTemplate", publicName: "customLastTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageInput: { classPropertyName: "itemsPerPageInput", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, totalItemsInput: { classPropertyName: "totalItemsInput", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { numPages: "numPages", pageChanged: "pageChanged" }, providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<ul class=\"pagination\" [ngClass]=\"classMap\">\n @if (boundaryLinks()) {\n <li class=\"pagination-first page-item\"\n [class.disabled]=\"noPrevious() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customFirstTemplate() || defaultFirstTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noPrevious() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (directionLinks()) {\n <li class=\"pagination-prev page-item\"\n [class.disabled]=\"noPrevious() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(page - 1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customPreviousTemplate() || defaultPreviousTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noPrevious() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @for (pg of pages; track pg) {\n <li\n [class.active]=\"pg.active\"\n [class.disabled]=\"disabled() && !pg.active\"\n class=\"pagination-page page-item\">\n <a class=\"page-link\" href (click)=\"selectPage(pg.number, $event)\">\n <ng-container [ngTemplateOutlet]=\"customPageTemplate() || defaultPageTemplate\"\n [ngTemplateOutletContext]=\"{disabled: disabled(), $implicit: pg, currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (directionLinks()) {\n <li class=\"pagination-next page-item\"\n [class.disabled]=\"noNext() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(page + 1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customNextTemplate() || defaultNextTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noNext() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (boundaryLinks()) {\n <li class=\"pagination-last page-item\"\n [class.disabled]=\"noNext() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(totalPages, $event)\">\n <ng-container [ngTemplateOutlet]=\"customLastTemplate() || defaultLastTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noNext() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n</ul>\n\n<ng-template #defaultPageTemplate let-page>{{ page.text }}</ng-template>\n\n<ng-template #defaultNextTemplate>{{ getText('next') }}</ng-template>\n\n<ng-template #defaultPreviousTemplate>{{ getText('previous') }}</ng-template>\n\n<ng-template #defaultFirstTemplate>{{ getText('first') }}</ng-template>\n\n<ng-template #defaultLastTemplate>{{ getText('last') }}</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'pagination', providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<ul class=\"pagination\" [ngClass]=\"classMap\">\n @if (boundaryLinks()) {\n <li class=\"pagination-first page-item\"\n [class.disabled]=\"noPrevious() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customFirstTemplate() || defaultFirstTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noPrevious() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (directionLinks()) {\n <li class=\"pagination-prev page-item\"\n [class.disabled]=\"noPrevious() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(page - 1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customPreviousTemplate() || defaultPreviousTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noPrevious() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @for (pg of pages; track pg) {\n <li\n [class.active]=\"pg.active\"\n [class.disabled]=\"disabled() && !pg.active\"\n class=\"pagination-page page-item\">\n <a class=\"page-link\" href (click)=\"selectPage(pg.number, $event)\">\n <ng-container [ngTemplateOutlet]=\"customPageTemplate() || defaultPageTemplate\"\n [ngTemplateOutletContext]=\"{disabled: disabled(), $implicit: pg, currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (directionLinks()) {\n <li class=\"pagination-next page-item\"\n [class.disabled]=\"noNext() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(page + 1, $event)\">\n <ng-container [ngTemplateOutlet]=\"customNextTemplate() || defaultNextTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noNext() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n\n @if (boundaryLinks()) {\n <li class=\"pagination-last page-item\"\n [class.disabled]=\"noNext() || disabled()\">\n <a class=\"page-link\" href (click)=\"selectPage(totalPages, $event)\">\n <ng-container [ngTemplateOutlet]=\"customLastTemplate() || defaultLastTemplate\"\n [ngTemplateOutletContext]=\"{disabled: noNext() || disabled(), currentPage: page}\">\n </ng-container>\n </a>\n </li>\n }\n</ul>\n\n<ng-template #defaultPageTemplate let-page>{{ page.text }}</ng-template>\n\n<ng-template #defaultNextTemplate>{{ getText('next') }}</ng-template>\n\n<ng-template #defaultPreviousTemplate>{{ getText('previous') }}</ng-template>\n\n<ng-template #defaultFirstTemplate>{{ getText('first') }}</ng-template>\n\n<ng-template #defaultLastTemplate>{{ getText('last') }}</ng-template>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: PaginationConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], boundaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryLinks", required: false }] }], directionLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "directionLinks", required: false }] }], firstText: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstText", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], lastText: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastText", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], pageBtnClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageBtnClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customPageTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customPageTemplate", required: false }] }], customNextTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNextTemplate", required: false }] }], customPreviousTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customPreviousTemplate", required: false }] }], customFirstTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFirstTemplate", required: false }] }], customLastTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customLastTemplate", required: false }] }], itemsPerPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], totalItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], numPages: [{ type: i0.Output, args: ["numPages"] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
class PaginationModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PaginationModule, imports: [CommonModule, PagerComponent, PaginationComponent], exports: [PagerComponent, PaginationComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, PagerComponent, PaginationComponent],
exports: [PagerComponent, PaginationComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PagerComponent, PaginationComponent, PaginationConfig, PaginationModule };
//# sourceMappingURL=ngx-bootstrap-pagination.mjs.map