Skip to content

Commit

Permalink
feat(module:input-number): add borderless support (#7539)
Browse files Browse the repository at this point in the history
Co-authored-by: Sébastien Cambon <sebastien.cambon@altoviz.com>
  • Loading branch information
sebcam and sebcam committed Jul 4, 2022
1 parent 64b7389 commit ea1138b
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 1 deletion.
15 changes: 15 additions & 0 deletions components/input-number/demo/borderless.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
order: 0
title:
zh-CN: 无边框
en-US: Borderless
---

## zh-CN

没有边框。

## en-US

Borderless input number.

9 changes: 9 additions & 0 deletions components/input-number/demo/borderless.ts
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 5 additions & 1 deletion components/input-number/input-number.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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. */
Expand All @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions components/input-number/input-number.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -608,6 +615,7 @@ describe('input number', () => {
[nzParser]="parser"
[nzPrecision]="precision"
[nzPrecisionMode]="precisionMode"
[nzBorderless]="!bordered"
></nz-input-number>
`
})
Expand All @@ -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}` : '');
Expand Down

0 comments on commit ea1138b

Please sign in to comment.