feat(module:pagination): nzItemRender support prev_5 and next_5 (#4754)

BREAKING CHANGES:
prev_5 and next_5 is needed when use nzItemRender
'pre' typo was corrected to 'prev'

components/menu/menu.spec.ts

@@ -61,7 +61,7 @@ describe('menu', () => {
         expect(items[1].nativeElement.classList.contains('ant-menu-item-disabled')).toBe(true);
         expect(submenu.nativeElement.classList.contains('ant-menu-submenu-horizontal')).toBe(true);
         expect(submenu.nativeElement.classList.contains('ant-menu-submenu')).toBe(true);
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-horizontal ant-menu-light ant-menu-root');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-light ant-menu-horizontal');
       });
       it('should menu item select', () => {
         fixture.detectChanges();
@@ -91,7 +91,7 @@ describe('menu', () => {
         fixture.detectChanges();
         expect(submenus.every(subitem => subitem.nativeElement.classList.contains('ant-menu-submenu'))).toBe(true);
         expect(submenus.every(subitem => subitem.nativeElement.classList.contains('ant-menu-submenu-inline'))).toBe(true);
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-inline ant-menu-light ant-menu-root');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-light ant-menu-inline');
       });
       it('should padding left work', () => {
         fixture.detectChanges();
@@ -130,13 +130,13 @@ describe('menu', () => {
       });
       it('should className correct', () => {
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-dark ant-menu-inline ant-menu-root');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-dark ant-menu-inline');
         testComponent.isCollapsed = true;
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-dark ant-menu-root ant-menu-vertical ant-menu-inline-collapsed');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-dark ant-menu-vertical ant-menu-inline-collapsed');
         testComponent.isCollapsed = false;
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-dark ant-menu-root ant-menu-inline');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-dark ant-menu-inline');
       });
       it('should keep open after change mode', () => {
         fixture.detectChanges();
@@ -209,10 +209,10 @@ describe('menu', () => {
       });
       it('should className correct', () => {
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-dark ant-menu-inline ant-menu-root');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-dark ant-menu-inline');
         testComponent.theme = false;
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-inline ant-menu-root ant-menu-light');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-inline ant-menu-light');
       });
     });
     describe('swich-mode', () => {
@@ -228,11 +228,11 @@ describe('menu', () => {
       });
       it('should className correct', () => {
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-inline ant-menu-light ant-menu-root');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-light ant-menu-inline');
         expect(submenus.every(submenu => submenu.nativeElement.classList.contains('ant-menu-submenu-inline'))).toBe(true);
         testComponent.mode = true;
         fixture.detectChanges();
-        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-light ant-menu-root ant-menu-vertical');
+        expect(menu.nativeElement.className).toBe('ant-menu ant-menu-root ant-menu-light ant-menu-vertical');
         expect(submenus.every(submenu => submenu.nativeElement.classList.contains('ant-menu-submenu-inline'))).toBe(false);
         expect(submenus.every(submenu => submenu.nativeElement.classList.contains('ant-menu-submenu-vertical'))).toBe(true);
       });
@@ -308,13 +308,13 @@ describe('menu', () => {
       it('should click menu and other submenu menu not active', fakeAsync(() => {
         testComponent.open = true;
         fixture.detectChanges();
+        const subs = testComponent.subs.toArray();
         dispatchFakeEvent(testComponent.menuitem1.nativeElement, 'mouseenter');
         fixture.detectChanges();
         testComponent.menuitem1.nativeElement.click();
-        expect(submenu.nativeElement.classList).toContain('ant-menu-submenu-active');
         fixture.detectChanges();
         tick(500);
-        expect(submenu.nativeElement.classList).not.toContain('ant-menu-submenu-active');
+        expect(subs[1].isActive).toBe(false);
       }));
       it('should click submenu menu item close', () => {
         testComponent.open = true;

components/menu/public-api.ts

@@ -16,5 +16,6 @@ export * from './submenu-inline-child.component';
 export * from './submenu-non-inline-child.component';
 export * from './menu.module';
 export * from './submenu.service';
+export * from './menu.types';
 export * from './menu.service';
 export * from './menu.token';

components/pagination/demo/item-render.ts

@@ -5,9 +5,13 @@ import { Component } from '@angular/core';
   template: `
     <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination>
     <ng-template #renderItemTemplate let-type let-page="page">
-      <a *ngIf="type === 'pre'">Previous</a>
-      <a *ngIf="type === 'next'">Next</a>
-      <a *ngIf="type === 'page'">{{ page }}</a>
+      <ng-container [ngSwitch]="type">
+        <a *ngSwitchCase="'page'">{{ page }}</a>
+        <a *ngSwitchCase="'prev'">Previous</a>
+        <a *ngSwitchCase="'next'">Next</a>
+        <a *ngSwitchCase="'prev_5'"><<</a>
+        <a *ngSwitchCase="'next_5'">>></a>
+      </ng-container>
     </ng-template>
   `
 })

components/pagination/doc/index.en-US.md

@@ -35,7 +35,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 | `[nzSimple]` | whether to use simple mode | `boolean` | - |
 | `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` |
 | `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` |
-| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - |
+| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - |
 | `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |
 | `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` |
 | `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - |

components/pagination/doc/index.zh-CN.md

@@ -36,7 +36,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 | `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - |
 | `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` |
 | `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` |
-| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - |
+| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - |
 | `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |
 | `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` |
 | `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - |