feat(module:calendar): support standalone component (#8274)

* feat(module:calendar): support standalone component * feat(module:calendar): support standalone component
NG-ZORRO · Dec 4, 2023 · 80d68a3 · 80d68a3
1 parent 5af11ea
commit 80d68a3
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 53 deletions.
diff --git a/components/calendar/calendar-cells.ts b/components/calendar/calendar-cells.ts
@@ -7,24 +7,28 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[nzDateCell]',
-  exportAs: 'nzDateCell'
+  exportAs: 'nzDateCell',
+  standalone: true
 })
 export class NzDateCellDirective {}
 
 @Directive({
   selector: '[nzMonthCell]',
-  exportAs: 'nzMonthCell'
+  exportAs: 'nzMonthCell',
+  standalone: true
 })
 export class NzMonthCellDirective {}
 
 @Directive({
   selector: '[nzDateFullCell]',
-  exportAs: 'nzDateFullCell'
+  exportAs: 'nzDateFullCell',
+  standalone: true
 })
 export class NzDateFullCellDirective {}
 
 @Directive({
   selector: '[nzMonthFullCell]',
-  exportAs: 'nzMonthFullCell'
+  exportAs: 'nzMonthFullCell',
+  standalone: true
 })
 export class NzMonthFullCellDirective {}
diff --git a/components/calendar/calendar-header.component.ts b/components/calendar/calendar-header.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 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,10 +13,12 @@ import {
   Output,
   ViewEncapsulation
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { DateHelperService, NzI18nService as I18n } from 'ng-zorro-antd/i18n';
-import { NzSelectSizeType } from 'ng-zorro-antd/select';
+import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio';
+import { NzSelectModule, NzSelectSizeType } from 'ng-zorro-antd/select';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -59,7 +62,9 @@ import { NzSelectSizeType } from 'ng-zorro-antd/select';
   host: {
     class: 'ant-fullcalendar-header',
     '[style.display]': `'block'`
-  }
+  },
+  imports: [NzSelectModule, NgForOf, NgIf, FormsModule, NzRadioGroupComponent, NzRadioComponent],
+  standalone: true
 })
 export class NzCalendarHeaderComponent implements OnInit {
   @Input() mode: 'month' | 'year' = 'month';

diff --git a/components/calendar/calendar-header.spec.ts b/components/calendar/calendar-header.spec.ts
@@ -7,11 +7,11 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
+import { NzI18nModule } from 'ng-zorro-antd/i18n';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
-import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzRadioGroupComponent as RadioGroup, NzRadioModule } from '../radio/index';
 import { NzSelectComponent as Select } from '../select/select.component';
-import { NzSelectModule } from '../select/select.module';
 import { NzCalendarHeaderComponent, NzCalendarHeaderComponent as CalendarHeader } from './calendar-header.component';
 
 registerLocaleData(zh);
@@ -20,9 +20,8 @@ describe('Calendar Header', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, NoopAnimationsModule],
+        imports: [FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, NoopAnimationsModule, CalendarHeader],
         declarations: [
-          CalendarHeader,
           NzTestCalendarHeaderModeComponent,
           NzTestCalendarHeaderFullscreenComponent,
           NzTestCalendarHeaderActiveDateComponent,

diff --git a/components/calendar/calendar.component.ts b/components/calendar/calendar.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -28,13 +29,15 @@ import { takeUntil } from 'rxjs/operators';
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { LibPackerModule } from 'ng-zorro-antd/date-picker';
 
 import {
   NzDateCellDirective as DateCell,
   NzDateFullCellDirective as DateFullCell,
   NzMonthCellDirective as MonthCell,
   NzMonthFullCellDirective as MonthFullCell
 } from './calendar-cells';
+import { NzCalendarHeaderComponent } from './calendar-header.component';
 
 export type NzCalendarMode = 'month' | 'year';
 type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
@@ -92,7 +95,9 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
     '[class.ant-picker-calendar-mini]': '!nzFullscreen',
     '[class.ant-picker-calendar-rtl]': `dir === 'rtl'`
   },
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzCalendarComponent), multi: true }]
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzCalendarComponent), multi: true }],
+  imports: [NzCalendarHeaderComponent, NgIf, LibPackerModule],
+  standalone: true
 })
 export class NzCalendarComponent implements ControlValueAccessor, OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_nzFullscreen: BooleanInput;

