From 6210fa0b571dd3d0a6b1069bcddd4ad44c3d6104 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh <62149413+ParsaArvanehPA@users.noreply.github.com> Date: Mon, 4 Dec 2023 06:00:31 +0330 Subject: [PATCH] feat(module:input-number): support standalone component (#8246) --- components/input-number/doc/index.en-US.md | 76 +++++++++---------- components/input-number/doc/index.zh-CN.md | 74 +++++++++--------- .../input-number-group-slot.component.ts | 8 +- .../input-number-group.component.ts | 11 ++- .../input-number/input-number.component.ts | 10 ++- .../input-number/input-number.module.ts | 10 +-- 6 files changed, 98 insertions(+), 91 deletions(-) diff --git a/components/input-number/doc/index.en-US.md b/components/input-number/doc/index.en-US.md index db68ee06e4..3c8cb9bf21 100755 --- a/components/input-number/doc/index.en-US.md +++ b/components/input-number/doc/index.en-US.md @@ -17,49 +17,49 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; ## API -### nz-input-number +### nz-input-number:standalone -| property | description | type | default | -| -------- | ----------- | ---- | ------- | -| `[ngModel]` | current value, double binding | `number \| string` \| `string` | - | -| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | -| `[nzDisabled]` | disable the input | `boolean` | `false` | -| `[nzReadOnly]` | If readonly the input | `boolean` | `false` | -| `[nzMax]` | max value | `number` | `Infinity` | -| `[nzMin]` | min value | `number` | `-Infinity` | -| `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | -| `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` | -| `[nzPrecision]` | precision of input value | `number` | - | -| `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | -| `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | -| `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` | -| `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` | -| `[nzPlaceHolder]` | Placeholder of select | `string` | - | -| `[nzId]` | input id attribute inside the component| `string` | - | -| `(ngModelChange)` | The callback triggered when the value is changed | `EventEmitter` | - | -| `(nzFocus)` | focus callback | `EventEmitter` | - | -| `(nzBlur)` | blur callback | `EventEmitter` | - | +| property | description | type | default | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | +| `[ngModel]` | current value, double binding | `number \| string` \| `string` | - | +| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | +| `[nzDisabled]` | disable the input | `boolean` | `false` | +| `[nzReadOnly]` | If readonly the input | `boolean` | `false` | +| `[nzMax]` | max value | `number` | `Infinity` | +| `[nzMin]` | min value | `number` | `-Infinity` | +| `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | +| `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` | +| `[nzPrecision]` | precision of input value | `number` | - | +| `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | +| `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | +| `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` | +| `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` | +| `[nzPlaceHolder]` | Placeholder of select | `string` | - | +| `[nzId]` | input id attribute inside the component | `string` | - | +| `(ngModelChange)` | The callback triggered when the value is changed | `EventEmitter` | - | +| `(nzFocus)` | focus callback | `EventEmitter` | - | +| `(nzBlur)` | blur callback | `EventEmitter` | - | -### nz-input-number-group +### nz-input-number-group:standalone -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input number field, can work with `nzAddOnBefore` | `string \| TemplateRef` | - | -| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input number field, can work with `nzAddOnAfter` | `string \| TemplateRef` | - | -| `[nzPrefix]` | The prefix icon for the Input Number, can work with `nzSuffix` | `string \| TemplateRef` | - | -| `[nzSuffix]` | The suffix icon for the Input Number, can work with `nzPrefix` | `string \| TemplateRef` | - | -| `[nzPrefixIcon]` | The prefix icon for the Input Number | `string` | - | -| `[nzSuffixIcon]` | The suffix icon for the Input Number | `string` | - | -| `[nzCompact]` | Whether use compact style | `boolean` | `false` | -| `[nzSize]` | The size of `nz-input-number-group` specifies the size of the included `nz-input-number` fields | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | +| Property | Description | Type | Default | +| ----------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | +| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input number field, can work with `nzAddOnBefore` | `string \| TemplateRef` | - | +| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input number field, can work with `nzAddOnAfter` | `string \| TemplateRef` | - | +| `[nzPrefix]` | The prefix icon for the Input Number, can work with `nzSuffix` | `string \| TemplateRef` | - | +| `[nzSuffix]` | The suffix icon for the Input Number, can work with `nzPrefix` | `string \| TemplateRef` | - | +| `[nzPrefixIcon]` | The prefix icon for the Input Number | `string` | - | +| `[nzSuffixIcon]` | The suffix icon for the Input Number | `string` | - | +| `[nzCompact]` | Whether use compact style | `boolean` | `false` | +| `[nzSize]` | The size of `nz-input-number-group` specifies the size of the included `nz-input-number` fields | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | #### Methods You can get instance by `ViewChild` -| Name | Description | -| ---- | ----------- | -| focus() | get focus | -| blur() | remove focus | +| Name | Description | +| ------- | ------------ | +| focus() | get focus | +| blur() | remove focus | diff --git a/components/input-number/doc/index.zh-CN.md b/components/input-number/doc/index.zh-CN.md index 993866c5e4..f93f82f4ad 100755 --- a/components/input-number/doc/index.zh-CN.md +++ b/components/input-number/doc/index.zh-CN.md @@ -18,49 +18,49 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; ## API -### nz-input-number +### nz-input-number:standalone -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[ngModel]` | 当前值，可双向绑定 | `number \| string` \| `string` | - | -| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | -| `[nzDisabled]` | 禁用 | `boolean` | `false` | -| `[nzReadOnly]` | 只读 | `boolean` | `false` | -| `[nzMax]` | 最大值 | `number` | `Infinity` | -| `[nzMin]` | 最小值 | `number` | `-Infinity` | -| `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - | -| `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` | -| `[nzPrecision]` | 数值精度 | `number` | - | -| `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | -| `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | -| `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` | -| `[nzInputMode]` | 提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` | -| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | -| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | -| `(ngModelChange)` | 数值改变时回调 | `EventEmitter` | - | -| `(nzFocus)` | focus时回调 | `EventEmitter` | - | -| `(nzBlur)` | blur时回调 | `EventEmitter` | - | +| 成员 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | +| `[ngModel]` | 当前值，可双向绑定 | `number \| string` \| `string` | - | +| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | +| `[nzDisabled]` | 禁用 | `boolean` | `false` | +| `[nzReadOnly]` | 只读 | `boolean` | `false` | +| `[nzMax]` | 最大值 | `number` | `Infinity` | +| `[nzMin]` | 最小值 | `number` | `-Infinity` | +| `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - | +| `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` | +| `[nzPrecision]` | 数值精度 | `number` | - | +| `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | +| `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` | +| `[nzInputMode]` | 提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` | +| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | +| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | +| `(ngModelChange)` | 数值改变时回调 | `EventEmitter` | - | +| `(nzFocus)` | focus 时回调 | `EventEmitter` | - | +| `(nzBlur)` | blur 时回调 | `EventEmitter` | - | -### nz-input-number-group +### nz-input-number-group:standalone -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzAddOnAfter]` | 带标签的 input-number，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef` | - | -| `[nzAddOnBefore]` | 带标签的 input-number，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef` | - | -| `[nzPrefix]` | 带有前缀图标的 input-number，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef` | - | -| `[nzSuffix]` | 带有后缀图标的 input-number，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef` | - | -| `[nzPrefixIcon]` | 带有前缀图标的 input-number | `string` | - | -| `[nzSuffixIcon]` | 带有后缀图标的 input-number | `string` | - | -| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` | -| `[nzSize]` | `nz-input-number-group` 中所有的 `nz-input-number` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------------- | -------------------------------------------------------------------- | --------------------------------- | ----------- | +| `[nzAddOnAfter]` | 带标签的 input-number，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef` | - | +| `[nzAddOnBefore]` | 带标签的 input-number，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef` | - | +| `[nzPrefix]` | 带有前缀图标的 input-number，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef` | - | +| `[nzSuffix]` | 带有后缀图标的 input-number，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef` | - | +| `[nzPrefixIcon]` | 带有前缀图标的 input-number | `string` | - | +| `[nzSuffixIcon]` | 带有后缀图标的 input-number | `string` | - | +| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` | +| `[nzSize]` | `nz-input-number-group` 中所有的 `nz-input-number` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | #### 方法 通过 `ViewChild` 等方法获得实例后调用 -| 名称 | 描述 | -| ---- | ----------- | +| 名称 | 描述 | +| ------- | -------- | | focus() | 获取焦点 | -| blur() | 移除焦点 | +| blur() | 移除焦点 | diff --git a/components/input-number/input-number-group-slot.component.ts b/components/input-number/input-number-group-slot.component.ts index 60f16ec03b..3d3560df2f 100644 --- a/components/input-number/input-number-group-slot.component.ts +++ b/components/input-number/input-number-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-number-group-slot]', preserveWhitespaces: false, @@ -19,7 +23,9 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati '[class.ant-input-number-group-addon]': `type === 'addon'`, '[class.ant-input-number-prefix]': `type === 'prefix'`, '[class.ant-input-number-suffix]': `type === 'suffix'` - } + }, + imports: [NzIconModule, NgIf, NzOutletModule], + standalone: true }) export class NzInputNumberGroupSlotComponent { @Input() icon?: string | null = null; diff --git a/components/input-number/input-number-group.component.ts b/components/input-number/input-number-group.component.ts index 3f8e17925b..3aeb8e95ef 100644 --- a/components/input-number/input-number-group.component.ts +++ b/components/input-number/input-number-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 { NzInputNumberGroupSlotComponent } from './input-number-group-slot.component'; import { NzInputNumberComponent } from './input-number.component'; @Directive({ - selector: `nz-input-number-group[nzSuffix], nz-input-number-group[nzPrefix]` + selector: `nz-input-number-group[nzSuffix], nz-input-number-group[nzPrefix]`, + standalone: true }) export class NzInputNumberGroupWhitSuffixOrPrefixDirective { constructor(public elementRef: ElementRef) {} @@ -119,7 +122,9 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective { '[class.ant-input-number-affix-wrapper-disabled]': `!isAddOn && isAffix && disabled`, '[class.ant-input-number-affix-wrapper-lg]': `!isAddOn && isAffix && isLarge`, '[class.ant-input-number-affix-wrapper-sm]': `!isAddOn && isAffix && isSmall` - } + }, + imports: [NgIf, NzInputNumberGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule], + standalone: true }) export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy { static ngAcceptInputType_nzCompact: BooleanInput; diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts index b1c1c95122..f2b6bf3f2a 100644 --- a/components/input-number/input-number.component.ts +++ b/components/input-number/input-number.component.ts @@ -6,6 +6,7 @@ import { FocusMonitor } from '@angular/cdk/a11y'; import { Direction, Directionality } from '@angular/cdk/bidi'; import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes'; +import { NgIf } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, @@ -26,11 +27,11 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { fromEvent, merge, Subject } from 'rxjs'; import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; -import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form'; +import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { BooleanInput, @@ -42,6 +43,7 @@ import { OnTouchedType } from 'ng-zorro-antd/core/types'; import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'nz-input-number', @@ -111,7 +113,9 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/ '[class.ant-input-number-readonly]': 'nzReadOnly', '[class.ant-input-number-rtl]': `dir === 'rtl'`, '[class.ant-input-number-borderless]': `nzBorderless` - } + }, + imports: [NzIconModule, FormsModule, NzFormPatchModule, NgIf], + standalone: true }) export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy { static ngAcceptInputType_nzDisabled: BooleanInput; diff --git a/components/input-number/input-number.module.ts b/components/input-number/input-number.module.ts index c973e55551..d3e0c525be 100644 --- a/components/input-number/input-number.module.ts +++ b/components/input-number/input-number.module.ts @@ -3,14 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { BidiModule } from '@angular/cdk/bidi'; -import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { NzFormPatchModule } from 'ng-zorro-antd/core/form'; -import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; -import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzInputNumberGroupSlotComponent } from './input-number-group-slot.component'; import { @@ -20,8 +13,7 @@ import { import { NzInputNumberComponent } from './input-number.component'; @NgModule({ - imports: [BidiModule, CommonModule, FormsModule, NzOutletModule, NzIconModule, NzFormPatchModule], - declarations: [ + imports: [ NzInputNumberComponent, NzInputNumberGroupComponent, NzInputNumberGroupWhitSuffixOrPrefixDirective,