feat(module:cron-expression): adjust the layout

components/cron-expression/cron-expression-input.component.ts

@@ -0,0 +1,48 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+
+import { CronChangeType, TimeType } from './typings';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector: 'nz-cron-expression-input',
+  exportAs: 'nzCronExpression',
+  template: `
+    <div class="ant-cron-expression-input">
+      <input
+        nz-input
+        [(ngModel)]="value"
+        [name]="label"
+        (focus)="focusInputEffect()"
+        (blur)="blurInputEffect()"
+        (ngModelChange)="setValue()"
+      />
+    </div>
+  `
+})
+export class NzCronExpressionInputComponent {
+  @Input() value: string = '0';
+  @Input() label: TimeType = 'second';
+  @Output() readonly focusEffect = new EventEmitter<TimeType>();
+  @Output() readonly blurEffect = new EventEmitter<void>();
+  @Output() readonly getValue = new EventEmitter<CronChangeType>();
+
+  constructor() {}
+
+  focusInputEffect(): void {
+    this.focusEffect.emit(this.label);
+  }
+
+  blurInputEffect(): void {
+    this.blurEffect.emit();
+  }
+
+  setValue(): void {
+    this.getValue.emit({ label: this.label, value: this.value });
+  }
+}

components/cron-expression/cron-expression-label.component.ts

@@ -0,0 +1,46 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
+
+import { NzCronExpressionLabelI18n } from 'ng-zorro-antd/i18n';
+
+import { TimeType, TimeTypeError } from './typings';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector: 'nz-cron-expression-label',
+  exportAs: 'nzCronExpression',
+  template: `
+    <div
+      class="ant-cron-expression-label"
+      [class.ant-cron-expression-label-foucs]="labelFocus === type"
+      [class.ant-cron-expression-error]="!valid"
+      nz-tooltip
+      [nzTooltipTitle]="error"
+      [nzTooltipVisible]="!valid"
+      nzTooltipPlacement="bottom"
+    >
+      <label>{{ locale[type] }}</label>
+    </div>
+    <ng-template #error>
+      <div class="ant-cron-expression-hint" [innerHTML]="locale[labelError]"></div>
+    </ng-template>
+  `
+})
+export class NzCronExpressionLabelComponent implements OnInit {
+  @Input() type: TimeType = 'second';
+  @Input() valid: boolean = true;
+  @Input() locale!: NzCronExpressionLabelI18n;
+  @Input() labelFocus: string | null = null;
+  labelError: TimeTypeError = 'secondError';
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.labelError = `${this.type}Error`;
+  }
+}