feat(module:select): support standalone component (#8222)

* feat(module:select): support standalone component

* feat(module:select): support standalone component

* feat(module:select): support standalone component

components/select/option-container.component.ts

@@ -3,13 +3,15 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
   Input,
   NgZone,
   OnChanges,
@@ -18,12 +20,15 @@ import {
   SimpleChanges,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation,
-  inject
+  ViewEncapsulation
 } from '@angular/core';
 
+import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
 
+import { NzOptionItemGroupComponent } from './option-item-group.component';
+import { NzOptionItemComponent } from './option-item.component';
 import { NzSelectItemInterface, NzSelectModeType } from './select.types';
 
 @Component({
@@ -78,7 +83,19 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
       <ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
     </div>
   `,
-  host: { class: 'ant-select-dropdown' }
+  host: { class: 'ant-select-dropdown' },
+  imports: [
+    NzEmptyModule,
+    NgIf,
+    NgSwitch,
+    NzOptionItemGroupComponent,
+    NgSwitchCase,
+    NzOptionItemComponent,
+    NgTemplateOutlet,
+    OverlayModule,
+    NzOverlayModule
+  ],
+  standalone: true
 })
 export class NzOptionContainerComponent implements OnChanges, AfterViewInit {
   @Input() notFoundContent: string | TemplateRef<NzSafeAny> | undefined = undefined;

components/select/option-group.component.ts

@@ -13,7 +13,8 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   exportAs: 'nzOptionGroup',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ` <ng-content></ng-content> `
+  template: ` <ng-content></ng-content> `,
+  standalone: true
 })
 export class NzOptionGroupComponent implements OnChanges {
   @Input() nzLabel: string | number | TemplateRef<NzSafeAny> | null = null;

components/select/option-item-group.component.ts

@@ -5,6 +5,7 @@
 
 import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 @Component({
@@ -14,7 +15,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   encapsulation: ViewEncapsulation.None,
   host: {
     class: 'ant-select-item ant-select-item-group'
-  }
+  },
+  imports: [NzOutletModule],
+  standalone: true
 })
 export class NzOptionItemGroupComponent {
   @Input() nzLabel: string | number | TemplateRef<NzSafeAny> | null = null;

components/select/option-item.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, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -22,6 +23,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'nz-option-item',
@@ -46,7 +48,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
     '[class.ant-select-item-option-disabled]': 'disabled',
     '[class.ant-select-item-option-active]': 'activated && !disabled'
   },
-  providers: [NzDestroyService]
+  providers: [NzDestroyService],
+  imports: [NgIf, NgTemplateOutlet, NzIconModule],
+  standalone: true
 })
 export class NzOptionItemComponent implements OnChanges, OnInit {
   selected = false;

components/select/option.component.ts

@@ -33,7 +33,8 @@ import { NzOptionGroupComponent } from './option-group.component';
     <ng-template>
       <ng-content></ng-content>
     </ng-template>
-  `
+  `,
+  standalone: true
 })
 export class NzOptionComponent implements OnChanges, OnInit {
   static ngAcceptInputType_nzDisabled: BooleanInput;

components/select/select-arrow.component.ts

@@ -3,9 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'nz-select-arrow',
@@ -29,7 +32,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   host: {
     class: 'ant-select-arrow',
     '[class.ant-select-arrow-loading]': 'loading'
-  }
+  },
+  imports: [NzIconModule, NgIf, NzOutletModule],
+  standalone: true
 })
 export class NzSelectArrowComponent {
   @Input() loading = false;

components/select/select-clear.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 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -14,6 +15,7 @@ import {
 } from '@angular/core';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'nz-select-clear',
@@ -31,7 +33,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   host: {
     class: 'ant-select-clear',
     '(click)': 'onClick($event)'
-  }
+  },
+  imports: [NzIconModule, NgIf],
+  standalone: true
 })
 export class NzSelectClearComponent {
   @Input() clearIcon: TemplateRef<NzSafeAny> | null = null;

components/select/select-item.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 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,7 +14,9 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'nz-select-item',
@@ -32,7 +35,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
     class: 'ant-select-selection-item',
     '[attr.title]': 'label',
     '[class.ant-select-selection-item-disabled]': 'disabled'
-  }
+  },
+  imports: [NzOutletModule, NgIf, NzIconModule],
+  standalone: true
 })
 export class NzSelectItemComponent {
   @Input() disabled = false;

components/select/select-placeholder.component.ts

@@ -5,6 +5,7 @@
 
 import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 @Component({
@@ -16,7 +17,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
       {{ placeholder }}
     </ng-container>
   `,
-  host: { class: 'ant-select-selection-placeholder' }
+  host: { class: 'ant-select-selection-placeholder' },
+  imports: [NzOutletModule],
+  standalone: true
 })
 export class NzSelectPlaceholderComponent {
   @Input() placeholder: TemplateRef<NzSafeAny> | string | null = null;

components/select/select-search.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { NgIf } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -18,7 +19,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
+import { COMPOSITION_BUFFER_MODE, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'nz-select-search',
@@ -41,7 +42,9 @@ import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
     <span #mirrorElement *ngIf="mirrorSync" class="ant-select-selection-search-mirror"></span>
   `,
   host: { class: 'ant-select-selection-search' },
-  providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]
+  providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }],
+  imports: [FormsModule, NgIf],
+  standalone: true
 })
 export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
   @Input() nzId: string | null = null;

components/select/select-top-control.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { BACKSPACE } from '@angular/cdk/keycodes';
+import { NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,6 +29,8 @@ import { takeUntil } from 'rxjs/operators';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { NzSelectItemComponent } from './select-item.component';
+import { NzSelectPlaceholderComponent } from './select-placeholder.component';
 import { NzSelectSearchComponent } from './select-search.component';
 import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } from './select.types';
 
@@ -89,7 +92,18 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
     </ng-container>
     <nz-select-placeholder *ngIf="isShowPlaceholder" [placeholder]="placeHolder"></nz-select-placeholder>
   `,
-  host: { class: 'ant-select-selector' }
+  host: { class: 'ant-select-selector' },
+  imports: [
+    NgSwitch,
+    NzSelectSearchComponent,
+    NgSwitchCase,
+    NzSelectItemComponent,
+    NgIf,
+    NgSwitchDefault,
+    NgFor,
+    NzSelectPlaceholderComponent
+  ],
+  standalone: true
 })
 export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy {
   @Input() nzId: string | null = null;

components/select/select.component.ts

@@ -13,6 +13,7 @@ import {
   ConnectionPositionPair
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
+import { NgIf, NgStyle } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -43,9 +44,9 @@ import { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestF
 
 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 { getPlacementName, POSITION_MAP, POSITION_TYPE } 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 { getPlacementName, NzOverlayModule, POSITION_MAP, POSITION_TYPE } from 'ng-zorro-antd/core/overlay';
 import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import {
@@ -59,8 +60,11 @@ import {
 } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
 
+import { NzOptionContainerComponent } from './option-container.component';
 import { NzOptionGroupComponent } from './option-group.component';
 import { NzOptionComponent } from './option.component';
+import { NzSelectArrowComponent } from './select-arrow.component';
+import { NzSelectClearComponent } from './select-clear.component';
 import { NzSelectTopControlComponent } from './select-top-control.component';
 import {
   NzFilterOptionType,
@@ -195,7 +199,21 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     '[class.ant-select-single]': `nzMode === 'default'`,
     '[class.ant-select-multiple]': `nzMode !== 'default'`,
     '[class.ant-select-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [
+    NzSelectTopControlComponent,
+    CdkOverlayOrigin,
+    NzNoAnimationModule,
+    NzSelectArrowComponent,
+    NgIf,
+    NzFormPatchModule,
+    NzSelectClearComponent,
+    CdkConnectedOverlay,
+    NzOverlayModule,
+    NzOptionContainerComponent,
+    NgStyle
+  ],
+  standalone: true
 })
 export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterContentInit, OnChanges, OnDestroy {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

components/select/select.module.ts

@@ -3,23 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { A11yModule } from '@angular/cdk/a11y';
-import { BidiModule } from '@angular/cdk/bidi';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PlatformModule } from '@angular/cdk/platform';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-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 { ɵNzTransitionPatchModule as NzTransitionPatchModule } from 'ng-zorro-antd/core/transition-patch';
-import { NzEmptyModule } from 'ng-zorro-antd/empty';
-import { NzI18nModule } from 'ng-zorro-antd/i18n';
-import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzOptionContainerComponent } from './option-container.component';
 import { NzOptionGroupComponent } from './option-group.component';
@@ -36,23 +20,6 @@ import { NzSelectComponent } from './select.component';
 
 @NgModule({
   imports: [
-    BidiModule,
-    CommonModule,
-    NzI18nModule,
-    FormsModule,
-    PlatformModule,
-    OverlayModule,
-    NzIconModule,
-    NzOutletModule,
-    NzEmptyModule,
-    NzOverlayModule,
-    NzNoAnimationModule,
-    NzTransitionPatchModule,
-    NzFormPatchModule,
-    ScrollingModule,
-    A11yModule
-  ],
-  declarations: [
     NzOptionComponent,
     NzSelectComponent,
     NzOptionContainerComponent,