fix(*): update circular dependency error

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

@@ -4,7 +4,7 @@ import { XConfigService } from '@ng-nest/ui/core';
 
 @Component({
   selector: 'x-border',
-  templateUrl: './border.component.html',
+  template: '',
   styleUrls: ['./style/index.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush

lib/ng-nest/ui/comment/comment.component.html

@@ -53,7 +53,7 @@
               ></x-comment-reply>
             </div>
           </li>
-          <li class="x-comment-more" *ngIf="node.count > node.children?.length">
+          <li class="x-comment-more" *ngIf="hasMore(node)">
             <x-link icon="fto-chevron-right" type="primary" (click)="moreOnClick(node)" iconRight>{{ 'comment.more' | xI18n }} </x-link>
           </li>
         </ul>

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

@@ -75,6 +75,10 @@ export class XCommentComponent extends XCommentProperty implements OnChanges {
     this.moreClick.emit(node);
   }
 
+  hasMore(node: XCommentNode) {
+    return (node.count as number) > (node.children?.length as number);
+  }
+
   trackByNode(index: number, item: XCommentNode) {
     return item.id;
   }

lib/ng-nest/ui/comment/comment.property.ts

@@ -23,7 +23,7 @@ export class XCommentProperty extends XProperty {
    * @zh_CN 评论最大字数
    * @en_US Maximum number of comments
    */
-  @Input() @XWithConfig(X_CONFIG_NAME, 512) contentMax?: number;
+  @Input() @XWithConfig(X_CONFIG_NAME, 512) contentMax!: XNumber;
   /**
    * @zh_CN 点赞的事件
    * @en_US Like events

lib/ng-nest/ui/date-picker/date-picker.property.ts

@@ -45,7 +45,7 @@ export class XDatePickerProperty extends XControlValueAccessor<any> implements X
    * @zh_CN 只读
    * @en_US Readonly
    */
-  @Input() @XInputBoolean() readonly?: XBoolean;
+  @Input() @XInputBoolean() readonly!: XBoolean;
   /**
    * @zh_CN 节点点击的事件
    * @en_US Node click event

lib/ng-nest/ui/date-picker/picker-date.component.html

@@ -17,7 +17,7 @@
               *ngIf="!dateTemp"
               type="text"
               size="mini"
-              [title]="week | date: 'yyyy-MM-dd'"
+              title="{{ week | date: 'yyyy-MM-dd' }}"
               [activated]="(week | date: 'yyyyMMdd') === (model | date: 'yyyyMMdd')"
               (click)="dateClick(week)"
               >{{ week | date: 'd' }}</x-button

lib/ng-nest/ui/date-picker/picker-month.component.html

@@ -10,7 +10,7 @@
           <x-button
             *ngIf="!monthTemp"
             type="text"
-            [title]="month | date: 'yyyy-MM'"
+            title="{{ month | date: 'yyyy-MM' }}"
             [activated]="(month | date: 'yyyyMM') === (model | date: 'yyyyMM')"
             (click)="monthClick(month)"
             >{{ getLocaleMonth(month) }}</x-button

lib/ng-nest/ui/form/control.component.ts

@@ -46,7 +46,6 @@ import {
   XTextareaControlOption,
   XTextareaControl
 } from './form.property';
-import { XFormComponent } from './form.component';
 import { FormControlName, Validators, FormControl, ValidatorFn } from '@angular/forms';
 import { XIsEmpty, XConfigService } from '@ng-nest/ui/core';
 import { Subject } from 'rxjs';
@@ -60,6 +59,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class XControlComponent extends XControlProperty implements OnInit, AfterViewInit, OnDestroy {
   @Input() option!: XFormControlOption;
+  @Input() form: any;
   @ViewChild(FormControlName, { static: false }) control!: FormControlName;
   private _sharedProps = ['span', 'direction', 'justify', 'align', 'labelWidth', 'labelAlign'];
   private _changeProps = ['label', ...this._sharedProps];
@@ -68,7 +68,11 @@ export class XControlComponent extends XControlProperty implements OnInit, After
   private _unSubject = new Subject();
   private _formControl!: FormControl;
 
-  constructor(@Host() @Optional() public form: XFormComponent, public cdr: ChangeDetectorRef, public configService: XConfigService) {
+  constructor(
+    // @Host() @Optional() public form: XFormComponent,
+    public cdr: ChangeDetectorRef,
+    public configService: XConfigService
+  ) {
     super();
   }
 

lib/ng-nest/ui/form/form.component.html

@@ -34,8 +34,8 @@
       [hidden]="control.hidden"
     >
       <ng-container *xOutlet="controlTpl[control.id]; context: { $option: control }">
-        <x-control [option]="control"></x-control>
-      </ng-container>      
+        <x-control [option]="control" [form]="this"></x-control>
+      </ng-container>
     </x-col>
   </x-row>
 </ng-template>

lib/ng-nest/ui/menu/menu-node.component.ts

@@ -1,6 +1,5 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, Host, Optional, ElementRef } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, Host, Optional, ElementRef, Input } from '@angular/core';
 import { XMenuNodeProperty, XMenuNodePrefix } from './menu.property';
-import { XMenuComponent } from './menu.component';
 import { XConfigService } from '@ng-nest/ui/core';
 
 @Component({
@@ -10,8 +9,9 @@ import { XConfigService } from '@ng-nest/ui/core';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class XMenuNodeComponent extends XMenuNodeProperty {
+  @Input() menu: any;
   constructor(
-    @Host() @Optional() public menu: XMenuComponent,
+    // @Host() @Optional() public menu: XMenuComponent,
     public cdr: ChangeDetectorRef,
     public elementRef: ElementRef,
     public configService: XConfigService

lib/ng-nest/ui/menu/menu.component.html

@@ -25,9 +25,9 @@
     (nodeClick)="onNodeClick($event)"
     children
   >
-    <x-menu-node [node]="node"></x-menu-node>
+    <x-menu-node [node]="node" [menu]="this"></x-menu-node>
   </x-dropdown>
-  <x-menu-node *ngIf="!collapsed" [node]="node"></x-menu-node>
+  <x-menu-node *ngIf="!collapsed" [node]="node" [menu]="this"></x-menu-node>
 </ng-template>
 
 <ng-template #nodeRowTpl let-node="$node">

lib/ng-nest/ui/menu/menu.property.ts

@@ -153,7 +153,7 @@ export const XMenuNodePrefix = 'x-menu-node';
  * Menu Node Property
  */
 @Component({ template: '' })
-export class XMenuNodeProperty {
+export class XMenuNodeProperty extends XProperty {
   /**
    * @zh_CN 节点数据
    * @en_US Node data

lib/ng-nest/ui/table/table-body.component.ts

@@ -11,11 +11,11 @@ import {
   SimpleChanges,
   OnChanges,
   Inject,
-  ViewChild
+  ViewChild,
+  Input
 } from '@angular/core';
 import { XTableBodyPrefix, XTableBodyProperty, XTableRow, XTableColumn, XTableCell } from './table.property';
 import { removeNgTag, XIsChange, XResize, XConfigService, XNumber } from '@ng-nest/ui/core';
-import { XTableComponent } from './table.component';
 import { Subject, fromEvent } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -35,12 +35,13 @@ export class XTableBodyComponent extends XTableBodyProperty implements OnInit, O
 
   @ViewChild('tbody') tbody!: ElementRef;
   @ViewChild('virtualBody') virtualBody!: CdkVirtualScrollViewport;
+  @Input() table: any;
 
   private _unSubject = new Subject<void>();
   private _resizeObserver!: ResizeObserver;
 
   constructor(
-    @Optional() @Host() public table: XTableComponent,
+    // @Optional() @Host() public table: XTableComponent,
     public renderer: Renderer2,
     public elementRef: ElementRef,
     public cdr: ChangeDetectorRef,

lib/ng-nest/ui/table/table-foot.component.ts

@@ -8,11 +8,11 @@ import {
   ChangeDetectionStrategy,
   Host,
   Optional,
-  ViewChild
+  ViewChild,
+  Input
 } from '@angular/core';
 import { XTableFootPrefix, XTableFootProperty } from './table.property';
 import { removeNgTag } from '@ng-nest/ui/core';
-import { XTableComponent } from './table.component';
 
 @Component({
   selector: `${XTableFootPrefix}`,
@@ -22,8 +22,9 @@ import { XTableComponent } from './table.component';
 })
 export class XTableFootComponent extends XTableFootProperty implements OnInit {
   @ViewChild('tfoot') tfoot!: ElementRef;
+  @Input() table: any;
   constructor(
-    @Optional() @Host() public table: XTableComponent,
+    // @Optional() @Host() public table: XTableComponent,
     public renderer: Renderer2,
     public elementRef: ElementRef,
     public cdr: ChangeDetectorRef

lib/ng-nest/ui/table/table-head.component.ts

@@ -8,11 +8,12 @@ import {
   Optional,
   Host,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  Input
 } from '@angular/core';
 import { XTableHeadPrefix, XTableHeadProperty, XTableColumn, XTableCell } from './table.property';
 import { removeNgTag, XIsEmpty, XSort, XIsChange, XConfigService, XNumber } from '@ng-nest/ui/core';
-import { XTableComponent } from './table.component';
+
 
 @Component({
   selector: `${XTableHeadPrefix}`,
@@ -24,8 +25,9 @@ export class XTableHeadComponent extends XTableHeadProperty implements OnInit {
   sortStr = '';
   theadStyle: { [property: string]: any } = {};
   @ViewChild('thead') thead!: ElementRef;
+  @Input() table: any;
   constructor(
-    @Optional() @Host() public table: XTableComponent,
+    // @Optional() @Host() public table: XTableComponent,
     public renderer: Renderer2,
     public elementRef: ElementRef,
     public cdr: ChangeDetectorRef,

lib/ng-nest/ui/table/table.component.html

@@ -15,6 +15,7 @@
     [scrollYWidth]="scrollYWidth"
     [scrollXWidth]="scrollXWidth"
     [cellConfig]="cellConfig?.thead"
+    [table]="this"
   ></x-table-head>
   <x-table-body
     [data]="tableData"
@@ -33,8 +34,9 @@
     [cellConfig]="cellConfig?.tbody"
     [(activatedRow)]="activatedRow"
     (activatedRowChange)="activatedRowChange.emit($event)"
+    [table]="this"
   ></x-table-body>
-  <x-table-foot></x-table-foot>
+  <x-table-foot [table]="this"></x-table-foot>
 </table>
 <x-pagination #pagination [(index)]="index" [(size)]="size" [(query)]="query" [total]="total" (indexChange)="change($event)">
 </x-pagination>

lib/ng-nest/ui/table/table.property.ts

@@ -527,4 +527,4 @@ export const XTableFootPrefix = 'x-table-foot';
  * Table Foot Property
  */
 @Component({ template: '' })
-export class XTableFootProperty {}
+export class XTableFootProperty extends XProperty {}

lib/ng-nest/ui/tabs/tabs.component.html

@@ -5,11 +5,11 @@
       [animated]="animated && type !== 'tag'"
       [justify]="justify"
       [nodeJustify]="nodeJustify"
-      [data]="sliderOption?.data"
-      [layout]="sliderOption?.layout"
+      [data]="sliderOption.data"
+      [layout]="sliderOption.layout"
       [size]="size"
       [nodeTpl]="nodeTpl"
-      [activatedIndex]="sliderOption?.activatedIndex"
+      [activatedIndex]="sliderOption.activatedIndex"
       (indexChange)="activatedChange($event)"
     ></x-slider>
   </div>

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

@@ -12,9 +12,9 @@ import {
   QueryList
 } from '@angular/core';
 import { XTabsPrefix, XTabsNode, XTabsProperty } from './tabs.property';
-import { XIsChange, XSetData, XIsEmpty, XConfigService } from '@ng-nest/ui/core';
+import { XIsChange, XSetData, XIsEmpty, XConfigService, XData } from '@ng-nest/ui/core';
 import { Subject } from 'rxjs';
-import { XSliderComponent, XSliderProperty } from '@ng-nest/ui/slider';
+import { XSliderComponent, XSliderNode, XSliderProperty } from '@ng-nest/ui/slider';
 import { XTabComponent } from './tab.component';
 
 @Component({

lib/ng-nest/ui/tabs/tabs.property.ts

@@ -60,7 +60,7 @@ export class XTabsProperty extends XProperty {
    * @zh_CN 节点模板
    * @en_US Node template
    */
-  @Input() nodeTpl?: TemplateRef<any>;
+  @Input() nodeTpl!: TemplateRef<any>;
   /**
    * @zh_CN 尺寸
    * @en_US Size

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

@@ -113,11 +113,12 @@ export class XTransferComponent extends XTransferProperty implements OnInit, OnC
     this.cdr.detectChanges();
   }
 
-  dropCdk(event: CdkDragDrop<XTransferSource[]>) {
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+  dropCdk(event: CdkDragDrop<XTransferNode[] | undefined, any>) {
+    const ev = event as CdkDragDrop<XTransferNode[]>;
+    if (ev.previousContainer === ev.container) {
+      moveItemInArray(ev.container.data, ev.previousIndex, ev.currentIndex);
     } else {
-      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+      transferArrayItem(ev.previousContainer.data, ev.container.data, ev.previousIndex, ev.currentIndex);
       this.setCheckedCount(this.left, this.right);
       this.setCheckedAll(this.left, this.right);
       this.setButtonDisabled(this.left, this.right);

lib/ng-nest/ui/tree-file/tree-file.component.html

@@ -14,7 +14,7 @@
   <div class="x-tree-file-body" [x-loading]="loading">
     <div class="x-tree-file-crumb" *ngIf="showCrumb">
       <x-link icon="fto-menu" *ngIf="showToggle && showTree" (click)="menuToggle()"></x-link>
-      <x-crumb [data]="activatedNode?.crumbData" [separator]="separatorTpl"></x-crumb>
+      <x-crumb [data]="getCrumbData" [separator]="separatorTpl"></x-crumb>
       <ng-template #separatorTpl>
         <x-icon type="fto-chevron-right"></x-icon>
       </ng-template>
@@ -25,7 +25,7 @@
         *ngSwitchCase="'code'"
         [type]="activatedNode?.type"
         [data]="activatedNode?.content"
-        [highlightLines]="activatedNode?.highlightLines"
+        [highlightLines]="getHighlightLines"
       ></x-highlight>
     </div>
   </div>

lib/ng-nest/ui/tree-file/tree-file.component.ts

@@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { XIsEmpty, XConfigService } from '@ng-nest/ui/core';
 import { XCrumbNode } from '@ng-nest/ui/crumb';
 import { delay } from 'rxjs/operators';
+import { XHighlightLines } from '@ng-nest/ui/highlight';
 
 @Component({
   selector: `${XTreeFilePrefix}`,
@@ -26,6 +27,14 @@ export class XTreeFileComponent extends XTreeFileProperty {
     return Number(this.maxHeight) - (Boolean(this.showCrumb) ? 1.5 : 0);
   }
 
+  get getCrumbData() {
+    return this.activatedNode?.crumbData as XCrumbNode[];
+  }
+
+  get getHighlightLines() {
+    return this.activatedNode?.highlightLines as XHighlightLines;
+  }
+
   constructor(
     public renderer: Renderer2,
     public elementRef: ElementRef,

lib/ng-nest/ui/tree/tree-node.component.html

@@ -11,7 +11,7 @@
     [class.is-leaf]="!node.leaf"
     [class.is-open]="node.open"
     type="fto-chevron-right"
-    (click)="!tree.nodeOpen && onToggle($event, node) && $event.stop"
+    (click)="!tree.nodeOpen && onToggle($event, node)"
   ></x-icon>
   <x-icon *ngIf="loading" type="fto-loader" [spin]="loading"></x-icon>
   <x-checkbox
@@ -20,7 +20,7 @@
     [(ngModel)]="node.checked"
     (ngModelChange)="onCheckboxChange()"
     [indeterminate]="node.indeterminate"
-    [disabled]="node.disabled"
+    [disabled]="getNodeDisabled(node.disabled)"
     (click)="$event.stopPropagation()"
   ></x-checkbox>
   <span
@@ -53,5 +53,6 @@
     [nodeHeight]="nodeHeight"
     [nodeNowrap]="nodeNowrap"
     [nodeAlignItems]="nodeAlignItems"
+    [tree]="tree"
   ></li>
 </ul>