feat(module:drawer): support new apis nzSize and nzExtra

components/drawer/demo/module

@@ -9,6 +9,7 @@ import { NzListModule } from 'ng-zorro-antd/list';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 export const moduleList = [
   NzDrawerModule,
@@ -21,5 +22,6 @@ export const moduleList = [
   NzListModule,
   NzRadioModule,
   NzDividerModule,
-  NzDescriptionsModule
+  NzDescriptionsModule,
+  NzSpaceModule
 ];

components/drawer/demo/service.ts

@@ -10,6 +10,7 @@ import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
     <ng-template #drawerTemplate let-data let-drawerRef="drawerRef">
       value: {{ data?.value }}
       <br />
+      <br />
       <button nz-button nzType="primary" (click)="drawerRef.close()">close</button>
     </ng-template>
     <div nz-form>
@@ -35,6 +36,7 @@ export class NzDemoDrawerServiceComponent {
     const drawerRef = this.drawerService.create({
       nzTitle: 'Template',
       nzFooter: 'Footer',
+      nzExtra: 'Extra',
       nzContent: this.drawerTemplate,
       nzContentParams: {
         value: this.value
@@ -53,6 +55,8 @@ export class NzDemoDrawerServiceComponent {
   openComponent(): void {
     const drawerRef = this.drawerService.create<NzDrawerCustomComponent, { value: string }, string>({
       nzTitle: 'Component',
+      nzFooter: 'Footer',
+      nzExtra: 'Extra',
       nzContent: NzDrawerCustomComponent,
       nzContentParams: {
         value: this.value

components/drawer/demo/size.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 预设宽度
+  en-US: Preset size
+---
+
+## zh-CN
+
+抽屉的默认宽度为 `378px`，另外还提供一个大号抽屉 `736px`，可以用 `size` 属性来设置。
+
+## en-US
+
+The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.

components/drawer/demo/size.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-drawer-size',
+  template: `
+    <nz-space>
+      <button *nzSpaceItem nz-button nzType="primary" (click)="showDefault()">Open Default Size (378px)</button>
+      <button *nzSpaceItem nz-button nzType="primary" (click)="showLarge()">Open Large Size (736px)</button>
+    </nz-space>
+    <nz-drawer
+      [nzSize]="size"
+      [nzVisible]="visible"
+      nzPlacement="right"
+      [nzTitle]="title"
+      [nzExtra]="extra"
+      (nzOnClose)="close()"
+    >
+      <ng-container *nzDrawerContent>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </ng-container>
+    </nz-drawer>
+    <ng-template #extra>
+      <button nz-button nzType="default" (click)="close()">Cancel</button>
+      &nbsp;
+      <button nz-button nzType="primary" (click)="close()">OK</button>
+    </ng-template>
+  `
+})
+export class NzDemoDrawerSizeComponent {
+  visible = false;
+  size: 'large' | 'default' = 'default';
+
+  get title(): string {
+    return `${this.size} Drawer`;
+  }
+
+  showDefault(): void {
+    this.size = 'default';
+    this.open();
+  }
+
+  showLarge(): void {
+    this.size = 'large';
+    this.open();
+  }
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+}

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

@@ -24,8 +24,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 
 | Props | Description | Type | Default | Global Config |
 | --- | --- | --- | --- | --- |
-| `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| `[nzClosable]` | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
 | `[nzCloseIcon]` | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
+| `[nzExtra]` | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
 | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
 | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
 | `[nzCloseOnNavigation]` | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
@@ -36,8 +37,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzFooter]` | The footer for Drawer. | `string \| TemplateRef<void>` | - |
 | `[nzVisible]` | Whether the Drawer dialog is visible or not, you can use `[(nzVisible)]` two-way binding | `boolean` | `false` |
 | `[nzPlacement]` | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`.  | `number \| string` | `256` |
-| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` | `256` |
+| `[nzSize]` | Preset size of drawer, default `378px` and large `736px`.  | `'default' \| 'large'` | `'default'` |
+| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`.  | `number \| string` | - |
+| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`.  | `number \| string` | - |
 | `[nzOffsetX]` | The the X coordinate offset(px), only when placement is `'right'` or `'left'`. | `number` | `0` |
 | `[nzOffsetY]` | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` |
 | `[nzWrapClassName]` | The class name of the container of the Drawer dialog. | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- | --- | --- |
 | nzContent |  The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>` | - |
 | nzContentParams | The component inputs the param / The Template context. | `D` | - |
-| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| nzClosable | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
 | nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
+| nzExtra | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
 | nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
 | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
 | nzCloseOnNavigation    | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
@@ -68,8 +71,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
 | nzTitle | The title for Drawer. | `string \| TemplateRef<void>` | - |
 | nzFooter | The footer for Drawer. | `string \| TemplateRef<void>` | - |
-| nzWidth |  Width of the Drawer dialog.  | `number \| string` | `256` |
-| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` | `256` |
+| nzSize | Preset size of drawer, default `378px` and large `736px`.  | `'default' \| 'large'` | `'default'` |
+| nzWidth |  Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`.  | `number \| string` | - |
+| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`.  | `number \| string` | - |
 | nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
 | nzZIndex| The `z-index` of the Drawer. | `number` | `1000` |
 | nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |

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

@@ -23,8 +23,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
-| `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| `[nzClosable]` | 是否显示左上角的关闭按钮 | `boolean` | `true` |
 | `[nzCloseIcon]` | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
+| `[nzExtra]` | 抽屉右上角的操作区域 | `string \| TemplateRef<void> \| null` | - |
 | `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
 | `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ |
 | `[nzCloseOnNavigation]`    | 当用户在历史中前进/后退时是否关闭抽屉组件。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | ✅ |
@@ -35,8 +36,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzFooter]` | 抽屉的页脚 | `string \| TemplateRef<void>` | - |
 | `[nzVisible]` | Drawer 是否可见，可以使用 `[(nzVisible)]` 双向绑定 | `boolean` | - |
 | `[nzPlacement]` | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效 | `number \| string` | `256` |
-| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
+| `[nzSize]` | 预设抽屉宽度（或高度），default `378px` 和 large `736px`  | `'default' \| 'large'` | `'default'` |
+| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
+| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
 | `[nzOffsetX]` | x 坐标移量(px), 只在方向为 `'right'`或`'left'` 时生效 | `number` | `0` |
 | `[nzOffsetY]` | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` |
 | `[nzWrapClassName]` | 对话框外层容器的类名 | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzContent | Drawer body 的内容 | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \|  Type<T>` | - |
 | nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - |
 | nzOnCancel | 点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时，将自动关闭对话框（返回false可阻止关闭） | `() => Promise<any>` | - |
-| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| nzClosable | 是否显示左上角的关闭按钮 | `boolean` | `true` |
 | nzCloseIcon | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
+| nzExtra | 抽屉右上角的操作区域 | `string \| TemplateRef<void> \| null` | - |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
 | nzMask | 是否展示遮罩 | `boolean` | `true` | ✅ |
 | nzCloseOnNavigation    | 当用户在历史中前进/后退时是否关闭抽屉组件。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | ✅ |
@@ -67,8 +70,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzBodyStyle | Modal body 样式 | `object` | `{}` |
 | nzTitle | 标题 | `string \| TemplateRef<void>` | - |
 | nzFooter | 页脚 | `string \| TemplateRef<void>` | - |
-| nzWidth | 宽度 | `number \| string` | `256` |
-| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
+| nzSize | 预设抽屉宽度（或高度），default `378px` 和 large `736px`  | `'default' \| 'large'` | `'default'` |
+| nzWidth | 宽度, 只在方向为 `'right'`或`'left'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
+| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
 | nzWrapClassName | 对话框外层容器的类名 | `string` | - |
 | nzZIndex| 设置 Drawer 的 `z-index` | `number` | `1000` |
 | nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |

components/drawer/drawer-options.ts

@@ -10,7 +10,10 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzDrawerRef } from './drawer-ref';
 
+export const DRAWER_DEFAULT_SIZE = 378;
+export const DRAWER_LARGE_SIZE = 736;
 export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type NzDrawerSize = 'default' | 'large';
 
 export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
   nzClosable?: boolean;
@@ -21,12 +24,14 @@ export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
   nzKeyboard?: boolean;
   nzNoAnimation?: boolean;
   nzTitle?: string | TemplateRef<{}>;
+  nzExtra?: string | TemplateRef<{}>;
   nzFooter?: string | TemplateRef<{}>;
   nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type<T>;
   nzContentParams?: Partial<T & D>;
   nzMaskStyle?: object;
   nzBodyStyle?: object;
   nzWrapClassName?: string;
+  nzSize?: NzDrawerSize;
   nzWidth?: number | string;
   nzHeight?: number | string;
   nzPlacement?: NzDrawerPlacement;

components/drawer/drawer.component.ts

@@ -39,7 +39,13 @@ import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/ty
 import { InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
 
 import { NzDrawerContentDirective } from './drawer-content.directive';
-import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './drawer-options';
+import {
+  DRAWER_DEFAULT_SIZE,
+  DRAWER_LARGE_SIZE,
+  NzDrawerOptionsOfComponent,
+  NzDrawerPlacement,
+  NzDrawerSize
+} from './drawer-options';
 import { NzDrawerRef } from './drawer-ref';
 
 export const DRAWER_ANIMATE_DURATION = 300;
@@ -98,6 +104,11 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
                     </ng-container>
                   </div>
                 </div>
+                <div *ngIf="nzExtra" class="ant-drawer-extra">
+                  <ng-container *nzStringTemplateOutlet="nzExtra">
+                    <div [innerHTML]="nzExtra"></div>
+                  </ng-container>
+                </div>
               </div>
               <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
                 <ng-template cdkPortalOutlet></ng-template>
@@ -147,13 +158,15 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
   @Input() @InputBoolean() nzNoAnimation = false;
   @Input() @InputBoolean() nzKeyboard: boolean = true;
   @Input() nzTitle?: string | TemplateRef<{}>;
+  @Input() nzExtra?: string | TemplateRef<{}>;
   @Input() nzFooter?: string | TemplateRef<{}>;
   @Input() nzPlacement: NzDrawerPlacement = 'right';
+  @Input() nzSize: NzDrawerSize = 'default';
   @Input() nzMaskStyle: NgStyleInterface = {};
   @Input() nzBodyStyle: NgStyleInterface = {};
   @Input() nzWrapClassName?: string;
-  @Input() nzWidth: number | string = 256;
-  @Input() nzHeight: number | string = 256;
+  @Input() nzWidth?: number | string;
+  @Input() nzHeight?: number | string;
   @Input() nzZIndex = 1000;
   @Input() nzOffsetX = 0;
   @Input() nzOffsetY = 0;
@@ -226,11 +239,19 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
   }
 
   get width(): string | null {
-    return this.isLeftOrRight ? toCssPixel(this.nzWidth) : null;
+    if (this.isLeftOrRight) {
+      const defaultWidth = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+      return this.nzWidth === undefined ? toCssPixel(defaultWidth) : toCssPixel(this.nzWidth);
+    }
+    return null;
   }
 
   get height(): string | null {
-    return !this.isLeftOrRight ? toCssPixel(this.nzHeight) : null;
+    if (!this.isLeftOrRight) {
+      const defaultHeight = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+      return this.nzHeight === undefined ? toCssPixel(defaultHeight) : toCssPixel(this.nzHeight);
+    }
+    return null;
   }
 
   get isLeftOrRight(): boolean {