@ng-nest/ui 20.1.6 → 20.2.0

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

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, model, output, Component, signal, inject, DestroyRef, ViewContainerRef, effect, ElementRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, viewChild, computed, NgModule } from '@angular/core';
-import { XPropertyFunction, XToDataArray, XToBoolean, XToCssPixelValue, XToNumber, XConnectBaseAnimation, XIsEmpty, XGetChildren, XHasChildren } from '@ng-nest/ui/core';
+import { input, model, output, Component, signal, viewChild, inject, DestroyRef, computed, ViewContainerRef, effect, ElementRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XPropertyFunction, XToDataArray, XToBoolean, XToCssPixelValue, XToNumber, XIsEmpty, XGetChildren, XHasChildren, XIsNull, XIsChange } from '@ng-nest/ui/core';
 import { Subject, of } from 'rxjs';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
-import { takeUntil, delay, debounceTime } from 'rxjs/operators';
+import { takeUntil, throttleTime, delay, debounceTime } from 'rxjs/operators';
 import { Overlay } from '@angular/cdk/overlay';
 import { XListComponent } from '@ng-nest/ui/list';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { RIGHT_ARROW, LEFT_ARROW, ESCAPE, DOWN_ARROW } from '@angular/cdk/keycodes';
 
 /**
  * Dropdown
@@ -72,6 +73,11 @@ class XDropdownProperty extends XPropertyFunction(X_DROPDOWN_CONFIG_NAME) {
          * @en_US Hover delay trigger time, only trigger is the 'hover'
          */
         this.hoverDelay = input(200, ...(ngDevMode ? [{ debugName: "hoverDelay", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN visible 参数控制显示/隐藏
+         * @en_US visible parameter controls display/hide
+         */
+        this.visible = model(null, ...(ngDevMode ? [{ debugName: "visible" }] : []));
         /**
          * @zh_CN 当前激活的菜单
          * @en_US The currently activated menu
@@ -88,13 +94,13 @@ class XDropdownProperty extends XPropertyFunction(X_DROPDOWN_CONFIG_NAME) {
          */
         this.nodeClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XDropdownProperty, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XDropdownProperty, isStandalone: true, 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 }, visible: { classPropertyName: "visible", publicName: "visible", 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: { visible: "visibleChange", activatedId: "activatedIdChange", nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDropdownPrefix}-property`, template: '' }]
-        }] });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], portalMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMinWidth", required: false }] }], portalMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxWidth", required: false }] }], portalMinHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMinHeight", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
 /**
  * Dropdown Portal
  * @selector x-dropdown-portal
@@ -103,9 +109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 const XDropdownPortalPrefix = 'x-dropdown-portal';
 
 class XDropdownPortalComponent {
-    get getPlacement() {
-        return this.placement();
-    }
     done() {
         if (this.destroy())
             return;
@@ -123,6 +126,8 @@ class XDropdownPortalComponent {
         !this.portalAttached() && this.portalHover.emit(false);
     }
     constructor() {
+        this.animateEnter = 'x-connect-enter';
+        this.animateLeave = 'x-connect-leave';
         this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
         this.trigger = input('hover', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
         this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
@@ -131,24 +136,41 @@ class XDropdownPortalComponent {
         this.maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : []));
         this.minHeight = input(...(ngDevMode ? [undefined, { debugName: "minHeight" }] : []));
         this.maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : []));
+        this.level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.parentPortalComponent = input(...(ngDevMode ? [undefined, { debugName: "parentPortalComponent" }] : []));
+        this.isKeyboardControlled = model(true, ...(ngDevMode ? [{ debugName: "isKeyboardControlled" }] : []));
         this.closed = output();
         this.animating = output();
         this.nodeClick = output();
         this.portalHover = output();
         this.node = signal(null, ...(ngDevMode ? [{ debugName: "node" }] : []));
-        this.openNode = signal(null, ...(ngDevMode ? [{ debugName: "openNode" }] : []));
+        this.list = viewChild.required('list');
         this.portalPlacement = signal(null, ...(ngDevMode ? [{ debugName: "portalPlacement" }] : []));
         this.childAnimating = signal(false, ...(ngDevMode ? [{ debugName: "childAnimating" }] : []));
         this.activatedId = model(...(ngDevMode ? [undefined, { debugName: "activatedId" }] : []));
         this.destroy = signal(false, ...(ngDevMode ? [{ debugName: "destroy" }] : []));
+        this.active = signal(0, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this.unSubject = new Subject();
         this.destroyRef = inject(DestroyRef);
+        this.activatedIdComputed = computed(() => {
+            const path = this.findPathById(this.data(), this.activatedId());
+            if (path) {
+                for (let node of path) {
+                    const nd = this.data().find((x) => x.id === node.id);
+                    if (nd)
+                        return nd.id;
+                }
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "activatedIdComputed" }] : []));
         this.portalService = inject(XPortalService);
         this.overlay = inject(Overlay);
         this.viewContainerRef = inject(ViewContainerRef);
         this.portalComponent = signal(null, ...(ngDevMode ? [{ debugName: "portalComponent" }] : []));
         this.portalOverlayRef = signal(null, ...(ngDevMode ? [{ debugName: "portalOverlayRef" }] : []));
         effect(() => this.portalComponent()?.setInput('data', this.node()?.children));
+        effect(() => this.portalComponent()?.setInput('trigger', this.trigger()));
+        effect(() => this.portalComponent()?.setInput('level', this.level() + 1));
         effect(() => this.portalComponent()?.setInput('minWidth', this.minWidth()));
         effect(() => this.portalComponent()?.setInput('maxWidth', this.maxWidth()));
         effect(() => this.portalComponent()?.setInput('minHeight', this.minHeight()));
@@ -156,19 +178,53 @@ class XDropdownPortalComponent {
         effect(() => this.portalComponent()?.setInput('size', this.size()));
         effect(() => this.portalComponent()?.setInput('placement', this.portalPlacement()));
         effect(() => this.portalComponent()?.setInput('activatedId', this.activatedId()));
+        effect(() => this.portalComponent()?.setInput('parentPortalComponent', this));
     }
     ngOnInit() {
+        this.closeSubject.subscribe(() => {
+            this.data() && this.data().length > 0 && this.list().setUnActive(this.active());
+        });
+        this.keydownSubject.pipe(takeUntil(this.unSubject)).subscribe((x) => {
+            if (!this.isKeyboardControlled())
+                return;
+            const keyCode = x.keyCode;
+            const isRightArrow = [RIGHT_ARROW].includes(keyCode);
+            const isLeftArrow = [LEFT_ARROW].includes(keyCode);
+            if (isRightArrow) {
+                const item = this.list().keyManager.activeItem;
+                if (item?.leaf()) {
+                    const node = item.node();
+                    node.event = x;
+                    node.component = item;
+                    this.isKeyboardControlled.set(false);
+                    this.onNodeClick(node);
+                }
+            }
+            if (isLeftArrow && this.level() > 0) {
+                this.parentPortalComponent()?.isKeyboardControlled.set(true);
+                this.parentPortalComponent()?.closePortal();
+            }
+            this.data() && this.data().length > 0 && this.list().keydown(x);
+        });
         this.destroyRef.onDestroy(() => {
             this.destroy.set(true);
             this.unSubject.next();
             this.unSubject.complete();
         });
     }
+    ngAfterViewInit() {
+        this.list().keyManager.setFirstItemActive();
+    }
     onNodeClick(node) {
         this.nodeClick.emit(node);
         if (!node.leaf) {
             this.activatedId.set(node.id);
-            this.closed.emit();
+            this.closeSubject.next();
+        }
+        else {
+            if (node.disabled || this.childAnimating())
+                return;
+            this.showPortal(node);
         }
     }
     portalAttached() {
@@ -213,6 +269,11 @@ class XDropdownPortalComponent {
             return;
         this.portalComponent.set(componentRef);
         this.portalOverlayRef.set(overlayRef);
+        Object.assign(componentRef.instance, {
+            closeSubject: this.closeSubject,
+            keydownSubject: this.keydownSubject,
+            parantPortal: this
+        });
         const { closed, animating, nodeClick, portalHover, activatedId } = componentRef.instance;
         closed.subscribe(() => this.closePortal());
         animating.subscribe((ing) => this.childAnimating.set(ing));
@@ -231,63 +292,76 @@ class XDropdownPortalComponent {
     }
     setPlacement() {
         return this.portalService.setPlacement({
-            elementRef: new ElementRef(this.node()?.event?.target),
+            elementRef: new ElementRef(this.node()?.component?.elementRef?.nativeElement),
             placement: ['right-start', 'right-end', 'left-start', 'left-end'],
             transformOriginOn: 'x-dropdown-portal'
         });
     }
-    onEnter(node) {
-        if (!node.leaf || node.disabled || this.childAnimating())
-            return;
-        if (this.timeoutHide)
-            clearTimeout(this.timeoutHide);
+    showPortal(node) {
         if (this.portalAttached() && this.node()?.id !== node.id) {
-            this.changeOpenNode(false);
             this.portalOverlayRef()?.dispose();
         }
         this.node.set(node);
         if (!this.portalAttached()) {
-            this.openNode.set(node);
-            this.changeOpenNode(true);
             this.createPortal();
         }
     }
+    onEnter(node) {
+        if (!node.leaf || node.disabled || this.trigger() === 'click' || this.childAnimating())
+            return;
+        if (this.timeoutHide)
+            clearTimeout(this.timeoutHide);
+        this.showPortal(node);
+    }
     onLeave() {
+        if (this.trigger() !== 'hover')
+            return;
         if (this.portalAttached()) {
             this.timeoutHide = setTimeout(() => {
-                this.changeOpenNode(false);
-                this.portal?.overlayRef?.dispose();
+                this.closePortal();
             });
         }
-        else {
-            this.changeOpenNode(false);
-        }
     }
-    changeOpenNode(open) {
-        if (this.openNode()) {
-            this.openNode.update((x) => {
-                x.openPortal = open;
-                x.change && x.change();
-                return x;
-            });
+    onActive(num) {
+        this.active.set(num);
+    }
+    onTabOut() {
+        this.closeSubject.next();
+    }
+    findPathById(nodes, id, currentPath = []) {
+        for (const node of nodes) {
+            const newPath = [...currentPath, node];
+            if (node.id === id) {
+                return newPath;
+            }
+            if (node.children && node.children.length > 0) {
+                const result = this.findPathById(node.children, id, newPath);
+                if (result) {
+                    return result;
+                }
+            }
         }
+        return null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", 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 }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, parentPortalComponent: { classPropertyName: "parentPortalComponent", publicName: "parentPortalComponent", isSignal: true, isRequired: false, transformFunction: null }, isKeyboardControlled: { classPropertyName: "isKeyboardControlled", publicName: "isKeyboardControlled", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isKeyboardControlled: "isKeyboardControlledChange", closed: "closed", animating: "animating", nodeClick: "nodeClick", portalHover: "portalHover", activatedId: "activatedIdChange" }, host: { listeners: { "animationend": "done($event)", "animationstart": "start($event)", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], 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    #list\r\n    [data]=\"data()\"\r\n    [ngModel]=\"activatedIdComputed()\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n    [isKeyboardControlled]=\"isKeyboardControlled()\"\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDropdownPortalPrefix}`, 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: [{
+            args: [{ selector: `${XDropdownPortalPrefix}`, imports: [FormsModule, XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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    #list\r\n    [data]=\"data()\"\r\n    [ngModel]=\"activatedIdComputed()\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    (nodeMouseenter)=\"onEnter($event)\"\r\n    (nodeMouseleave)=\"onLeave()\"\r\n    [isKeyboardControlled]=\"isKeyboardControlled()\"\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: { animateEnter: [{
+                type: HostBinding,
+                args: ['animate.enter']
+            }], animateLeave: [{
                 type: HostBinding,
-                args: ['@x-connect-base-animation']
+                args: ['animate.leave']
             }], done: [{
                 type: HostListener,
-                args: ['@x-connect-base-animation.done', ['$event']]
+                args: ['animationend', ['$event']]
             }], start: [{
                 type: HostListener,
-                args: ['@x-connect-base-animation.start', ['$event']]
-            }], mouseenter: [{
+                args: ['animationstart', ['$event']]
+            }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], parentPortalComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentPortalComponent", required: false }] }], isKeyboardControlled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isKeyboardControlled", required: false }] }, { type: i0.Output, args: ["isKeyboardControlledChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], animating: [{ type: i0.Output, args: ["animating"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], portalHover: [{ type: i0.Output, args: ["portalHover"] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], mouseenter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], mouseleave: [{
@@ -310,12 +384,15 @@ class XDropdownComponent extends XDropdownProperty {
             }
             return XHasChildren(data, 0);
         }, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
-        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
         this.animating = signal(false, ...(ngDevMode ? [{ debugName: "animating" }] : []));
+        this.visibleClass = signal(false, ...(ngDevMode ? [{ debugName: "visibleClass" }] : []));
         this.outsideClick = signal(false, ...(ngDevMode ? [{ debugName: "outsideClick" }] : []));
+        this.isClickNodeLeaf = signal(false, ...(ngDevMode ? [{ debugName: "isClickNodeLeaf" }] : []));
         this.minWidth = signal('0px', ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
         this.hoverDelayUnsub = new Subject();
         this.closeSubject = new Subject();
+        this.keydownSubject = new Subject();
+        this.isNullVisible = signal(false, ...(ngDevMode ? [{ debugName: "isNullVisible" }] : []));
         this.realPlacement = signal(null, ...(ngDevMode ? [{ debugName: "realPlacement" }] : []));
         this.portalComponent = signal(null, ...(ngDevMode ? [{ debugName: "portalComponent" }] : []));
         this.portalOverlayRef = signal(null, ...(ngDevMode ? [{ debugName: "portalOverlayRef" }] : []));
@@ -330,6 +407,11 @@ class XDropdownComponent extends XDropdownProperty {
     }
     ngOnInit() {
         this.setSubject();
+        this.isNullVisible.set(XIsNull(this.visible()));
+    }
+    ngOnChanges(changes) {
+        const { visible } = changes;
+        XIsChange(visible) && this.setVisible();
     }
     ngOnDestroy() {
         this.unSubject.next();
@@ -337,12 +419,40 @@ class XDropdownComponent extends XDropdownProperty {
         this.hoverDelayUnsub.next();
         this.hoverDelayUnsub.complete();
     }
+    setVisible() {
+        if (this.disabled() || this.animating())
+            return;
+        if (this.visible()) {
+            if (this.portalAttached()) {
+                this.closeSubject.next();
+                return;
+            }
+            this.createPortal();
+        }
+        else {
+            this.closePortal();
+        }
+    }
     setSubject() {
         this.closeSubject.pipe(takeUntil(this.unSubject)).subscribe(() => {
             this.closePortal();
         });
+        this.keydownSubject.pipe(throttleTime(10), takeUntil(this.unSubject)).subscribe((x) => {
+            const keyCode = x.keyCode;
+            if (this.portalAttached() && [ESCAPE].includes(keyCode)) {
+                this.closeSubject.next();
+            }
+            if (!this.portalAttached() && [DOWN_ARROW].includes(keyCode)) {
+                if (this.disabled())
+                    return;
+                this.visibleClass.set(true);
+                this.createPortal();
+            }
+        });
     }
     onEnter() {
+        if (!this.isNullVisible())
+            return;
         of(true)
             .pipe(delay(this.hoverDelay()), takeUntil(this.hoverDelayUnsub))
             .subscribe(() => {
@@ -353,23 +463,25 @@ class XDropdownComponent extends XDropdownProperty {
                 this.timeoutHide = null;
             }
             if (!this.portal || (this.portal && !this.portalOverlayRef()?.hasAttached())) {
-                this.visible.set(true);
+                this.visibleClass.set(true);
                 this.createPortal();
             }
         });
     }
     onLeave() {
+        if (!this.isNullVisible())
+            return;
         this.hoverDelayUnsub.next();
         if (this.disabled() || this.trigger() === 'click')
             return;
         if (this.portalOverlayRef()?.hasAttached()) {
             this.timeoutHide = setTimeout(() => {
                 this.portalOverlayRef()?.dispose();
-                this.visible.set(false);
+                this.visibleClass.set(false);
             });
         }
     }
-    showPortal() {
+    onClickShow() {
         if (this.disabled() || this.trigger() === 'hover' || this.animating())
             return;
         if (this.trigger() === 'click' && this.portalAttached()) {
@@ -384,7 +496,7 @@ class XDropdownComponent extends XDropdownProperty {
     closePortal() {
         if (this.portalAttached()) {
             this.portalOverlayRef()?.dispose();
-            this.visible.set(false);
+            this.visibleClass.set(false);
             return true;
         }
         return false;
@@ -409,7 +521,9 @@ class XDropdownComponent extends XDropdownProperty {
                 ?.outsidePointerEvents()
                 .pipe(debounceTime(30), takeUntil(this.unSubject))
                 .subscribe(() => {
-                this.closeSubject.next();
+                if (!this.isClickNodeLeaf()) {
+                    this.closeSubject.next();
+                }
             });
         }
         this.setInstance();
@@ -431,10 +545,17 @@ class XDropdownComponent extends XDropdownProperty {
         this.portalComponent.set(componentRef);
         this.portalOverlayRef.set(overlayRef);
         this.realPlacement.set(this.placement());
+        Object.assign(componentRef.instance, {
+            closeSubject: this.closeSubject,
+            keydownSubject: this.keydownSubject
+        });
         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));
+        nodeClick.subscribe((node) => {
+            this.isClickNodeLeaf.set(node.leaf);
+            this.nodeClick.emit(node);
+        });
         activatedId.subscribe((id) => this.activatedId.set(id));
         portalHover.subscribe((hover) => this.portalHover(hover));
     }
@@ -446,6 +567,9 @@ class XDropdownComponent extends XDropdownProperty {
             this.onLeave();
         }
     }
+    onKeydown($event) {
+        this.keydownSubject.next($event);
+    }
     setPlacement() {
         return this.portalService.setPlacement({
             elementRef: this.dropdown(),
@@ -453,20 +577,20 @@ class XDropdownComponent extends XDropdownProperty {
             transformOriginOn: 'x-dropdown-portal'
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", 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}.x-dropdown{display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XDropdownComponent, isStandalone: true, selector: "x-dropdown", viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [class.x-visible]=\"visibleClass()\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"onClickShow()\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  tabindex=\"-1\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0}.x-dropdown{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: "20.3.0", ngImport: i0, type: XDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDropdownPrefix}`, imports: [], 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}.x-dropdown{display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: `${XDropdownPrefix}`, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #dropdown\r\n  class=\"x-dropdown\"\r\n  [class.x-visible]=\"visibleClass()\"\r\n  (mouseenter)=\"onEnter()\"\r\n  (mouseleave)=\"onLeave()\"\r\n  (click)=\"onClickShow()\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  tabindex=\"-1\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-dropdown{margin:0;padding:0}.x-dropdown{display:inline-block}.x-dropdown.x-visible{color:var(--x-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
 
 class XDropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XDropdownModule, imports: [XDropdownComponent], exports: [XDropdownComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XDropdownModule, imports: [XDropdownComponent], exports: [XDropdownComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XDropdownComponent],