ng-devui
Version:
DevUI components based on Angular
328 lines (327 loc) • 66.5 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i7 from 'ng-devui/dropdown';
import { DropDownModule } from 'ng-devui/dropdown';
import * as i1 from 'ng-devui/i18n';
import { fromEvent } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'ng-devui/select';
import { SelectModule } from 'ng-devui/select';
import * as i4 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i5 from 'ng-devui/text-input';
import { TextInputModule } from 'ng-devui/text-input';
import * as i6 from 'ng-devui/icon';
import { IconModule } from 'ng-devui/icon';
import * as i8 from 'ng-devui/utils';
import { SafePipeModule } from 'ng-devui/utils';
class PaginationComponent {
static { this.EFFECT_PAGE_RANGE_KEYS = ['total', 'pageSize', 'pageIndex', 'maxItems', 'pageSizeOptions']; }
constructor(ref, i18n, appRef) {
this.ref = ref;
this.i18n = i18n;
this.appRef = appRef;
/**
* 【可选】每页显示最大条目数量，默认10条
*/
this.pageSize = 10;
/**
* 【可选】用于选择更改分页每页最大条目数量的下拉框的数据源，默认为`[5, 10, 20, 50]`
*/
this.pageSizeOptions = [5, 10, 20, 50];
this.pageSizeDirection = ['rightDown', 'rightUp'];
/**
* 【可选】初始化页码
*/
this.pageIndex = 1;
/**
* 页码变化的回调
*/
this.pageIndexChange = new EventEmitter();
/**
* 每页最大条目数量变更时的回调
*/
this.pageSizeChange = new EventEmitter();
/**
* 分页最多显示几个按钮，默认10个
*/
this.maxItems = 10;
/**
* 【可选】分页组件尺寸
*/
this.size = '';
// 是否显示跳转按钮，默认不显示
this.showJumpButton = false;
// 翻过了页的需求要显示当前真实页面
this.showTruePageIndex = false;
this.showPages = [];
this.totalPage = 1;
this._total = 0;
this.jumpPage = null;
this.rotateDegrees = 0;
/**
* @deprecated
* 下拉菜单默认方向
*/
this.selectDirection = 'auto';
/**
* 极简模式开关
*/
this.lite = false;
this.showPageSelector = true;
this.haveConfigMenu = false;
this.autoFixPageIndex = true;
/**
* 是否自动隐藏
*/
this.autoHide = false;
this.litePaginatorOptions = [];
this.litePaginatorOptionsLengthCache = 0;
this.showConfig = false;
this.configButtonLoseFocusHandler = null;
this.loseFocusListener = null;
}
ngOnInit() {
this.i18nText = this.i18n.getI18nText().pagination;
this.i18nLocale = this.i18n.getI18nText().locale;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nText = data.pagination;
this.i18nLocale = data.locale;
this.ref.markForCheck();
});
if (this.lite && this.showPageSelector) {
this.constructLitePaginatorOptions();
}
}
set total(total) {
if (total === undefined) {
this._total = 0;
}
else {
if (!isNaN(parseInt(total, 10))) {
this._total = parseInt(total, 10);
}
}
}
get total() {
return this._total;
}
first() {
if (this.pageIndex !== 1) {
this.onPageIndexChange(1);
}
}
last() {
const last = Math.max(this.totalPage, 1);
if (this.pageIndex !== last) {
this.onPageIndexChange(last);
}
}
prev() {
if (this.hasPrev()) {
this.onPageIndexChange(this.pageIndex - 1);
}
}
next() {
if (this.hasNext()) {
this.onPageIndexChange(this.pageIndex + 1);
}
}
jump() {
let pageInput = parseInt(this.jumpPage, 10);
if (pageInput && (pageInput < this.totalPage || this.pageIndex < this.totalPage)) {
if (pageInput > this.totalPage) {
this.jumpPage = this.totalPage;
pageInput = this.totalPage;
}
this.onPageIndexChange(pageInput);
}
}
validateInput() {
if (this.jumpPage === '') {
return;
}
const value = parseInt(this.jumpPage, 10);
this.jumpPage = value;
if (isNaN(value)) {
this.jumpPage = this.pageIndex;
}
}
preRange() {
const pre = this.showPages[0] - 1;
this.onPageIndexChange(Math.max(pre, 1));
}
nextRange() {
const next = this.showPages[this.showPages.length - 1] + 1;
this.onPageIndexChange(Math.min(next, this.totalPage));
}
onPageIndexChange(pageIndex) {
if (this.pageIndex !== pageIndex) {
if (this.lite) {
this.litePaginatorIndex = {
value: this.pageIndex,
label: `${this.pageIndex}/${this.totalPage}`,
};
}
this.pageIndexChange.emit(pageIndex);
}
}
onPageSizeChange(size) {
if (this.pageSize !== size) {
this.pageSize = size;
this.pageSizeChange.emit(size);
if (this.autoFixPageIndex && Math.ceil(this.total / size) < this.totalPage) {
this.totalPage = Math.ceil(this.total / size);
this.onPageIndexChange(this.totalPage <= this.pageIndex ? this.totalPage : this.pageIndex);
}
this.adjustPaginatorWidth();
}
if (this.dropDownElement) {
this.dropDownElement.dropDown.toggle();
}
}
hasPrev() {
return this.pageIndex > 1;
}
hasNext() {
return this.pageIndex < this.totalPage;
}
getTotalPage() {
return Math.ceil(this.total / this.pageSize);
}
ngOnChanges(changes) {
this.activeBlockInfo = this.activeBlock?.nativeElement.getBoundingClientRect();
const shouldUpdateRanges = PaginationComponent.EFFECT_PAGE_RANGE_KEYS.some((key) => !!changes[key]);
if (shouldUpdateRanges) {
this.minPageSizeOptions = Math.min(...this.pageSizeOptions);
this.totalPage = this.getTotalPage();
if (!this.showTruePageIndex) {
this.pageIndex = Math.max(Math.min(this.pageIndex, this.totalPage), 1);
}
this.jumpPage = this.pageIndex;
this.updateShowPageRange();
if (this.lite && this.showPageSelector) {
this.constructLitePaginatorOptions();
}
this.adjustPaginatorWidth();
if (this.activeBlockInfo && changes.pageIndex) {
this.setActiveAnimation();
}
}
}
ngAfterViewInit() {
this.adjustPaginatorWidth();
}
setActiveAnimation() {
new Promise((resolve, reject) => {
resolve(true);
}).then(() => {
const curInfo = this.activeBlock.nativeElement.getBoundingClientRect();
const element = this.activeBlock.nativeElement;
this.activeBlock.nativeElement.style.opacity = 1;
element.style.transform = `translate(${this.activeBlockInfo.left - curInfo.left}px)`;
setTimeout(() => {
element.style.transition = 'transform .25s ease-in-out';
element.style.transform = 'translate(0, 0)';
});
});
}
updateShowPageRange() {
if (!this.totalPage) {
this.showPages = [1];
return;
}
if (this.totalPage <= this.maxItems) {
this.showPages = new Array(this.totalPage).fill(0).map((_, i) => i + 1);
return;
}
this.showPages = this.extractRange();
}
extractRange() {
const showPages = [this.pageIndex];
let start = this.pageIndex - 1;
let end = this.pageIndex + 1;
const arriveLeftBound = (index) => index < 1;
const arriveRightBound = (index) => index > this.totalPage;
const fullPageRang = (pages) => pages.length >= this.maxItems - 2;
while (!(fullPageRang(showPages) || (arriveLeftBound(start) && arriveRightBound(end)))) {
if (!arriveLeftBound(start)) {
showPages.unshift(start--);
}
if (!fullPageRang(showPages) && !arriveRightBound(end)) {
showPages.push(end++);
}
}
return showPages;
}
constructLitePaginatorOptions() {
if (this.litePaginatorOptions.length === 0 || this.litePaginatorOptions.length !== this.litePaginatorOptionsLengthCache) {
this.litePaginatorOptions = Array.from({ length: this.totalPage }).map((v, index) => {
return {
label: `${index + 1}/${this.totalPage}`,
value: index + 1,
};
});
}
this.litePaginatorIndex = {
value: this.pageIndex,
label: `${this.pageIndex}/${this.totalPage}`,
};
}
adjustPaginatorWidth() {
if (this.litePaginator && this.litePaginator.nativeElement && this.litePaginatorOptions.length > 0) {
const lastOption = this.litePaginatorOptions[this.litePaginatorOptions.length - 1];
const lastLabel = lastOption ? lastOption.label : '';
const minWidth = 100;
const width = lastLabel.length * 4 + 80;
this.litePaginator.nativeElement.style.width = `${Math.max(minWidth, width)}px`;
}
}
onToggle(event) {
this.rotateDegrees = event ? 180 : 0;
}
toggleMenu(force = null) {
if (force !== null) {
this.showConfig = force;
}
else {
this.showConfig = !this.showConfig;
}
this.ref.markForCheck();
if (this.showConfig) {
this.subscribeLoseFocusHandler();
}
else {
this.unsubscribeLoseFocusHandler();
}
}
closeMenu() {
this.toggleMenu(false);
}
unsubscribeLoseFocusHandler() {
if (this.configButtonLoseFocusHandler) {
this.configButtonLoseFocusHandler.unsubscribe();
this.configButtonLoseFocusHandler = null;
}
}
ngOnDestroy() {
this.unsubscribeLoseFocusHandler();
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
subscribeLoseFocusHandler() {
if (this.loseFocusListener === null) {
this.loseFocusListener = fromEvent(document, 'click');
}
if (this.configButtonLoseFocusHandler === null) {
this.configButtonLoseFocusHandler = this.loseFocusListener.subscribe(this.closeMenu.bind(this));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18nService }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, selector: "d-pagination", inputs: { pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeDirection: "pageSizeDirection", pageIndex: "pageIndex", maxItems: "maxItems", preLink: "preLink", nextLink: "nextLink", size: "size", canJumpPage: "canJumpPage", canChangePageSize: "canChangePageSize", canViewTotal: "canViewTotal", cssClass: "cssClass", showJumpButton: "showJumpButton", showTruePageIndex: "showTruePageIndex", id: "id", totalItemText: "totalItemText", goToText: "goToText", selectDirection: "selectDirection", lite: "lite", showPageSelector: "showPageSelector", haveConfigMenu: "haveConfigMenu", autoFixPageIndex: "autoFixPageIndex", autoHide: "autoHide", total: "total" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange" }, viewQueries: [{ propertyName: "litePaginator", first: true, predicate: ["litePaginator"], descendants: true }, { propertyName: "dropDownElement", first: true, predicate: ["dropDownElement"], descendants: true }, { propertyName: "activeBlock", first: true, predicate: ["activeBlock"], descendants: true }], exportAs: ["pagination"], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-pagination\" [class.devui-pagination-hidden]=\"autoHide && total < minPageSizeOptions\">\r\n <ng-container *ngIf=\"canChangePageSize && !lite\">\r\n <div dDropDown (toggleEvent)=\"onToggle($event)\" appendToBody [appendToBodyDirections]=\"pageSizeDirection\" #dropDownElement>\r\n <d-icon\r\n class=\"devui-dropdown-default devui-dropdown-origin devui-page-size {{ size ? 'devui-page-size-' + size : '' }}\"\r\n dDropDownToggle\r\n [icon]=\"'icon-chevron-down-2'\"\r\n [rotate]=\"rotateDegrees\"\r\n >\r\n <span iconPrefix>{{ pageSize }}</span>\r\n </d-icon>\r\n <ul dDropDownMenu class=\"devui-dropdown-menu devui-pagination-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n <li\r\n *ngFor=\"let item of pageSizeOptions\"\r\n class=\"devui-dropdown-item\"\r\n [class.devui-pagination-acitve-item]=\"item === pageSize\"\r\n (click)=\"onPageSizeChange(item)\"\r\n >\r\n {{ item }}\r\n </li>\r\n </ul>\r\n </div>\r\n <span class=\"devui-per-page\">{{ i18nText?.perPage }},</span>\r\n </ng-container>\r\n <div *ngIf=\"canViewTotal\" class=\"devui-total-size\">\r\n {{ totalItemText ? totalItemText + ': ' + (total | number) : i18nText?.totalItem(total | number) }}\r\n </div>\r\n <div *ngIf=\"lite && showPageSelector\" class=\"devui-lite-paginator\" #litePaginator>\r\n <d-select\r\n [scrollHight]=\"'200px'\"\r\n [size]=\"size\"\r\n [isSearch]=\"false\"\r\n [ngModel]=\"litePaginatorIndex\"\r\n [appendToBody]=\"true\"\r\n [appendToBodyDirections]=\"pageSizeDirection\"\r\n [options]=\"litePaginatorOptions\"\r\n [filterKey]=\"'label'\"\r\n [disabled]=\"!litePaginatorOptions.length\"\r\n (valueChange)=\"onPageIndexChange($event.value)\"\r\n ></d-select>\r\n </div>\r\n <ul class=\"devui-pagination-list {{ size ? 'devui-pagination-' + size : '' }}\">\r\n <ng-container *ngIf=\"!lite\">\r\n <li *ngIf=\"preLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a (click)=\"prev()\" class=\"devui-pagination-link\" [innerHTML]=\"preLink | safe : 'html'\"></a>\r\n </li>\r\n <li *ngIf=\"!preLink\" [ngClass]=\"{ disabled: pageIndex == 1 }\">\r\n <a (click)=\"prev()\" class=\"devui-pagination-link\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <li *ngIf=\"showPages[0] > 1\" (click)=\"first()\">\r\n <a>1</a>\r\n </li>\r\n <li *ngIf=\"showPages[0] > 2\" (click)=\"preRange()\">\r\n <a>...</a>\r\n </li>\r\n <li *ngFor=\"let item of showPages\" [ngClass]=\"{ active: item == pageIndex }\">\r\n <div #activeBlock class=\"devui-pagination-active-block\" *ngIf=\"item == pageIndex\"></div>\r\n <a (click)=\"onPageIndexChange(item)\" style=\"position: relative\">{{ item }}</a>\r\n </li>\r\n <li *ngIf=\"showPages[showPages.length - 1] < totalPage - 1\" (click)=\"nextRange()\">\r\n <a>...</a>\r\n </li>\r\n <li *ngIf=\"showPages[showPages.length - 1] < totalPage\" (click)=\"last()\">\r\n <a>{{ totalPage | number }}</a>\r\n </li>\r\n <ng-container *ngIf=\"showTruePageIndex && pageIndex > totalPage && totalPage > 0\">\r\n <li *ngIf=\"pageIndex > totalPage + 1\" class=\"disabled\"><a>...</a></li>\r\n <li class=\"active disabled\">\r\n <a>{{ pageIndex }}</a>\r\n </li>\r\n </ng-container>\r\n <li *ngIf=\"nextLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a (click)=\"next()\" class=\"devui-pagination-link\" [innerHTML]=\"nextLink | safe : 'html'\"></a>\r\n </li>\r\n <li *ngIf=\"!nextLink\" [ngClass]=\"{ disabled: pageIndex == totalPage || !total }\">\r\n <a (click)=\"next()\" class=\"devui-pagination-link\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n </ng-container>\r\n <ng-container *ngIf=\"lite\">\r\n <li *ngIf=\"preLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a\r\n (click)=\"prev()\"\r\n [attr.aria-label]=\"nextLink\"\r\n class=\"devui-pagination-link devui-pagination-link-lite\"\r\n [innerHTML]=\"preLink | safe : 'html'\"\r\n ></a>\r\n </li>\r\n <li *ngIf=\"!preLink\" [ngClass]=\"{ disabled: pageIndex == 1 }\">\r\n <a (click)=\"prev()\" [attr.aria-label]=\"nextLink\" class=\"devui-pagination-link devui-pagination-link-lite\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <li *ngIf=\"nextLink\" [ngClass]=\"{ disabled: pageIndex >= totalPage }\">\r\n <a\r\n (click)=\"next()\"\r\n [attr.aria-label]=\"nextLink\"\r\n class=\"devui-pagination-link devui-pagination-link-lite\"\r\n [innerHTML]=\"nextLink | safe : 'html'\"\r\n ></a>\r\n </li>\r\n <li *ngIf=\"!nextLink\" [ngClass]=\"{ disabled: pageIndex >= totalPage }\">\r\n <a (click)=\"next()\" [attr.aria-label]=\"nextLink\" class=\"devui-pagination-link devui-pagination-link-lite\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"canJumpPage\" class=\"devui-jump-container\">\r\n {{ goToText ? goToText : i18nText?.goTo }}\r\n <input\r\n dTextInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n class=\"devui-input {{ size ? 'devui-input-' + size : '' }}\"\r\n [class.error]=\"jumpPage < 1 || (jumpPage > totalPage && pageIndex === totalPage)\"\r\n name=\"pageIndex\"\r\n [(ngModel)]=\"jumpPage\"\r\n (keyup.enter)=\"jump()\"\r\n (keyup)=\"validateInput()\"\r\n />\r\n {{ i18nLocale === 'zh-cn' && !goToText ? i18nText.page : '' }}\r\n <div\r\n *ngIf=\"showJumpButton\"\r\n class=\"devui-jump-button {{ size ? 'devui-jump-size-' + size : 'devui-jump-size-default' }}\"\r\n title=\"{{ goToText ? goToText : i18nText?.goTo }}\"\r\n (click)=\"jump()\"\r\n >\r\n <div class=\"devui-pagination-go\"></div>\r\n </div>\r\n </div>\r\n <div class=\"devui-pagination-config\" *ngIf=\"haveConfigMenu\">\r\n <div class=\"devui-setup-icon\" (click)=\"$event.stopPropagation(); toggleMenu()\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8,12 C10.209139,12 12,10.209139 12,8 C12,5.790861 10.209139,4 8,4 C5.790861,4 4,5.790861 4,8 C4,10.209139 5.790861,12 8,12 Z M4.52067059,3.11124369 C5.24511171,2.59473146 6.08922816,2.23522497 7.00334609,2.08239805 C7.00112987,2.05522493 7,2.02774441 7,2 L7,1 C7,0.44771525 7.44771525,1.01453063e-16 8,0 C8.55228475,-1.01453063e-16 9,0.44771525 9,1 L9,2 C9,2.02774441 8.99887013,2.05522493 8.99665391,2.08239805 C9.91077184,2.23522497 10.7548883,2.59473146 11.4793294,3.11124369 C11.4970673,3.09033559 11.5158021,3.06998434 11.5355339,3.05025253 L12.2426407,2.34314575 C12.633165,1.95262146 13.26633,1.95262146 13.6568542,2.34314575 C14.0473785,2.73367004 14.0473785,3.36683502 13.6568542,3.75735931 L12.9497475,4.46446609 C12.9300157,4.4841979 12.9096644,4.50293273 12.8887563,4.52067059 C13.4052685,5.24511171 13.764775,6.08922816 13.917602,7.00334609 C13.9447751,7.00112987 13.9722556,7 14,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L14,9 C13.9722556,9 13.9447751,8.99887013 13.917602,8.99665391 C13.764775,9.91077184 13.4052685,10.7548883 12.8887563,11.4793294 C12.9096644,11.4970673 12.9300157,11.5158021 12.9497475,11.5355339 L13.6568542,12.2426407 C14.0473785,12.633165 14.0473785,13.26633 13.6568542,13.6568542 C13.26633,14.0473785 12.633165,14.0473785 12.2426407,13.6568542 L11.5355339,12.9497475 C11.5158021,12.9300157 11.4970673,12.9096644 11.4793294,12.8887563 C10.7548883,13.4052685 9.91077184,13.764775 8.99665391,13.917602 C8.99887013,13.9447751 9,13.9722556 9,14 L9,15 C9,15.5522847 8.55228475,16 8,16 C7.44771525,16 7,15.5522847 7,15 L7,14 C7,13.9722556 7.00112987,13.9447751 7.00334609,13.917602 C6.08922816,13.764775 5.24511171,13.4052685 4.52067059,12.8887563 C4.50293273,12.9096644 4.4841979,12.9300157 4.46446609,12.9497475 L3.75735931,13.6568542 C3.36683502,14.0473785 2.73367004,14.0473785 2.34314575,13.6568542 C1.95262146,13.26633 1.95262146,12.633165 2.34314575,12.2426407 L3.05025253,11.5355339 C3.06998434,11.5158021 3.09033559,11.4970673 3.11124369,11.4793294 C2.59473146,10.7548883 2.23522497,9.91077184 2.08239805,8.99665391 C2.05522493,8.99887013 2.02774441,9 2,9 L1,9 C0.44771525,9 2.4125371e-16,8.55228475 3.83475851e-17,8 C-1.6455854e-16,7.44771525 0.44771525,7 1,7 L2,7 C2.02774441,7 2.05522493,7.00112987 2.08239805,7.00334609 C2.23522497,6.08922816 2.59473146,5.24511171 3.11124369,4.52067059 C3.09033559,4.50293273 3.06998434,4.4841979 3.05025253,4.46446609 L2.34314575,3.75735931 C1.95262146,3.36683502 1.95262146,2.73367004 2.34314575,2.34314575 C2.73367004,1.95262146 3.36683502,1.95262146 3.75735931,2.34314575 L4.46446609,3.05025253 C4.4841979,3.06998434 4.50293273,3.09033559 4.52067059,3.11124369 Z M8,9 C7.44771525,9 7,8.55228475 7,8 C7,7.44771525 7.44771525,7 8,7 C8.55228475,7 9,7.44771525 9,8 C9,8.55228475 8.55228475,9 8,9 Z\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"showConfig\" class=\"devui-config-container\">\r\n <ng-content></ng-content>\r\n <div class=\"devui-pagination-config-item devui-page-size-config\" *ngIf=\"canChangePageSize\">\r\n <div class=\"devui-config-item-title\">{{ i18nText?.pageSize }}</div>\r\n <div class=\"devui-page-number\">\r\n <ng-container *ngFor=\"let size of pageSizeOptions\">\r\n <div class=\"number\" [ngClass]=\"{ choosed: size === pageSize }\" (click)=\"onPageSizeChange(size)\">\r\n {{ size }}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:block}.devui-pagination{display:flex;align-items:center}.devui-pagination .devui-page-size{display:inline-block;vertical-align:middle;margin:0 8px 0 0;position:relative;height:28px}.devui-pagination .devui-page-size.devui-page-size-sm{height:26px}.devui-pagination .devui-page-size.devui-page-size-lg{height:46px}.devui-pagination .devui-page-size.devui-page-size-lg li a.devui-pagination-link{height:46px;line-height:46px}.devui-pagination .devui-per-page{margin-right:8px;color:var(--devui-text-weak, #333333)}.devui-pagination .devui-total-size{display:inline-block;position:relative;margin:0 12px 0 0;color:var(--devui-text-weak, #333333)}.devui-pagination .devui-pagination-list{vertical-align:middle;display:inline-flex;align-items:center}.devui-pagination .devui-pagination-list>.disabled>a,.devui-pagination .devui-pagination-list>.disabled>a:hover,.devui-pagination .devui-pagination-list>.disabled>a:focus{cursor:not-allowed}.devui-pagination .devui-pagination-list li{display:inline}.devui-pagination .devui-pagination-list li.disabled a{color:var(--devui-disabled-text, #c2c2c2)}.devui-pagination .devui-pagination-list li.disabled a svg g polygon{fill:var(--devui-disabled-text, #c2c2c2)}.devui-pagination .devui-pagination-list li.disabled:first-child a,.devui-pagination .devui-pagination-list li.disabled:last-child a{border-color:var(--devui-disabled-line, #e6e6e6)}.devui-pagination .devui-pagination-list li:not(.disabled){cursor:pointer}.devui-pagination .devui-pagination-list li:not(.disabled) a:hover,.devui-pagination .devui-pagination-list li:not(.disabled) span:hover,.devui-pagination .devui-pagination-list li:not(.disabled) a:focus,.devui-pagination .devui-pagination-list li:not(.disabled) span:focus{background-color:var(--devui-base-bg, #ffffff);color:var(--devui-list-item-hover-text, #000000);text-decoration:none}.devui-pagination .devui-pagination-list li:not(.disabled) a:active{background-color:var(--devui-list-item-active-bg, #cedefd);color:var(--devui-list-item-active-text, #000000)}.devui-pagination .devui-pagination-list li:not(.disabled).active a{color:var(--devui-list-item-active-text, #000000);cursor:pointer}.devui-pagination .devui-pagination-list li:not(.disabled).active a:hover{background-color:transparent;color:var(--devui-list-item-active-text, #000000)}.devui-pagination .devui-pagination-list li:not(.disabled) a.devui-pagination-link:hover:not(:active) svg g polygon{fill:var(--devui-icon-fill-active-hover, #000000)}.devui-pagination .devui-pagination-list li:not(.disabled) a.devui-pagination-link:active svg g polygon{fill:var(--devui-light-text, #ffffff)}.devui-pagination .devui-pagination-list .devui-pagination-link svg{vertical-align:middle}.devui-pagination .devui-pagination-list .devui-pagination-link svg g polygon{fill:var(--devui-icon-text, #808080)}.devui-pagination .devui-pagination-list .devui-pagination-link-lite{border:1px solid transparent!important;border-radius:var(--devui-border-radius, 2px)}.devui-pagination .devui-pagination-list>li>a{margin-left:4px;padding:0 8px;line-height:24px;border-radius:var(--devui-border-radius, 2px);color:var(--devui-text-weak, #333333);display:flex;align-items:center;justify-content:center}.devui-pagination .devui-pagination-sm>li>a{padding:0 4px;min-width:18px;line-height:22px;font-size:var(--devui-font-size-sm, 12px)}.devui-pagination .devui-pagination-lg>li>a{padding:0 12px;font-size:var(--devui-font-size-lg, 14px);line-height:38px}.devui-pagination .devui-pagination-list>li:first-child>a,.devui-pagination .devui-pagination-list>li:last-child>a{min-width:34px;height:32px;line-height:32px;padding:0 8px}.devui-pagination .devui-pagination-sm>li:first-child>a,.devui-pagination .devui-pagination-sm>li:last-child>a{border-radius:var(--devui-border-radius, 2px);min-width:20px;height:30px;line-height:30px;padding:0 4px}.devui-pagination .devui-pagination-lg>li:first-child>a,.devui-pagination .devui-pagination-lg>li:last-child>a{border-radius:var(--devui-border-radius, 2px);min-width:46px;height:46px;line-height:46px;padding:0 16px}.devui-pagination .devui-jump-container{display:inline-flex;position:relative;margin:0 12px;vertical-align:middle;align-items:center}.devui-pagination .devui-jump-container .devui-input{display:inline-block;width:3.5em;vertical-align:middle;margin:0 4px}.devui-pagination .devui-jump-button{display:inline-flex;vertical-align:middle;border-radius:var(--devui-border-radius, 2px);border:1px solid var(--devui-line, #dbdbdb);cursor:pointer;margin-left:4px;align-items:center;justify-content:center}.devui-pagination .devui-jump-button .devui-pagination-go{width:0;height:0;border-top-style:solid;border-left-style:solid;border-bottom-style:solid}.devui-pagination .devui-jump-button:hover{border-color:var(--devui-brand-active, #0950de)}.devui-pagination .devui-jump-button:hover .devui-pagination-go{border-left-color:var(--devui-brand-active, #0950de)}.devui-pagination .devui-jump-size-default{width:34px;height:34px}.devui-pagination .devui-jump-size-default .devui-pagination-go{width:0;height:0;border-top:12px solid transparent;border-left:12px solid var(--devui-icon-text, #808080);border-bottom:12px solid transparent}.devui-pagination .devui-jump-size-sm{width:24px;height:24px}.devui-pagination .devui-jump-size-sm .devui-pagination-go{width:0;height:0;border-top:6px solid transparent;border-left:6px solid var(--devui-icon-text, #808080);border-bottom:6px solid transparent}.devui-pagination .devui-jump-size-sm .devui-pagination-link{height:30px;line-height:32px}.devui-pagination .devui-jump-size-lg{width:46px;height:46px}.devui-pagination .devui-jump-size-lg .devui-pagination-go{width:0;height:0;border-top:16px solid transparent;border-left:16px solid var(--devui-icon-text, #808080);border-bottom:16px solid transparent}.devui-pagination .devui-lite-paginator{display:inline-block;margin-right:4px;width:100px;vertical-align:middle}.devui-pagination .devui-pagination-config{color:var(--devui-text, #191919);position:relative;display:inline-block;vertical-align:middle;margin:0 4px}.devui-pagination .devui-pagination-config .devui-setup-icon{line-height:30px;cursor:pointer;display:flex}.devui-pagination .devui-pagination-config .devui-setup-icon svg g path{fill:var(--devui-icon-text, #808080)}.devui-pagination .devui-pagination-config .devui-config-container{padding:4px 0;box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius, 2px);width:150px;background-color:var(--devui-connected-overlay-bg, #ffffff);line-height:26px;position:absolute;left:-136px;top:28px;cursor:auto;z-index:var(--devui-z-index-dropdown, 1052);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item.devui-page-size-config{border-bottom:none}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item{padding-bottom:8px;padding-top:4px;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-config-item-title{color:var(--devui-aide-text, #595959);padding-left:8px;font-size:var(--devui-font-size, 12px);line-height:22px}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number{padding-left:8px;margin-top:4px;display:flex;display:-ms-flexbox}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number div{color:var(--devui-text, #191919);cursor:pointer;border-top:1px solid var(--devui-line, #dbdbdb);border-bottom:1px solid var(--devui-line, #dbdbdb);border-right:1px solid var(--devui-line, #dbdbdb);text-align:center;height:26px;width:26px}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number div:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number div:first-child{border-left:1px solid var(--devui-line, #dbdbdb)}.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number .devui-page-number div.choosed:not(:hover):not(:active),.devui-pagination .devui-pagination-config .devui-config-container .devui-pagination-config-item .devui-page-number .choosed:not(:hover):not(:active){color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)!important;cursor:auto!important}.devui-pagination .devui-pagination-list li a{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-pagination-hidden{display:none}:host ::ng-deep .devui-input-sm{height:24px;padding:4px;font-size:var(--devui-font-size, 12px);line-height:1.5;border-radius:var(--devui-border-radius, 2px)}:host ::ng-deep .devui-input-lg{height:46px}.devui-pagination-dropdown-menu{min-width:60px}.devui-pagination-list>li>.devui-pagination-active-block{height:24px;margin-bottom:-24px}.devui-pagination-sm>li>.devui-pagination-active-block{height:22px;margin-bottom:-22px}.devui-pagination-lg>li>.devui-pagination-active-block{height:38px;margin-bottom:-38px}.devui-pagination-active-block{width:calc(100% - 4px);margin-bottom:-24px;margin-left:4px;background:var(--devui-primary, #0a59f7);z-index:0;border-radius:var(--devui-border-radius, 2px)}.devui-pagination-acitve-item{background:var(--devui-list-item-active-bg, #cedefd)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SelectComponent, selector: "d-select", inputs: ["options", "isSearch", "toggleOnFocus", "scrollHight", "highlightItemClass", "filterKey", "valueKey", "multiple", "isSelectAll", "readonly", "size", "appendToBody", "appendToBodyDirections", "appendToBodyScrollStrategy", "width", "templateItemSize", "disabled", "placeholder", "searchPlaceholder", "searchFn", "valueParser", "formatter", "direction", "overview", "allowClear", "color", "enableLazyLoad", "virtualScroll", "inputItemTemplate", "extraConfig", "optionDisabledKey", "optionImmutableKey", "noResultItemTemplate", "keepMultipleOrder", "customViewTemplate", "customViewDirection", "autoScrollIntoActive", "autoFocus", "notAutoScroll", "loadingTemplateRef", "showItemTitle", "showAnimation", "styleType", "showGlowStyle", "beforeChange"], outputs: ["toggleChange", "loadMore", "valueChange"], exportAs: ["select"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.TextDirective, selector: "[dTextInput]", inputs: ["error", "size", "styleType", "showGlowStyle"], exportAs: ["dTextInput"] }, { kind: "component", type: i6.IconComponent, selector: "d-icon", inputs: ["icon", "operable", "disabled", "rotate", "color"] }, { kind: "directive", type: i7.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu", "autofocusToggleElement"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { kind: "directive", type: i7.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { kind: "directive", type: i7.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { kind: "component", type: i7.DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: ["alignOrigin", "appendToBodyDirections", "appendToBodyScrollStrategy"], exportAs: ["d-dropdown-append-to-body"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i8.SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'd-pagination', exportAs: 'pagination', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div class=\"devui-pagination\" [class.devui-pagination-hidden]=\"autoHide && total < minPageSizeOptions\">\r\n <ng-container *ngIf=\"canChangePageSize && !lite\">\r\n <div dDropDown (toggleEvent)=\"onToggle($event)\" appendToBody [appendToBodyDirections]=\"pageSizeDirection\" #dropDownElement>\r\n <d-icon\r\n class=\"devui-dropdown-default devui-dropdown-origin devui-page-size {{ size ? 'devui-page-size-' + size : '' }}\"\r\n dDropDownToggle\r\n [icon]=\"'icon-chevron-down-2'\"\r\n [rotate]=\"rotateDegrees\"\r\n >\r\n <span iconPrefix>{{ pageSize }}</span>\r\n </d-icon>\r\n <ul dDropDownMenu class=\"devui-dropdown-menu devui-pagination-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n <li\r\n *ngFor=\"let item of pageSizeOptions\"\r\n class=\"devui-dropdown-item\"\r\n [class.devui-pagination-acitve-item]=\"item === pageSize\"\r\n (click)=\"onPageSizeChange(item)\"\r\n >\r\n {{ item }}\r\n </li>\r\n </ul>\r\n </div>\r\n <span class=\"devui-per-page\">{{ i18nText?.perPage }},</span>\r\n </ng-container>\r\n <div *ngIf=\"canViewTotal\" class=\"devui-total-size\">\r\n {{ totalItemText ? totalItemText + ': ' + (total | number) : i18nText?.totalItem(total | number) }}\r\n </div>\r\n <div *ngIf=\"lite && showPageSelector\" class=\"devui-lite-paginator\" #litePaginator>\r\n <d-select\r\n [scrollHight]=\"'200px'\"\r\n [size]=\"size\"\r\n [isSearch]=\"false\"\r\n [ngModel]=\"litePaginatorIndex\"\r\n [appendToBody]=\"true\"\r\n [appendToBodyDirections]=\"pageSizeDirection\"\r\n [options]=\"litePaginatorOptions\"\r\n [filterKey]=\"'label'\"\r\n [disabled]=\"!litePaginatorOptions.length\"\r\n (valueChange)=\"onPageIndexChange($event.value)\"\r\n ></d-select>\r\n </div>\r\n <ul class=\"devui-pagination-list {{ size ? 'devui-pagination-' + size : '' }}\">\r\n <ng-container *ngIf=\"!lite\">\r\n <li *ngIf=\"preLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a (click)=\"prev()\" class=\"devui-pagination-link\" [innerHTML]=\"preLink | safe : 'html'\"></a>\r\n </li>\r\n <li *ngIf=\"!preLink\" [ngClass]=\"{ disabled: pageIndex == 1 }\">\r\n <a (click)=\"prev()\" class=\"devui-pagination-link\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <li *ngIf=\"showPages[0] > 1\" (click)=\"first()\">\r\n <a>1</a>\r\n </li>\r\n <li *ngIf=\"showPages[0] > 2\" (click)=\"preRange()\">\r\n <a>...</a>\r\n </li>\r\n <li *ngFor=\"let item of showPages\" [ngClass]=\"{ active: item == pageIndex }\">\r\n <div #activeBlock class=\"devui-pagination-active-block\" *ngIf=\"item == pageIndex\"></div>\r\n <a (click)=\"onPageIndexChange(item)\" style=\"position: relative\">{{ item }}</a>\r\n </li>\r\n <li *ngIf=\"showPages[showPages.length - 1] < totalPage - 1\" (click)=\"nextRange()\">\r\n <a>...</a>\r\n </li>\r\n <li *ngIf=\"showPages[showPages.length - 1] < totalPage\" (click)=\"last()\">\r\n <a>{{ totalPage | number }}</a>\r\n </li>\r\n <ng-container *ngIf=\"showTruePageIndex && pageIndex > totalPage && totalPage > 0\">\r\n <li *ngIf=\"pageIndex > totalPage + 1\" class=\"disabled\"><a>...</a></li>\r\n <li class=\"active disabled\">\r\n <a>{{ pageIndex }}</a>\r\n </li>\r\n </ng-container>\r\n <li *ngIf=\"nextLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a (click)=\"next()\" class=\"devui-pagination-link\" [innerHTML]=\"nextLink | safe : 'html'\"></a>\r\n </li>\r\n <li *ngIf=\"!nextLink\" [ngClass]=\"{ disabled: pageIndex == totalPage || !total }\">\r\n <a (click)=\"next()\" class=\"devui-pagination-link\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n </ng-container>\r\n <ng-container *ngIf=\"lite\">\r\n <li *ngIf=\"preLink\" [ngClass]=\"{ disabled: pageIndex == totalPage }\">\r\n <a\r\n (click)=\"prev()\"\r\n [attr.aria-label]=\"nextLink\"\r\n class=\"devui-pagination-link devui-pagination-link-lite\"\r\n [innerHTML]=\"preLink | safe : 'html'\"\r\n ></a>\r\n </li>\r\n <li *ngIf=\"!preLink\" [ngClass]=\"{ disabled: pageIndex == 1 }\">\r\n <a (click)=\"prev()\" [attr.aria-label]=\"nextLink\" class=\"devui-pagination-link devui-pagination-link-lite\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <li *ngIf=\"nextLink\" [ngClass]=\"{ disabled: pageIndex >= totalPage }\">\r\n <a\r\n (click)=\"next()\"\r\n [attr.aria-label]=\"nextLink\"\r\n class=\"devui-pagination-link devui-pagination-link-lite\"\r\n [innerHTML]=\"nextLink | safe : 'html'\"\r\n ></a>\r\n </li>\r\n <li *ngIf=\"!nextLink\" [ngClass]=\"{ disabled: pageIndex >= totalPage }\">\r\n <a (click)=\"next()\" [attr.aria-label]=\"nextLink\" class=\"devui-pagination-link devui-pagination-link-lite\">\r\n <svg width=\"1em\" height=\"1.5em\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"canJumpPage\" class=\"devui-jump-container\">\r\n {{ goToText ? goToText : i18nText?.goTo }}\r\n <input\r\n dTextInput\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n class=\"devui-input {{ size ? 'devui-input-' + size : '' }}\"\r\n [class.error]=\"jumpPage < 1 || (jumpPage > totalPage && pageIndex === totalPage)\"\r\n name=\"pageIndex\"\r\n [(ngModel)]=\"jumpPage\"\r\n (keyup.enter)=\"jump()\"\r\n (keyup)=\"validateInput()\"\r\n />\r\n {{ i18nLocale === 'zh-cn' && !goToText ? i18nText.page : '' }}\r\n <div\r\n *ngIf=\"showJumpButton\"\r\n class=\"devui-jump-button {{ size ? 'devui-jump-size-' + size : 'devui-jump-size-default' }}\"\r\n title=\"{{ goToText ? goToText : i18nText?.goTo }}\"\r\n (click)=\"jump()\"\r\n >\r\n <div class=\"devui-pagination-go\"></div>\r\n </div>\r\n </div>\r\n <div class=\"devui-pagination-config\" *ngIf=\"haveConfigMenu\">\r\n <div class=\"devui-setup-icon\" (click)=\"$event.stopPropagation(); toggleMenu()\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8,12 C10.209139,12 12,10.209139 12,8 C12,5.790861 10.209139,4 8,4 C5.790861,4 4,5.790861 4,8 C4,10.209139 5.790861,12 8,12 Z M4.52067059,3.11124369 C5.24511171,2.59473146 6.08922816,2.23522497 7.00334609,2.08239805 C7.00112987,2.05522493 7,2.02774441 7,2 L7,1 C7,0.44771525 7.44771525,1.01453063e-16 8,0 C8.55228475,-1.01453063e-16 9,0.44771525 9,1 L9,2 C9,2.02774441 8.99887013,2.05522493 8.99665391,2.08239805 C9.91077184,2.23522497 10.7548883,2.59473146 11.4793294,3.11124369 C11.4970673,3.09033559 11.5158021,3.06998434 11.5355339,3.05025253 L12.2426407,2.34314575 C12.633165,1.95262146 13.26633,1.95262146 13.6568542,2.34314575 C14.0473785,2.73367004 14.0473785,3.36683502 13.6568542,3.75735931 L12.9497475,4.46446609 C12.9300157,4.4841979 12.9096644,4.50293273 12.8887563,4.52067059 C13.4052685,5.24511171 13.764775,6.08922816 13.917602,7.00334609 C13.9447751,7.00112987 13.9722556,7 14,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L14,9 C13.9722556,9 13.9447751,8.99887013 13.917602,8.99665391 C13.764775,9.91077184 13.4052685,10.7548883 12.8887563,11.4793294 C12.9096644,11.4970673 12.9300157,11.5158021 12.9497475,11.5355339 L13.6568542,12.2426407 C14.0473785,12.633165 14.0473785,13.26633 13.6568542,13.6568542 C13.26633,14.0473785 12.633165,14.0473785 12.2426407,13.6568542 L11.5355339,12.9497475 C11.5158021,12.9300157 11.4970673,12.9096644 11.4793294,12.8887563 C10.7548883,13.4052685 9.91077184,13.764775 8.99665391,13.917602 C8.99887013,13.9447751 9,13.9722556 9,14 L9,15 C9,15.5522847 8.55228475,16 8,16 C7.44771525,16 7,15.5522847 7,15 L7,14 C7,13.9722556 7.00112987,13.9447751 7.00334609,13.917602 C6.08922816,13.764775 5.24511171,13.4052685 4.52067059,12.8887563 C4.50293273,12.9096644 4.4841979,12.9300157 4.46446609,12.9497475 L3.75735931,13.6568542 C3.36683502,14.0473785 2.73367004,14.0473785 2.34314575,13.6568542 C1.95262146,13.26633 1.95262146,12.633165 2.34314575,12.2426407 L3.05025253,11.5355339 C3.06998434,11.5158021 3.09033559,11.4970673 3.11124369,11.479