Skip to content

Commit 0a7028c

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:input): support standalone component (#8247)
1 parent b0dbfbc commit 0a7028c

File tree

8 files changed

+78
-72
lines changed

8 files changed

+78
-72
lines changed

‎components/input/autosize.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ export interface AutoSizeType {
2323
// Browsers normally show two rows by default and therefore this limits the minRows binding.
2424
rows: '1',
2525
'(input)': 'noopInputHandler()'
26-
}
26+
},
27+
standalone: true
2728
})
2829
export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
2930
private autosize: boolean = false;

‎components/input/doc/index.en-US.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,33 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1919

2020
## API
2121

22-
### [nz-input]
22+
### [nz-input]:standalone
2323

2424
All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`.
2525

26-
| Property | Description | Type | Default |
27-
| -------- | ----------- | ---- | ------- |
28-
| `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
29-
| `[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` |
30-
| `[nzBorderless]` | Whether hide border | `boolean` | `false` |
31-
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
32-
| `[nzStepperless]` | Whether hide stepper when input type is number | `'boolean' \| 'true'` | - |
33-
34-
### nz-input-group
35-
36-
| Property | Description | Type | Default |
37-
| -------- | ----------- | ---- | ------- |
38-
| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>` | - |
39-
| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input field, can work with `nzAddOnAfter` | `string \| TemplateRef<void>` | - |
40-
| `[nzPrefix]` | The prefix icon for the Input, can work with `nzSuffix` | `string \| TemplateRef<void>` | - |
41-
| `[nzSuffix]` | The suffix icon for the Input, can work with `nzPrefix` | `string \| TemplateRef<void>` | - |
42-
| `[nzCompact]` | Whether use compact style | `boolean` | `false` |
43-
| `[nzSize]` | The size of `nz-input-group` specifies the size of the included `nz-input` fields | `'large' \| 'small' \| 'default'` | `'default'` |
44-
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
45-
46-
### nz-textarea-count
47-
48-
| Property | Description | Type | Default |
49-
| --- | --- | --- | --- |
50-
| `[nzMaxCharacterCount]` | `textarea` maximum character count displayed | `number` | - |
26+
| Property | Description | Type | Default |
27+
| ----------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- |
28+
| `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
29+
| `[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` |
30+
| `[nzBorderless]` | Whether hide border | `boolean` | `false` |
31+
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
32+
| `[nzStepperless]` | Whether hide stepper when input type is number | `'boolean' \| 'true'` | - |
33+
34+
### nz-input-group:standalone
35+
36+
| Property | Description | Type | Default |
37+
| ----------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
38+
| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>` | - |
39+
| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input field, can work with `nzAddOnAfter` | `string \| TemplateRef<void>` | - |
40+
| `[nzPrefix]` | The prefix icon for the Input, can work with `nzSuffix` | `string \| TemplateRef<void>` | - |
41+
| `[nzSuffix]` | The suffix icon for the Input, can work with `nzPrefix` | `string \| TemplateRef<void>` | - |
42+
| `[nzCompact]` | Whether use compact style | `boolean` | `false` |
43+
| `[nzSize]` | The size of `nz-input-group` specifies the size of the included `nz-input` fields | `'large' \| 'small' \| 'default'` | `'default'` |
44+
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
45+
46+
### nz-textarea-count:standalone
47+
48+
| Property | Description | Type | Default |
49+
| --------------------------- | ------------------------------------------------ | ----------------------- | --------------- |
50+
| `[nzMaxCharacterCount]` | `textarea` maximum character count displayed | `number` | - |
5151
| `[nzComputeCharacterCount]` | customized `characterCount` computation function | `(v: string) => number` | `v => v.length` |

‎components/input/doc/index.zh-CN.md‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,33 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1919

2020
## API
2121

22-
### [nz-input]
23-
24-
nz-input 可以使用所有的W3C标准下的所有 [使用方式](https://www.w3schools.com/tags/tag_input.asp) 和 Angular对 input 的全部额外功能支持。
25-
26-
| 参数 | 说明 | 类型 | 默认值 |
27-
| --- | --- | --- | --- |
28-
| `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
29-
| `[nzAutosize]` | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
30-
| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
31-
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
32-
33-
### nz-input-group
34-
35-
| 参数 | 说明 | 类型 | 默认值 |
36-
| --- | --- | --- | --- |
37-
| `[nzAddOnAfter]` | 带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>` | - |
38-
| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef<void>` | - |
39-
| `[nzPrefix]` | 带有前缀图标的 input，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef<void>` | - |
40-
| `[nzSuffix]` | 带有后缀图标的 input，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef<void>` | - |
41-
| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` |
42-
| `[nzSearch]` | 是否用搜索框 | `boolean` | `false` |
43-
| `[nzSize]` | `nz-input-group` 中所有的 `nz-input` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` |
44-
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
45-
46-
### nz-textarea-count
47-
48-
| 参数 | 说明 | 类型 | 默认值 |
49-
| --- | --- | --- | --- |
50-
| `[nzMaxCharacterCount]` | `textarea` 数字提示显示的最大值 | `number` | - |
22+
### [nz-input]:standalone
23+
24+
nz-input 可以使用所有的 W3C 标准下的所有 [使用方式](https://www.w3schools.com/tags/tag_input.asp) 和 Angular 对 input 的全部额外功能支持。
25+
26+
| 参数 | 说明 | 类型 | 默认值 |
27+
| ---------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- |
28+
| `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
29+
| `[nzAutosize]` | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
30+
| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
31+
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
32+
33+
### nz-input-group:standalone
34+
35+
| 参数 | 说明 | 类型 | 默认值 |
36+
| ----------------- | ------------------------------------------------------------- | --------------------------------- | ----------- |
37+
| `[nzAddOnAfter]` | 带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>` | - |
38+
| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef<void>` | - |
39+
| `[nzPrefix]` | 带有前缀图标的 input，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef<void>` | - |
40+
| `[nzSuffix]` | 带有后缀图标的 input，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef<void>` | - |
41+
| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` |
42+
| `[nzSearch]` | 是否用搜索框 | `boolean` | `false` |
43+
| `[nzSize]` | `nz-input-group` 中所有的 `nz-input` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` |
44+
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
45+
46+
### nz-textarea-count:standalone
47+
48+
| 参数 | 说明 | 类型 | 默认值 |
49+
| --------------------------- | ---------------------------------- | ----------------------- | --------------- |
50+
| `[nzMaxCharacterCount]` | `textarea` 数字提示显示的最大值 | `number` | - |
5151
| `[nzComputeCharacterCount]` | 自定义计算 `characterCount` 的函数 | `(v: string) => number` | `v => v.length` |

‎components/input/input-group-slot.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgIf } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
78

9+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
10+
import { NzIconModule } from 'ng-zorro-antd/icon';
11+
812
@Component({
913
selector: '[nz-input-group-slot]',
1014
preserveWhitespaces: false,
@@ -19,7 +23,9 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
1923
'[class.ant-input-group-addon]': `type === 'addon'`,
2024
'[class.ant-input-prefix]': `type === 'prefix'`,
2125
'[class.ant-input-suffix]': `type === 'suffix'`
22-
}
26+
},
27+
imports: [NzIconModule, NgIf, NzOutletModule],
28+
standalone: true
2329
})
2430
export class NzInputGroupSlotComponent {
2531
@Input() icon?: string | null = null;

‎components/input/input-group.component.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import { FocusMonitor } from '@angular/cdk/a11y';
77
import { Direction, Directionality } from '@angular/cdk/bidi';
8+
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
89
import {
910
AfterContentInit,
1011
ChangeDetectionStrategy,
@@ -27,14 +28,16 @@ import {
2728
import { merge, Subject } from 'rxjs';
2829
import { distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators';
2930

30-
import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
31+
import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form';
3132
import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
3233
import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
3334

35+
import { NzInputGroupSlotComponent } from './input-group-slot.component';
3436
import { NzInputDirective } from './input.directive';
3537

3638
@Directive({
37-
selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`
39+
selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`,
40+
standalone: true
3841
})
3942
export class NzInputGroupWhitSuffixOrPrefixDirective {
4043
constructor(public elementRef: ElementRef) {}
@@ -127,7 +130,9 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
127130
'[class.ant-input-group-rtl]': `dir === 'rtl'`,
128131
'[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
129132
'[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
130-
}
133+
},
134+
imports: [NgIf, NzInputGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
135+
standalone: true
131136
})
132137
export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {
133138
static ngAcceptInputType_nzSearch: BooleanInput;

‎components/input/input.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ import { InputBoolean, getStatusClassNames } from 'ng-zorro-antd/core/util';
3838
'[attr.disabled]': 'disabled || null',
3939
'[class.ant-input-rtl]': `dir=== 'rtl'`,
4040
'[class.ant-input-stepperless]': `nzStepperless`
41-
}
41+
},
42+
standalone: true
4243
})
4344
export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
4445
static ngAcceptInputType_disabled: BooleanInput;

‎components/input/input.module.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,16 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { PlatformModule } from '@angular/cdk/platform';
8-
import { CommonModule } from '@angular/common';
96
import { NgModule } from '@angular/core';
107

11-
import { NzFormPatchModule } from 'ng-zorro-antd/core/form';
12-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
13-
import { NzIconModule } from 'ng-zorro-antd/icon';
14-
158
import { NzAutosizeDirective } from './autosize.directive';
169
import { NzInputGroupSlotComponent } from './input-group-slot.component';
1710
import { NzInputGroupComponent, NzInputGroupWhitSuffixOrPrefixDirective } from './input-group.component';
1811
import { NzInputDirective } from './input.directive';
1912
import { NzTextareaCountComponent } from './textarea-count.component';
2013

2114
@NgModule({
22-
declarations: [
15+
imports: [
2316
NzTextareaCountComponent,
2417
NzInputDirective,
2518
NzInputGroupComponent,
@@ -33,7 +26,6 @@ import { NzTextareaCountComponent } from './textarea-count.component';
3326
NzInputGroupComponent,
3427
NzAutosizeDirective,
3528
NzInputGroupWhitSuffixOrPrefixDirective
36-
],
37-
imports: [BidiModule, CommonModule, NzIconModule, PlatformModule, NzOutletModule, NzFormPatchModule]
29+
]
3830
})
3931
export class NzInputModule {}

‎components/input/textarea-count.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ import { NzInputDirective } from './input.directive';
2727
host: {
2828
class: 'ant-input-textarea-show-count'
2929
},
30-
changeDetection: ChangeDetectionStrategy.OnPush
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
standalone: true
3132
})
3233
export class NzTextareaCountComponent implements AfterContentInit, OnDestroy {
3334
@ContentChild(NzInputDirective, { static: true }) nzInputDirective!: NzInputDirective;

0 commit comments

Comments
 (0)