Skip to content

Commit 80d68a3

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:calendar): support standalone component (#8274)
* feat(module:calendar): support standalone component * feat(module:calendar): support standalone component
1 parent 5af11ea commit 80d68a3

7 files changed

Lines changed: 60 additions & 53 deletions

File tree

‎components/calendar/calendar-cells.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,28 @@ import { Directive } from '@angular/core';
77

88
@Directive({
99
selector: '[nzDateCell]',
10-
exportAs: 'nzDateCell'
10+
exportAs: 'nzDateCell',
11+
standalone: true
1112
})
1213
export class NzDateCellDirective {}
1314

1415
@Directive({
1516
selector: '[nzMonthCell]',
16-
exportAs: 'nzMonthCell'
17+
exportAs: 'nzMonthCell',
18+
standalone: true
1719
})
1820
export class NzMonthCellDirective {}
1921

2022
@Directive({
2123
selector: '[nzDateFullCell]',
22-
exportAs: 'nzDateFullCell'
24+
exportAs: 'nzDateFullCell',
25+
standalone: true
2326
})
2427
export class NzDateFullCellDirective {}
2528

2629
@Directive({
2730
selector: '[nzMonthFullCell]',
28-
exportAs: 'nzMonthFullCell'
31+
exportAs: 'nzMonthFullCell',
32+
standalone: true
2933
})
3034
export class NzMonthFullCellDirective {}

‎components/calendar/calendar-header.component.ts‎

Lines changed: 7 additions & 2 deletions
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 } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
Component,
@@ -12,10 +13,12 @@ import {
1213
Output,
1314
ViewEncapsulation
1415
} from '@angular/core';
16+
import { FormsModule } from '@angular/forms';
1517

1618
import { CandyDate } from 'ng-zorro-antd/core/time';
1719
import { DateHelperService, NzI18nService as I18n } from 'ng-zorro-antd/i18n';
18-
import { NzSelectSizeType } from 'ng-zorro-antd/select';
20+
import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio';
21+
import { NzSelectModule, NzSelectSizeType } from 'ng-zorro-antd/select';
1922

