feat(module:input-number): add borderless support (#7539)

Co-authored-by: Sébastien Cambon <sebastien.cambon@altoviz.com>
NG-ZORRO · Jul 4, 2022 · ea1138b · ea1138b
1 parent 64b7389
commit ea1138b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/components/input-number/demo/borderless.md b/components/input-number/demo/borderless.md
@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+    zh-CN: 无边框
+    en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+Borderless input number.
+
diff --git a/components/input-number/demo/borderless.ts b/components/input-number/demo/borderless.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-borderless',
+  template: ` <nz-input-number nzBorderless [(ngModel)]="demoValue"></nz-input-number> `
+})
+export class NzDemoInputNumberBorderlessComponent {
+  demoValue = 3;
+}
diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
@@ -109,13 +109,15 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/
     '[class.ant-input-number-sm]': `nzSize === 'small'`,
     '[class.ant-input-number-disabled]': 'nzDisabled',
     '[class.ant-input-number-readonly]': 'nzReadOnly',
-    '[class.ant-input-number-rtl]': `dir === 'rtl'`
+    '[class.ant-input-number-rtl]': `dir === 'rtl'`,
+    '[class.ant-input-number-borderless]': `nzBorderless`
   }
 })
 export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzReadOnly: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
+  static ngAcceptInputType_nzBorderless: BooleanInput;
 
   private autoStepTimer?: number;
   private parsedValue?: string | number;
@@ -133,6 +135,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   hasFeedback: boolean = false;
   onChange: OnChangeType = () => {};
   onTouched: OnTouchedType = () => {};
+
   @Output() readonly nzBlur = new EventEmitter();
   @Output() readonly nzFocus = new EventEmitter();
   /** The native `<span class="ant-input-number-handler-up"></span>` element. */
@@ -159,6 +162,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzReadOnly = false;
   @Input() @InputBoolean() nzAutoFocus = false;
+  @Input() @InputBoolean() nzBorderless: boolean = false;
   @Input() nzFormatter: (value: number) => string | number = value => value;
 
   onModelChange(value: string): void {

diff --git a/components/input-number/input-number.spec.ts b/components/input-number/input-number.spec.ts
@@ -63,6 +63,13 @@ describe('input number', () => {
       expect(inputNumber.nativeElement.classList).toContain('ant-input-number');
       expect(inputElement.getAttribute('placeholder')).toBe('placeholder');
     });
+    it('should border work', () => {
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement!.classList).not.toContain('ant-input-number-borderless');
+      testComponent.bordered = false;
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement!.classList).toContain('ant-input-number-borderless');
+    });
     it('should focus className correct', fakeAsync(() => {
       fixture.detectChanges();
       expect(inputNumber.nativeElement.classList).toContain('ng-untouched');
@@ -608,6 +615,7 @@ describe('input number', () => {
       [nzParser]="parser"
       [nzPrecision]="precision"
       [nzPrecisionMode]="precisionMode"
+      [nzBorderless]="!bordered"
     ></nz-input-number>
   `
 })
@@ -621,6 +629,7 @@ export class NzTestInputNumberBasicComponent {
   size = 'default';
   placeholder = 'placeholder';
   step = 1;
+  bordered = true;
   precision?: number = 2;
   precisionMode?: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number);
   formatter = (value: number): string => (value !== null ? `${value}` : '');