refactor(standalone): update some components to standalone components

includes: Find Form Highlight Image Input InputNumber Layout Link List Loading Menu Message

Author: ng-nest-moon

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 120,
   "semi": true,
   "singleQuote": true,
   "trailingComma": "none"

docs/course/rbac/4-ui-navigation/demo/13__ui/src/layout/index/index.module.ts

@@ -8,7 +8,7 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { RouterModule } from '@angular/router';
 import { mainRoutes } from 'src/environments/routes';
-import { XMenuModule } from '@ng-nest/ui/menu';
+import { XMenuComponent } from '@ng-nest/ui/menu';
 import { XSliderModule } from '@ng-nest/ui/slider';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XCrumbModule } from '@ng-nest/ui/crumb';
@@ -17,7 +17,7 @@ import { XCrumbModule } from '@ng-nest/ui/crumb';
   declarations: [IndexComponent, ContentComponent, CrumbComponent, HeaderComponent, SidebarComponent, TabsComponent],
   imports: [
     CommonModule,
-    XMenuModule,
+    XMenuComponent,
     XSliderModule,
     XIconComponent,
     XCrumbModule,

docs/course/rbac/4-ui-navigation/demo/9__ui/src/layout/index/index.module.ts

@@ -8,15 +8,15 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { RouterModule } from '@angular/router';
 import { mainRoutes } from 'src/environments/routes';
-import { XMenuModule } from '@ng-nest/ui/menu';
+import { XMenuComponent } from '@ng-nest/ui/menu';
 import { XSliderModule } from '@ng-nest/ui/slider';
 import { XIconComponent } from '@ng-nest/ui/icon';
 
 @NgModule({
   declarations: [IndexComponent, ContentComponent, CrumbComponent, HeaderComponent, SidebarComponent, TabsComponent],
   imports: [
     CommonModule,
-    XMenuModule,
+    XMenuComponent,
     XSliderModule,
     XIconComponent,
     RouterModule.forChild([

docs/course/rbac/5-user-manage/demo/24__ui/src/main/system/users/user.module.ts

@@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
 import { XTableModule } from '@ng-nest/ui/table';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XFormModule } from '@ng-nest/ui/form';
+import { XFormComponent } from '@ng-nest/ui/form';
 import { XMessageModule } from '@ng-nest/ui/message';
 
 @NgModule({
@@ -14,7 +14,7 @@ import { XMessageModule } from '@ng-nest/ui/message';
     CommonModule,
     XTableModule,
     XButtonComponent,
-    XFormModule,
+    XFormComponent,
     XMessageModule,
     RouterModule.forChild([
       { path: '', component: UserComponent },

docs/course/rbac/5-user-manage/demo/25__ui/src/main/system/users/user.module.ts

@@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
 import { XTableModule } from '@ng-nest/ui/table';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XFormModule } from '@ng-nest/ui/form';
+import { XFormComponent } from '@ng-nest/ui/form';
 import { XMessageModule } from '@ng-nest/ui/message';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XMessageBoxModule } from '@ng-nest/ui/message-box';
@@ -16,7 +16,7 @@ import { XMessageBoxModule } from '@ng-nest/ui/message-box';
     CommonModule,
     XTableModule,
     XButtonComponent,
-    XFormModule,
+    XFormComponent,
     XMessageModule,
     XLinkComponent,
     XMessageBoxModule,

lib/ng-nest/ui/auto-complete/auto-complete-portal.component.ts

@@ -15,13 +15,13 @@ import { XAutoCompleteNode, XAutoCompletePortalPrefix } from './auto-complete.pr
 import { Subject, BehaviorSubject } from 'rxjs';
 import { XBoolean, XConnectBaseAnimation, XNumber, XPositionTopBottom } from '@ng-nest/ui/core';
 import { filter, takeUntil } from 'rxjs/operators';
-import { XListComponent, XListModule } from '@ng-nest/ui/list';
+import { XListComponent } from '@ng-nest/ui/list';
 import { XInputComponent } from '@ng-nest/ui/input';
 
 @Component({
   selector: `${XAutoCompletePortalPrefix}`,
   standalone: true,
-  imports: [XListModule],
+  imports: [XListComponent],
   templateUrl: './auto-complete-portal.component.html',
   styleUrls: ['./auto-complete-portal.component.scss'],
   encapsulation: ViewEncapsulation.None,

lib/ng-nest/ui/auto-complete/auto-complete.component.spec.ts

@@ -11,11 +11,11 @@ import { XData } from '@ng-nest/ui/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { XThemeModule } from '@ng-nest/ui/theme';
 import { XRadioModule } from '@ng-nest/ui/radio';
-import { XInputModule } from '@ng-nest/ui/input';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { XSelectModule } from '@ng-nest/ui/select';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
 import { XColorPickerComponent } from '@ng-nest/ui/color-picker';
-import { XFindModule } from '@ng-nest/ui/find';
+import { XFindComponent } from '@ng-nest/ui/find';
 import { XTextareaModule } from '@ng-nest/ui/textarea';
 import { XTimePickerModule } from '@ng-nest/ui/time-picker';
 import { XButtonComponent } from '@ng-nest/ui/button';
@@ -38,10 +38,10 @@ describe(XAutoCompletePrefix, () => {
         XRadioModule,
         XSelectModule,
         XButtonComponent,
-        XInputModule,
+        XInputComponent,
         XCascadeComponent,
         XColorPickerComponent,
-        XFindModule,
+        XFindComponent,
         XTextareaModule,
         XTimePickerModule,
         XDatePickerComponent,

lib/ng-nest/ui/auto-complete/auto-complete.component.ts

@@ -13,7 +13,11 @@ import {
   ViewChild,
   inject
 } from '@angular/core';
-import { XAutoCompleteNode, XAutoCompleteProperty, XAutoCompletePrefix } from './auto-complete.property';
+import {
+  XAutoCompleteNode,
+  XAutoCompleteProperty,
+  XAutoCompletePrefix
+} from './auto-complete.property';
 import {
   XIsEmpty,
   XIsObservable,
@@ -26,7 +30,7 @@ import {
   XParents
 } from '@ng-nest/ui/core';
 import { XPortalService, XPortalOverlayRef, XPortalConnectedPosition } from '@ng-nest/ui/portal';
-import { XInputModule, XInputComponent } from '@ng-nest/ui/input';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { XAutoCompletePortalComponent } from './auto-complete-portal.component';
 import {
   Overlay,
@@ -43,7 +47,13 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 @Component({
   selector: `${XAutoCompletePrefix}`,
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, XInputModule, XControlValueAccessor, XAutoCompletePortalComponent],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    XInputComponent,
+    XControlValueAccessor,
+    XAutoCompletePortalComponent
+  ],
   templateUrl: './auto-complete.component.html',
   styleUrls: ['./auto-complete.component.scss'],
   encapsulation: ViewEncapsulation.None,
@@ -93,7 +103,13 @@ export class XAutoCompleteComponent extends XAutoCompleteProperty implements OnI
   override cdr = inject(ChangeDetectorRef);
 
   ngOnInit() {
-    this.setFlex(this.autoComplete.nativeElement, this.renderer, this.justify, this.align, this.direction);
+    this.setFlex(
+      this.autoComplete.nativeElement,
+      this.renderer,
+      this.justify,
+      this.align,
+      this.direction
+    );
     this.setClassMap();
     this.setSubject();
     this.setParantScroll();
@@ -257,10 +273,12 @@ export class XAutoCompleteComponent extends XAutoCompleteProperty implements OnI
 
   setPosition(config: OverlayConfig) {
     let position = config.positionStrategy as FlexibleConnectedPositionStrategy;
-    position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos: ConnectedOverlayPositionChange) => {
-      const place = XPortalConnectedPosition.get(pos.connectionPair) as XPositionTopBottom;
-      place !== this.placement && this.positionChange.next(place);
-    });
+    position.positionChanges
+      .pipe(takeUntil(this._unSubject))
+      .subscribe((pos: ConnectedOverlayPositionChange) => {
+        const place = XPortalConnectedPosition.get(pos.connectionPair) as XPositionTopBottom;
+        place !== this.placement && this.positionChange.next(place);
+      });
   }
 
   setInstance() {
@@ -304,7 +322,13 @@ export class XAutoCompleteComponent extends XAutoCompleteProperty implements OnI
   setPlacement() {
     return this.portalService.setPlacement({
       elementRef: this.inputCom.inputRef,
-      placement: [this.placement as XPositionTopBottom, 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
+      placement: [
+        this.placement as XPositionTopBottom,
+        'bottom-start',
+        'bottom-end',
+        'top-start',
+        'top-end'
+      ],
       transformOriginOn: 'x-auto-complete-portal'
     });
   }
@@ -334,13 +358,15 @@ export class XAutoCompleteComponent extends XAutoCompleteProperty implements OnI
           this.icon = 'fto-loader';
           this.iconSpin = true;
           this.cdr.detectChanges();
-          XSetData<XAutoCompleteNode>(this.data, this._unSubject, true, value as any).subscribe((x) => {
-            this.icon = '';
-            this.iconSpin = false;
-            this.nodes = x;
-            this.dataChange.next(this.nodes);
-            this.cdr.detectChanges();
-          });
+          XSetData<XAutoCompleteNode>(this.data, this._unSubject, true, value as any).subscribe(
+            (x) => {
+              this.icon = '';
+              this.iconSpin = false;
+              this.nodes = x;
+              this.dataChange.next(this.nodes);
+              this.cdr.detectChanges();
+            }
+          );
         }
       }
       if (!this.onlySelect) {

lib/ng-nest/ui/cascade/cascade-portal.component.ts

@@ -17,13 +17,13 @@ import { of, Subject } from 'rxjs';
 import { delay, takeUntil } from 'rxjs/operators';
 import { XInputComponent } from '@ng-nest/ui/input';
 import { CommonModule } from '@angular/common';
-import { XListModule } from '@ng-nest/ui/list';
+import { XListComponent } from '@ng-nest/ui/list';
 import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'x-cascade-portal',
   standalone: true,
-  imports: [CommonModule, FormsModule, XListModule],
+  imports: [CommonModule, FormsModule, XListComponent],
   templateUrl: './cascade-portal.component.html',
   styleUrls: ['./cascade-portal.component.scss'],
   encapsulation: ViewEncapsulation.None,

lib/ng-nest/ui/cascade/cascade.component.spec.ts

@@ -1,7 +1,5 @@
 import { interval } from 'rxjs';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { XCascadeComponent } from './cascade.component';
 import { Component, DebugElement, ChangeDetectorRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';

lib/ng-nest/ui/cascade/cascade.component.ts

@@ -27,33 +27,23 @@ import {
   XParents,
   XConfigService
 } from '@ng-nest/ui/core';
-import {
-  XPortalService,
-  XPortalOverlayRef,
-  XPortalConnectedPosition
-} from '@ng-nest/ui/portal';
-import { XInputComponent, XInputModule } from '@ng-nest/ui/input';
+import { XPortalService, XPortalOverlayRef, XPortalConnectedPosition } from '@ng-nest/ui/portal';
+import { XInputComponent } from '@ng-nest/ui/input';
 import {
   Overlay,
   OverlayConfig,
   FlexibleConnectedPositionStrategy,
   ConnectedOverlayPositionChange
 } from '@angular/cdk/overlay';
 import { filter, takeUntil } from 'rxjs/operators';
-import { XValueAccessor,XControlValueAccessor } from '@ng-nest/ui/base-form';
+import { XValueAccessor, XControlValueAccessor } from '@ng-nest/ui/base-form';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'x-cascade',
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    XInputModule,
-    XControlValueAccessor
-  ],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, XInputComponent, XControlValueAccessor],
   templateUrl: './cascade.component.html',
   styleUrls: ['./cascade.component.scss'],
   encapsulation: ViewEncapsulation.None,

lib/ng-nest/ui/checkbox/checkbox.component.spec.ts

@@ -15,10 +15,10 @@ import { XDatePickerComponent } from '@ng-nest/ui/date-picker';
 import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
 import { XColorPickerComponent } from '@ng-nest/ui/color-picker';
-import { XFindModule } from '@ng-nest/ui/find';
+import { XFindComponent } from '@ng-nest/ui/find';
 import { XTextareaModule } from '@ng-nest/ui/textarea';
 import { XTimePickerModule } from '@ng-nest/ui/time-picker';
-import { XInputModule } from '@ng-nest/ui/input';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { XTagModule } from '@ng-nest/ui/tag';
 
@@ -39,10 +39,10 @@ describe(XCheckboxPrefix, () => {
         XColComponent,
         XCascadeComponent,
         XColorPickerComponent,
-        XFindModule,
+        XFindComponent,
         XTextareaModule,
         XTimePickerModule,
-        XInputModule,
+        XInputComponent,
         XTagModule
       ],
       declarations: [

lib/ng-nest/ui/checkbox/examples/en_US/default/perpost/perpost.component.ts

@@ -4,7 +4,7 @@ import { XCheckboxComponent, XCheckboxNode } from '@ng-nest/ui/checkbox';
 import { FormsModule } from '@angular/forms';
 import { XSelectModule } from '@ng-nest/ui/select';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XInputModule } from '@ng-nest/ui/input';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { XDatePickerComponent } from '@ng-nest/ui/date-picker';
 import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
@@ -19,7 +19,7 @@ import { XTimePickerModule } from '@ng-nest/ui/time-picker';
     XCheckboxComponent,
     XSelectModule,
     XButtonComponent,
-    XInputModule,
+    XInputComponent,
     XDatePickerComponent,
     XAutoCompleteComponent,
     XCascadeComponent,

lib/ng-nest/ui/checkbox/examples/zh_CN/default/perpost/perpost.component.ts

@@ -4,7 +4,7 @@ import { XCheckboxComponent, XCheckboxNode } from '@ng-nest/ui/checkbox';
 import { FormsModule } from '@angular/forms';
 import { XSelectModule } from '@ng-nest/ui/select';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XInputModule } from '@ng-nest/ui/input';
+import { XInputComponent } from '@ng-nest/ui/input';
 import { XDatePickerComponent } from '@ng-nest/ui/date-picker';
 import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
@@ -19,7 +19,7 @@ import { XTimePickerModule } from '@ng-nest/ui/time-picker';
     XCheckboxComponent,
     XSelectModule,
     XButtonComponent,
-    XInputModule,
+    XInputComponent,
     XDatePickerComponent,
     XAutoCompleteComponent,
     XCascadeComponent,