Refactor components to use standalone Angular imports on components package

npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts

@@ -8,7 +8,6 @@ import {
   SkipSelf,
   ViewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 import {
   NgbDateAdapter,
@@ -27,7 +26,6 @@ import { selfFactory } from '../../utils/factory.util';
 @Component({
   exportAs: 'abpExtensibleDateTimePicker',
   imports: [
-    CommonModule,
     ReactiveFormsModule,
     NgbDatepickerModule,
     NgbTimepickerModule,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -47,7 +47,7 @@ import { eExtensibleComponents } from '../../enums/components';
 import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-form-multiselect.component';
 
@@ -67,7 +67,9 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     ShowPasswordDirective,
     PermissionDirective,
     LocalizationModule,
-    CommonModule,
+    NgClass,
+    NgComponentOutlet,
+    NgTemplateOutlet,
     FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts

@@ -17,14 +17,14 @@ import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
 import { selfFactory } from '../../utils/factory.util';
 import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { PropDataDirective } from '../../directives/prop-data.directive';
 
 @Component({
   exportAs: 'abpExtensibleForm',
   selector: 'abp-extensible-form',
   templateUrl: './extensible-form.component.html',
-  imports: [CommonModule, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
+  imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
     {

npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts

@@ -1,6 +1,5 @@
 import { Component, ChangeDetectionStrategy, forwardRef, input } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { ABP, LocalizationPipe } from '@abp/ng.core';
 import { FormProp } from '../../models/form-props';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
@@ -37,7 +36,7 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
     </div>
   `,
   providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
-  imports: [LocalizationPipe, CommonModule, ReactiveFormsModule, NgxValidateCoreModule],
+  imports: [LocalizationPipe, NgxValidateCoreModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExtensibleFormMultiselectComponent implements ControlValueAccessor {

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@@ -28,7 +28,7 @@ import { of } from 'rxjs';
 import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token';
 import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
@@ -41,7 +41,8 @@ export type DropEvent = NzFormatEmitEvent & { pos: number };
   providers: [SubscriptionService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
+    NgClass,
+    NgTemplateOutlet,
     NzTreeComponent,
     NgbDropdown,
     NgbDropdownMenu,