feat(module:input): support standalone component (#8247)

NG-ZORRO · Dec 4, 2023 · 0a7028c · 0a7028c
1 parent b0dbfbc
commit 0a7028c
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 72 deletions.
diff --git a/components/input/autosize.directive.ts b/components/input/autosize.directive.ts
@@ -23,7 +23,8 @@ export interface AutoSizeType {
     // Browsers normally show two rows by default and therefore this limits the minRows binding.
     rows: '1',
     '(input)': 'noopInputHandler()'
-  }
+  },
+  standalone: true
 })
 export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
   private autosize: boolean = false;

diff --git a/components/input/doc/index.en-US.md b/components/input/doc/index.en-US.md
@@ -19,33 +19,33 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 
 ## API
 
-### [nz-input]
+### [nz-input]:standalone
 
 All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`.
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzAutosize]` | Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
-| `[nzBorderless]` | Whether hide border | `boolean` | `false` |
-| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
-| `[nzStepperless]` | Whether hide stepper when input type is number | `'boolean' \| 'true'` | - |
-
-### nz-input-group
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>` | - |
-| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input field, can work with `nzAddOnAfter`   | `string \| TemplateRef<void>` | - |
-| `[nzPrefix]` | The prefix icon for the Input, can work with `nzSuffix` | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | The suffix icon for the Input, can work with `nzPrefix` | `string \| TemplateRef<void>` | - |
-| `[nzCompact]` | Whether use compact style | `boolean` | `false` |
-| `[nzSize]` | The size of `nz-input-group` specifies the size of the included `nz-input` fields | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
-
-### nz-textarea-count
-
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| `[nzMaxCharacterCount]` | `textarea` maximum character count displayed | `number` | - |
+| Property          | Description                                                                                                          | Type                                              | Default     |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- |
+| `[nzSize]`        | The size of the input box. Note: in the context of a form, the `large` size is used.                                 | `'large' \| 'small' \| 'default'`                 | `'default'` |
+| `[nzAutosize]`    | Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false`     |
+| `[nzBorderless]`  | Whether hide border                                                                                                  | `boolean`                                         | `false`     |
+| `[nzStatus]`      | Set validation status                                                                                                | `'error' \| 'warning'`                            | -           |
+| `[nzStepperless]` | Whether hide stepper when input type is number                                                                       | `'boolean' \| 'true'`                             | -           |
+
+### nz-input-group:standalone
+
+| Property          | Description                                                                                          | Type                              | Default     |
+| ----------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `[nzAddOnAfter]`  | The label text displayed after (on the right side of) the input field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>`     | -           |
+| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input field, can work with `nzAddOnAfter`  | `string \| TemplateRef<void>`     | -           |
+| `[nzPrefix]`      | The prefix icon for the Input, can work with `nzSuffix`                                              | `string \| TemplateRef<void>`     | -           |
+| `[nzSuffix]`      | The suffix icon for the Input, can work with `nzPrefix`                                              | `string \| TemplateRef<void>`     | -           |
+| `[nzCompact]`     | Whether use compact style                                                                            | `boolean`                         | `false`     |
+| `[nzSize]`        | The size of `nz-input-group` specifies the size of the included `nz-input` fields                    | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]`      | Set validation status                                                                                | `'error' \| 'warning'`            | -           |
+
+### nz-textarea-count:standalone
+
+| Property                    | Description                                      | Type                    | Default         |
+| --------------------------- | ------------------------------------------------ | ----------------------- | --------------- |
+| `[nzMaxCharacterCount]`     | `textarea` maximum character count displayed     | `number`                | -               |
 | `[nzComputeCharacterCount]` | customized `characterCount` computation function | `(v: string) => number` | `v => v.length` |
diff --git a/components/input/doc/index.zh-CN.md b/components/input/doc/index.zh-CN.md
@@ -19,33 +19,33 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 
 ## API
 
