feat(module:time-picker): support borderless (#7547)

components/time-picker/demo/bordered.md

@@ -0,0 +1,14 @@
+---
+order: 12
+title:
+  zh-CN: 无边框
+  en-US: Bordered-less
+---
+
+## zh-CN
+
+无边框样式。
+
+## en-US
+
+Bordered-less style component.

components/time-picker/demo/bordered.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-time-picker-bordered',
+  template: ` <nz-time-picker nzBorderless></nz-time-picker> `,
+  styles: []
+})
+export class NzDemoTimePickerBorderedComponent {}

components/time-picker/doc/index.en-US.md

@@ -46,6 +46,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ |
 | `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
+| `[nzBorderless]` | remove the border | `boolean` | `false` | - |
 | `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` |
 | `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` |
 | `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ |

components/time-picker/doc/index.zh-CN.md

@@ -47,6 +47,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | ✅ |
 | `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` |
 | `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
+| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - |
 | `[nzOpen]` | 面板是否打开，可双向绑定 | `boolean` | `false` |
 | `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` |
 | `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ |

components/time-picker/time-picker.component.spec.ts

@@ -276,7 +276,11 @@ describe('time-picker', () => {
       expect(result.getMinutes()).toEqual(10);
       expect(result.getSeconds()).toEqual(30);
     }));
-
+    it('should support nzBorderless', fakeAsync(() => {
+      fixture.componentInstance.nzBorderless = true;
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css(`.ant-picker-borderless`))).toBeDefined();
+    }));
     describe('setup I18n service', () => {
       let srv: NzI18nService;
 
@@ -397,6 +401,7 @@ describe('time-picker', () => {
       [nzSuffixIcon]="nzSuffixIcon"
       [nzBackdrop]="nzBackdrop"
       [nzDefaultOpenValue]="defaultOpenValue"
+      [nzBorderless]="nzBorderless"
     ></nz-time-picker>
   `
 })
@@ -409,6 +414,7 @@ export class NzTestTimePickerComponent {
   use12Hours = false;
   nzSuffixIcon?: string;
   nzBackdrop = false;
+  nzBorderless = true;
   defaultOpenValue: Date | null = new Date('2020-03-27T00:00:00');
   onChange(_: Date | null): void {}
   @ViewChild(NzTimePickerComponent, { static: false }) nzTimePickerComponent!: NzTimePickerComponent;

components/time-picker/time-picker.component.ts

@@ -122,6 +122,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
     '[class.ant-picker-disabled]': `nzDisabled`,
     '[class.ant-picker-focused]': `focused`,
     '[class.ant-picker-rtl]': `dir === 'rtl'`,
+    '[class.ant-picker-borderless]': `nzBorderless`,
     '(click)': 'open()'
   },
   animations: [slideMotion],
@@ -135,6 +136,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   static ngAcceptInputType_nzAllowEmpty: BooleanInput;
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
+  static ngAcceptInputType_nzBorderless: BooleanInput;
 
   private _onChange?: (value: Date | null) => void;
   private _onTouched?: () => void;
@@ -213,6 +215,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzAutoFocus = false;
   @Input() @WithConfig() nzBackdrop = false;
+  @Input() @InputBoolean() nzBorderless: boolean = false;
 
   emitValue(value: Date | null): void {
     this.setValue(value, true);