feat(module:cron-expression): support standalone component (#8264)

NG-ZORRO · Dec 4, 2023 · ae6ceeb · ae6ceeb
1 parent 3ab6e5b
commit ae6ceeb
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 38 deletions.
diff --git a/components/cron-expression/cron-expression-input.component.ts b/components/cron-expression/cron-expression-input.component.ts
@@ -4,6 +4,9 @@
  */
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 import { CronChangeType, TimeType } from './typings';
 
@@ -24,7 +27,9 @@ import { CronChangeType, TimeType } from './typings';
         (ngModelChange)="setValue()"
       />
     </div>
-  `
+  `,
+  imports: [NzInputModule, FormsModule],
+  standalone: true
 })
 export class NzCronExpressionInputComponent {
   @Input() value: string = '0';

diff --git a/components/cron-expression/cron-expression-label.component.ts b/components/cron-expression/cron-expression-label.component.ts
@@ -20,7 +20,8 @@ import { TimeType } from './typings';
         {{ locale[type] }}
       </label>
     </div>
-  `
+  `,
+  standalone: true
 })
 export class NzCronExpressionLabelComponent {
   @Input() type: TimeType = 'second';

diff --git a/components/cron-expression/cron-expression-preview.component.ts b/components/cron-expression/cron-expression-preview.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { DatePipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   ViewEncapsulation,
@@ -16,13 +17,14 @@ import {
 
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-preview',
   exportAs: 'nzCronExpressionPreview',
-  template: `<div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
+  template: ` <div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
     <div class="ant-cron-expression-preview-dateTime" [class.ant-cron-expression-preview-dateTime-center]="!isExpand">
       <ng-container *ngIf="visible; else cronError">
         <ng-container *ngIf="!nzSemantic; else semanticTemplate">
@@ -44,7 +46,9 @@ import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
       <li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
       <li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
     </ul>
-  </div>`
+  </div>`,
+  imports: [NgIf, NgTemplateOutlet, NgForOf, DatePipe, NzIconModule],
+  standalone: true
 })
 export class NzCronExpressionPreviewComponent {
   @Input() TimeList: Date[] = [];

diff --git a/components/cron-expression/cron-expression.component.ts b/components/cron-expression/cron-expression.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -39,6 +40,9 @@ import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzCronExpressionI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
+import { NzCronExpressionInputComponent } from './cron-expression-input.component';
+import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
+import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
 import { Cron, CronChangeType, CronValue, NzCronExpressionSize, NzCronExpressionType, TimeType } from './typings';
 
 function labelsOfType(type: NzCronExpressionType): TimeType[] {
@@ -117,7 +121,16 @@ function labelsOfType(type: NzCronExpressionType): TimeType[] {
       multi: true
     },
     NzDestroyService
-  ]
+  ],
+  imports: [
+    NgForOf,
+    NzCronExpressionInputComponent,
+    NzCronExpressionLabelComponent,
+    NzCronExpressionPreviewComponent,
+    NgIf,
+    NgTemplateOutlet
+  ],
+  standalone: true
 })
 export class NzCronExpressionComponent implements OnInit, OnChanges, ControlValueAccessor, AsyncValidator {
   static ngAcceptInputType_nzBorderless: BooleanInput;

diff --git a/components/cron-expression/cron-expression.module.ts b/components/cron-expression/cron-expression.module.ts
@@ -3,28 +3,20 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { NzFormModule } from 'ng-zorro-antd/form';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { NzCronExpressionInputComponent } from './cron-expression-input.component';
 import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
 import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
 import { NzCronExpressionComponent } from './cron-expression.component';
 
 @NgModule({
-  declarations: [
+  imports: [
     NzCronExpressionComponent,
     NzCronExpressionLabelComponent,
     NzCronExpressionInputComponent,
     NzCronExpressionPreviewComponent
   ],
-  imports: [CommonModule, ReactiveFormsModule, NzToolTipModule, NzFormModule, NzInputModule, NzIconModule, FormsModule],
   exports: [NzCronExpressionComponent]
 })
 export class NzCronExpressionModule {}
diff --git a/components/cron-expression/doc/index.en-US.md b/components/cron-expression/doc/index.en-US.md
@@ -30,17 +30,17 @@ Install `cron-parser` in your project first:
 npm install cron-parser
 ```
 
-### nz-cron-expression
-
-| Parameter  | Description                                      | Type  | Default     |
-|-------------|--------------------------------------------------|-------------|---------|
-| `[nzType]` | Cron rule type                                   | `'linux'｜'spring'`          | `linux`  |
-| `[nzDisabled]`     | Disable | `boolean` | `false`   |
-| `[nzBorderless]`     | Whether to hide the border        | `boolean` | `false`   |
-| `[nzSize]`   | The size of the input box.                       | `'large'｜'small'｜'default'` | `default` |
-| `[nzCollapseDisable]`  | Hide collapse                                    | `boolean`                   | `false`  |
-| `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
-| `[nzSemantic]`     | Custom rendering next execution time | `TemplateRef<void>`         | -        |
+### nz-cron-expression:standalone
+
+| Parameter             | Description                          | Type                          | Default   |
+| --------------------- | ------------------------------------ | ----------------------------- | --------- |
+| `[nzType]`            | Cron rule type                       | `'linux'｜'spring'`           | `linux`   |
+| `[nzDisabled]`        | Disable                              | `boolean`                     | `false`   |
+| `[nzBorderless]`      | Whether to hide the border           | `boolean`                     | `false`   |
+| `[nzSize]`            | The size of the input box.           | `'large'｜'small'｜'default'` | `default` |
+| `[nzCollapseDisable]` | Hide collapse                        | `boolean`                     | `false`   |
+| `[nzExtra]`           | Render the content on the right      | `TemplateRef<void>`           | -         |
+| `[nzSemantic]`        | Custom rendering next execution time | `TemplateRef<void>`           | -         |
 
 ## Note
 
@@ -56,4 +56,4 @@ npm install cron-parser
 │    │    └─────────────── hour (0 - 23)
 │    └──────────────────── minute (0 - 59)
 └───────────────────────── second (0 - 59, optional)
-```
+```
diff --git a/components/cron-expression/doc/index.zh-CN.md b/components/cron-expression/doc/index.zh-CN.md
@@ -30,17 +30,17 @@ import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
 npm install cron-parser
 ```
 
-### nz-cron-expression
-
-| 参数             | 说明             | 类型                          | 默认值      |
-|----------------|----------------|-----------------------------|----------|
-| `[nzType]` | cron 规则类型      | `'linux'｜'spring'`          | `linux`  |
-| `[nzSize]`     | 设置输入框大小        | `'large'｜'small'｜'default'` | `default` |
-| `[nzDisabled]`     | 禁用 | `boolean` | `false`   |
-| `[nzBorderless]`     | 是否隐藏边框        | `boolean` | `false`   |
-| `[nzCollapseDisable]`  | 隐藏折叠面板         | `boolean`                   | `false`  |
-| `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
-| `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |
+### nz-cron-expression:standalone
+
+| 参数                  | 说明                   | 类型                          | 默认值    |
+| --------------------- | ---------------------- | ----------------------------- | --------- |
+| `[nzType]`            | cron 规则类型          | `'linux'｜'spring'`           | `linux`   |
+| `[nzSize]`            | 设置输入框大小         | `'large'｜'small'｜'default'` | `default` |
+| `[nzDisabled]`        | 禁用                   | `boolean`                     | `false`   |
+| `[nzBorderless]`      | 是否隐藏边框           | `boolean`                     | `false`   |
+| `[nzCollapseDisable]` | 隐藏折叠面板           | `boolean`                     | `false`   |
+| `[nzExtra]`           | 自定义渲染右侧的内容   | `TemplateRef<void>`           | -         |
+| `[nzSemantic]`        | 自定义渲染下次执行时间 | `TemplateRef<void>`           | -         |
 
 ## 注意
 
@@ -56,4 +56,4 @@ npm install cron-parser
 │    │    └─────────────── hour (0 - 23)
 │    └──────────────────── minute (0 - 59)
 └───────────────────────── second (0 - 59, optional)
-```
+```