Skip to content

Commit ae6ceeb

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:cron-expression): support standalone component (#8264)
1 parent 3ab6e5b commit ae6ceeb

7 files changed

+53
-38
lines changed

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
*/
55

66
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
7+
import { FormsModule } from '@angular/forms';
8+
9+
import { NzInputModule } from 'ng-zorro-antd/input';
710

811
import { CronChangeType, TimeType } from './typings';
912

@@ -24,7 +27,9 @@ import { CronChangeType, TimeType } from './typings';
2427
(ngModelChange)="setValue()"
2528
/>
2629
</div>
27-
`
30+
`,
31+
imports: [NzInputModule, FormsModule],
32+
standalone: true
2833
})
2934
export class NzCronExpressionInputComponent {
3035
@Input() value: string = '0';

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import { TimeType } from './typings';
2020
{{ locale[type] }}
2121
</label>
2222
</div>
23-
`
23+
`,
24+
standalone: true
2425
})
2526
export class NzCronExpressionLabelComponent {
2627
@Input() type: TimeType = 'second';

‎components/cron-expression/cron-expression-preview.component.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { DatePipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
67
import {
78
Component,
89
ViewEncapsulation,
@@ -16,13 +17,14 @@ import {
1617

1718
import { InputBoolean } from 'ng-zorro-antd/core/util';
1819
import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
20+
import { NzIconModule } from 'ng-zorro-antd/icon';
1921

2022
@Component({
2123
changeDetection: ChangeDetectionStrategy.OnPush,
2224
encapsulation: ViewEncapsulation.None,
2325
selector: 'nz-cron-expression-preview',
2426
exportAs: 'nzCronExpressionPreview',
25-
template: `<div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
27+
template: ` <div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
2628
<div class="ant-cron-expression-preview-dateTime" [class.ant-cron-expression-preview-dateTime-center]="!isExpand">
2729
<ng-container *ngIf="visible; else cronError">
2830
<ng-container *ngIf="!nzSemantic; else semanticTemplate">
@@ -44,7 +46,9 @@ import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
4446
<li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
4547
<li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
4648
</ul>
47-
</div>`
49+
</div>`,
50+
imports: [NgIf, NgTemplateOutlet, NgForOf, DatePipe, NzIconModule],
51+
standalone: true
4852
})
4953
export class NzCronExpressionPreviewComponent {
5054
@Input() TimeList: Date[] = [];

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

+14-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
@@ -39,6 +40,9 @@ import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
3940
import { InputBoolean } from 'ng-zorro-antd/core/util';
4041
import { NzCronExpressionI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
4142

43+
import { NzCronExpressionInputComponent } from './cron-expression-input.component';
44+
import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
45+
import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
4246
import { Cron, CronChangeType, CronValue, NzCronExpressionSize, NzCronExpressionType, TimeType } from './typings';
4347

4448
function labelsOfType(type: NzCronExpressionType): TimeType[] {
@@ -117,7 +121,16 @@ function labelsOfType(type: NzCronExpressionType): TimeType[] {
117121
multi: true
118122
},
119123
NzDestroyService
120-
]
124+
],
125+
imports: [
126+
NgForOf,
127+
NzCronExpressionInputComponent,
128+
NzCronExpressionLabelComponent,
129+
NzCronExpressionPreviewComponent,
130+
NgIf,
131+
NgTemplateOutlet
132+
],
133+
standalone: true
121134
})
122135
export class NzCronExpressionComponent implements OnInit, OnChanges, ControlValueAccessor, AsyncValidator {
123136
static ngAcceptInputType_nzBorderless: BooleanInput;

‎components/cron-expression/cron-expression.module.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,20 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { CommonModule } from '@angular/common';
76
import { NgModule } from '@angular/core';
8-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
9-
10-
import { NzFormModule } from 'ng-zorro-antd/form';
11-
import { NzIconModule } from 'ng-zorro-antd/icon';
12-
import { NzInputModule } from 'ng-zorro-antd/input';
13-
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
147

158
import { NzCronExpressionInputComponent } from './cron-expression-input.component';
169
import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
1710
import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
1811
import { NzCronExpressionComponent } from './cron-expression.component';
1912

2013
@NgModule({
21-
declarations: [
14+
imports: [
2215
NzCronExpressionComponent,
2316
NzCronExpressionLabelComponent,
2417
NzCronExpressionInputComponent,
2518
NzCronExpressionPreviewComponent
2619
],
27-
imports: [CommonModule, ReactiveFormsModule, NzToolTipModule, NzFormModule, NzInputModule, NzIconModule, FormsModule],
2820
exports: [NzCronExpressionComponent]
2921
})
3022
export class NzCronExpressionModule {}

‎components/cron-expression/doc/index.en-US.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ Install `cron-parser` in your project first:
3030
npm install cron-parser
3131
```
3232

33-
### nz-cron-expression
34-
35-
| Parameter | Description | Type | Default |
36-
|-------------|--------------------------------------------------|-------------|---------|
37-
| `[nzType]` | Cron rule type | `'linux'｜'spring'` | `linux` |
38-
| `[nzDisabled]` | Disable | `boolean` | `false` |
39-
| `[nzBorderless]` | Whether to hide the border | `boolean` | `false` |
40-
| `[nzSize]` | The size of the input box. | `'large'｜'small'｜'default'` | `default` |
41-
| `[nzCollapseDisable]` | Hide collapse | `boolean` | `false` |
42-
| `[nzExtra]` | Render the content on the right | `TemplateRef<void>` | - |
43-
| `[nzSemantic]` | Custom rendering next execution time | `TemplateRef<void>` | - |
33+
### nz-cron-expression:standalone
34+
35+
| Parameter | Description | Type | Default |
36+
| --------------------- | ------------------------------------ | ----------------------------- | --------- |
37+
| `[nzType]` | Cron rule type | `'linux'｜'spring'` | `linux` |
38+
| `[nzDisabled]` | Disable | `boolean` | `false` |
39+
| `[nzBorderless]` | Whether to hide the border | `boolean` | `false` |
40+
| `[nzSize]` | The size of the input box. | `'large'｜'small'｜'default'` | `default` |
41+
| `[nzCollapseDisable]` | Hide collapse | `boolean` | `false` |
42+
| `[nzExtra]` | Render the content on the right | `TemplateRef<void>` | - |
43+
| `[nzSemantic]` | Custom rendering next execution time | `TemplateRef<void>` | - |
4444

4545
## Note
4646

@@ -56,4 +56,4 @@ npm install cron-parser
5656
│ │ └─────────────── hour (0 - 23)
5757
│ └──────────────────── minute (0 - 59)
5858
└───────────────────────── second (0 - 59, optional)
59-
```
59+
```

‎components/cron-expression/doc/index.zh-CN.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
3030
npm install cron-parser
3131
```
3232

33-
### nz-cron-expression
34-
35-
| 参数 | 说明 | 类型 | 默认值 |
36-
|----------------|----------------|-----------------------------|----------|
37-
| `[nzType]` | cron 规则类型 | `'linux'｜'spring'` | `linux` |
38-
| `[nzSize]` | 设置输入框大小 | `'large'｜'small'｜'default'` | `default` |
39-
| `[nzDisabled]` | 禁用 | `boolean` | `false` |
40-
| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
41-
| `[nzCollapseDisable]` | 隐藏折叠面板 | `boolean` | `false` |
42-
| `[nzExtra]` | 自定义渲染右侧的内容 | `TemplateRef<void>` | - |
43-
| `[nzSemantic]` | 自定义渲染下次执行时间 | `TemplateRef<void>` | - |
33+
### nz-cron-expression:standalone
34+
35+
| 参数 | 说明 | 类型 | 默认值 |
36+
| --------------------- | ---------------------- | ----------------------------- | --------- |
37+
| `[nzType]` | cron 规则类型 | `'linux'｜'spring'` | `linux` |
38+
| `[nzSize]` | 设置输入框大小 | `'large'｜'small'｜'default'` | `default` |
39+
| `[nzDisabled]` | 禁用 | `boolean` | `false` |
40+
| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
41+
| `[nzCollapseDisable]` | 隐藏折叠面板 | `boolean` | `false` |
42+
| `[nzExtra]` | 自定义渲染右侧的内容 | `TemplateRef<void>` | - |
43+
| `[nzSemantic]` | 自定义渲染下次执行时间 | `TemplateRef<void>` | - |
4444

4545
## 注意
4646

@@ -56,4 +56,4 @@ npm install cron-parser
5656
│ │ └─────────────── hour (0 - 23)
5757
│ └──────────────────── minute (0 - 59)
5858
└───────────────────────── second (0 - 59, optional)
59-
```
59+
```

0 commit comments

Comments
 (0)