refactor(standalone): update some components to standalone components

includes: Collapse Color ColorPicker Comment Container Crumb DatePicker Description Dialog Drawer Dropdown

Author: ng-nest-moon

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
     - name: use node.js
       uses: actions/setup-node@v1
       with: 
-        node-version: 16.14.0
+        node-version: 18.16.0
 
     - name: build
       run: |

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

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { XAutoCompleteComponent } from './auto-complete.component';
 import { Component, DebugElement, ChangeDetectorRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
@@ -15,12 +14,12 @@ import { XRadioModule } from '@ng-nest/ui/radio';
 import { XInputModule } from '@ng-nest/ui/input';
 import { XSelectModule } from '@ng-nest/ui/select';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
-import { XColorPickerModule } from '@ng-nest/ui/color-picker';
+import { XColorPickerComponent } from '@ng-nest/ui/color-picker';
 import { XFindModule } 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';
-import { XDatePickerModule } from '@ng-nest/ui/date-picker';
+import { XDatePickerComponent } from '@ng-nest/ui/date-picker';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
@@ -41,11 +40,11 @@ describe(XAutoCompletePrefix, () => {
         XButtonComponent,
         XInputModule,
         XCascadeComponent,
-        XColorPickerModule,
+        XColorPickerComponent,
         XFindModule,
         XTextareaModule,
         XTimePickerModule,
-        XDatePickerModule,
+        XDatePickerComponent,
         XIconComponent
       ],
       declarations: [
@@ -231,32 +230,17 @@ class TestXAutoCompleteComponent {
     </x-row>
     <x-row>
       <x-col>
-        <x-auto-complete
-          label="方式"
-          [data]="data"
-          [(ngModel)]="model"
-          direction="column-reverse"
-        ></x-auto-complete>
+        <x-auto-complete label="方式" [data]="data" [(ngModel)]="model" direction="column-reverse"></x-auto-complete>
       </x-col>
     </x-row>
     <x-row>
       <x-col>
-        <x-auto-complete
-          label="方式"
-          [data]="data"
-          [(ngModel)]="model"
-          direction="row"
-        ></x-auto-complete>
+        <x-auto-complete label="方式" [data]="data" [(ngModel)]="model" direction="row"></x-auto-complete>
       </x-col>
     </x-row>
     <x-row>
       <x-col>
-        <x-auto-complete
-          label="方式"
-          [data]="data"
-          [(ngModel)]="model"
-          direction="row-reverse"
-        ></x-auto-complete>
+        <x-auto-complete label="方式" [data]="data" [(ngModel)]="model" direction="row-reverse"></x-auto-complete>
       </x-col>
     </x-row>
   `,
@@ -362,11 +346,7 @@ class TestXAutoCompleteRequiredComponent {
         <x-auto-complete [data]="data" [(ngModel)]="model"></x-auto-complete>
       </x-col>
       <x-col>
-        <x-auto-complete
-          [data]="data"
-          [(ngModel)]="model1"
-          (ngModelChange)="change()"
-        ></x-auto-complete>
+        <x-auto-complete [data]="data" [(ngModel)]="model1" (ngModelChange)="change()"></x-auto-complete>
       </x-col>
       <x-col>
         <x-auto-complete [data]="data1" [(ngModel)]="model2"></x-auto-complete>
@@ -395,18 +375,7 @@ class TestXAutoCompleteAsyncComponent {
   data = new Observable<string[]>((x) => {
     // 替换成http请求，或者data直接定义成 Observable 对象
     setTimeout(() => {
-      x.next([
-        'qqq',
-        'qqqq',
-        'qqqqq',
-        'qqqqqq',
-        'qqqqqqqq',
-        'qqqqqqqqqqq',
-        'qqqqqqqqqqqqqq',
-        '微信',
-        '钉钉',
-        '微博'
-      ]);
+      x.next(['qqq', 'qqqq', 'qqqqq', 'qqqqqq', 'qqqqqqqq', 'qqqqqqqqqqq', 'qqqqqqqqqqqqqq', '微信', '钉钉', '微博']);
       x.complete();
     }, 500);
   });
@@ -434,31 +403,13 @@ class TestXAutoCompleteAsyncComponent {
         <x-auto-complete [size]="size" [data]="data"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          [size]="size"
-          label="用户名"
-          [data]="data"
-          direction="row"
-          maxlength="50"
-        ></x-auto-complete>
+        <x-auto-complete [size]="size" label="用户名" [data]="data" direction="row" maxlength="50"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          [size]="size"
-          label="用户名"
-          [data]="data"
-          direction="column"
-          maxlength="50"
-        ></x-auto-complete>
+        <x-auto-complete [size]="size" label="用户名" [data]="data" direction="column" maxlength="50"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          [size]="size"
-          icon="ado-user"
-          [data]="data"
-          iconLayout="left"
-          maxlength="50"
-        ></x-auto-complete>
+        <x-auto-complete [size]="size" icon="ado-user" [data]="data" iconLayout="left" maxlength="50"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete required clearable [size]="size" [data]="data"></x-auto-complete>
@@ -515,12 +466,7 @@ class TestXAutoCompleteSizeComponent {
         <x-auto-complete placeholder="请输入类内容" bordered="false"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          placeholder="请输入类内容"
-          bordered="false"
-          label="日生:"
-          direction="row"
-        ></x-auto-complete>
+        <x-auto-complete placeholder="请输入类内容" bordered="false" label="日生:" direction="row"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete placeholder="请输入类内容" bordered="false"></x-auto-complete>
@@ -573,11 +519,7 @@ class TestXAutoCompleteBorderedComponent {
         <x-auto-complete placeholder="请输入网址" [after]="afterSelectTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          placeholder="请输入网址"
-          [before]="beforeSelectTpl"
-          [after]="afterSelectTpl"
-        ></x-auto-complete>
+        <x-auto-complete placeholder="请输入网址" [before]="beforeSelectTpl" [after]="afterSelectTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete placeholder="请输入文字" [before]="beforeButtonTpl"></x-auto-complete>
@@ -586,11 +528,7 @@ class TestXAutoCompleteBorderedComponent {
         <x-auto-complete placeholder="请输入文字" [after]="afterButtonTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          placeholder="请输入文字"
-          [before]="beforeButtonTpl"
-          [after]="afterButtonTpl"
-        ></x-auto-complete>
+        <x-auto-complete placeholder="请输入文字" [before]="beforeButtonTpl" [after]="afterButtonTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete placeholder="请输入文字" [before]="beforeInputTpl"></x-auto-complete>
@@ -599,11 +537,7 @@ class TestXAutoCompleteBorderedComponent {
         <x-auto-complete placeholder="请输入文字" [after]="afterInputTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          placeholder="请输入文字"
-          [before]="beforeInputTpl"
-          [after]="afterInputTpl"
-        ></x-auto-complete>
+        <x-auto-complete placeholder="请输入文字" [before]="beforeInputTpl" [after]="afterInputTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete placeholder="请输入文字" [before]="beforeDatePickerTpl"></x-auto-complete>
@@ -619,10 +553,7 @@ class TestXAutoCompleteBorderedComponent {
         ></x-auto-complete>
       </x-col>
       <x-col span="24">
-        <x-auto-complete
-          placeholder="请输入文字"
-          [before]="beforeAutoCompleteTpl"
-        ></x-auto-complete>
+        <x-auto-complete placeholder="请输入文字" [before]="beforeAutoCompleteTpl"></x-auto-complete>
       </x-col>
       <x-col span="24">
         <x-auto-complete placeholder="请输入文字" [after]="afterAutoCompleteTpl"></x-auto-complete>

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

@@ -13,11 +13,7 @@ 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,
@@ -29,12 +25,7 @@ import {
   XIsFunction,
   XParents
 } from '@ng-nest/ui/core';
-import {
-  XPortalService,
-  XPortalOverlayRef,
-  XPortalConnectedPosition,
-  XPortalModule
-} from '@ng-nest/ui/portal';
+import { XPortalService, XPortalOverlayRef, XPortalConnectedPosition } from '@ng-nest/ui/portal';
 import { XInputModule, XInputComponent } from '@ng-nest/ui/input';
 import { XAutoCompletePortalComponent } from './auto-complete-portal.component';
 import {
@@ -52,14 +43,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 @Component({
   selector: `${XAutoCompletePrefix}`,
   standalone: true,
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    XPortalModule,
-    XInputModule,
-    XControlValueAccessor,
-    XAutoCompletePortalComponent
-  ],
+  imports: [FormsModule, ReactiveFormsModule, XInputModule, XControlValueAccessor, XAutoCompletePortalComponent],
   templateUrl: './auto-complete.component.html',
   styleUrls: ['./auto-complete.component.scss'],
   encapsulation: ViewEncapsulation.None,
@@ -109,13 +93,7 @@ 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();
@@ -279,12 +257,10 @@ 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() {
@@ -328,13 +304,7 @@ 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'
     });
   }
@@ -364,15 +334,13 @@ 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/back-top/back-top.component.ts

@@ -17,13 +17,13 @@ import { reqAnimFrame, XConfigService, XIsChange, XIsNumber } from '@ng-nest/ui/
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { fromEvent, Subject } from 'rxjs';
 import { throttleTime, takeUntil } from 'rxjs/operators';
-import { XPortalService, XPortalOverlayRef, XPortalModule } from '@ng-nest/ui/portal';
+import { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';
 import { XLinkComponent } from '@ng-nest/ui/link';
 
 @Component({
   selector: `${XBackTopPrefix}`,
   standalone: true,
-  imports: [CommonModule, XLinkComponent, XPortalModule],
+  imports: [CommonModule, XLinkComponent],
   templateUrl: './back-top.component.html',
   styleUrls: ['./back-top.component.scss'],
   encapsulation: ViewEncapsulation.None,

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

@@ -1,4 +1,4 @@
-import { XDocModule } from '@ng-nest/ui/doc';
+import { XDocComponent } from '@ng-nest/ui/doc';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Component, DebugElement } from '@angular/core';
@@ -20,7 +20,7 @@ describe(XBorderPrefix, () => {
         XBorderComponent,
         XRowComponent,
         XColComponent,
-        XDocModule
+        XDocComponent
       ],
       declarations: [TestXBorderComponent]
     }).compileComponents();

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

@@ -8,7 +8,7 @@ import { XCalendarComponent } from '@ng-nest/ui/calendar';
 import { FormsModule } from '@angular/forms';
 import { XCalendarPrefix, XCalendarData } from './calendar.property';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XContainerModule } from '@ng-nest/ui/container';
+import { XContainerComponent } from '@ng-nest/ui/container';
 import { interval } from 'rxjs';
 import { DatePipe } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -26,7 +26,7 @@ describe(XCalendarPrefix, () => {
         FormsModule,
         XCalendarComponent,
         XButtonComponent,
-        XContainerModule,
+        XContainerComponent,
         XRowComponent,
         XColComponent,
         XIconComponent