feat: redesign the input-number (#8901)

* refactor(module:input-number): rename to input-number-legacy

* docs: support deprecated tag

* refactor(module:core): deprecated NzFormPatchModule

* refactor(module:color-picker): fix input number parser type

* feat(module:input): add addon & affix directives

* feat(module:input-number): redesign the input-number

components/color-picker/color-format.component.ts

@@ -162,7 +162,7 @@ export class NzColorFormatComponent implements OnChanges, OnInit, OnDestroy {
   }>;
 
   formatterPercent = (value: number): string => `${value} %`;
-  parserPercent = (value: string): string => value.replace(' %', '');
+  parserPercent = (value: string): number => +value.replace(' %', '');
 
   constructor(private formBuilder: FormBuilder) {
     this.validateForm = this.formBuilder.nonNullable.group({

components/core/form/nz-form-patch.module.ts

@@ -7,6 +7,9 @@ import { NgModule } from '@angular/core';
 
 import { NzFormItemFeedbackIconComponent } from './nz-form-item-feedback-icon.component';
 
+/**
+ * @deprecated Will be removed in v20. Use NzFormItemFeedbackIconComponent directly
+ */
 @NgModule({
   imports: [NzFormItemFeedbackIconComponent],
   exports: [NzFormItemFeedbackIconComponent]

components/input-number-legacy/demo/addon.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+    zh-CN: 前置/后置标签
+    en-US: Pre / Post tab
+---
+
+## zh-CN
+
+用于配置一些固定组合。
+
+## en-US
+
+Using pre & post tabs example.

components/input-number-legacy/demo/addon.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzCascaderModule } from 'ng-zorro-antd/cascader';
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-addon',
+  standalone: true,
+  imports: [FormsModule, NzCascaderModule, NzInputNumberLegacyModule, NzSelectModule, NzSpaceModule],
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-input-number-group *nzSpaceItem nzAddOnBefore="+" nzAddOnAfter="$">
+        <nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
+        <nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
+      </nz-input-number-group>
+      <ng-template #addOnBeforeTemplate>
+        <nz-select [ngModel]="'add'" style="width: 60px">
+          <nz-option nzLabel="+" nzValue="add"></nz-option>
+          <nz-option nzLabel="-" nzValue="minus"></nz-option>
+        </nz-select>
+      </ng-template>
+      <ng-template #addOnAfterTemplate>
+        <nz-select [ngModel]="'USD'" style="width: 60px">
+          <nz-option nzValue="USD" nzLabel="$"></nz-option>
+          <nz-option nzValue="EUR" nzLabel="€"></nz-option>
+          <nz-option nzValue="GBP" nzLabel="£"></nz-option>
+          <nz-option nzValue="CNY" nzLabel="¥"></nz-option>
+        </nz-select>
+      </ng-template>
+      <nz-input-number-group *nzSpaceItem nzAddOnAfterIcon="setting">
+        <nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeCascaderTemplate">
+        <nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
+      </nz-input-number-group>
+      <ng-template #addOnBeforeCascaderTemplate>
+        <nz-cascader [nzOptions]="[]" nzPlaceHolder="cascader" style="width: 150px"></nz-cascader>
+      </ng-template>
+    </nz-space>
+  `
+})
+export class NzDemoInputNumberLegacyAddonComponent {
+  value = 100;
+}

components/input-number-legacy/demo/basic.md

@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+    zh-CN: 基本
+    en-US: Basic
+---
+
+## zh-CN
+
+数字输入框。
+
+## en-US
+
+Numeric-only input box.
+

components/input-number-legacy/demo/basic.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-basic',
+  standalone: true,
+  imports: [FormsModule, NzInputNumberLegacyModule],
+  template: `<nz-input-number-legacy
+    [(ngModel)]="value"
+    [nzMin]="1"
+    [nzMax]="10"
+    [nzStep]="1"
+  ></nz-input-number-legacy>`
+})
+export class NzDemoInputNumberLegacyBasicComponent {
+  value = 3;
+}

components/input-number-legacy/demo/borderless.md

@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+    zh-CN: 无边框
+    en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+Borderless input number.
+

components/input-number-legacy/demo/borderless.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-borderless',
+  standalone: true,
+  imports: [FormsModule, NzInputNumberLegacyModule],
+  template: `<nz-input-number-legacy nzBorderless [(ngModel)]="value"></nz-input-number-legacy>`
+})
+export class NzDemoInputNumberLegacyBorderlessComponent {
+  value = 3;
+}

components/input-number-legacy/demo/digit.md

@@ -0,0 +1,15 @@
+---
+order: 3
+title:
+    zh-CN: 小数
+    en-US: Decimals
+---
+
+## zh-CN
+
+和原生的数字输入框一样，value 的精度由 `nzStep` 的小数位数决定。
+
+## en-US
+
+A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the `nzStep` prop.
+

components/input-number-legacy/demo/digit.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-digit',
+  standalone: true,
+  imports: [FormsModule, NzInputNumberLegacyModule],
+  template: `
+    <nz-input-number-legacy
+      [(ngModel)]="value"
+      [nzMin]="1"
+      [nzMax]="10"
+      [nzStep]="0.1"
+      [nzPlaceHolder]="'Digital'"
+    ></nz-input-number-legacy>
+  `
+})
+export class NzDemoInputNumberLegacyDigitComponent {
+  value = 0;
+}

components/input-number-legacy/demo/disabled.md

@@ -0,0 +1,16 @@
+---
+order: 2
+title:
+    zh-CN: 不可用
+    en-US: Disabled
+---
+
+## zh-CN
+
+点击按钮切换可用状态。
+
+## en-US
+
+Click the button to toggle between available and disabled states.
+
+

components/input-number-legacy/demo/disabled.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-disabled',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzInputNumberLegacyModule],
+  template: `
+    <nz-input-number-legacy
+      [(ngModel)]="value"
+      [nzMin]="1"
+      [nzMax]="10"
+      [nzStep]="1"
+      [nzDisabled]="isDisabled"
+    ></nz-input-number-legacy>
+    <br />
+    <br />
+    <button nz-button [nzType]="'primary'" (click)="toggleDisabled()">
+      <span>Toggle Disabled</span>
+    </button>
+  `
+})
+export class NzDemoInputNumberLegacyDisabledComponent {
+  value = 3;
+  isDisabled = false;
+
+  toggleDisabled(): void {
+    this.isDisabled = !this.isDisabled;
+  }
+}

components/input-number-legacy/demo/formatter.md

@@ -0,0 +1,15 @@
+---
+order: 4
+title:
+    zh-CN: 格式化展示
+    en-US: Formatter
+---
+
+## zh-CN
+
+通过 `nzFormatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `nzParser` 一起使用。
+
+## en-US
+
+Display value within it's situation with `nzFormatter`, and we usually use `nzParser` at the same time.
+

components/input-number-legacy/demo/formatter.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
+
+@Component({
+  selector: 'nz-demo-input-number-legacy-formatter',
+  standalone: true,
+  imports: [FormsModule, NzInputNumberLegacyModule],
+  template: `
+    <nz-input-number-legacy
+      [(ngModel)]="demoValue"
+      [nzMin]="1"
+      [nzMax]="100"
+      [nzStep]="1"
+      [nzFormatter]="formatterDollar"
+      [nzParser]="parserDollar"
+    ></nz-input-number-legacy>
+    <nz-input-number-legacy
+      [(ngModel)]="demoValue"
+      [nzMin]="1"
+      [nzMax]="100"
+      [nzStep]="1"
+      [nzFormatter]="formatterPercent"
+      [nzParser]="parserPercent"
+    ></nz-input-number-legacy>
+  `,
+  styles: [
+    `
+      nz-input-number {
+        margin-right: 8px;
+      }
+    `
+  ]
+})
+export class NzDemoInputNumberLegacyFormatterComponent {
+  demoValue = 100;
+  formatterPercent = (value: number): string => `${value} %`;
+  parserPercent = (value: string): string => value.replace(' %', '');
+  formatterDollar = (value: number): string => `$ ${value}`;
+  parserDollar = (value: string): string => value.replace('$ ', '');
+}

components/input-number/demo/group.ts → components/input-number-legacy/demo/group.ts

@@ -4,42 +4,52 @@ import { FormsModule } from '@angular/forms';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzGridModule } from 'ng-zorro-antd/grid';
-import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 @Component({
-  selector: 'nz-demo-input-number-group',
+  selector: 'nz-demo-input-number-legacy-group',
   standalone: true,
   imports: [
     FormsModule,
     NzButtonModule,
     NzDatePickerModule,
     NzGridModule,
-    NzInputNumberModule,
+    NzInputNumberLegacyModule,
     NzSelectModule,
-    NzSpaceModule
+    NzSpaceModule,
+    NzIconModule
   ],
   template: `
     <nz-space nzDirection="vertical" style="width: 100%">
       <nz-input-number-group nz-row [nzGutter]="8" nzSize="large" *nzSpaceItem>
         <div nz-col nzSpan="8">
-          <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number>
+          <nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number-legacy>
         </div>
         <div nz-col nzSpan="8">
-          <nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number>
+          <nz-input-number-legacy [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number-legacy>
         </div>
       </nz-input-number-group>
       <nz-input-number-group *nzSpaceItem nzCompact>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number>
-        <nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number>
+        <nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number-legacy>
+        <nz-input-number-legacy [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number-legacy>
       </nz-input-number-group>
       <nz-input-number-group *nzSpaceItem nzCompact>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
+        <nz-input-number-legacy
+          [ngModel]="1234"
+          [nzStep]="1"
+          style="width: calc(100% - 200px)"
+        ></nz-input-number-legacy>
         <button nz-button nzType="primary">Submit</button>
       </nz-input-number-group>
       <nz-input-number-group *nzSpaceItem nzCompact>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
+        <nz-input-number-legacy
+          [ngModel]="1234"
+          [nzStep]="1"
+          style="width: calc(100% - 200px)"
+        ></nz-input-number-legacy>
         <button nz-button>
           <span nz-icon nzType="copy" nzTheme="outline"></span>
         </button>
@@ -49,17 +59,17 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
           <nz-option nzValue="Zhejiang" nzLabel="Zhejiang"></nz-option>
           <nz-option nzValue="Jiangsu" nzLabel="Jiangsu"></nz-option>
         </nz-select>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
+        <nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number-legacy>
       </nz-input-number-group>
       <nz-input-number-group *nzSpaceItem nzCompact>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
+        <nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number-legacy>
         <nz-date-picker></nz-date-picker>
       </nz-input-number-group>
       <nz-input-number-group *nzSpaceItem nzCompact>
-        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number>
+        <nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number-legacy>
         <nz-range-picker></nz-range-picker>
       </nz-input-number-group>
     </nz-space>
   `
 })
-export class NzDemoInputNumberGroupComponent {}
+export class NzDemoInputNumberLegacyGroupComponent {}