feat(module:resizable): add resizable component

ref NG-ZORRO#3701

components/components.less

@@ -36,6 +36,7 @@
 @import "./progress/style/entry.less";
 @import "./radio/style/entry.less";
 @import "./rate/style/entry.less";
+@import "./resizable/style/entry.less";
 @import "./select/style/entry.less";
 @import "./skeleton/style/entry.less";
 @import "./slider/style/entry.less";

components/ng-zorro-antd.module.ts

@@ -71,6 +71,9 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
 
+import { NzResizableModule } from 'ng-zorro-antd/resizable';
+export * from 'ng-zorro-antd/resizable';
+
 export * from 'ng-zorro-antd/affix';
 export * from 'ng-zorro-antd/alert';
 export * from 'ng-zorro-antd/anchor';
@@ -181,6 +184,7 @@ export * from 'ng-zorro-antd/version';
     NzProgressModule,
     NzRadioModule,
     NzRateModule,
+    NzResizableModule,
     NzResultModule,
     NzSelectModule,
     NzSkeletonModule,

components/resizable/demo/basic.md

@@ -0,0 +1,16 @@
+---
+order: 0
+title:
+  zh-CN: 基本使用
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+基本使用。
+
+## en-US
+
+Basic Usage.
+
+

components/resizable/demo/basic.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-basic',
+  template: `
+    <div class="box" nz-resizable (nzResize)="onResize($event)" [style.height.px]="height" [style.width.px]="width">
+      <nz-resize-handles></nz-resize-handles>
+      content
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 200px;
+      }
+      .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #eee;
+        border: 1px solid #ddd;
+      }
+    `
+  ]
+})
+export class NzDemoResizableBasicComponent {
+  width = 400;
+  height = 200;
+  id = -1;
+
+  onResize({ width, height }: { width: number; height: number }): void {
+    cancelAnimationFrame(this.id);
+    this.id = requestAnimationFrame(() => {
+      this.width = width;
+      this.height = height;
+    });
+  }
+}

components/resizable/demo/customize.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title:
+  zh-CN: 自定义
+  en-US: Customize
+---
+
+## zh-CN
+
+自定义拖拽柄样式。
+
+
+## en-US
+
+ Customize Handle。
+

components/resizable/demo/customize.ts

@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-customize',
+  template: `
+    <div class="box" nz-resizable (nzResize)="onResize($event)" [style.height.px]="height" [style.width.px]="width">
+      content
+      <nz-resize-handle nzDirection="bottomRight">
+        <i class="bottom-right" nz-icon nzType="caret-up" nzTheme="outline" [nzRotate]="135"></i>
+      </nz-resize-handle>
+      <nz-resize-handle nzDirection="right">
+        <div class="right-wrap">
+          <i class="right" nz-icon nzType="more" nzTheme="outline"></i>
+        </div>
+      </nz-resize-handle>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 200px;
+      }
+
+      .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #eee;
+        border: 1px solid #ddd;
+      }
+
+      .bottom-right {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .right-wrap {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .right {
+        background: #fff;
+        border: 1px solid #ddd;
+        text-align: center;
+        font-size: 12px;
+        height: 20px;
+        line-height: 20px;
+      }
+    `
+  ]
+})
+export class NzDemoResizableCustomizeComponent {
+  width = 400;
+  height = 200;
+  id = -1;
+
+  onResize({ width, height }: { width: number; height: number }): void {
+    cancelAnimationFrame(this.id);
+    this.id = requestAnimationFrame(() => {
+      this.width = width;
+      this.height = height;
+    });
+  }
+}

components/resizable/demo/drawer.md

@@ -0,0 +1,16 @@
+---
+order: 5
+title:
+  zh-CN: 抽屉
+  en-US: Drawer
+---
+
+## zh-CN
+
+调整抽屉宽度。
+
+## en-US
+
+Resize the drawer width.
+
+

components/resizable/demo/drawer.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-drawer',
+  template: `
+    <button nz-button nzType="primary" (click)="open()">Open</button>
+    <nz-drawer
+      [nzClosable]="false"
+      [nzVisible]="visible"
+      [nzBodyStyle]="{
+        padding: 0,
+        height: 'calc(100vh - 55px)'
+      }"
+      [nzWidth]="width"
+      nzPlacement="left"
+      nzTitle="Resizable Drawer"
+      (nzOnClose)="close()"
+    >
+      <div
+        *ngIf="visible"
+        class="drawer-body"
+        nz-resizable
+        nzBounds="window"
+        [nzMinWidth]="256"
+        (nzResize)="onResize($event)"
+      >
+        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </div>
+    </nz-drawer>
+  `,
+  styles: [
+    `
+      .drawer-body {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+      }
+    `
+  ]
+})
+export class NzDemoResizableDrawerComponent {
+  width = 256;
+  visible = false;
+  id = -1;
+
+  onResize({ width }: { width: number }): void {
+    cancelAnimationFrame(this.id);
+    this.id = requestAnimationFrame(() => {
+      this.width = width;
+    });
+  }
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+}

components/resizable/demo/grid.md

@@ -0,0 +1,17 @@
+---
+order: 4
+title:
+  zh-CN: 栅格
+  en-US: Grid
+---
+
+## zh-CN
+
+配合栅格使用
+
+## en-US
+
+Resize with grid.
+
+
+

components/resizable/demo/grid.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-grid',
+  template: `
+    <div nz-row>
+      <div
+        class="col"
+        nz-col
+        nz-resizable
+        (nzResize)="onResize($event)"
+        [nzMinColumn]="3"
+        [nzMaxColumn]="20"
+        [nzGridColumnCount]="24"
+        [nzSpan]="basicCol"
+      >
+        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
+        col-{{ basicCol }}
+      </div>
+      <div class="col right" nz-col [nzSpan]="24 - basicCol">col-{{ 24 - basicCol }}</div>
+    </div>
+  `,
+  styles: [
+    `
+      .col {
+        padding: 16px 0;
+        text-align: center;
+        border-radius: 0;
+        min-height: 30px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        background: rgba(0, 160, 233, 0.7);
+        color: #fff;
+      }
+
+      .col.right {
+        background: #00a0e9;
+      }
+    `
+  ]
+})
+export class NzDemoResizableGridComponent {
+  basicCol = 8;
+  id = -1;
+
+  onResize({ col }: { col: number }): void {
+    this.id = requestAnimationFrame(() => {
+      this.basicCol = col;
+    });
+  }
+}

components/resizable/demo/lock-aspect-ratio.md

@@ -0,0 +1,16 @@
+---
+order: 2
+title:
+  zh-CN: 锁定比例
+  en-US: Lock Aspect Ratio
+---
+
+## zh-CN
+
+锁定宽高比。
+
+## en-US
+
+Lock the resize aspect ratio.
+
+

components/resizable/demo/lock-aspect-ratio.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-lock-aspect-ratio',
+  template: `
+    <div
+      class="box"
+      nz-resizable
+      nzLockAspectRatio
+      (nzResize)="onResize($event)"
+      [style.height.px]="height"
+      [style.width.px]="width"
+    >
+      <nz-resize-handles></nz-resize-handles>
+      content
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 200px;
+      }
+      .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #eee;
+        border: 1px solid #ddd;
+      }
+    `
+  ]
+})
+export class NzDemoResizableLockAspectRatioComponent {
+  width = 400;
+  height = 200;
+  id = -1;
+
+  onResize({ width, height }: { width: number; height: number }): void {
+    cancelAnimationFrame(this.id);
+    this.id = requestAnimationFrame(() => {
+      this.width = width;
+      this.height = height;
+    });
+  }
+}