feat(module:resizable): support standalone component (#8225)

* feat(module:resizable): support standalone component * feat(module:resizable): support standalone component
NG-ZORRO · Dec 4, 2023 · ff14ed0 · ff14ed0
1 parent adc5e94
commit ff14ed0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 86 deletions.
diff --git a/components/resizable/doc/index.en-US.md b/components/resizable/doc/index.en-US.md
@@ -30,16 +30,14 @@ import { NzResizableModule } from 'ng-zorro-antd/resizable';
 ### Import Style
 
 ```less
-@import "node_modules/ng-zorro-antd/resizable/style/entry.less"
+@import 'node_modules/ng-zorro-antd/resizable/style/entry.less';
 ```
 
-
-
 ## API
 
-### [nz-resizable]
+### [nz-resizable]:standalone
 
-Resizable element the `position` attribute  must be one of `'relative' | 'absolute' | 'fixed' |'sticky'`，default is `'relative'`.
+Resizable element the `position` attribute must be one of `'relative' | 'absolute' | 'fixed' |'sticky'`，default is `'relative'`.
 
 ```ts
 interface NzResizeEvent {
@@ -51,24 +49,24 @@ interface NzResizeEvent {
 }
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| [nzBounds] | Specifies resize boundaries. | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
-| [nzMaxHeight] | Maximum height of resizable element | `number` | - |
-| [nzMaxWidth] | Maximum width of resizable element | `number` | - |
-| [nzMinHeight] | Minimum height of resizable element | `number` | `40` |
-| [nzMinWidth] | Minimum width of resizable element | `number` | `40` |
-| [nzGridColumnCount] | Number of columns(-1 is not grid) | `number` | `-1` |
-| [nzMaxColumn] | Maximum Column | `number` | - |
-| [nzMinColumn] | Minimum Column | `number` | - |
-| [nzLockAspectRatio] | Lock the aspect ratio based on the initial size | `boolean` | `false` |
-| [nzPreview] | Enable preview when resizing | `boolean` | `false` |
-| [nzDisabled] | Disable resize | `boolean` | `false` |
-| (nzResize) | Calls when Resizing | `EventEmitter<NzResizeEvent>` | - |
-| (nzResizeStart) | Calls when resize start | `EventEmitter<NzResizeEvent>` | - |
-| (nzResizeEnd) | Calls when resize end | `EventEmitter<NzResizeEvent>` | - |
-
-### nz-resize-handle
+| Property            | Description                                     | Type                                              | Default  |
+| ------------------- | ----------------------------------------------- | ------------------------------------------------- | -------- |
+| [nzBounds]          | Specifies resize boundaries.                    | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
+| [nzMaxHeight]       | Maximum height of resizable element             | `number`                                          | -        |
+| [nzMaxWidth]        | Maximum width of resizable element              | `number`                                          | -        |
+| [nzMinHeight]       | Minimum height of resizable element             | `number`                                          | `40`     |
+| [nzMinWidth]        | Minimum width of resizable element              | `number`                                          | `40`     |
+| [nzGridColumnCount] | Number of columns(-1 is not grid)               | `number`                                          | `-1`     |
+| [nzMaxColumn]       | Maximum Column                                  | `number`                                          | -        |
+| [nzMinColumn]       | Minimum Column                                  | `number`                                          | -        |
+| [nzLockAspectRatio] | Lock the aspect ratio based on the initial size | `boolean`                                         | `false`  |
+| [nzPreview]         | Enable preview when resizing                    | `boolean`                                         | `false`  |
+| [nzDisabled]        | Disable resize                                  | `boolean`                                         | `false`  |
+| (nzResize)          | Calls when Resizing                             | `EventEmitter<NzResizeEvent>`                     | -        |
+| (nzResizeStart)     | Calls when resize start                         | `EventEmitter<NzResizeEvent>`                     | -        |
+| (nzResizeEnd)       | Calls when resize end                           | `EventEmitter<NzResizeEvent>`                     | -        |
+
+### nz-resize-handle:standalone
 
 Define handles and directions.
 
@@ -77,12 +75,12 @@ type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bot
 type NzCursorType = 'window' | 'grid';
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| [nzDirection] | Set the direction of resizable | `NzResizeDirection` | `'bottomRight'` |
-| [nzCursorType] | Cursor type for handle | `NzCursorType` | `'window'` |
+| Property       | Description                    | Type                | Default         |
+| -------------- | ------------------------------ | ------------------- | --------------- |
+| [nzDirection]  | Set the direction of resizable | `NzResizeDirection` | `'bottomRight'` |
+| [nzCursorType] | Cursor type for handle         | `NzCursorType`      | `'window'`      |
 
-### nz-resize-handles
+### nz-resize-handles:standalone
 
 Simpler way to define handles.
 
@@ -93,8 +91,8 @@ interface NzResizeHandleOption {
 }
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
+| Property       | Description                               | Type                                            | Default        |
+| -------------- | ----------------------------------------- | ----------------------------------------------- | -------------- |
 | [nzDirections] | Allow handle directions or handle options | `(NzResizeDirection \| NzResizeHandleOption)[]` | ALL DIRECTIONS |
 
 ### Styling
@@ -104,16 +102,16 @@ The Component styles only contain the necessary positional properties and simple
 - `.nz-resizable` The `nz-resizable` component namespace
 - `.nz-resizable-resizing` This class name that is added to `nz-resizable` while resizing
 - `.nz-resizable-preview` The ghost element's class name when enable preview
-- `.nz-resizable-handle-box-hover` This class name that is added to `nz-resize-handle` while mouse hover on  `nz-resizable`
+- `.nz-resizable-handle-box-hover` This class name that is added to `nz-resize-handle` while mouse hover on `nz-resizable`
 - `.nz-resizable-handle` The `nz-resize-handle` component namespace and directions class name
-    * `.nz-resizable-handle-top`
-    * `.nz-resizable-handle-left`
-    * `.nz-resizable-handle-bottom`
-    * `.nz-resizable-handle-right`
-    * `.nz-resizable-handle-topRight`
-    * `.nz-resizable-handle-topLeft`
-    * `.nz-resizable-handle-bottomRight`
-    * `.nz-resizable-handle-bottomLeft`
+  - `.nz-resizable-handle-top`
+  - `.nz-resizable-handle-left`
+  - `.nz-resizable-handle-bottom`
+  - `.nz-resizable-handle-right`
+  - `.nz-resizable-handle-topRight`
+  - `.nz-resizable-handle-topLeft`
+  - `.nz-resizable-handle-bottomRight`
+  - `.nz-resizable-handle-bottomLeft`
 - `.nz-resizable-handle-cursor-type` Cursor type namespace for handle
-    * `.nz-resizable-handle-cursor-type-window`
-    * `.nz-resizable-handle-cursor-type-grid`
+  - `.nz-resizable-handle-cursor-type-window`
+  - `.nz-resizable-handle-cursor-type-grid`
diff --git a/components/resizable/doc/index.zh-CN.md b/components/resizable/doc/index.zh-CN.md
@@ -31,12 +31,12 @@ import { NzResizableModule } from 'ng-zorro-antd/resizable';
 ### 引入样式
 
 ```less
-@import "node_modules/ng-zorro-antd/resizable/style/entry.less"
+@import 'node_modules/ng-zorro-antd/resizable/style/entry.less';
 ```
 
 ## API
 
-### [nz-resizable]
+### [nz-resizable]:standalone
 
 声明在需要调整尺寸的元素上，元素 `position` 属性必须为 `'relative' | 'absolute' | 'fixed' |'sticky'` 之一，默认会自动设置为 `'relative'`。
 
@@ -50,24 +50,24 @@ interface NzResizeEvent {
 }
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| [nzBounds] | 调整尺寸的边界 | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
-| [nzMaxHeight] | 最大高度(超过边界部分忽略) | `number` | - |
-| [nzMaxWidth] | 最大宽度(超过边界部分忽略) | `number` | - |
-| [nzMinHeight] | 最小高度 | `number` | `40` |
-| [nzMinWidth] | 最小宽度 | `number` | `40` |
-| [nzGridColumnCount] | 栅格列数(-1 为不栅格) | `number` | `-1` |
-| [nzMaxColumn] | 栅格最大列数 | `number` | - |
-| [nzMinColumn] | 栅格最小列数 | `number` | - |
-| [nzLockAspectRatio] | 锁定宽高比 | `boolean` | `false` |
-| [nzPreview] | 开启预览 | `boolean` | `false` |
-| [nzDisabled] | 禁用 | `boolean` | `false` |
-| (nzResize) | 调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
-| (nzResizeStart) | 开始调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
-| (nzResizeEnd) | 结束调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
-
-### nz-resize-handle
+| 参数                | 说明                       | 类型                                              | 默认值   |
+| ------------------- | -------------------------- | ------------------------------------------------- | -------- |
+| [nzBounds]          | 调整尺寸的边界             | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
+| [nzMaxHeight]       | 最大高度(超过边界部分忽略) | `number`                                          | -        |
+| [nzMaxWidth]        | 最大宽度(超过边界部分忽略) | `number`                                          | -        |
+| [nzMinHeight]       | 最小高度                   | `number`                                          | `40`     |
+| [nzMinWidth]        | 最小宽度                   | `number`                                          | `40`     |
+| [nzGridColumnCount] | 栅格列数(-1 为不栅格)      | `number`                                          | `-1`     |
+| [nzMaxColumn]       | 栅格最大列数               | `number`                                          | -        |
+| [nzMinColumn]       | 栅格最小列数               | `number`                                          | -        |
+| [nzLockAspectRatio] | 锁定宽高比                 | `boolean`                                         | `false`  |
+| [nzPreview]         | 开启预览                   | `boolean`                                         | `false`  |
+| [nzDisabled]        | 禁用                       | `boolean`                                         | `false`  |
+| (nzResize)          | 调整尺寸时的事件           | `EventEmitter<NzResizeEvent>`                     | -        |
+| (nzResizeStart)     | 开始调整尺寸时的事件       | `EventEmitter<NzResizeEvent>`                     | -        |
+| (nzResizeEnd)       | 结束调整尺寸时的事件       | `EventEmitter<NzResizeEvent>`                     | -        |
+
+### nz-resize-handle:standalone
 
 定义调整手柄及方向。
 
@@ -76,12 +76,12 @@ type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bot
 type NzCursorType = 'window' | 'grid';
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| [nzDirection] | 调整方向 | `NzResizeDirection` | `'bottomRight'` |
-| [nzCursorType] | 手柄的光标类型 | `NzCursorType` | `'window'` |
+| 参数           | 说明           | 类型                | 默认值          |
+| -------------- | -------------- | ------------------- | --------------- |
+| [nzDirection]  | 调整方向       | `NzResizeDirection` | `'bottomRight'` |
+| [nzCursorType] | 手柄的光标类型 | `NzCursorType`      | `'window'`      |
 
-### nz-resize-handles
+### nz-resize-handles:standalone
 
 定义调整手柄的快捷组件。
 
@@ -92,27 +92,27 @@ interface NzResizeHandleOption {
 }
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 参数           | 说明                     | 类型                                            | 默认值   |
+| -------------- | ------------------------ | ----------------------------------------------- | -------- |
 | [nzDirections] | 需要的手柄方向或手柄选项 | `(NzResizeDirection \| NzResizeHandleOption)[]` | 所有方向 |
 
 ### 样式
 
 组件样式只包含了必要的位置属性和简单的样式，你可以通过覆写下列类名自定义样式。
 
 - `.nz-resizable` `nz-resizable` 组件命名空间
-- `.nz-resizable-resizing` 正在调整尺寸时被添加到  `nz-resizable` 上
+- `.nz-resizable-resizing` 正在调整尺寸时被添加到 `nz-resizable` 上
 - `.nz-resizable-preview` 开启预览时幽灵元素的类名
 - `.nz-resizable-handle-box-hover` 当鼠标悬停在 `nz-resizable` 上时被添加到 ` nz-resize-handle` 上。
 - `.nz-resizable-handle` 调整手柄命名空间及各方向类名
-    * `.nz-resizable-handle-top`
-    * `.nz-resizable-handle-left`
-    * `.nz-resizable-handle-bottom`
-    * `.nz-resizable-handle-right`
-    * `.nz-resizable-handle-topRight`
-    * `.nz-resizable-handle-topLeft`
-    * `.nz-resizable-handle-bottomRight`
-    * `.nz-resizable-handle-bottomLeft`
+  - `.nz-resizable-handle-top`
+  - `.nz-resizable-handle-left`
+  - `.nz-resizable-handle-bottom`
+  - `.nz-resizable-handle-right`
+  - `.nz-resizable-handle-topRight`
+  - `.nz-resizable-handle-topLeft`
+  - `.nz-resizable-handle-bottomRight`
+  - `.nz-resizable-handle-bottomLeft`
 - `.nz-resizable-handle-cursor-type` 手柄的光标类型命名空间
-    * `.nz-resizable-handle-cursor-type-window`
-    * `.nz-resizable-handle-cursor-type-grid`
+  - `.nz-resizable-handle-cursor-type-window`
+  - `.nz-resizable-handle-cursor-type-grid`
diff --git a/components/resizable/resizable.directive.ts b/components/resizable/resizable.directive.ts
@@ -42,7 +42,8 @@ export interface NzResizeEvent {
     class: 'nz-resizable',
     '[class.nz-resizable-resizing]': 'resizing',
     '[class.nz-resizable-disabled]': 'nzDisabled'
-  }
+  },
+  standalone: true
 })
 export class NzResizableDirective implements AfterViewInit, OnDestroy {
   static ngAcceptInputType_nzLockAspectRatio: BooleanInput;

diff --git a/components/resizable/resizable.module.ts b/components/resizable/resizable.module.ts
@@ -3,16 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzResizableDirective } from './resizable.directive';
 import { NzResizeHandleComponent } from './resize-handle.component';
 import { NzResizeHandlesComponent } from './resize-handles.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent],
+  imports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent],
   exports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent]
 })
 export class NzResizableModule {}
diff --git a/components/resizable/resize-handle.component.ts b/components/resizable/resize-handle.component.ts
@@ -59,7 +59,8 @@ const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveLis
     '[class.nz-resizable-handle-cursor-type-grid]': `nzCursorType === 'grid'`,
     '[class.nz-resizable-handle-cursor-type-window]': `nzCursorType === 'window'`
   },
-  providers: [NzDestroyService]
+  providers: [NzDestroyService],
+  standalone: true
 })
 export class NzResizeHandleComponent implements OnInit {
   @Input() nzDirection: NzResizeDirection = 'bottomRight';

diff --git a/components/resizable/resize-handles.component.ts b/components/resizable/resize-handles.component.ts
@@ -3,9 +3,10 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgForOf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
-import { NzCursorType, NzResizeDirection } from './resize-handle.component';
+import { NzCursorType, NzResizeDirection, NzResizeHandleComponent } from './resize-handle.component';
 
 export const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = [
   'bottomRight',
@@ -46,7 +47,9 @@ function normalizeResizeHandleOptions(value: Array<NzResizeDirection | NzResizeH
       [nzCursorType]="option.cursorType"
     ></nz-resize-handle>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NzResizeHandleComponent, NgForOf],
+  standalone: true
 })
 export class NzResizeHandlesComponent implements OnChanges {
   @Input() nzDirections: Array<NzResizeDirection | NzResizeHandleOption> = DEFAULT_RESIZE_DIRECTION;