@ng-nest/ui 17.0.12 → 18.0.1

package/fesm2022/ng-nest-ui-dropdown.mjs

@@ -1,16 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, inject, ChangeDetectorRef, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XDataConvert, XWithConfig, XInputBoolean, XIsString, XConnectBaseAnimation, XConfigService, XIsChange, XSetData, XIsEmpty, XGetChildren } from '@ng-nest/ui/core';
+import { input, model, output, Component, signal, inject, ViewContainerRef, effect, DestroyRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, viewChild, computed, NgModule } from '@angular/core';
+import { XPropertyFunction, XToDataArray, XToBoolean, XToCssPixelValue, XToNumber, XConnectBaseAnimation, XIsEmpty, XGetChildren } from '@ng-nest/ui/core';
 import { Subject, of } from 'rxjs';
-import * as i1 from '@ng-nest/ui/portal';
-import { XPortalConnectedPosition, XPortalService } from '@ng-nest/ui/portal';
+import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
 import { takeUntil, delay, debounceTime } from 'rxjs/operators';
+import { Overlay } from '@angular/cdk/overlay';
 import { XListComponent } from '@ng-nest/ui/list';
-import * as i3 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from '@angular/cdk/overlay';
-import { Overlay } from '@angular/cdk/overlay';
 import { NgClass } from '@angular/common';
 
 /**
@@ -19,82 +16,86 @@ import { NgClass } from '@angular/common';
  * @decorator component
  */
 const XDropdownPrefix = 'x-dropdown';
-const X_CONFIG_NAME = 'dropdown';
+const X_DROPDOWN_CONFIG_NAME = 'dropdown';
 /**
  * Dropdown Property
  */
-class XDropdownProperty extends XProperty {
+class XDropdownProperty extends XPropertyFunction(X_DROPDOWN_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.data = [];
+        this.data = input([], { transform: XToDataArray });
+        /**
+         * @zh_CN 触发方式
+         * @en_US Trigger method
+         */
+        this.trigger = input(this.config?.trigger ?? 'hover');
+        /**
+         * @zh_CN 展示位置
+         * @en_US Placement
+         */
+        this.placement = input(this.config?.placement ?? 'bottom-start');
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 节点中已经包含子节点数据
+         * @en_US The node already contains child node data
+         */
+        this.children = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 弹框的最小宽度
+         * @en_US Portal min-width
+         */
+        this.portalMinWidth = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 弹框的最大宽度
+         * @en_US Portal max-width
+         */
+        this.portalMaxWidth = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 弹框的最小高度
+         * @en_US Portal min-height
+         */
+        this.portalMinHeight = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 弹框的最大高度
+         * @en_US Portal max-height
+         */
+        this.portalMaxHeight = input('', { transform: XToCssPixelValue });
         /**
          * @zh_CN hover 延迟触发时间，只有 trigger 为 'hover' 生效
          * @en_US Hover delay trigger time, only trigger is the 'hover'
          */
-        this.hoverDelay = 200;
+        this.hoverDelay = input(200, { transform: XToNumber });
         /**
-         * @zh_CN 节点点击事件
-         * @en_US Node click event
+         * @zh_CN 当前激活的菜单
+         * @en_US The currently activated menu
+         */
+        this.activatedId = model();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
          */
-        this.nodeClick = new EventEmitter();
+        this.size = input(this.config?.size ?? 'medium');
         /**
-         * @zh_CN 当前激活的菜单事件
-         * @en_US The currently activated menu event
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
          */
-        this.activatedIdChange = new EventEmitter();
+        this.nodeClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XDropdownProperty, selector: "x-dropdown-property", inputs: { data: "data", trigger: "trigger", placement: "placement", disabled: "disabled", children: "children", portalMinWidth: "portalMinWidth", portalMaxWidth: "portalMaxWidth", portalMinHeight: "portalMinHeight", portalMaxHeight: "portalMaxHeight", hoverDelay: "hoverDelay", activatedId: "activatedId" }, outputs: { nodeClick: "nodeClick", activatedIdChange: "activatedIdChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XDropdownProperty, selector: "x-dropdown-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, portalMinWidth: { classPropertyName: "portalMinWidth", publicName: "portalMinWidth", isSignal: true, isRequired: false, transformFunction: null }, portalMaxWidth: { classPropertyName: "portalMaxWidth", publicName: "portalMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, portalMinHeight: { classPropertyName: "portalMinHeight", publicName: "portalMinHeight", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XDropdownProperty.prototype, "data", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'hover')
-], XDropdownProperty.prototype, "trigger", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'bottom-start')
-], XDropdownProperty.prototype, "placement", void 0);
-__decorate([
-    XInputBoolean()
-], XDropdownProperty.prototype, "disabled", void 0);
-__decorate([
-    XInputBoolean()
-], XDropdownProperty.prototype, "children", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDropdownPrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], children: [{
-                type: Input
-            }], portalMinWidth: [{
-                type: Input
-            }], portalMaxWidth: [{
-                type: Input
-            }], portalMinHeight: [{
-                type: Input
-            }], portalMaxHeight: [{
-                type: Input
-            }], hoverDelay: [{
-                type: Input
-            }], activatedId: [{
-                type: Input
-            }], nodeClick: [{
-                type: Output
-            }], activatedIdChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Dropdown Portal
  * @selector x-dropdown-portal
