@ng-nest/ui 20.1.4 → 20.1.7

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XToBoolean } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { XListComponent } from '@ng-nest/ui/list';
 import * as i1 from '@angular/forms';
@@ -33,6 +34,11 @@ class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_N
          * @en_US Node style
          */
         this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
+        /**
+         * @zh_CN 分组模板
+         * @en_US Group style
+         */
+        this.groupTpl = input(...(ngDevMode ? [undefined, { debugName: "groupTpl" }] : []));
         /**
          * @zh_CN 尺寸
          * @en_US Size
@@ -43,9 +49,26 @@ class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_N
          * @en_US Node click event
          */
         this.nodeClick = output();
+        /**
+         * @zh_CN 加载更多
+         * @en_US load more
+         */
+        this.loadMore = input(false, ...(ngDevMode ? [{ debugName: "loadMore", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 加载更多的文字
+         * @en_US Load more text
+         * @default '加载更多'
+         */
+        this.loadMoreText = input(this.config?.loadMoreText ?? '', ...(ngDevMode ? [{ debugName: "loadMoreText" }] : []));
+        /**
+         * @zh_CN 正在加载中的文字
+         * @en_US Loading
+         * @default '正在加载中'
+         */
+        this.loadingMoreText = input(this.config?.loadingMoreText ?? '', ...(ngDevMode ? [{ debugName: "loadingMoreText" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XCoversationsProperty, isStandalone: true, selector: "x-coversations-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XCoversationsProperty, isStandalone: true, selector: "x-coversations-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsProperty, decorators: [{
             type: Component,
@@ -57,11 +80,11 @@ class XCoversationsComponent extends XCoversationsProperty {
         this.onChange && this.onChange(value);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XCoversationsComponent, isStandalone: true, selector: "x-coversations", providers: [XValueAccessor(XCoversationsComponent)], usesInheritance: true, ngImport: i0, template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XCoversationsComponent, isStandalone: true, selector: "x-coversations", providers: [XValueAccessor(XCoversationsComponent)], usesInheritance: true, ngImport: i0, template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\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: XCoversationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-coversations', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, XListComponent], providers: [XValueAccessor(XCoversationsComponent)], template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"] }]
+            args: [{ selector: 'x-coversations', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, XListComponent], providers: [XValueAccessor(XCoversationsComponent)], template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"] }]
         }] });
 
 class XCoversationsModule {

package/fesm2022/ng-nest-ui-coversations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-coversations.mjs","sources":["../../../../lib/ng-nest/ui/coversations/coversations.property.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.html","../../../../lib/ng-nest/ui/coversations/coversations.module.ts","../../../../lib/ng-nest/ui/coversations/ng-nest-ui-coversations.ts"],"sourcesContent":["import { Component, input, output, TemplateRef } from '@angular/core';\r\nimport { XData, XSize, XStyle } from '@ng-nest/ui/core';\r\nimport { XListNode } from '@ng-nest/ui/list';\r\nimport { XFormControlFunction } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Coversations\r\n * @selector x-coversations\r\n * @decorator component\r\n */\r\nexport const XCoversationsPrefix = 'x-coversations';\r\nconst X_COVERSATIONS_CONFIG_NAME = 'coversations';\r\n\r\n/**\r\n * Coversations Property\r\n */\r\n@Component({ selector: `${XCoversationsPrefix}-property`, template: '' })\r\nexport class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 列表数据\r\n   * @en_US List data\r\n   */\r\n  readonly data = input<XData<XCoversationNode>>([]);\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 节点样式\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeStyle = input<XStyle>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  override readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 节点点击事件\r\n   * @en_US Node click event\r\n   */\r\n  readonly nodeClick = output<XCoversationNode>();\r\n}\r\n\r\n/**\r\n * @zh_CN List 数据对象\r\n * @en_US List data object\r\n */\r\nexport interface XCoversationNode extends XListNode {}\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\r\nimport { XCoversationsProperty } from './coversations.property';\r\nimport { XListComponent } from '@ng-nest/ui/list';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'x-coversations',\r\n  templateUrl: './coversations.component.html',\r\n  styleUrls: ['./coversations.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [FormsModule, XListComponent],\r\n  providers: [XValueAccessor(XCoversationsComponent)]\r\n})\r\nexport class XCoversationsComponent extends XCoversationsProperty {\r\n  valueChange(value: any) {\r\n    this.onChange && this.onChange(value);\r\n  }\r\n}\r\n","<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XCoversationsComponent } from './coversations.component';\r\n\r\n@NgModule({\r\n  exports: [XCoversationsComponent],\r\n  imports: [XCoversationsComponent]\r\n})\r\nexport class XCoversationsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-coversations.mjs","sources":["../../../../lib/ng-nest/ui/coversations/coversations.property.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.html","../../../../lib/ng-nest/ui/coversations/coversations.module.ts","../../../../lib/ng-nest/ui/coversations/ng-nest-ui-coversations.ts"],"sourcesContent":["import { Component, input, output, TemplateRef } from '@angular/core';\r\nimport { XData, XSize, XStyle, XBoolean, XToBoolean } from '@ng-nest/ui/core';\r\nimport { XListNode } from '@ng-nest/ui/list';\r\nimport { XFormControlFunction } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Coversations\r\n * @selector x-coversations\r\n * @decorator component\r\n */\r\nexport const XCoversationsPrefix = 'x-coversations';\r\nconst X_COVERSATIONS_CONFIG_NAME = 'coversations';\r\n\r\n/**\r\n * Coversations Property\r\n */\r\n@Component({ selector: `${XCoversationsPrefix}-property`, template: '' })\r\nexport class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 列表数据\r\n   * @en_US List data\r\n   */\r\n  readonly data = input<XData<XCoversationNode>>([]);\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 节点样式\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeStyle = input<XStyle>();\r\n  /**\r\n   * @zh_CN 分组模板\r\n   * @en_US Group style\r\n   */\r\n  readonly groupTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  override readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 节点点击事件\r\n   * @en_US Node click event\r\n   */\r\n  readonly nodeClick = output<XCoversationNode>();\r\n  /**\r\n   * @zh_CN 加载更多\r\n   * @en_US load more\r\n   */\r\n  readonly loadMore = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 加载更多的文字\r\n   * @en_US Load more text\r\n   * @default '加载更多'\r\n   */\r\n  readonly loadMoreText = input<string>(this.config?.loadMoreText ?? '');\r\n  /**\r\n   * @zh_CN 正在加载中的文字\r\n   * @en_US Loading\r\n   * @default '正在加载中'\r\n   */\r\n  readonly loadingMoreText = input<string>(this.config?.loadingMoreText ?? '');\r\n}\r\n\r\n/**\r\n * @zh_CN List 数据对象\r\n * @en_US List data object\r\n */\r\nexport interface XCoversationNode extends XListNode {}\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\r\nimport { XCoversationsProperty } from './coversations.property';\r\nimport { XListComponent } from '@ng-nest/ui/list';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'x-coversations',\r\n  templateUrl: './coversations.component.html',\r\n  styleUrls: ['./coversations.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [FormsModule, XListComponent],\r\n  providers: [XValueAccessor(XCoversationsComponent)]\r\n})\r\nexport class XCoversationsComponent extends XCoversationsProperty {\r\n  valueChange(value: any) {\r\n    this.onChange && this.onChange(value);\r\n  }\r\n}\r\n","<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XCoversationsComponent } from './coversations.component';\r\n\r\n@NgModule({\r\n  exports: [XCoversationsComponent],\r\n  imports: [XCoversationsComponent]\r\n})\r\nexport class XCoversationsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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, XConnectBaseAnimation, 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
@@ -89,7 +95,7 @@ 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.ɵ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 }, 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: [{
             type: Component,
@@ -131,24 +137,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 +179,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 +270,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,53 +293,63 @@ 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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 }, 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: { "@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" } }, 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" }], animations: [XConnectBaseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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"] }]
+            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    #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: { getPlacement: [{
                 type: HostBinding,
                 args: ['@x-connect-base-animation']
@@ -310,12 +382,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 +405,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 +417,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 +461,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 +494,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 +519,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 +543,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 +565,9 @@ class XDropdownComponent extends XDropdownProperty {
             this.onLeave();
         }
     }
+    onKeydown($event) {
+        this.keydownSubject.next($event);
+    }
     setPlacement() {
         return this.portalService.setPlacement({
             elementRef: this.dropdown(),
@@ -454,11 +576,11 @@ class XDropdownComponent extends XDropdownProperty {
         });
     }
     /** @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.ɵ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, 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: [{
             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"] }]
+            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: () => [] });
 
 class XDropdownModule {