feat(module:resizable): add resizable component (#3771)

* feat(module:resizable): add resizable component

ref #3701

* docs(module:resizable): add layout demo

* test(module:resizable): add test cases

* docs(module:resizable): add module file

* test(module:resizable): add test cases

* docs: add experimental docs

* refactor(module:resizable): refactor size calculation

* docs(module:resizable): update docs

* docs: add static paths

* docs: update

components/core/util/ensure-in-bounds.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export function ensureInBounds(value: number, boundValue: number): number {
+  return value ? (value < boundValue ? value : boundValue) : boundValue;
+}

components/core/util/public-api.ts

@@ -19,3 +19,4 @@ export * from './textarea-caret-position';
 export * from './style-checke';
 export * from './text-measure';
 export * from './measure-scrollbar';
+export * from './ensure-in-bounds';

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,49 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-resizable-basic',
+  template: `
+    <div
+      class="box"
+      nz-resizable
+      [nzMaxWidth]="600"
+      [nzMinWidth]="80"
+      [nzMaxHeight]="200"
+      [nzMinHeight]="80"
+      [style.height.px]="height"
+      [style.width.px]="width"
+      (nzResize)="onResize($event)"
+    >
+      <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: 6
+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,52 @@
+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]="col"
+      >
+        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
+        col-{{ col }}
+      </div>
+      <div class="col right" nz-col [nzSpan]="24 - col">col-{{ 24 - col }}</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 {
+  col = 8;
+  id = -1;
+
+  onResize({ col }: { col: number }): void {
+    cancelAnimationFrame(this.id);
+    this.id = requestAnimationFrame(() => {
+      this.col = col;
+    });
+  }
+}

components/resizable/demo/layout.md

@@ -0,0 +1,16 @@
+---
+order: 5
+title:
+  zh-CN: 布局
+  en-US: Layout
+---
+
+## zh-CN
+
+调整布局尺寸。
+
+## en-US
+
+Layout with resizable.
+
+