2023
@Component({
2124
encapsulation: ViewEncapsulation.None,
@@ -59,7 +62,9 @@ import { NzSelectSizeType } from 'ng-zorro-antd/select';
5962
host: {
6063
class: 'ant-fullcalendar-header',
6164
'[style.display]': `'block'`
62-
}
65+
},
66+
imports: [NzSelectModule, NgForOf, NgIf, FormsModule, NzRadioGroupComponent, NzRadioComponent],
67+
standalone: true
6368
})
6469
export class NzCalendarHeaderComponent implements OnInit {
6570
@Input() mode: 'month' | 'year' = 'month';

‎components/calendar/calendar-header.spec.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { By } from '@angular/platform-browser';
77
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
88

99
import { CandyDate } from 'ng-zorro-antd/core/time';
10+
import { NzI18nModule } from 'ng-zorro-antd/i18n';
11+
import { NzSelectModule } from 'ng-zorro-antd/select';
1012

11-
import { NzI18nModule } from '../i18n/nz-i18n.module';
1213
import { NzRadioGroupComponent as RadioGroup, NzRadioModule } from '../radio/index';
1314
import { NzSelectComponent as Select } from '../select/select.component';
14-
import { NzSelectModule } from '../select/select.module';
1515
import { NzCalendarHeaderComponent, NzCalendarHeaderComponent as CalendarHeader } from './calendar-header.component';
1616

1717
registerLocaleData(zh);
@@ -20,9 +20,8 @@ describe('Calendar Header', () => {
2020
beforeEach(
2121
waitForAsync(() => {
2222
TestBed.configureTestingModule({
23-
imports: [FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, NoopAnimationsModule],
23+
imports: [FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, NoopAnimationsModule, CalendarHeader],
2424
declarations: [
25-
CalendarHeader,
2625
NzTestCalendarHeaderModeComponent,
2726
NzTestCalendarHeaderFullscreenComponent,
2827
NzTestCalendarHeaderActiveDateComponent,

‎components/calendar/calendar.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgIf } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
ChangeDetectorRef,
@@ -28,13 +29,15 @@ import { takeUntil } from 'rxjs/operators';
2829
import { CandyDate } from 'ng-zorro-antd/core/time';
2930
import { BooleanInput } from 'ng-zorro-antd/core/types';
3031
import { InputBoolean } from 'ng-zorro-antd/core/util';
32+
import { LibPackerModule } from 'ng-zorro-antd/date-picker';
3133

3234
import {
3335
NzDateCellDirective as DateCell,
3436
NzDateFullCellDirective as DateFullCell,
3537
NzMonthCellDirective as MonthCell,
3638
NzMonthFullCellDirective as MonthFullCell
3739
} from './calendar-cells';
40+
import { NzCalendarHeaderComponent } from './calendar-header.component';
3841

3942
export type NzCalendarMode = 'month' | 'year';
4043
type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
@@ -92,7 +95,9 @@ type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
9295
'[class.ant-picker-calendar-mini]': '!nzFullscreen',
9396
'[class.ant-picker-calendar-rtl]': `dir === 'rtl'`
9497
},
95-
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzCalendarComponent), multi: true }]
98+
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzCalendarComponent), multi: true }],
99+
imports: [NzCalendarHeaderComponent, NgIf, LibPackerModule],
100+
standalone: true
96101
})
97102
export class NzCalendarComponent implements ControlValueAccessor, OnChanges, OnInit, OnDestroy {
98103
static ngAcceptInputType_nzFullscreen: BooleanInput;

‎components/calendar/calendar.module.ts‎

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

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { CommonModule } from '@angular/common';
86
import { NgModule } from '@angular/core';
9-
import { FormsModule } from '@angular/forms';
10-
11-
import { LibPackerModule } from 'ng-zorro-antd/date-picker';
12-
import { NzI18nModule } from 'ng-zorro-antd/i18n';
13-
import { NzRadioModule } from 'ng-zorro-antd/radio';
14-
import { NzSelectModule } from 'ng-zorro-antd/select';
157

168
import {
179
NzDateCellDirective,
@@ -23,7 +15,7 @@ import { NzCalendarHeaderComponent } from './calendar-header.component';
2315
import { NzCalendarComponent } from './calendar.component';
2416

2517
@NgModule({
26-
declarations: [
18+
imports: [
2719
NzCalendarHeaderComponent,
2820
NzCalendarComponent,
2921
NzDateCellDirective,
@@ -37,7 +29,6 @@ import { NzCalendarComponent } from './calendar.component';
3729
NzDateFullCellDirective,
3830
NzMonthCellDirective,
3931
NzMonthFullCellDirective
40-
],
41-
imports: [BidiModule, CommonModule, FormsModule, NzI18nModule, NzRadioModule, NzSelectModule, LibPackerModule]
32+
]
4233
})
4334
export class NzCalendarModule {}

‎components/calendar/doc/index.en-US.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
1616
import { NzCalendarModule } from 'ng-zorro-antd/calendar';
1717
```
1818

19-
2019
## API
2120

2221
**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`.
2322

2423
For example:
24+
2525
```typescript
2626
import { registerLocaleData } from '@angular/common';
2727
import en from '@angular/common/locales/en';
@@ -34,25 +34,26 @@ registerLocaleData(en);
3434
[(ngModel)]="selectedDate"
3535
[(nzMode)]="mode"
3636
(nzPanelChange)="panelChange($event)"
37-
(nzSelectChange)="selectChange($event)">
37+
(nzSelectChange)="selectChange($event)"
38+
>
3839
<!-- Another method for cell definition -->
3940
<div *nzDateCell>Foo</div>
4041
</nz-calendar>
4142
<!-- Passing TemplateRef -->
4243
<ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>
4344
```
4445

45-
### nz-calendar
46-
47-
| Property | Description | Type | Default |
48-
| -------- | ----------- | ---- | ------- |
49-
| `[(ngModel)]` | (Two-way bindable) The current selected date | `Date` | current date |
50-
| `[(nzMode)]` | The display mode of the calendar (two-way bindable) | `'month' \| 'year'` | `'month'` |
51-
| `[nzFullscreen]` | Whether to display in full-screen | `boolean` | `true` |
52-
| `[nzDateCell]` | (Contentable) Customize the display of the date cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
53-
| `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef<Date>` | - |
54-
| `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
55-
| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef<Date>` | - |
56-
| `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | - |
57-
| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
58-
| `(nzSelectChange)` | A callback function of selected item | `EventEmitter<Date>` | - |
46+
### nz-calendar:standalone
47+
48+
| Property | Description | Type | Default |
49+
| ------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------ |
50+
| `[(ngModel)]` | (Two-way bindable) The current selected date | `Date` | current date |
51+
| `[(nzMode)]` | The display mode of the calendar (two-way bindable) | `'month' \| 'year'` | `'month'` |
52+
| `[nzFullscreen]` | Whether to display in full-screen | `boolean` | `true` |
53+
| `[nzDateCell]` | (Contentable) Customize the display of the date cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
54+
| `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef<Date>` | - |
55+
| `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef<Date>` | - |
56+
| `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef<Date>` | - |
57+
| `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - |
58+
| `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
59+
| `(nzSelectChange)` | A callback function of selected item | `EventEmitter<Date>` | - |

‎components/calendar/doc/index.zh-CN.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { NzCalendarModule } from 'ng-zorro-antd/calendar';
2222
**注意：**Calendar 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。
2323

2424
例如：
25+
2526
```typescript
2627
import { registerLocaleData } from '@angular/common';
2728
import zh from '@angular/common/locales/zh';
@@ -34,25 +35,26 @@ registerLocaleData(zh);
3435
[(ngModel)]="selectedDate"
3536
[(nzMode)]="mode"
3637
(nzPanelChange)="panelChange($event)"
37-
(nzSelectChange)="selectChange($event)">
38+
(nzSelectChange)="selectChange($event)"
39+
>
3840
<!-- 定义 Cell 的另一种方式 -->
3941
<div *dateCell>Foo</div>
4042
</nz-calendar>
4143
<!-- 传入 TemplateRef 的方式 -->
4244
<ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>
4345
```
4446

45-
### nz-calendar
46-
47-
| 参数 | 说明 | 类型 | 默认值 |
48-
| --- | --- | --- | --- |
49-
| `[(ngModel)]` | （可双向绑定）展示日期 | `Date` | 当前日期 |
50-
| `[(nzMode)]` | （可双向绑定）显示模式 | `'month' \| 'year'` | `'month'` |
51-
| `[nzFullscreen]` | 是否全屏显示 | `boolean` | `true` |
52-
| `[nzDateCell]` | （可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
53-
| `[nzDateFullCell]` | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
54-
| `[nzMonthCell]` | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
55-
| `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
56-
| `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - |
57-
| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
58-
| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter<Date>` | - |
47+
### nz-calendar:standalone
48+
49+
| 参数 | 说明 | 类型 | 默认值 |
50+
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------- | --------- |
51+
| `[(ngModel)]` | （可双向绑定）展示日期 | `Date` | 当前日期 |
52+
| `[(nzMode)]` | （可双向绑定）显示模式 | `'month' \| 'year'` | `'month'` |
53+
| `[nzFullscreen]` | 是否全屏显示 | `boolean` | `true` |
54+
| `[nzDateCell]` | （可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
55+
| `[nzDateFullCell]` | （可作为内容）自定义渲染日期单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
56+
| `[nzMonthCell]` | （可作为内容）自定义渲染月单元格，模版内容会被追加到单元格 | `TemplateRef<Date>` | - |
57+
| `[nzMonthFullCell]` | （可作为内容）自定义渲染月单元格，模版内容覆盖单元格 | `TemplateRef<Date>` | - |
58+
| `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - |
59+
| `(nzPanelChange)` | 面板变化的回调 | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - |
60+
| `(nzSelectChange)` | 选择日期的回调 | `EventEmitter<Date>` | - |

0 commit comments

Comments
 (0)