From 641ebb2d8072fa343c9275222be8c4a23f8fceb4 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh <62149413+ParsaArvanehPA@users.noreply.github.com> Date: Thu, 7 Dec 2023 21:25:06 +0330 Subject: [PATCH] feat(module:time-picker): support standalone component (#8211) * feat(module:time-picker): support standalone component * feat(module:time-picker): support standalone component * feat(module:time-picker): support standalone component * feat(module:time-picker): support standalone component * feat(module:time-picker): support standalone component --- components/time-picker/doc/index.en-US.md | 75 +++++++++---------- components/time-picker/doc/index.zh-CN.md | 73 +++++++++--------- .../time-picker-panel.component.spec.ts | 27 ++++--- .../time-picker-panel.component.ts | 8 +- .../time-picker/time-picker.component.spec.ts | 28 ++++--- .../time-picker/time-picker.component.ts | 27 ++++++- components/time-picker/time-picker.module.ts | 27 +------ 7 files changed, 141 insertions(+), 124 deletions(-) diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md index 22b9959a12..2ffe51fdd7 100644 --- a/components/time-picker/doc/index.en-US.md +++ b/components/time-picker/doc/index.en-US.md @@ -21,45 +21,44 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; ``` -### nz-time-picker - -| Property | Description | Type | Default | Global Config | -| -------- | ----------- | ---- | ------- | ------------- | -| `[nzId]` | input id attribute inside the component| `string` | - | -| `[ngModel]` | to set time | `Date` | - | -| `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef` | - | -| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ | -| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | -| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | -| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | ✅ | -| `[nzNowText]` | text of the Now button | `string` | `'Now'` | ✅ | -| `[nzOkText]` | text of the Ok button | `string` | `'Ok'` | ✅ | -| `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` | -| `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` | -| `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - | -| `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - | -| `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - | -| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | -| `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` | -| `[nzHourStep]` | interval between hours in picker | `number` | `1` | ✅ | -| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` | ✅ | -| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ | -| `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | -| `[nzBorderless]` | remove the border | `boolean` | `false` | - | -| `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - | -| `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` | -| `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` | -| `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ | -| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` | ✅ | -| `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - | ✅ | -| `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter` | - | -| `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter` | - | +### nz-time-picker:standalone +| Property | Description | Type | Default | Global Config | +| ------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------------- | ------------- | +| `[nzId]` | input id attribute inside the component | `string` | - | +| `[ngModel]` | to set time | `Date` | - | +| `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef` | - | +| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ | +| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | +| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | +| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | ✅ | +| `[nzNowText]` | text of the Now button | `string` | `'Now'` | ✅ | +| `[nzOkText]` | text of the Ok button | `string` | `'Ok'` | ✅ | +| `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` | +| `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` | +| `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - | +| `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - | +| `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - | +| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | +| `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` | +| `[nzHourStep]` | interval between hours in picker | `number` | `1` | ✅ | +| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` | ✅ | +| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ | +| `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | +| `[nzBorderless]` | remove the border | `boolean` | `false` | - | +| `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - | +| `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` | +| `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` | +| `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ | +| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` | ✅ | +| `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - | ✅ | +| `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter` | - | +| `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter` | - | #### Methods -| Name | Description | -| ---- | ----------- | -| blur() | remove focus | -| focus() | get focus | +| Name | Description | +| ------- | ------------ | +| blur() | remove focus | +| focus() | get focus | diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md index 12ed0d815a..a097816b5a 100644 --- a/components/time-picker/doc/index.zh-CN.md +++ b/components/time-picker/doc/index.zh-CN.md @@ -22,45 +22,44 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; ``` -### nz-time-picker +### nz-time-picker:standalone -| 参数 | 说明 | 类型 | 默认值 | 全局配置 | -| --- | --- | --- | --- | --- | -| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | -| `[ngModel]` | 当前时间 | `Date` | - | -| `[nzAddOn]` | 选择框底部显示自定义的内容 | `TemplateRef` | - | -| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | ✅ | -| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | -| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | -| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | ✅ | -| `[nzNowText]` | 此刻按钮文本 | `string` | `"此刻"` | ✅ | -| `[nzOkText]` | 确认按钮文本 | `string` | `"确定"` | ✅ | -| `[nzDefaultOpenValue]` | 当 `[ngModel]` 不存在时，可以设置面板打开时默认选中的值 | `Date` | `new Date()` | -| `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` | -| `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - | -| `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - | -| `[nzDisabledSeconds]` | 禁止选择部分秒选项 | `(hour: number, minute: number) => number[]` | - | -| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | -| `[nzHideDisabledOptions]` | 隐藏禁止选择的选项 | `boolean` | `false` | -| `[nzHourStep]` | 小时选项间隔 | `number` | `1` | ✅ | -| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` | ✅ | -| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | ✅ | -| `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | -| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - | -| `[nzInputReadOnly]` | 为 input 标签设置只读属性（避免在移动设备上触发小键盘） | `boolean` | `false` | - | -| `[nzOpen]` | 面板是否打开，可双向绑定 | `boolean` | `false` | -| `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` | -| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ | -| `[nzUse12Hours]` | 使用12小时制，为true时format默认为`h:mm:ss a` | `boolean` | `false` | ✅ | -| `[nzSuffixIcon]` | 自定义的后缀图标 | `string` \| `TemplateRef` | - | ✅ | -| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter` | - | -| `(nzOpenChange)` | 面板打开/关闭时的回调 | `EventEmitter` | - | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| ------------------------- | ------------------------------------------------------- | -------------------------------------------------- | -------------- | -------- | +| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | +| `[ngModel]` | 当前时间 | `Date` | - | +| `[nzAddOn]` | 选择框底部显示自定义的内容 | `TemplateRef` | - | +| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | ✅ | +| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | +| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | +| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | ✅ | +| `[nzNowText]` | 此刻按钮文本 | `string` | `"此刻"` | ✅ | +| `[nzOkText]` | 确认按钮文本 | `string` | `"确定"` | ✅ | +| `[nzDefaultOpenValue]` | 当 `[ngModel]` 不存在时，可以设置面板打开时默认选中的值 | `Date` | `new Date()` | +| `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` | +| `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - | +| `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - | +| `[nzDisabledSeconds]` | 禁止选择部分秒选项 | `(hour: number, minute: number) => number[]` | - | +| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | +| `[nzHideDisabledOptions]` | 隐藏禁止选择的选项 | `boolean` | `false` | +| `[nzHourStep]` | 小时选项间隔 | `number` | `1` | ✅ | +| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` | ✅ | +| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | ✅ | +| `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - | +| `[nzInputReadOnly]` | 为 input 标签设置只读属性（避免在移动设备上触发小键盘） | `boolean` | `false` | - | +| `[nzOpen]` | 面板是否打开，可双向绑定 | `boolean` | `false` | +| `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` | +| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ | +| `[nzUse12Hours]` | 使用 12 小时制，为 true 时 format 默认为`h:mm:ss a` | `boolean` | `false` | ✅ | +| `[nzSuffixIcon]` | 自定义的后缀图标 | `string` \| `TemplateRef` | - | ✅ | +| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter` | - | +| `(nzOpenChange)` | 面板打开/关闭时的回调 | `EventEmitter` | - | #### 方法 -| 名称 | 描述 | -| --- | --- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| ------- | -------- | +| blur() | 移除焦点 | | focus() | 获取焦点 | - diff --git a/components/time-picker/time-picker-panel.component.spec.ts b/components/time-picker/time-picker-panel.component.spec.ts index 5d46460037..eb43ef1eb9 100644 --- a/components/time-picker/time-picker-panel.component.spec.ts +++ b/components/time-picker/time-picker-panel.component.spec.ts @@ -4,23 +4,24 @@ import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing'; +import { NzI18nModule } from 'ng-zorro-antd/i18n'; -import { NzI18nModule } from '../i18n/nz-i18n.module'; import { NzTimePickerPanelComponent } from './time-picker-panel.component'; describe('time-picker-panel', () => { beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ - imports: [FormsModule, NzI18nModule], - schemas: [NO_ERRORS_SCHEMA], - declarations: [ + imports: [ + FormsModule, + NzI18nModule, NzTimePickerPanelComponent, NzTestTimePanelComponent, NzTestTimePanelDisabledComponent, NzTest12HourTimePanelComponent, NzTest12HourTimePanelDisabledComponent - ] + ], + schemas: [NO_ERRORS_SCHEMA] }); TestBed.compileComponents(); }) @@ -368,7 +369,9 @@ describe('time-picker-panel', () => { [nzHourStep]="hourStep" > `, - styleUrls: ['../style/index.less', './style/index.less'] + styleUrls: ['../style/index.less', './style/index.less'], + imports: [NzTimePickerPanelComponent, FormsModule], + standalone: true }) export class NzTestTimePanelComponent { secondStep = 1; @@ -397,7 +400,9 @@ export class NzTestTimePanelComponent { [nzHourStep]="hourStep" > `, - styleUrls: ['../style/index.less', './style/index.less'] + styleUrls: ['../style/index.less', './style/index.less'], + imports: [NzTimePickerPanelComponent, FormsModule], + standalone: true }) export class NzTestTimePanelDisabledComponent { inDatePicker = false; @@ -441,7 +446,9 @@ export class NzTestTimePanelDisabledComponent { [format]="format" > `, - styleUrls: ['../style/index.less', './style/index.less'] + styleUrls: ['../style/index.less', './style/index.less'], + imports: [NzTimePickerPanelComponent, FormsModule], + standalone: true }) export class NzTest12HourTimePanelComponent { @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; @@ -463,7 +470,9 @@ export class NzTest12HourTimePanelComponent { [nzHideDisabledOptions]="false" > `, - styleUrls: ['../style/index.less', './style/index.less'] + styleUrls: ['../style/index.less', './style/index.less'], + imports: [NzTimePickerPanelComponent, FormsModule], + standalone: true }) export class NzTest12HourTimePanelDisabledComponent { @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; diff --git a/components/time-picker/time-picker-panel.component.ts b/components/time-picker/time-picker-panel.component.ts index ab5d777b95..76c2a1e653 100644 --- a/components/time-picker/time-picker-panel.component.ts +++ b/components/time-picker/time-picker-panel.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { DecimalPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -25,10 +26,11 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { fromEvent, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; import { BooleanInput } from 'ng-zorro-antd/core/types'; import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; -import { DateHelperService } from 'ng-zorro-antd/i18n'; +import { DateHelperService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { TimeHolder } from './time-holder'; @@ -126,7 +128,9 @@ export type NzTimePickerUnit = 'hour' | 'minute' | 'second' | '12-hour'; '[class.ant-picker-time-panel-narrow]': `enabledColumns < 3`, '[class.ant-picker-time-panel-placement-bottomLeft]': `!nzInDatePicker` }, - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerPanelComponent, multi: true }] + providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerPanelComponent, multi: true }], + imports: [NgIf, NgForOf, DecimalPipe, NgTemplateOutlet, NzI18nModule, NzButtonModule], + standalone: true }) export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges { static ngAcceptInputType_nzUse12Hours: BooleanInput; diff --git a/components/time-picker/time-picker.component.spec.ts b/components/time-picker/time-picker.component.spec.ts index 447774a4a4..64c1a4ff40 100644 --- a/components/time-picker/time-picker.component.spec.ts +++ b/components/time-picker/time-picker.component.spec.ts @@ -34,15 +34,13 @@ describe('time-picker', () => { ReactiveFormsModule, NzI18nModule, NzTimePickerModule, - NzFormModule - ], - schemas: [NO_ERRORS_SCHEMA], - declarations: [ + NzFormModule, NzTestTimePickerComponent, NzTestTimePickerStatusComponent, NzTestTimePickerDirComponent, NzTestTimePickerInFormComponent - ] + ], + schemas: [NO_ERRORS_SCHEMA] }); TestBed.compileComponents(); inject([OverlayContainer], (oc: OverlayContainer) => { @@ -467,7 +465,9 @@ describe('time-picker', () => { [nzDefaultOpenValue]="defaultOpenValue" [nzBorderless]="nzBorderless" > - ` + `, + imports: [NzTimePickerComponent, FormsModule], + standalone: true }) export class NzTestTimePickerComponent { open = false; @@ -486,14 +486,22 @@ export class NzTestTimePickerComponent { } @Component({ - template: ` ` + template: ` `, + imports: [NzTimePickerComponent], + standalone: true }) export class NzTestTimePickerStatusComponent { status: NzStatus = 'error'; } @Component({ - template: `
` + template: ` +
+ +
+ `, + imports: [NzTimePickerComponent, BidiModule], + standalone: true }) export class NzTestTimePickerDirComponent { dir: Direction = 'ltr'; @@ -508,7 +516,9 @@ export class NzTestTimePickerDirComponent { - ` + `, + imports: [NzFormModule, ReactiveFormsModule, NzTimePickerComponent], + standalone: true }) export class NzTestTimePickerInFormComponent { timePickerForm = new FormGroup({ diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts index d8acfb6f09..3ec3bddea2 100644 --- a/components/time-picker/time-picker.component.ts +++ b/components/time-picker/time-picker.component.ts @@ -4,8 +4,9 @@ */ import { Direction, Directionality } from '@angular/cdk/bidi'; -import { CdkOverlayOrigin, ConnectionPositionPair } from '@angular/cdk/overlay'; +import { CdkOverlayOrigin, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'; import { Platform } from '@angular/cdk/platform'; +import { AsyncPipe, NgClass, NgIf } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, @@ -25,7 +26,7 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, of, Subject } from 'rxjs'; import { distinctUntilChanged, map, takeUntil, withLatestFrom } from 'rxjs/operators'; @@ -33,11 +34,16 @@ import { isValid } from 'date-fns'; 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 { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form'; import { warn } from 'ng-zorro-antd/core/logger'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; +import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { BooleanInput, NgClassInterface, NzSafeAny, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types'; import { getStatusClassNames, InputBoolean, isNil } from 'ng-zorro-antd/core/util'; import { DateHelperService, NzI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n'; +import { NzIconModule } from 'ng-zorro-antd/icon'; + +import { NzTimePickerPanelComponent } from './time-picker-panel.component'; const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker'; @@ -133,7 +139,20 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker'; '(click)': 'open()' }, animations: [slideMotion], - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerComponent, multi: true }] + providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NzTimePickerComponent, multi: true }], + imports: [ + AsyncPipe, + FormsModule, + NzOutletModule, + NzIconModule, + NzFormPatchModule, + NgIf, + NzTimePickerPanelComponent, + NgClass, + NzOverlayModule, + OverlayModule + ], + standalone: true }) export class NzTimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy { readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME; diff --git a/components/time-picker/time-picker.module.ts b/components/time-picker/time-picker.module.ts index 1a51e2313e..545b668961 100644 --- a/components/time-picker/time-picker.module.ts +++ b/components/time-picker/time-picker.module.ts @@ -3,36 +3,13 @@ * 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 { NzOutletModule } from 'ng-zorro-antd/core/outlet'; -import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; -import { NzI18nModule } from 'ng-zorro-antd/i18n'; -import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzTimePickerPanelComponent } from './time-picker-panel.component'; import { NzTimePickerComponent } from './time-picker.component'; @NgModule({ - declarations: [NzTimePickerComponent, NzTimePickerPanelComponent], - exports: [NzTimePickerPanelComponent, NzTimePickerComponent], - imports: [ - BidiModule, - CommonModule, - FormsModule, - NzI18nModule, - OverlayModule, - NzIconModule, - NzOverlayModule, - NzOutletModule, - NzButtonModule, - NzFormPatchModule - ] + imports: [NzTimePickerComponent, NzTimePickerPanelComponent], + exports: [NzTimePickerPanelComponent, NzTimePickerComponent] }) export class NzTimePickerModule {}