diff --git a/components/calendar/calendar.module.ts b/components/calendar/calendar.module.ts
@@ -3,15 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { LibPackerModule } from 'ng-zorro-antd/date-picker';
-import { NzI18nModule } from 'ng-zorro-antd/i18n';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzSelectModule } from 'ng-zorro-antd/select';
 
 import {
   NzDateCellDirective,
@@ -23,7 +15,7 @@ import { NzCalendarHeaderComponent } from './calendar-header.component';
 import { NzCalendarComponent } from './calendar.component';
 
 @NgModule({
-  declarations: [
+  imports: [
     NzCalendarHeaderComponent,
     NzCalendarComponent,
     NzDateCellDirective,
@@ -37,7 +29,6 @@ import { NzCalendarComponent } from './calendar.component';
     NzDateFullCellDirective,
     NzMonthCellDirective,
     NzMonthFullCellDirective
-  ],
-  imports: [BidiModule, CommonModule, FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, LibPackerModule]
+  ]
 })
 export class NzCalendarModule {}
diff --git a/components/calendar/doc/index.en-US.md b/components/calendar/doc/index.en-US.md
@@ -16,12 +16,12 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 import { NzCalendarModule } from 'ng-zorro-antd/calendar';
 ```
 
-
 ## API
 
 **Note:** Some of Calendar's locale are coming from [Angular i18n](https://angular.io/guide/i18n), that should be provided in the file of `app.module.ts`.
 
 For example:
+
 ```typescript
 import { registerLocaleData } from '@angular/common';
 import en from '@angular/common/locales/en';
@@ -34,25 +34,26 @@ registerLocaleData(en);
   [(ngModel)]="selectedDate"
   [(nzMode)]="mode"
   (nzPanelChange)="panelChange($event)"
-  (nzSelectChange)="selectChange($event)">
+  (nzSelectChange)="selectChange($event)"
+>
   <!-- Another method for cell definition -->
   <div *nzDateCell>Foo</div>
 </nz-calendar>
 <!-- Passing TemplateRef -->
 <ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>
 ```
 
-### nz-calendar
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[(ngModel)]` | (Two-way bindable) The current selected date | `Date` | current date |
-| `[(nzMode)]` | The display mode of the calendar (two-way bindable) | `'month' \| 'year'` | `'month'` |
-| `[nzFullscreen]` | Whether to display in full-screen | `boolean` | `true` |
-| `[nzDateCell]` | (Contentable) Customize the display of the date cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
-| `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef<Date>` | - |
-| `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
-| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef<Date>` | - |
-| `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | - |
-| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
-| `(nzSelectChange)` | A callback function of selected item | `EventEmitter<Date>` | - |
+### nz-calendar:standalone
+
+| Property            | Description                                                                                              | Type                                                    | Default      |
+| ------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------ |
+| `[(ngModel)]`       | (Two-way bindable) The current selected date                                                             | `Date`                                                  | current date |
+| `[(nzMode)]`        | The display mode of the calendar (two-way bindable)                                                      | `'month' \| 'year'`                                     | `'month'`    |
+| `[nzFullscreen]`    | Whether to display in full-screen                                                                        | `boolean`                                               | `true`       |
+| `[nzDateCell]`      | (Contentable) Customize the display of the date cell, the template content will be appended to the cell  | `TemplateRef<Date>`                                     | -            |
+| `[nzDateFullCell]`  | (Contentable) Customize the display of the date cell, the template content will override the cell        | `TemplateRef<Date>`                                     | -            |
+| `[nzMonthCell]`     | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>`                                     | -            |
+| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell       | `TemplateRef<Date>`                                     | -            |
+| `[nzDisabledDate]`  | specify the date that cannot be selected                                                                 | `(current: Date) => boolean`                            | -            |
+| `(nzPanelChange)`   | Callback for when panel changes                                                                          | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | -            |
+| `(nzSelectChange)`  | A callback function of selected item                                                                     | `EventEmitter<Date>`                                    | -            |
diff --git a/components/calendar/doc/index.zh-CN.md b/components/calendar/doc/index.zh-CN.md
@@ -22,6 +22,7 @@ import { NzCalendarModule } from 'ng-zorro-antd/calendar';
 **注意：**Calendar 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。
 
 例如：
+
 ```typescript
 import { registerLocaleData } from '@angular/common';
 import zh from '@angular/common/locales/zh';
@@ -34,25 +35,26 @@ registerLocaleData(zh);
   [(ngModel)]="selectedDate"
   [(nzMode)]="mode"
   (nzPanelChange)="panelChange($event)"
-  (nzSelectChange)="selectChange($event)">
+  (nzSelectChange)="selectChange($event)"
+>
   <!-- 定义 Cell 的另一种方式 -->
   <div *dateCell>Foo</div>
 </nz-calendar>
 <!-- 传入 TemplateRef 的方式 -->
 <ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>
 ```
 
-### nz-calendar
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[(ngModel)]` | （可双向绑定）展示日期 | `Date` | 当前日期 |
-| `[(nzMode)]` | （可双向绑定）显示模式 | `'month' \| 'year'` | `'month'` |
-| `[nzFullscreen]` | 是否全屏显示 | `boolean` | `true` |
-| `[nzDateCell]` | （可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
-| `[nzDateFullCell]` | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
-| `[nzMonthCell]` | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
-| `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
-| `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - |
-| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
-| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter<Date>` | - |
+### nz-calendar:standalone
+
+| 参数                | 说明                                                         | 类型                                                    | 默认值    |
+| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------- | --------- |
+| `[(ngModel)]`       | （可双向绑定）展示日期                                       | `Date`                                                  | 当前日期  |
+| `[(nzMode)]`        | （可双向绑定）显示模式                                       | `'month' \| 'year'`                                     | `'month'` |
+| `[nzFullscreen]`    | 是否全屏显示                                                 | `boolean`                                               | `true`    |
+| `[nzDateCell]`      | （可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格 | `TemplateRef<Date>`                                     | -         |
+| `[nzDateFullCell]`  | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格       | `TemplateRef<Date>`                                     | -         |
+| `[nzMonthCell]`     | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格   | `TemplateRef<Date>`                                     | -         |
+| `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格         | `TemplateRef<Date>`                                     | -         |
+| `[nzDisabledDate]`  | 不可选择的日期                                               | `(current: Date) => boolean`                            | -         |
+| `(nzPanelChange)`   | 面板变化的回调                                               | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | -         |
+| `(nzSelectChange)`  | 选择日期的回调                                               | `EventEmitter<Date>`                                    | -         |