1055 lines
50 KiB
JavaScript
1055 lines
50 KiB
JavaScript
import { __esDecorate, __runInitializers } from 'tslib';
|
|
import { Directionality } from '@angular/cdk/bidi';
|
|
import { NgTemplateOutlet } from '@angular/common';
|
|
import * as i0 from '@angular/core';
|
|
import { EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ChangeDetectorRef, DestroyRef, ElementRef, Renderer2, ViewChild, input, numberAttribute, booleanAttribute, NgModule } from '@angular/core';
|
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
import { ReplaySubject } from 'rxjs';
|
|
import { WithConfig, NzConfigService } from 'ng-zorro-antd/core/config';
|
|
import { NzBreakpointService, gridResponsiveMap, NzBreakpointEnum } from 'ng-zorro-antd/core/services';
|
|
import { NzI18nService } from 'ng-zorro-antd/i18n';
|
|
import * as i1 from 'ng-zorro-antd/icon';
|
|
import { NzIconModule } from 'ng-zorro-antd/icon';
|
|
import * as i2 from '@angular/forms';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { toNumber } from 'ng-zorro-antd/core/util';
|
|
import * as i1$1 from 'ng-zorro-antd/select';
|
|
import { NzSelectModule } from 'ng-zorro-antd/select';
|
|
|
|
/* eslint-disable */
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzPaginationItemComponent {
|
|
active = false;
|
|
locale;
|
|
index = null;
|
|
disabled = false;
|
|
direction = 'ltr';
|
|
type = null;
|
|
itemRender = null;
|
|
diffIndex = new EventEmitter();
|
|
gotoIndex = new EventEmitter();
|
|
title = null;
|
|
clickItem() {
|
|
if (!this.disabled) {
|
|
if (this.type === 'page') {
|
|
this.gotoIndex.emit(this.index);
|
|
}
|
|
else {
|
|
this.diffIndex.emit({
|
|
next: 1,
|
|
prev: -1,
|
|
prev_5: -5,
|
|
next_5: 5
|
|
}[this.type]);
|
|
}
|
|
}
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { locale, index, type } = changes;
|
|
if (locale || index || type) {
|
|
this.title = {
|
|
page: `${this.index}`,
|
|
next: this.locale?.next_page,
|
|
prev: this.locale?.prev_page,
|
|
prev_5: this.locale?.prev_5,
|
|
next_5: this.locale?.next_5
|
|
}[this.type];
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzPaginationItemComponent, isStandalone: true, selector: "li[nz-pagination-item]", inputs: { active: "active", locale: "locale", index: "index", disabled: "disabled", direction: "direction", type: "type", itemRender: "itemRender" }, outputs: { diffIndex: "diffIndex", gotoIndex: "gotoIndex" }, host: { listeners: { "click": "clickItem()" }, properties: { "class.ant-pagination-prev": "type === 'prev'", "class.ant-pagination-next": "type === 'next'", "class.ant-pagination-item": "type === 'page'", "class.ant-pagination-jump-prev": "type === 'prev_5'", "class.ant-pagination-jump-prev-custom-icon": "type === 'prev_5'", "class.ant-pagination-jump-next": "type === 'next_5'", "class.ant-pagination-jump-next-custom-icon": "type === 'next_5'", "class.ant-pagination-disabled": "disabled", "class.ant-pagination-item-active": "active", "attr.title": "title" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
<ng-template #renderItemTemplate let-type let-page="page">
|
|
@switch (type) {
|
|
@case ('page') {
|
|
<a>{{ page }}</a>
|
|
}
|
|
@case ('prev') {
|
|
<button type="button" [disabled]="disabled" [attr.title]="locale.prev_page" class="ant-pagination-item-link">
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="right" />
|
|
} @else {
|
|
<nz-icon nzType="left" />
|
|
}
|
|
</button>
|
|
}
|
|
@case ('next') {
|
|
<button type="button" [disabled]="disabled" [attr.title]="locale.next_page" class="ant-pagination-item-link">
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="left" />
|
|
} @else {
|
|
<nz-icon nzType="right" />
|
|
}
|
|
</button>
|
|
}
|
|
@default {
|
|
<a class="ant-pagination-item-link">
|
|
<div class="ant-pagination-item-container">
|
|
@switch (type) {
|
|
@case ('prev_5') {
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="double-right" class="ant-pagination-item-link-icon" />
|
|
} @else {
|
|
<nz-icon nzType="double-left" class="ant-pagination-item-link-icon" />
|
|
}
|
|
}
|
|
@case ('next_5') {
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="double-left" class="ant-pagination-item-link-icon" />
|
|
} @else {
|
|
<nz-icon nzType="double-right" class="ant-pagination-item-link-icon" />
|
|
}
|
|
}
|
|
}
|
|
<span class="ant-pagination-item-ellipsis">•••</span>
|
|
</div>
|
|
</a>
|
|
}
|
|
}
|
|
</ng-template>
|
|
<ng-template
|
|
[ngTemplateOutlet]="itemRender || renderItemTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: type, page: index }"
|
|
/>
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationItemComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'li[nz-pagination-item]',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<ng-template #renderItemTemplate let-type let-page="page">
|
|
@switch (type) {
|
|
@case ('page') {
|
|
<a>{{ page }}</a>
|
|
}
|
|
@case ('prev') {
|
|
<button type="button" [disabled]="disabled" [attr.title]="locale.prev_page" class="ant-pagination-item-link">
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="right" />
|
|
} @else {
|
|
<nz-icon nzType="left" />
|
|
}
|
|
</button>
|
|
}
|
|
@case ('next') {
|
|
<button type="button" [disabled]="disabled" [attr.title]="locale.next_page" class="ant-pagination-item-link">
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="left" />
|
|
} @else {
|
|
<nz-icon nzType="right" />
|
|
}
|
|
</button>
|
|
}
|
|
@default {
|
|
<a class="ant-pagination-item-link">
|
|
<div class="ant-pagination-item-container">
|
|
@switch (type) {
|
|
@case ('prev_5') {
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="double-right" class="ant-pagination-item-link-icon" />
|
|
} @else {
|
|
<nz-icon nzType="double-left" class="ant-pagination-item-link-icon" />
|
|
}
|
|
}
|
|
@case ('next_5') {
|
|
@if (direction === 'rtl') {
|
|
<nz-icon nzType="double-left" class="ant-pagination-item-link-icon" />
|
|
} @else {
|
|
<nz-icon nzType="double-right" class="ant-pagination-item-link-icon" />
|
|
}
|
|
}
|
|
}
|
|
<span class="ant-pagination-item-ellipsis">•••</span>
|
|
</div>
|
|
</a>
|
|
}
|
|
}
|
|
</ng-template>
|
|
<ng-template
|
|
[ngTemplateOutlet]="itemRender || renderItemTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: type, page: index }"
|
|
/>
|
|
`,
|
|
host: {
|
|
'[class.ant-pagination-prev]': `type === 'prev'`,
|
|
'[class.ant-pagination-next]': `type === 'next'`,
|
|
'[class.ant-pagination-item]': `type === 'page'`,
|
|
'[class.ant-pagination-jump-prev]': `type === 'prev_5'`,
|
|
'[class.ant-pagination-jump-prev-custom-icon]': `type === 'prev_5'`,
|
|
'[class.ant-pagination-jump-next]': `type === 'next_5'`,
|
|
'[class.ant-pagination-jump-next-custom-icon]': `type === 'next_5'`,
|
|
'[class.ant-pagination-disabled]': 'disabled',
|
|
'[class.ant-pagination-item-active]': 'active',
|
|
'[attr.title]': 'title',
|
|
'(click)': 'clickItem()'
|
|
},
|
|
imports: [NzIconModule, NgTemplateOutlet]
|
|
}]
|
|
}], propDecorators: { active: [{
|
|
type: Input
|
|
}], locale: [{
|
|
type: Input
|
|
}], index: [{
|
|
type: Input
|
|
}], disabled: [{
|
|
type: Input
|
|
}], direction: [{
|
|
type: Input
|
|
}], type: [{
|
|
type: Input
|
|
}], itemRender: [{
|
|
type: Input
|
|
}], diffIndex: [{
|
|
type: Output
|
|
}], gotoIndex: [{
|
|
type: Output
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzPaginationOptionsComponent {
|
|
nzSize = 'default';
|
|
disabled = false;
|
|
showSizeChanger = false;
|
|
showQuickJumper = false;
|
|
locale;
|
|
total = 0;
|
|
pageIndex = 1;
|
|
pageSize = 10;
|
|
pageSizeOptions = [];
|
|
pageIndexChange = new EventEmitter();
|
|
pageSizeChange = new EventEmitter();
|
|
listOfPageSizeOption = [];
|
|
onPageSizeChange(size) {
|
|
if (this.pageSize !== size) {
|
|
this.pageSizeChange.next(size);
|
|
}
|
|
}
|
|
jumpToPageViaInput($event) {
|
|
const target = $event.target;
|
|
const index = Math.floor(toNumber(target.value, this.pageIndex));
|
|
this.pageIndexChange.next(index);
|
|
target.value = '';
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { pageSize, pageSizeOptions, locale } = changes;
|
|
if (pageSize || pageSizeOptions || locale) {
|
|
this.listOfPageSizeOption = [...new Set([...this.pageSizeOptions, this.pageSize])].map(item => ({
|
|
value: item,
|
|
label: `${item} ${this.locale.items_per_page}`
|
|
}));
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzPaginationOptionsComponent, isStandalone: true, selector: "li[nz-pagination-options]", inputs: { nzSize: "nzSize", disabled: "disabled", showSizeChanger: "showSizeChanger", showQuickJumper: "showQuickJumper", locale: "locale", total: "total", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange" }, host: { classAttribute: "ant-pagination-options" }, usesOnChanges: true, ngImport: i0, template: `
|
|
@if (showSizeChanger) {
|
|
<nz-select
|
|
class="ant-pagination-options-size-changer"
|
|
[nzDisabled]="disabled"
|
|
[nzSize]="nzSize"
|
|
[ngModel]="pageSize"
|
|
(ngModelChange)="onPageSizeChange($event)"
|
|
>
|
|
@for (option of listOfPageSizeOption; track option.value) {
|
|
<nz-option [nzLabel]="option.label" [nzValue]="option.value" />
|
|
}
|
|
</nz-select>
|
|
}
|
|
|
|
@if (showQuickJumper) {
|
|
<div class="ant-pagination-options-quick-jumper">
|
|
{{ locale.jump_to }}
|
|
<input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
|
|
{{ locale.page }}
|
|
</div>
|
|
}
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i1$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i1$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationOptionsComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'li[nz-pagination-options]',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (showSizeChanger) {
|
|
<nz-select
|
|
class="ant-pagination-options-size-changer"
|
|
[nzDisabled]="disabled"
|
|
[nzSize]="nzSize"
|
|
[ngModel]="pageSize"
|
|
(ngModelChange)="onPageSizeChange($event)"
|
|
>
|
|
@for (option of listOfPageSizeOption; track option.value) {
|
|
<nz-option [nzLabel]="option.label" [nzValue]="option.value" />
|
|
}
|
|
</nz-select>
|
|
}
|
|
|
|
@if (showQuickJumper) {
|
|
<div class="ant-pagination-options-quick-jumper">
|
|
{{ locale.jump_to }}
|
|
<input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
|
|
{{ locale.page }}
|
|
</div>
|
|
}
|
|
`,
|
|
host: { class: 'ant-pagination-options' },
|
|
imports: [NzSelectModule, FormsModule]
|
|
}]
|
|
}], propDecorators: { nzSize: [{
|
|
type: Input
|
|
}], disabled: [{
|
|
type: Input
|
|
}], showSizeChanger: [{
|
|
type: Input
|
|
}], showQuickJumper: [{
|
|
type: Input
|
|
}], locale: [{
|
|
type: Input
|
|
}], total: [{
|
|
type: Input
|
|
}], pageIndex: [{
|
|
type: Input
|
|
}], pageSize: [{
|
|
type: Input
|
|
}], pageSizeOptions: [{
|
|
type: Input
|
|
}], pageIndexChange: [{
|
|
type: Output
|
|
}], pageSizeChange: [{
|
|
type: Output
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzPaginationDefaultComponent {
|
|
cdr = inject(ChangeDetectorRef);
|
|
directionality = inject(Directionality);
|
|
destroyRef = inject(DestroyRef);
|
|
template;
|
|
nzSize = 'default';
|
|
itemRender = null;
|
|
showTotal = null;
|
|
disabled = false;
|
|
locale;
|
|
showSizeChanger = false;
|
|
showQuickJumper = false;
|
|
total = 0;
|
|
pageIndex = 1;
|
|
pageSize = 10;
|
|
pageSizeOptions = [10, 20, 30, 40];
|
|
pageIndexChange = new EventEmitter();
|
|
pageSizeChange = new EventEmitter();
|
|
ranges = [0, 0];
|
|
listOfPageItem = [];
|
|
dir = 'ltr';
|
|
constructor() {
|
|
const el = inject((ElementRef)).nativeElement;
|
|
const renderer = inject(Renderer2);
|
|
renderer.removeChild(renderer.parentNode(el), el);
|
|
}
|
|
ngOnInit() {
|
|
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
|
|
this.dir = direction;
|
|
this.cdr.detectChanges();
|
|
});
|
|
this.dir = this.directionality.value;
|
|
}
|
|
jumpPage(index) {
|
|
this.onPageIndexChange(index);
|
|
}
|
|
jumpDiff(diff) {
|
|
this.jumpPage(this.pageIndex + diff);
|
|
}
|
|
trackByPageItem(_, value) {
|
|
return `${value.type}-${value.index}`;
|
|
}
|
|
onPageIndexChange(index) {
|
|
this.pageIndexChange.next(index);
|
|
}
|
|
onPageSizeChange(size) {
|
|
this.pageSizeChange.next(size);
|
|
}
|
|
getLastIndex(total, pageSize) {
|
|
return Math.ceil(total / pageSize);
|
|
}
|
|
buildIndexes() {
|
|
const lastIndex = this.getLastIndex(this.total, this.pageSize);
|
|
this.listOfPageItem = this.getListOfPageItem(this.pageIndex, lastIndex);
|
|
}
|
|
getListOfPageItem(pageIndex, lastIndex) {
|
|
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
|
const concatWithPrevNext = (listOfPage) => {
|
|
const prevItem = {
|
|
type: 'prev',
|
|
disabled: pageIndex === 1
|
|
};
|
|
const nextItem = {
|
|
type: 'next',
|
|
disabled: pageIndex === lastIndex
|
|
};
|
|
return [prevItem, ...listOfPage, nextItem];
|
|
};
|
|
const generatePage = (start, end) => {
|
|
const list = [];
|
|
for (let i = start; i <= end; i++) {
|
|
list.push({ index: i, type: 'page' });
|
|
}
|
|
return list;
|
|
};
|
|
if (lastIndex <= 9) {
|
|
return concatWithPrevNext(generatePage(1, lastIndex));
|
|
}
|
|
else {
|
|
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
|
const generateRangeItem = (selected, last) => {
|
|
let listOfRange = [];
|
|
const prevFiveItem = {
|
|
type: 'prev_5'
|
|
};
|
|
const nextFiveItem = {
|
|
type: 'next_5'
|
|
};
|
|
const firstPageItem = generatePage(1, 1);
|
|
const lastPageItem = generatePage(lastIndex, lastIndex);
|
|
if (selected < 5) {
|
|
// If the 4th is selected, one more page will be displayed.
|
|
const maxLeft = selected === 4 ? 6 : 5;
|
|
listOfRange = [...generatePage(2, maxLeft), nextFiveItem];
|
|
}
|
|
else if (selected < last - 3) {
|
|
listOfRange = [prevFiveItem, ...generatePage(selected - 2, selected + 2), nextFiveItem];
|
|
}
|
|
else {
|
|
// If the 4th from last is selected, one more page will be displayed.
|
|
const minRight = selected === last - 3 ? last - 5 : last - 4;
|
|
listOfRange = [prevFiveItem, ...generatePage(minRight, last - 1)];
|
|
}
|
|
return [...firstPageItem, ...listOfRange, ...lastPageItem];
|
|
};
|
|
return concatWithPrevNext(generateRangeItem(pageIndex, lastIndex));
|
|
}
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { pageIndex, pageSize, total } = changes;
|
|
if (pageIndex || pageSize || total) {
|
|
this.ranges = [(this.pageIndex - 1) * this.pageSize + 1, Math.min(this.pageIndex * this.pageSize, this.total)];
|
|
this.buildIndexes();
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzPaginationDefaultComponent, isStandalone: true, selector: "nz-pagination-default", inputs: { nzSize: "nzSize", itemRender: "itemRender", showTotal: "showTotal", disabled: "disabled", locale: "locale", showSizeChanger: "showSizeChanger", showQuickJumper: "showQuickJumper", total: "total", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "class.ant-pagination-rtl": "dir === 'rtl'" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["containerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
<ng-template #containerTemplate>
|
|
<ul>
|
|
@if (showTotal) {
|
|
<li class="ant-pagination-total-text">
|
|
<ng-template
|
|
[ngTemplateOutlet]="showTotal"
|
|
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
|
|
/>
|
|
</li>
|
|
}
|
|
|
|
@for (page of listOfPageItem; track trackByPageItem($index, page)) {
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[type]="page.type"
|
|
[index]="page.index"
|
|
[disabled]="!!page.disabled"
|
|
[itemRender]="itemRender"
|
|
[active]="pageIndex === page.index"
|
|
(gotoIndex)="jumpPage($event)"
|
|
(diffIndex)="jumpDiff($event)"
|
|
[direction]="dir"
|
|
></li>
|
|
}
|
|
|
|
@if (showQuickJumper || showSizeChanger) {
|
|
<li
|
|
nz-pagination-options
|
|
[total]="total"
|
|
[locale]="locale"
|
|
[disabled]="disabled"
|
|
[nzSize]="nzSize"
|
|
[showSizeChanger]="showSizeChanger"
|
|
[showQuickJumper]="showQuickJumper"
|
|
[pageIndex]="pageIndex"
|
|
[pageSize]="pageSize"
|
|
[pageSizeOptions]="pageSizeOptions"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
(pageSizeChange)="onPageSizeChange($event)"
|
|
></li>
|
|
}
|
|
</ul>
|
|
</ng-template>
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NzPaginationItemComponent, selector: "li[nz-pagination-item]", inputs: ["active", "locale", "index", "disabled", "direction", "type", "itemRender"], outputs: ["diffIndex", "gotoIndex"] }, { kind: "component", type: NzPaginationOptionsComponent, selector: "li[nz-pagination-options]", inputs: ["nzSize", "disabled", "showSizeChanger", "showQuickJumper", "locale", "total", "pageIndex", "pageSize", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationDefaultComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-pagination-default',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<ng-template #containerTemplate>
|
|
<ul>
|
|
@if (showTotal) {
|
|
<li class="ant-pagination-total-text">
|
|
<ng-template
|
|
[ngTemplateOutlet]="showTotal"
|
|
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
|
|
/>
|
|
</li>
|
|
}
|
|
|
|
@for (page of listOfPageItem; track trackByPageItem($index, page)) {
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[type]="page.type"
|
|
[index]="page.index"
|
|
[disabled]="!!page.disabled"
|
|
[itemRender]="itemRender"
|
|
[active]="pageIndex === page.index"
|
|
(gotoIndex)="jumpPage($event)"
|
|
(diffIndex)="jumpDiff($event)"
|
|
[direction]="dir"
|
|
></li>
|
|
}
|
|
|
|
@if (showQuickJumper || showSizeChanger) {
|
|
<li
|
|
nz-pagination-options
|
|
[total]="total"
|
|
[locale]="locale"
|
|
[disabled]="disabled"
|
|
[nzSize]="nzSize"
|
|
[showSizeChanger]="showSizeChanger"
|
|
[showQuickJumper]="showQuickJumper"
|
|
[pageIndex]="pageIndex"
|
|
[pageSize]="pageSize"
|
|
[pageSizeOptions]="pageSizeOptions"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
(pageSizeChange)="onPageSizeChange($event)"
|
|
></li>
|
|
}
|
|
</ul>
|
|
</ng-template>
|
|
`,
|
|
imports: [NgTemplateOutlet, NzPaginationItemComponent, NzPaginationOptionsComponent],
|
|
host: {
|
|
'[class.ant-pagination-rtl]': "dir === 'rtl'"
|
|
}
|
|
}]
|
|
}], ctorParameters: () => [], propDecorators: { template: [{
|
|
type: ViewChild,
|
|
args: ['containerTemplate', { static: true }]
|
|
}], nzSize: [{
|
|
type: Input
|
|
}], itemRender: [{
|
|
type: Input
|
|
}], showTotal: [{
|
|
type: Input
|
|
}], disabled: [{
|
|
type: Input
|
|
}], locale: [{
|
|
type: Input
|
|
}], showSizeChanger: [{
|
|
type: Input
|
|
}], showQuickJumper: [{
|
|
type: Input
|
|
}], total: [{
|
|
type: Input
|
|
}], pageIndex: [{
|
|
type: Input
|
|
}], pageSize: [{
|
|
type: Input
|
|
}], pageSizeOptions: [{
|
|
type: Input
|
|
}], pageIndexChange: [{
|
|
type: Output
|
|
}], pageSizeChange: [{
|
|
type: Output
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzPaginationSimpleComponent {
|
|
cdr = inject(ChangeDetectorRef);
|
|
directionality = inject(Directionality);
|
|
destroyRef = inject(DestroyRef);
|
|
template;
|
|
itemRender = null;
|
|
disabled = false;
|
|
locale;
|
|
total = 0;
|
|
pageIndex = 1;
|
|
pageSize = 10;
|
|
pageIndexChange = new EventEmitter();
|
|
lastIndex = 0;
|
|
isFirstIndex = false;
|
|
isLastIndex = false;
|
|
dir = 'ltr';
|
|
constructor() {
|
|
const el = inject((ElementRef)).nativeElement;
|
|
const renderer = inject(Renderer2);
|
|
renderer.removeChild(renderer.parentNode(el), el);
|
|
}
|
|
ngOnInit() {
|
|
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
|
|
this.dir = direction;
|
|
this.cdr.detectChanges();
|
|
});
|
|
this.dir = this.directionality.value;
|
|
}
|
|
jumpToPageViaInput($event) {
|
|
const target = $event.target;
|
|
const index = toNumber(target.value, this.pageIndex);
|
|
this.onPageIndexChange(index);
|
|
target.value = `${this.pageIndex}`;
|
|
}
|
|
prePage() {
|
|
this.onPageIndexChange(this.pageIndex - 1);
|
|
}
|
|
nextPage() {
|
|
this.onPageIndexChange(this.pageIndex + 1);
|
|
}
|
|
onPageIndexChange(index) {
|
|
this.pageIndexChange.next(index);
|
|
}
|
|
updateBindingValue() {
|
|
this.lastIndex = Math.ceil(this.total / this.pageSize);
|
|
this.isFirstIndex = this.pageIndex === 1;
|
|
this.isLastIndex = this.pageIndex === this.lastIndex;
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { pageIndex, total, pageSize } = changes;
|
|
if (pageIndex || total || pageSize) {
|
|
this.updateBindingValue();
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NzPaginationSimpleComponent, isStandalone: true, selector: "nz-pagination-simple", inputs: { itemRender: "itemRender", disabled: "disabled", locale: "locale", total: "total", pageIndex: "pageIndex", pageSize: "pageSize" }, outputs: { pageIndexChange: "pageIndexChange" }, host: { properties: { "class.ant-pagination-rtl": "dir === 'rtl'" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["containerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
<ng-template #containerTemplate>
|
|
<ul>
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[attr.title]="locale.prev_page"
|
|
[disabled]="isFirstIndex"
|
|
[direction]="dir"
|
|
(click)="prePage()"
|
|
type="prev"
|
|
[itemRender]="itemRender"
|
|
></li>
|
|
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
|
|
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
|
|
<span class="ant-pagination-slash">/</span>
|
|
{{ lastIndex }}
|
|
</li>
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[attr.title]="locale?.next_page"
|
|
[disabled]="isLastIndex"
|
|
[direction]="dir"
|
|
(click)="nextPage()"
|
|
type="next"
|
|
[itemRender]="itemRender"
|
|
></li>
|
|
</ul>
|
|
</ng-template>
|
|
`, isInline: true, dependencies: [{ kind: "component", type: NzPaginationItemComponent, selector: "li[nz-pagination-item]", inputs: ["active", "locale", "index", "disabled", "direction", "type", "itemRender"], outputs: ["diffIndex", "gotoIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationSimpleComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-pagination-simple',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<ng-template #containerTemplate>
|
|
<ul>
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[attr.title]="locale.prev_page"
|
|
[disabled]="isFirstIndex"
|
|
[direction]="dir"
|
|
(click)="prePage()"
|
|
type="prev"
|
|
[itemRender]="itemRender"
|
|
></li>
|
|
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
|
|
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
|
|
<span class="ant-pagination-slash">/</span>
|
|
{{ lastIndex }}
|
|
</li>
|
|
<li
|
|
nz-pagination-item
|
|
[locale]="locale"
|
|
[attr.title]="locale?.next_page"
|
|
[disabled]="isLastIndex"
|
|
[direction]="dir"
|
|
(click)="nextPage()"
|
|
type="next"
|
|
[itemRender]="itemRender"
|
|
></li>
|
|
</ul>
|
|
</ng-template>
|
|
`,
|
|
imports: [NzPaginationItemComponent],
|
|
host: {
|
|
'[class.ant-pagination-rtl]': "dir === 'rtl'"
|
|
}
|
|
}]
|
|
}], ctorParameters: () => [], propDecorators: { template: [{
|
|
type: ViewChild,
|
|
args: ['containerTemplate', { static: true }]
|
|
}], itemRender: [{
|
|
type: Input
|
|
}], disabled: [{
|
|
type: Input
|
|
}], locale: [{
|
|
type: Input
|
|
}], total: [{
|
|
type: Input
|
|
}], pageIndex: [{
|
|
type: Input
|
|
}], pageSize: [{
|
|
type: Input
|
|
}], pageIndexChange: [{
|
|
type: Output
|
|
}] } });
|
|
|
|
const NZ_CONFIG_MODULE_NAME = 'pagination';
|
|
let NzPaginationComponent = (() => {
|
|
let _nzSize_decorators;
|
|
let _nzSize_initializers = [];
|
|
let _nzSize_extraInitializers = [];
|
|
let _nzPageSizeOptions_decorators;
|
|
let _nzPageSizeOptions_initializers = [];
|
|
let _nzPageSizeOptions_extraInitializers = [];
|
|
let _nzShowSizeChanger_decorators;
|
|
let _nzShowSizeChanger_initializers = [];
|
|
let _nzShowSizeChanger_extraInitializers = [];
|
|
let _nzShowQuickJumper_decorators;
|
|
let _nzShowQuickJumper_initializers = [];
|
|
let _nzShowQuickJumper_extraInitializers = [];
|
|
let _nzSimple_decorators;
|
|
let _nzSimple_initializers = [];
|
|
let _nzSimple_extraInitializers = [];
|
|
return class NzPaginationComponent {
|
|
static {
|
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
|
|
_nzSize_decorators = [WithConfig()];
|
|
_nzPageSizeOptions_decorators = [WithConfig()];
|
|
_nzShowSizeChanger_decorators = [WithConfig()];
|
|
_nzShowQuickJumper_decorators = [WithConfig()];
|
|
_nzSimple_decorators = [WithConfig()];
|
|
__esDecorate(null, null, _nzSize_decorators, { kind: "field", name: "nzSize", static: false, private: false, access: { has: obj => "nzSize" in obj, get: obj => obj.nzSize, set: (obj, value) => { obj.nzSize = value; } }, metadata: _metadata }, _nzSize_initializers, _nzSize_extraInitializers);
|
|
__esDecorate(null, null, _nzPageSizeOptions_decorators, { kind: "field", name: "nzPageSizeOptions", static: false, private: false, access: { has: obj => "nzPageSizeOptions" in obj, get: obj => obj.nzPageSizeOptions, set: (obj, value) => { obj.nzPageSizeOptions = value; } }, metadata: _metadata }, _nzPageSizeOptions_initializers, _nzPageSizeOptions_extraInitializers);
|
|
__esDecorate(null, null, _nzShowSizeChanger_decorators, { kind: "field", name: "nzShowSizeChanger", static: false, private: false, access: { has: obj => "nzShowSizeChanger" in obj, get: obj => obj.nzShowSizeChanger, set: (obj, value) => { obj.nzShowSizeChanger = value; } }, metadata: _metadata }, _nzShowSizeChanger_initializers, _nzShowSizeChanger_extraInitializers);
|
|
__esDecorate(null, null, _nzShowQuickJumper_decorators, { kind: "field", name: "nzShowQuickJumper", static: false, private: false, access: { has: obj => "nzShowQuickJumper" in obj, get: obj => obj.nzShowQuickJumper, set: (obj, value) => { obj.nzShowQuickJumper = value; } }, metadata: _metadata }, _nzShowQuickJumper_initializers, _nzShowQuickJumper_extraInitializers);
|
|
__esDecorate(null, null, _nzSimple_decorators, { kind: "field", name: "nzSimple", static: false, private: false, access: { has: obj => "nzSimple" in obj, get: obj => obj.nzSimple, set: (obj, value) => { obj.nzSimple = value; } }, metadata: _metadata }, _nzSimple_initializers, _nzSimple_extraInitializers);
|
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
}
|
|
_nzModuleName = NZ_CONFIG_MODULE_NAME;
|
|
i18n = inject(NzI18nService);
|
|
cdr = inject(ChangeDetectorRef);
|
|
breakpointService = inject(NzBreakpointService);
|
|
nzConfigService = inject(NzConfigService);
|
|
directionality = inject(Directionality);
|
|
destroyRef = inject(DestroyRef);
|
|
nzPageSizeChange = new EventEmitter();
|
|
nzPageIndexChange = new EventEmitter();
|
|
nzShowTotal = null;
|
|
nzItemRender = null;
|
|
nzSize = __runInitializers(this, _nzSize_initializers, 'default');
|
|
nzPageSizeOptions = (__runInitializers(this, _nzSize_extraInitializers), __runInitializers(this, _nzPageSizeOptions_initializers, [10, 20, 30, 40]));
|
|
nzShowSizeChanger = (__runInitializers(this, _nzPageSizeOptions_extraInitializers), __runInitializers(this, _nzShowSizeChanger_initializers, false));
|
|
nzShowQuickJumper = (__runInitializers(this, _nzShowSizeChanger_extraInitializers), __runInitializers(this, _nzShowQuickJumper_initializers, false));
|
|
nzSimple = (__runInitializers(this, _nzShowQuickJumper_extraInitializers), __runInitializers(this, _nzSimple_initializers, false));
|
|
nzDisabled = (__runInitializers(this, _nzSimple_extraInitializers), false);
|
|
nzResponsive = false;
|
|
nzHideOnSinglePage = false;
|
|
nzTotal = 0;
|
|
nzPageIndex = 1;
|
|
nzPageSize = 10;
|
|
nzAlign = input('start', ...(ngDevMode ? [{ debugName: "nzAlign" }] : []));
|
|
showPagination = true;
|
|
locale;
|
|
size = 'default';
|
|
dir = 'ltr';
|
|
total$ = new ReplaySubject(1);
|
|
validatePageIndex(value, lastIndex) {
|
|
if (value > lastIndex) {
|
|
return lastIndex;
|
|
}
|
|
else if (value < 1) {
|
|
return 1;
|
|
}
|
|
else {
|
|
return value;
|
|
}
|
|
}
|
|
onPageIndexChange(index) {
|
|
const lastIndex = this.getLastIndex(this.nzTotal, this.nzPageSize);
|
|
const validIndex = this.validatePageIndex(index, lastIndex);
|
|
if (validIndex !== this.nzPageIndex && !this.nzDisabled) {
|
|
this.nzPageIndex = validIndex;
|
|
this.nzPageIndexChange.emit(this.nzPageIndex);
|
|
}
|
|
}
|
|
onPageSizeChange(size) {
|
|
this.nzPageSize = size;
|
|
this.nzPageSizeChange.emit(size);
|
|
const lastIndex = this.getLastIndex(this.nzTotal, this.nzPageSize);
|
|
if (this.nzPageIndex > lastIndex) {
|
|
this.onPageIndexChange(lastIndex);
|
|
}
|
|
}
|
|
onTotalChange(total) {
|
|
const lastIndex = this.getLastIndex(total, this.nzPageSize);
|
|
if (this.nzPageIndex > lastIndex) {
|
|
Promise.resolve().then(() => {
|
|
this.onPageIndexChange(lastIndex);
|
|
this.cdr.markForCheck();
|
|
});
|
|
}
|
|
}
|
|
getLastIndex(total, pageSize) {
|
|
return Math.ceil(total / pageSize);
|
|
}
|
|
ngOnInit() {
|
|
this.i18n.localeChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
this.locale = this.i18n.getLocaleData('Pagination');
|
|
this.cdr.markForCheck();
|
|
});
|
|
this.total$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(total => {
|
|
this.onTotalChange(total);
|
|
});
|
|
this.breakpointService
|
|
.subscribe(gridResponsiveMap)
|
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
.subscribe(bp => {
|
|
if (this.nzResponsive) {
|
|
this.size = bp === NzBreakpointEnum.xs ? 'small' : 'default';
|
|
this.cdr.markForCheck();
|
|
}
|
|
});
|
|
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
|
|
this.dir = direction;
|
|
this.cdr.detectChanges();
|
|
});
|
|
this.dir = this.directionality.value;
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { nzHideOnSinglePage, nzTotal, nzPageSize, nzSize } = changes;
|
|
if (nzTotal) {
|
|
this.total$.next(this.nzTotal);
|
|
}
|
|
if (nzHideOnSinglePage || nzTotal || nzPageSize) {
|
|
this.showPagination =
|
|
(this.nzHideOnSinglePage && this.nzTotal > this.nzPageSize) || (this.nzTotal > 0 && !this.nzHideOnSinglePage);
|
|
}
|
|
if (nzSize) {
|
|
this.size = nzSize.currentValue;
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzPaginationComponent, isStandalone: true, selector: "nz-pagination", inputs: { nzShowTotal: { classPropertyName: "nzShowTotal", publicName: "nzShowTotal", isSignal: false, isRequired: false, transformFunction: null }, nzItemRender: { classPropertyName: "nzItemRender", publicName: "nzItemRender", isSignal: false, isRequired: false, transformFunction: null }, nzSize: { classPropertyName: "nzSize", publicName: "nzSize", isSignal: false, isRequired: false, transformFunction: null }, nzPageSizeOptions: { classPropertyName: "nzPageSizeOptions", publicName: "nzPageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, nzShowSizeChanger: { classPropertyName: "nzShowSizeChanger", publicName: "nzShowSizeChanger", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzShowQuickJumper: { classPropertyName: "nzShowQuickJumper", publicName: "nzShowQuickJumper", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzSimple: { classPropertyName: "nzSimple", publicName: "nzSimple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzDisabled: { classPropertyName: "nzDisabled", publicName: "nzDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzResponsive: { classPropertyName: "nzResponsive", publicName: "nzResponsive", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzHideOnSinglePage: { classPropertyName: "nzHideOnSinglePage", publicName: "nzHideOnSinglePage", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nzTotal: { classPropertyName: "nzTotal", publicName: "nzTotal", isSignal: false, isRequired: false, transformFunction: numberAttribute }, nzPageIndex: { classPropertyName: "nzPageIndex", publicName: "nzPageIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, nzPageSize: { classPropertyName: "nzPageSize", publicName: "nzPageSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, nzAlign: { classPropertyName: "nzAlign", publicName: "nzAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzPageSizeChange: "nzPageSizeChange", nzPageIndexChange: "nzPageIndexChange" }, host: { properties: { "class.ant-pagination-simple": "nzSimple", "class.ant-pagination-disabled": "nzDisabled", "class.ant-pagination-mini": "!nzSimple && size === 'small'", "class.ant-pagination-rtl": "dir === 'rtl'", "class.ant-pagination-start": "nzAlign() === \"start\"", "class.ant-pagination-center": "nzAlign() === \"center\"", "class.ant-pagination-end": "nzAlign() === \"end\"" }, classAttribute: "ant-pagination" }, exportAs: ["nzPagination"], usesOnChanges: true, ngImport: i0, template: `
|
|
@if (showPagination) {
|
|
@if (nzSimple) {
|
|
<ng-template [ngTemplateOutlet]="simplePagination.template" />
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="defaultPagination.template" />
|
|
}
|
|
}
|
|
|
|
<nz-pagination-simple
|
|
#simplePagination
|
|
[disabled]="nzDisabled"
|
|
[itemRender]="nzItemRender"
|
|
[locale]="locale"
|
|
[pageSize]="nzPageSize"
|
|
[total]="nzTotal"
|
|
[pageIndex]="nzPageIndex"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
/>
|
|
<nz-pagination-default
|
|
#defaultPagination
|
|
[nzSize]="size"
|
|
[itemRender]="nzItemRender"
|
|
[showTotal]="nzShowTotal"
|
|
[disabled]="nzDisabled"
|
|
[locale]="locale"
|
|
[showSizeChanger]="nzShowSizeChanger"
|
|
[showQuickJumper]="nzShowQuickJumper"
|
|
[total]="nzTotal"
|
|
[pageIndex]="nzPageIndex"
|
|
[pageSize]="nzPageSize"
|
|
[pageSizeOptions]="nzPageSizeOptions"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
(pageSizeChange)="onPageSizeChange($event)"
|
|
/>
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NzPaginationSimpleComponent, selector: "nz-pagination-simple", inputs: ["itemRender", "disabled", "locale", "total", "pageIndex", "pageSize"], outputs: ["pageIndexChange"] }, { kind: "component", type: NzPaginationDefaultComponent, selector: "nz-pagination-default", inputs: ["nzSize", "itemRender", "showTotal", "disabled", "locale", "showSizeChanger", "showQuickJumper", "total", "pageIndex", "pageSize", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
};
|
|
})();
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-pagination',
|
|
exportAs: 'nzPagination',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (showPagination) {
|
|
@if (nzSimple) {
|
|
<ng-template [ngTemplateOutlet]="simplePagination.template" />
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="defaultPagination.template" />
|
|
}
|
|
}
|
|
|
|
<nz-pagination-simple
|
|
#simplePagination
|
|
[disabled]="nzDisabled"
|
|
[itemRender]="nzItemRender"
|
|
[locale]="locale"
|
|
[pageSize]="nzPageSize"
|
|
[total]="nzTotal"
|
|
[pageIndex]="nzPageIndex"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
/>
|
|
<nz-pagination-default
|
|
#defaultPagination
|
|
[nzSize]="size"
|
|
[itemRender]="nzItemRender"
|
|
[showTotal]="nzShowTotal"
|
|
[disabled]="nzDisabled"
|
|
[locale]="locale"
|
|
[showSizeChanger]="nzShowSizeChanger"
|
|
[showQuickJumper]="nzShowQuickJumper"
|
|
[total]="nzTotal"
|
|
[pageIndex]="nzPageIndex"
|
|
[pageSize]="nzPageSize"
|
|
[pageSizeOptions]="nzPageSizeOptions"
|
|
(pageIndexChange)="onPageIndexChange($event)"
|
|
(pageSizeChange)="onPageSizeChange($event)"
|
|
/>
|
|
`,
|
|
host: {
|
|
class: 'ant-pagination',
|
|
'[class.ant-pagination-simple]': 'nzSimple',
|
|
'[class.ant-pagination-disabled]': 'nzDisabled',
|
|
'[class.ant-pagination-mini]': `!nzSimple && size === 'small'`,
|
|
'[class.ant-pagination-rtl]': `dir === 'rtl'`,
|
|
'[class.ant-pagination-start]': 'nzAlign() === "start"',
|
|
'[class.ant-pagination-center]': 'nzAlign() === "center"',
|
|
'[class.ant-pagination-end]': 'nzAlign() === "end"'
|
|
},
|
|
imports: [NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent]
|
|
}]
|
|
}], propDecorators: { nzPageSizeChange: [{
|
|
type: Output
|
|
}], nzPageIndexChange: [{
|
|
type: Output
|
|
}], nzShowTotal: [{
|
|
type: Input
|
|
}], nzItemRender: [{
|
|
type: Input
|
|
}], nzSize: [{
|
|
type: Input
|
|
}], nzPageSizeOptions: [{
|
|
type: Input
|
|
}], nzShowSizeChanger: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzShowQuickJumper: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzSimple: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzDisabled: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzResponsive: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzHideOnSinglePage: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzTotal: [{
|
|
type: Input,
|
|
args: [{ transform: numberAttribute }]
|
|
}], nzPageIndex: [{
|
|
type: Input,
|
|
args: [{ transform: numberAttribute }]
|
|
}], nzPageSize: [{
|
|
type: Input,
|
|
args: [{ transform: numberAttribute }]
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzPaginationModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationModule, imports: [NzPaginationComponent,
|
|
NzPaginationSimpleComponent,
|
|
NzPaginationOptionsComponent,
|
|
NzPaginationItemComponent,
|
|
NzPaginationDefaultComponent], exports: [NzPaginationComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationModule, imports: [NzPaginationComponent,
|
|
NzPaginationSimpleComponent,
|
|
NzPaginationOptionsComponent,
|
|
NzPaginationItemComponent,
|
|
NzPaginationDefaultComponent] });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzPaginationModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [
|
|
NzPaginationComponent,
|
|
NzPaginationSimpleComponent,
|
|
NzPaginationOptionsComponent,
|
|
NzPaginationItemComponent,
|
|
NzPaginationDefaultComponent
|
|
],
|
|
exports: [NzPaginationComponent]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { NzPaginationComponent, NzPaginationDefaultComponent, NzPaginationItemComponent, NzPaginationModule, NzPaginationOptionsComponent, NzPaginationSimpleComponent };
|
|
//# sourceMappingURL=ng-zorro-antd-pagination.mjs.map
|