feat(module:date-picker): support standalone component (#8263)

* feat(module:date-picker): support standalone component * feat(module:date-picker): add bidi module in import section * feat(module:date-picker): support standalone component * feat(module:date-picker): support standalone component
NG-ZORRO · Dec 11, 2023 · ac48fba · ac48fba
1 parent 641ebb2
commit ac48fba
Show file tree

Hide file tree

Showing 24 changed files with 250 additions and 205 deletions.
diff --git a/components/date-picker/calendar-footer.component.ts b/components/date-picker/calendar-footer.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,6 +16,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
@@ -71,7 +73,9 @@ import { PREFIX_CLASS } from './util';
         </li>
       </ul>
     </div>
-  `
+  `,
+  imports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NzButtonModule],
+  standalone: true
 })
 export class CalendarFooterComponent implements OnChanges {
   @Input() locale!: NzCalendarI18nInterface;

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -14,7 +14,7 @@ import {
   VerticalConnectionPos
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -39,16 +39,17 @@ import {
   ViewEncapsulation,
   forwardRef
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, of as observableOf } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil, withLatestFrom } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
 import { slideMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
-import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
-import { DATE_PICKER_POSITION_MAP, DEFAULT_DATE_PICKER_POSITIONS } from 'ng-zorro-antd/core/overlay';
+import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form';
+import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { DATE_PICKER_POSITION_MAP, DEFAULT_DATE_PICKER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/overlay';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { CandyDate, CompatibleValue, cloneDate, wrongSortOrder } from 'ng-zorro-antd/core/time';
 import {
@@ -68,6 +69,7 @@ import {
   NzDatePickerLangI18nInterface,
   NzI18nService
 } from 'ng-zorro-antd/i18n';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { DatePickerService } from './date-picker.service';
 import { DateRangePopupComponent } from './date-range-popup.component';
@@ -250,7 +252,21 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
       useExisting: forwardRef(() => NzDatePickerComponent)
     }
   ],
-  animations: [slideMotion]
+  animations: [slideMotion],
+  imports: [
+    NgIf,
+    FormsModule,
+    NgTemplateOutlet,
+    NzOutletModule,
+    NzIconModule,
+    NgStyle,
+    NzFormPatchModule,
+    DateRangePopupComponent,
+    CdkConnectedOverlay,
+    NzOverlayModule,
+    NzNoAnimationModule
+  ],
+  standalone: true
 })
 export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/date-picker/date-picker.module.ts b/components/date-picker/date-picker.module.ts
@@ -3,63 +3,34 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzFormPatchModule } from 'ng-zorro-antd/core/form';
-import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 import { CalendarFooterComponent } from './calendar-footer.component';
 import { NzDatePickerComponent } from './date-picker.component';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { InnerPopupComponent } from './inner-popup.component';
-import { LibPackerModule } from './lib/lib-packer.module';
 import { NzMonthPickerComponent } from './month-picker.component';
 import { NzRangePickerComponent } from './range-picker.component';
 import { NzWeekPickerComponent } from './week-picker.component';
 import { NzYearPickerComponent } from './year-picker.component';
 
 @NgModule({
   imports: [
-    BidiModule,
-    CommonModule,
-    FormsModule,
-    OverlayModule,
-    LibPackerModule,
-    NzIconModule,
-    NzOverlayModule,
-    NzNoAnimationModule,
-    NzFormPatchModule,
-    NzOutletModule,
-    NzTimePickerModule,
-    NzButtonModule,
-    LibPackerModule
-  ],
-  exports: [
-    NzDatePickerComponent,
-    NzRangePickerComponent,
-    NzMonthPickerComponent,
-    NzYearPickerComponent,
-    NzWeekPickerComponent
-  ],
-  declarations: [
     NzDatePickerComponent,
     NzMonthPickerComponent,
     NzYearPickerComponent,
     NzWeekPickerComponent,
     NzRangePickerComponent,
-
     CalendarFooterComponent,
     InnerPopupComponent,
     DateRangePopupComponent
+  ],
+  exports: [
+    NzDatePickerComponent,
+    NzRangePickerComponent,
+    NzMonthPickerComponent,
+    NzYearPickerComponent,
+    NzWeekPickerComponent
   ]
 })
 export class NzDatePickerModule {}
diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -34,7 +35,9 @@ import {
 import { FunctionProp } from 'ng-zorro-antd/core/types';
 import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
 
+import { CalendarFooterComponent } from './calendar-footer.component';
 import { DatePickerService } from './date-picker.service';
+import { InnerPopupComponent } from './inner-popup.component';
 import {
   CompatibleDate,
   DisabledDateFn,
@@ -141,7 +144,9 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
         <span class="ant-tag ant-tag-blue">{{ name }}</span>
       </li>
     </ng-template>
-  `
+  `,
+  imports: [InnerPopupComponent, NgTemplateOutlet, NgIf, CalendarFooterComponent, NgForOf],
+  standalone: true
 })
 export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() isRange!: boolean;