@@ -103,68 +104,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
 const XDropdownPortalPrefix = 'x-dropdown-portal';
 
 class XDropdownPortalComponent {
-    done(event) {
-        this.animating(false);
-        event.toState === 'void' && this.destroyPortal && this.destroyPortal();
-    }
-    start() {
-        this.animating(true);
-    }
-    get getMinWidth() {
-        return XIsString(this.minWidth) ? this.minWidth : `${this.minWidth}px`;
+    get getPlacement() {
+        return this.placement();
     }
-    get getMaxWidth() {
-        return XIsString(this.maxWidth) ? this.maxWidth : `${this.maxWidth}px`;
-    }
-    get getMinHeight() {
-        return XIsString(this.minHeight) ? this.minHeight : `${this.minHeight}px`;
+    done(event) {
+        event.toState !== 'void' && !this.isDestroy() && this.animating.emit(false);
     }
-    get getMaxHeight() {
-        return XIsString(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`;
+    start(event) {
+        event.toState !== 'void' && !this.isDestroy() && this.animating.emit(true);
     }
     mouseenter() {
-        this.portalHover(true);
+        this.portalHover.emit(true);
     }
     mouseleave() {
-        !this.portalAttached() && this.portalHover(false);
-    }
-    constructor(renderer, elementRef, cdr, portalService, overlay, viewContainerRef) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.portalService = portalService;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.portalPositionChange = new Subject();
-        this.timespan = 200;
-        this.childAnimating = false;
-        this._unSubject = new Subject();
+        !this.portalAttached() && this.portalHover.emit(false);
     }
-    ngOnInit() {
-        this.positionChange.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.placement = x;
-            this.cdr.detectChanges();
+    constructor() {
+        this.data = input([]);
+        this.trigger = input('hover');
+        this.placement = input();
+        this.size = input('medium');
+        this.minWidth = input();
+        this.maxWidth = input();
+        this.minHeight = input();
+        this.maxHeight = input();
+        this.closed = output();
+        this.animating = output();
+        this.nodeClick = output();
+        this.portalHover = output();
+        this.node = signal(null);
+        this.openNode = signal(null);
+        this.portalPlacement = signal(null);
+        this.childAnimating = signal(false);
+        this.activatedId = model();
+        this.isDestroy = signal(false);
+        this.unSubject = new Subject();
+        this.portalService = inject(XPortalService);
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.portalComponent = signal(null);
+        this.portalOverlayRef = signal(null);
+        effect(() => this.portalComponent()?.setInput('data', this.node()?.children));
+        effect(() => this.portalComponent()?.setInput('minWidth', this.minWidth()));
+        effect(() => this.portalComponent()?.setInput('maxWidth', this.maxWidth()));
+        effect(() => this.portalComponent()?.setInput('minHeight', this.minHeight()));
+        effect(() => this.portalComponent()?.setInput('maxHeight', this.maxHeight()));
+        effect(() => this.portalComponent()?.setInput('size', this.size()));
+        effect(() => this.portalComponent()?.setInput('placement', this.portalPlacement()));
+        effect(() => this.portalComponent()?.setInput('activatedId', this.activatedId()));
+        inject(DestroyRef).onDestroy(() => {
+            this.isDestroy.set(true);
         });
     }
-    ngAfterViewInit() { }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-    }
-    nodeClick(node) {
+    onNodeClick(node) {
+        this.nodeClick.emit(node);
         if (!node.leaf) {
-            this.close();
-            this.activatedId = node.id;
-            this.activatedIdSub.next(this.activatedId);
+            this.activatedId.set(node.id);
+            this.closed.emit();
         }
-        this.nodeEmit(node);
     }
     portalAttached() {
-        return this.portal?.overlayRef?.hasAttached();
+        return this.portalOverlayRef()?.hasAttached();
     }
     closePortal() {
         if (this.portalAttached()) {
-            this.portal?.overlayRef?.dispose();
+            this.portalOverlayRef()?.dispose();
             return true;
         }
         return false;
@@ -175,7 +179,7 @@ class XDropdownPortalComponent {
             panelClass: 'x-dropdown-portal-child',
             positionStrategy: this.setPlacement(),
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            minWidth: this.minWidth
+            minWidth: this.minWidth()
         };
         this.setPosition(config);
         this.portal = this.portalService.attach({
@@ -187,64 +191,58 @@ class XDropdownPortalComponent {
     }
     setPosition(config) {
         let position = config.positionStrategy;
-        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+        position.positionChanges.pipe(takeUntil(this.unSubject)).subscribe((pos) => {
             const place = XPortalConnectedPosition.get(pos.connectionPair);
-            place !== this.portalPlacement && this.portalPositionChange.next(place);
+            if (place !== this.portalPlacement()) {
+                this.portalPlacement.set(place);
+                this.portalOverlayRef()?.updatePosition();
+            }
         });
     }
     setInstance() {
-        let componentRef = this.portal?.componentRef;
-        if (!componentRef)
+        let { componentRef, overlayRef } = this.portal;
+        if (!componentRef || !overlayRef)
             return;
-        Object.assign(componentRef.instance, {
-            data: this.node?.children,
-            minWidth: this.minWidth,
-            maxWidth: this.maxWidth,
-            minHeight: this.minHeight,
-            maxHeight: this.maxHeight,
-            close: () => this.closePortal(),
-            placement: this.portalPlacement,
-            positionChange: this.portalPositionChange,
-            activatedId: this.activatedId,
-            activatedIdSub: this.activatedIdSub,
-            nodeEmit: (node) => this.nodeClick(node),
-            portalHover: (hover) => this.hover(hover),
-            animating: (ing) => (this.childAnimating = ing)
-        });
-        componentRef.changeDetectorRef.detectChanges();
+        this.portalComponent.set(componentRef);
+        this.portalOverlayRef.set(overlayRef);
+        const { closed, animating, nodeClick, portalHover, activatedId } = componentRef.instance;
+        closed.subscribe(() => this.closePortal());
+        animating.subscribe((ing) => this.childAnimating.set(ing));
+        nodeClick.subscribe((node) => this.nodeClick.emit(node));
+        activatedId.subscribe((id) => this.activatedId.set(id));
+        portalHover.subscribe((hover) => this.hover(hover));
     }
     hover(hover) {
         if (this.timeoutHide && hover) {
             clearTimeout(this.timeoutHide);
         }
         else {
-            this.portalHover(false);
+            this.portalHover.emit(false);
             this.onLeave();
         }
     }
     setPlacement() {
         return this.portalService.setPlacement({
-            elementRef: new ElementRef(this.node?.event?.target),
+            elementRef: new ElementRef(this.node()?.event?.target),
             placement: ['right-start', 'right-end', 'left-start', 'left-end'],
             transformOriginOn: 'x-dropdown-portal'
         });
     }
     onEnter(node) {
-        if (!node.leaf || node.disabled || this.childAnimating)
+        if (!node.leaf || node.disabled || this.childAnimating())
             return;
         if (this.timeoutHide)
             clearTimeout(this.timeoutHide);
-        if (this.portalAttached() && this.node?.id !== node.id) {
+        if (this.portalAttached() && this.node()?.id !== node.id) {
             this.changeOpenNode(false);
-            this.portal?.overlayRef?.dispose();
+            this.portalOverlayRef()?.dispose();
         }
-        this.node = node;
+        this.node.set(node);
         if (!this.portalAttached()) {
-            this.openNode = node;
+            this.openNode.set(node);
             this.changeOpenNode(true);
             this.createPortal();
         }
-        this.cdr.detectChanges();
     }
     onLeave() {
         if (this.portalAttached()) {
@@ -258,18 +256,21 @@ class XDropdownPortalComponent {
         }
     }
     changeOpenNode(open) {
-        if (this.openNode) {
-            this.openNode.openPortal = open;
-            this.openNode.change && this.openNode.change();
+        if (this.openNode()) {
+            this.openNode.update((x) => {
+                x.openPortal = open;
+                x.change && x.change();
+                return x;
+            });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XPortalService }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XDropdownPortalComponent, isStandalone: true, selector: "x-dropdown-portal", host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "@x-connect-base-animation": "this.placement" } }, ngImport: i0, template: "<div\r\n  #dropdownPortal\r\n  class=\"x-dropdown-portal\"\r\n  [style.minWidth]=\"getMinWidth\"\r\n  [style.maxWidth]=\"getMaxWidth\"\r\n  [style.minHeight]=\"getMinHeight\"\r\n  [style.maxHeight]=\"getMaxHeight\"\r\n>\r\n  <x-list\r\n    [data]=\"data\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [(ngModel)]=\"activatedId\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["x-dropdown-portal{width:100%}.x-dropdown-portal{margin:.0625rem 0;padding:.325rem 0;background-color:var(--x-background);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto}.x-dropdown-portal .x-open-portal{background-color:var(--x-background-a200)}.x-dropdown-portal-child{margin-top:-.3875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XDropdownPortalComponent, isStandalone: true, selector: "x-dropdown-portal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", animating: "animating", nodeClick: "nodeClick", portalHover: "portalHover", activatedId: "activatedIdChange" }, host: { listeners: { "@x-connect-base-animation.done": "done($event)", "@x-connect-base-animation.start": "start($event)", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "@x-connect-base-animation": "this.getPlacement" } }, ngImport: i0, template: "<div\r\n  #dropdownPortal\r\n  class=\"x-dropdown-portal\"\r\n  [style.minWidth]=\"minWidth()\"\r\n  [style.maxWidth]=\"maxWidth()\"\r\n  [style.minHeight]=\"minHeight()\"\r\n  [style.maxHeight]=\"maxHeight()\"\r\n>\r\n  <x-list\r\n    [data]=\"data()\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [(ngModel)]=\"activatedId\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n    [inPortal]=\"true\"\r\n    [size]=\"size()\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["x-dropdown-portal{width:100%}.x-dropdown-portal{margin:.0625rem 0;color:var(--x-text);width:100%;background-color:var(--x-background-100);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;overflow:auto}.x-dropdown-portal .x-open-portal{background-color:var(--x-background-a200)}.x-dropdown-portal-child{margin-top:-.3125rem}.x-dropdown-portal-child>x-dropdown-portal{padding:0 .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDropdownPortalPrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #dropdownPortal\r\n  class=\"x-dropdown-portal\"\r\n  [style.minWidth]=\"getMinWidth\"\r\n  [style.maxWidth]=\"getMaxWidth\"\r\n  [style.minHeight]=\"getMinHeight\"\r\n  [style.maxHeight]=\"getMaxHeight\"\r\n>\r\n  <x-list\r\n    [data]=\"data\"\r\n    (nodeClick)=\"nodeClick($event)\"\r\n    [(ngModel)]=\"activatedId\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["x-dropdown-portal{width:100%}.x-dropdown-portal{margin:.0625rem 0;padding:.325rem 0;background-color:var(--x-background);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto}.x-dropdown-portal .x-open-portal{background-color:var(--x-background-a200)}.x-dropdown-portal-child{margin-top:-.3875rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XPortalService }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { placement: [{
+            args: [{ selector: `${XDropdownPortalPrefix}`, standalone: true, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XConnectBaseAnimation], template: "<div\r\n  #dropdownPortal\r\n  class=\"x-dropdown-portal\"\r\n  [style.minWidth]=\"minWidth()\"\r\n  [style.maxWidth]=\"maxWidth()\"\r\n  [style.minHeight]=\"minHeight()\"\r\n  [style.maxHeight]=\"maxHeight()\"\r\n>\r\n  <x-list\r\n    [data]=\"data()\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [(ngModel)]=\"activatedId\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n    [inPortal]=\"true\"\r\n    [size]=\"size()\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["x-dropdown-portal{width:100%}.x-dropdown-portal{margin:.0625rem 0;color:var(--x-text);width:100%;background-color:var(--x-background-100);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;overflow:auto}.x-dropdown-portal .x-open-portal{background-color:var(--x-background-a200)}.x-dropdown-portal-child{margin-top:-.3125rem}.x-dropdown-portal-child>x-dropdown-portal{padding:0 .3125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { getPlacement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
             }], done: [{
@@ -288,105 +289,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
 
 class XDropdownComponent extends XDropdownProperty {
     constructor() {
-        super(...arguments);
-        this.datas = [];
-        this.nodes = [];
-        this.visible = false;
-        this.animating = false;
-        this.outsideClick = false;
-        this.hoverDelayUnsub = new Subject();
-        this.positionChange = new Subject();
-        this.closeSubject = new Subject();
-        this.activatedIdSub = new Subject();
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
+        super();
+        this.unSubject = new Subject();
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.overlay = inject(Overlay);
-        this.configService = inject(XConfigService);
+        this.dropdown = viewChild.required('dropdown');
+        this.nodes = computed(() => {
+            const data = this.data();
+            if (!this.children()) {
+                return data.filter((y) => XIsEmpty(y.pid)).map((y) => XGetChildren(data, y, 0));
+            }
+            return data;
+        });
+        this.visible = signal(false);
+        this.animating = signal(false);
+        this.outsideClick = signal(false);
+        this.minWidth = signal('0px');
+        this.hoverDelayUnsub = new Subject();
+        this.closeSubject = new Subject();
+        this.realPlacement = signal(null);
+        this.portalComponent = signal(null);
+        this.portalOverlayRef = signal(null);
+        effect(() => this.portalComponent()?.setInput('data', this.nodes()));
+        effect(() => this.portalComponent()?.setInput('trigger', this.trigger()));
+        effect(() => this.portalComponent()?.setInput('minWidth', this.minWidth()));
+        effect(() => this.portalComponent()?.setInput('maxWidth', this.portalMaxWidth()));
+        effect(() => this.portalComponent()?.setInput('minHeight', this.portalMinHeight()));
+        effect(() => this.portalComponent()?.setInput('maxHeight', this.portalMaxHeight()));
+        effect(() => this.portalComponent()?.setInput('activatedId', this.activatedId()));
+        effect(() => this.portalComponent()?.setInput('size', this.size()));
     }
     ngOnInit() {
         this.setSubject();
     }
-    ngOnChanges(changes) {
-        const { data } = changes;
-        XIsChange(data) && this.setData();
-    }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
+        this.unSubject.next();
+        this.unSubject.complete();
         this.hoverDelayUnsub.next();
         this.hoverDelayUnsub.complete();
     }
     setSubject() {
-        this.closeSubject.pipe(takeUntil(this._unSubject)).subscribe(() => {
+        this.closeSubject.pipe(takeUntil(this.unSubject)).subscribe(() => {
             this.closePortal();
         });
-        this.activatedIdSub.pipe(takeUntil(this._unSubject)).subscribe((x) => {
-            this.activatedId = x;
-            this.activatedIdChange.emit(x);
-        });
     }
     onEnter() {
         of(true)
-            .pipe(delay(this.hoverDelay), takeUntil(this.hoverDelayUnsub))
+            .pipe(delay(this.hoverDelay()), takeUntil(this.hoverDelayUnsub))
             .subscribe(() => {
-            if (this.disabled || this.trigger === 'click')
+            if (this.disabled() || this.trigger() === 'click')
                 return;
             if (this.timeoutHide) {
                 clearTimeout(this.timeoutHide);
                 this.timeoutHide = null;
             }
-            if (!this.portal || (this.portal && !this.portal?.overlayRef?.hasAttached())) {
-                this.visible = true;
+            if (!this.portal || (this.portal && !this.portalOverlayRef()?.hasAttached())) {
+                this.visible.set(true);
                 this.createPortal();
-                this.cdr.detectChanges();
             }
         });
     }
     onLeave() {
         this.hoverDelayUnsub.next();
-        if (this.disabled || this.trigger === 'click')
+        if (this.disabled() || this.trigger() === 'click')
             return;
-        if (this.portal?.overlayRef?.hasAttached()) {
+        if (this.portalOverlayRef()?.hasAttached()) {
             this.timeoutHide = setTimeout(() => {
-                this.visible = false;
-                this.portal?.overlayRef?.dispose();
-                this.cdr.detectChanges();
+                this.portalOverlayRef()?.dispose();
+                this.visible.set(false);
             });
         }
     }
     showPortal() {
-        if (this.disabled || this.trigger === 'hover' || this.animating)
+        if (this.disabled() || this.trigger() === 'hover' || this.animating())
             return;
-        if (this.trigger === 'click' && this.portalAttached()) {
+        if (this.trigger() === 'click' && this.portalAttached()) {
             this.closeSubject.next();
             return;
         }
         this.createPortal();
     }
     portalAttached() {
-        return this.portal?.overlayRef?.hasAttached();
+        return this.portalOverlayRef()?.hasAttached();
     }
     closePortal() {
         if (this.portalAttached()) {
-            this.portal?.overlayRef?.dispose();
-            this.visible = false;
+            this.portalOverlayRef()?.dispose();
+            this.visible.set(false);
             return true;
         }
         return false;
     }
     destroyPortal() {
-        this.portal?.overlayRef?.dispose();
+        this.portalOverlayRef()?.dispose();
     }
     createPortal() {
-        let box = this.dropdown.nativeElement.getBoundingClientRect();
-        this.minWidth = this.portalMinWidth ? this.portalMinWidth : box.width;
+        let box = this.dropdown().nativeElement.getBoundingClientRect();
+        this.minWidth.set(this.portalMinWidth() ? this.portalMinWidth() : `${box.width}px`);
         const config = {
             backdropClass: '',
             positionStrategy: this.setPlacement(),
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            minWidth: this.minWidth
+            minWidth: this.minWidth()
         };
         this.setPosition(config);
         this.portal = this.portalService.attach({
@@ -394,10 +399,10 @@ class XDropdownComponent extends XDropdownProperty {
             viewContainerRef: this.viewContainerRef,
             overlayConfig: config
         });
-        if (this.trigger === 'click') {
+        if (this.trigger() === 'click') {
             this.portal.overlayRef
                 ?.outsidePointerEvents()
-                .pipe(debounceTime(30), takeUntil(this._unSubject))
+                .pipe(debounceTime(30), takeUntil(this.unSubject))
                 .subscribe(() => {
                 this.closeSubject.next();
             });
@@ -406,32 +411,27 @@ class XDropdownComponent extends XDropdownProperty {
     }
     setPosition(config) {
         let position = config.positionStrategy;
-        position.positionChanges.pipe(takeUntil(this._unSubject)).subscribe((pos) => {
+        position.positionChanges.pipe(takeUntil(this.unSubject)).subscribe((pos) => {
             const place = XPortalConnectedPosition.get(pos.connectionPair);
-            place !== this.placement && this.positionChange.next(place);
+            if (place !== this.realPlacement()) {
+                this.realPlacement.set(place);
+                this.portalOverlayRef()?.updatePosition();
+            }
         });
     }
     setInstance() {
-        let componentRef = this.portal?.componentRef;
-        if (!componentRef)
+        let { componentRef, overlayRef } = this.portal;
+        if (!componentRef || !overlayRef)
             return;
-        Object.assign(componentRef.instance, {
-            data: this.nodes,
-            trigger: this.trigger,
-            minWidth: this.minWidth,
-            maxWidth: this.portalMaxWidth,
-            minHeight: this.portalMinHeight,
-            maxHeight: this.portalMaxHeight,
-            activatedId: this.activatedId,
-            activatedIdSub: this.activatedIdSub,
-            close: () => this.closeSubject.next(),
-            positionChange: this.positionChange,
-            destroyPortal: () => this.destroyPortal(),
-            nodeEmit: (node) => this.nodeClick.emit(node),
-            portalHover: (hover) => this.portalHover(hover),
-            animating: (ing) => (this.animating = ing)
-        });
-        componentRef.changeDetectorRef.detectChanges();
+        this.portalComponent.set(componentRef);
+        this.portalOverlayRef.set(overlayRef);
+        this.realPlacement.set(this.placement());
+        const { closed, animating, nodeClick, portalHover, activatedId } = componentRef.instance;
+        closed.subscribe(() => this.closeSubject.next());
+        animating.subscribe((ing) => this.animating.set(ing));
+        nodeClick.subscribe((node) => this.nodeClick.emit(node));
+        activatedId.subscribe((id) => this.activatedId.set(id));
+        portalHover.subscribe((hover) => this.portalHover(hover));
     }
     portalHover(hover) {
         if (this.timeoutHide && hover) {
@@ -443,40 +443,25 @@ class XDropdownComponent extends XDropdownProperty {
     }
     setPlacement() {
         return this.portalService.setPlacement({
-            elementRef: this.dropdown,
-            placement: [this.placement, 'bottom-start', 'top-start', 'bottom-end', 'top-end'],
+            elementRef: this.dropdown(),
+            placement: [this.placement(), 'bottom-start', 'top-start', 'bottom-end', 'top-end'],
             transformOriginOn: 'x-dropdown-portal'
         });
     }
-    setData() {
-        XSetData(this.data, this._unSubject).subscribe((x) => {
-            this.datas = x;
-            if (!this.children) {
-                this.nodes = x.filter((y) => XIsEmpty(y.pid)).map((y) => XGetChildren(x, y, 0));
-            }
-            else {
-                this.nodes = x;
-            }
-            this.cdr.detectChanges();
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XDropdownComponent, isStandalone: true, selector: "x-dropdown", viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-visible]=\"visible\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"showPortal()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0;display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XDropdownComponent, isStandalone: true, selector: "x-dropdown", viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [class.x-visible]=\"visible()\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"showPortal()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0;display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDropdownPrefix}`, standalone: true, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-visible]=\"visible\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"showPortal()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0;display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"] }]
-        }], propDecorators: { dropdown: [{
-                type: ViewChild,
-                args: ['dropdown', { static: true }]
-            }] } });
+            args: [{ selector: `${XDropdownPrefix}`, standalone: true, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [class.x-visible]=\"visible()\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"showPortal()\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0;display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XDropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XDropdownModule, imports: [XDropdownComponent], exports: [XDropdownComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XDropdownModule, imports: [XDropdownComponent], exports: [XDropdownComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XDropdownComponent],