-### [nz-input]
-
-nz-input 可以使用所有的W3C标准下的所有 [使用方式](https://www.w3schools.com/tags/tag_input.asp) 和 Angular对 input 的全部额外功能支持。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzAutosize]` | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
-| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
-| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
-
-### nz-input-group
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzAddOnAfter]` | 带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>` | - |
-| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef<void>` | - |
-| `[nzPrefix]` | 带有前缀图标的 input，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | 带有后缀图标的 input，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef<void>` | - |
-| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` |
-| `[nzSearch]` | 是否用搜索框 | `boolean` | `false` |
-| `[nzSize]` | `nz-input-group` 中所有的 `nz-input` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
-
-### nz-textarea-count
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzMaxCharacterCount]` | `textarea` 数字提示显示的最大值 | `number` | - |
+### [nz-input]:standalone
+
+nz-input 可以使用所有的 W3C 标准下的所有 [使用方式](https://www.w3schools.com/tags/tag_input.asp) 和 Angular 对 input 的全部额外功能支持。
+
+| 参数             | 说明                                                                                           | 类型                                              | 默认值      |
+| ---------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- |
+| `[nzSize]`       | 控件大小。注：标准表单内的输入框大小限制为 `large`                                             | `'large' \| 'small' \| 'default'`                 | `'default'` |
+| `[nzAutosize]`   | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false`     |
+| `[nzBorderless]` | 是否隐藏边框                                                                                   | `boolean`                                         | `false`     |
+| `[nzStatus]`     | 设置校验状态                                                                                   | `'error' \| 'warning'`                            | -           |
+
+### nz-input-group:standalone
+
+| 参数              | 说明                                                          | 类型                              | 默认值      |
+| ----------------- | ------------------------------------------------------------- | --------------------------------- | ----------- |
+| `[nzAddOnAfter]`  | 带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>`     | -           |
+| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用  | `string \| TemplateRef<void>`     | -           |
+| `[nzPrefix]`      | 带有前缀图标的 input，可以与 `nzSuffix` 配合使用              | `string \| TemplateRef<void>`     | -           |
+| `[nzSuffix]`      | 带有后缀图标的 input，可以与 `nzPrefix` 配合使用              | `string \| TemplateRef<void>`     | -           |
+| `[nzCompact]`     | 是否用紧凑模式                                                | `boolean`                         | `false`     |
+| `[nzSearch]`      | 是否用搜索框                                                  | `boolean`                         | `false`     |
+| `[nzSize]`        | `nz-input-group` 中所有的 `nz-input` 的大小                   | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]`      | 设置校验状态                                                  | `'error' \| 'warning'`            | -           |
+
+### nz-textarea-count:standalone
+
+| 参数                        | 说明                               | 类型                    | 默认值          |
+| --------------------------- | ---------------------------------- | ----------------------- | --------------- |
+| `[nzMaxCharacterCount]`     | `textarea` 数字提示显示的最大值    | `number`                | -               |
 | `[nzComputeCharacterCount]` | 自定义计算 `characterCount` 的函数 | `(v: string) => number` | `v => v.length` |
diff --git a/components/input/input-group-slot.component.ts b/components/input/input-group-slot.component.ts
@@ -3,8 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: '[nz-input-group-slot]',
   preserveWhitespaces: false,
@@ -19,7 +23,9 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
     '[class.ant-input-group-addon]': `type === 'addon'`,
     '[class.ant-input-prefix]': `type === 'prefix'`,
     '[class.ant-input-suffix]': `type === 'suffix'`
-  }
+  },
+  imports: [NzIconModule, NgIf, NzOutletModule],
+  standalone: true
 })
 export class NzInputGroupSlotComponent {
   @Input() icon?: string | null = null;

diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts
@@ -5,6 +5,7 @@
 
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -27,14 +28,16 @@ import {
 import { merge, Subject } from 'rxjs';
 import { distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators';
 
-import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
+import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
 
+import { NzInputGroupSlotComponent } from './input-group-slot.component';
 import { NzInputDirective } from './input.directive';
 
 @Directive({
-  selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`
+  selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`,
+  standalone: true
 })
 export class NzInputGroupWhitSuffixOrPrefixDirective {
   constructor(public elementRef: ElementRef) {}
@@ -127,7 +130,9 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
     '[class.ant-input-group-rtl]': `dir === 'rtl'`,
     '[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
     '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
-  }
+  },
+  imports: [NgIf, NzInputGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
+  standalone: true
 })
 export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_nzSearch: BooleanInput;

diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts
@@ -38,7 +38,8 @@ import { InputBoolean, getStatusClassNames } from 'ng-zorro-antd/core/util';
     '[attr.disabled]': 'disabled || null',
     '[class.ant-input-rtl]': `dir=== 'rtl'`,
     '[class.ant-input-stepperless]': `nzStepperless`
-  }
+  },
+  standalone: true
 })
 export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_disabled: BooleanInput;

diff --git a/components/input/input.module.ts b/components/input/input.module.ts
@@ -3,23 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzFormPatchModule } from 'ng-zorro-antd/core/form';
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
 import { NzAutosizeDirective } from './autosize.directive';
 import { NzInputGroupSlotComponent } from './input-group-slot.component';
 import { NzInputGroupComponent, NzInputGroupWhitSuffixOrPrefixDirective } from './input-group.component';
 import { NzInputDirective } from './input.directive';
 import { NzTextareaCountComponent } from './textarea-count.component';
 
 @NgModule({
-  declarations: [
+  imports: [
     NzTextareaCountComponent,
     NzInputDirective,
     NzInputGroupComponent,
@@ -33,7 +26,6 @@ import { NzTextareaCountComponent } from './textarea-count.component';
     NzInputGroupComponent,
     NzAutosizeDirective,
     NzInputGroupWhitSuffixOrPrefixDirective
-  ],
-  imports: [BidiModule, CommonModule, NzIconModule, PlatformModule, NzOutletModule, NzFormPatchModule]
+  ]
 })
 export class NzInputModule {}
diff --git a/components/input/textarea-count.component.ts b/components/input/textarea-count.component.ts
@@ -27,7 +27,8 @@ import { NzInputDirective } from './input.directive';
   host: {
     class: 'ant-input-textarea-show-count'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
 })
 export class NzTextareaCountComponent implements AfterContentInit, OnDestroy {
   @ContentChild(NzInputDirective, { static: true }) nzInputDirective!: NzInputDirective;