@ng-nest/ui 20.3.1 → 20.3.2

package/auto-complete/index.d.ts

@@ -5,7 +5,7 @@ import { TemplateRef, OnInit, OnChanges, ComponentRef, SimpleChanges } from '@an
 import * as rxjs from 'rxjs';
 import { Subject, BehaviorSubject } from 'rxjs';
 import * as _ng_nest_ui_core from '@ng-nest/ui/core';
-import { XBoolean, XTemplate, XNumber, XAlign, XJustify, XDirection, XSize, XData, XParentIdentityProperty, XVariant, XPlacement, XFloatLabel, XPositionTopBottom } from '@ng-nest/ui/core';
+import { XBoolean, XTemplate, XNumber, XAlign, XJustify, XDirection, XSize, XData, XParentIdentityProperty, XVariant, XPlacement, XPositionLeftRight, XFloatLabel, XPositionTopBottom } from '@ng-nest/ui/core';
 import { XFormOption } from '@ng-nest/ui/base-form';
 import { XInputComponent } from '@ng-nest/ui/input';
 import { XListComponent } from '@ng-nest/ui/list';
@@ -106,6 +106,16 @@ declare class XAutoCompleteProperty extends XAutoCompleteProperty_base {
     readonly inputStyle: _angular_core.InputSignal<{
         [style: string]: any;
     } | undefined>;
+    /**
+     * @zh_CN 图标
+     * @en_US Icon
+     */
+    readonly icon: _angular_core.ModelSignal<string | undefined>;
+    /**
+     * @zh_CN 图标布局方式
+     * @en_US Icon layout
+     */
+    readonly iconLayout: _angular_core.InputSignal<XPositionLeftRight>;
     /**
      * @zh_CN 下拉框的最大高度
      * @en_US The biggest height of the drop-down box
@@ -126,6 +136,11 @@ declare class XAutoCompleteProperty extends XAutoCompleteProperty_base {
      * @en_US The style class name of the drop-down box
      */
     readonly portalClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @zh_CN 自定义下拉框中的内容
+     * @en_US Custom content in the drop-down box
+     */
+    readonly portalTemp: _angular_core.InputSignal<TemplateRef<any> | undefined>;
     /**
      * @zh_CN 匹配区分大小写
      * @en_US Case-sensitive
@@ -251,8 +266,13 @@ declare class XAutoCompleteProperty extends XAutoCompleteProperty_base {
      * @en_US Node click event
      */
     readonly nodeEmit: _angular_core.OutputEmitterRef<XAutoCompleteNode>;
+    /**
+     * @zh_CN 输入值变化事件
+     * @en_US Input value change event
+     */
+    readonly searchChange: _angular_core.OutputEmitterRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XAutoCompleteProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XAutoCompleteProperty, "x-auto-complete-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "onlySelect": { "alias": "onlySelect"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "nodeEmit": "nodeEmit"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XAutoCompleteProperty, "x-auto-complete-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLayout": { "alias": "iconLayout"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "portalTemp": { "alias": "portalTemp"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "onlySelect": { "alias": "onlySelect"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "icon": "iconChange"; "active": "activeChange"; "nodeEmit": "nodeEmit"; "searchChange": "searchChange"; }, never, never, true, never>;
 }
 /**
  * AutoComplete Option
@@ -414,6 +434,13 @@ interface XAutoCompleteOption extends XFormOption {
      */
     nodeEmit?: (node: XAutoCompleteNode) => void;
 }
+/**
+ * @zh_CN 图标布局方式，指在输入框中的位置
+ * @en_US Icon layout, refers to the position in the input box
+ * @value "left" 靠左
+ * @value "right" 靠右
+ */
+type XAutoCompleteIconLayoutType = XPositionLeftRight;
 /**
  * @zh_CN 浮动标签类型
  * @en_US Float label type
@@ -442,7 +469,7 @@ declare class XAutoCompletePortalComponent implements OnInit {
     animateLeave: string;
     done(): void;
     start(): void;
-    list: _angular_core.Signal<XListComponent>;
+    list: _angular_core.Signal<XListComponent | undefined>;
     data: _angular_core.InputSignal<XAutoCompleteNode[] | undefined>;
     value: _angular_core.InputSignal<any>;
     placement: _angular_core.InputSignal<XPositionTopBottom | undefined>;
@@ -459,6 +486,14 @@ declare class XAutoCompletePortalComponent implements OnInit {
     keydownSubject: Subject<KeyboardEvent>;
     active: _angular_core.WritableSignal<number>;
     destroy: _angular_core.WritableSignal<boolean>;
+    portalTemp: _angular_core.InputSignal<TemplateRef<any> | undefined>;
+    portalTempContext: _angular_core.Signal<{
+        $implicit: XAutoCompleteNode[] | undefined;
+        $data: XAutoCompleteNode[] | undefined;
+        $value: any;
+        $close: () => void;
+        $nodeClick: (node: XAutoCompleteNode) => void;
+    }>;
     private unSubject;
     private destroyRef;
     ngOnInit(): void;
@@ -468,14 +503,13 @@ declare class XAutoCompletePortalComponent implements OnInit {
     onActive(num: number): void;
     onTabOut(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XAutoCompletePortalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XAutoCompletePortalComponent, "x-auto-complete-portal", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "inputCom": { "alias": "inputCom"; "required": false; "isSignal": true; }; "keywordText": { "alias": "keywordText"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; }, { "keywordText": "keywordTextChange"; "animating": "animating"; "nodeClick": "nodeClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XAutoCompletePortalComponent, "x-auto-complete-portal", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "inputCom": { "alias": "inputCom"; "required": false; "isSignal": true; }; "keywordText": { "alias": "keywordText"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalTemp": { "alias": "portalTemp"; "required": false; "isSignal": true; }; }, { "keywordText": "keywordTextChange"; "animating": "animating"; "nodeClick": "nodeClick"; }, never, never, true, never>;
 }
 
 declare class XAutoCompleteComponent extends XAutoCompleteProperty implements OnInit, OnChanges {
     inputCom: _angular_core.Signal<XInputComponent>;
     nodes: _angular_core.WritableSignal<XAutoCompleteNode[]>;
     searchNodes: _angular_core.WritableSignal<XAutoCompleteNode[]>;
-    icon: _angular_core.WritableSignal<string>;
     iconSpin: _angular_core.WritableSignal<boolean>;
     animating: _angular_core.WritableSignal<boolean>;
     valueTplContextSignal: _angular_core.WritableSignal<{
@@ -483,6 +517,8 @@ declare class XAutoCompleteComponent extends XAutoCompleteProperty implements On
         $isValue: boolean;
     }>;
     valueTplContextComputed: _angular_core.Signal<unknown>;
+    widthComputed: _angular_core.Signal<boolean>;
+    get hostWidth(): any;
     inputChange: BehaviorSubject<any>;
     closeSubject: Subject<void>;
     keydownSubject: Subject<KeyboardEvent>;
@@ -514,6 +550,8 @@ declare class XAutoCompleteComponent extends XAutoCompleteProperty implements On
     setSearchNodes(value: string | number): void;
     modelChange(value: string | number): void;
     onKeydown($event: KeyboardEvent): void;
+    portalClose(): void;
+    portalNodeClick(node: XAutoCompleteNode): void;
     onInput(_event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XAutoCompleteComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<XAutoCompleteComponent, "x-auto-complete", never, {}, {}, never, never, true, never>;
@@ -526,4 +564,4 @@ declare class XAutoCompleteModule {
 }
 
 export { XAutoCompleteComponent, XAutoCompleteModule, XAutoCompletePortalComponent, XAutoCompletePortalPrefix, XAutoCompletePrefix, XAutoCompleteProperty };
-export type { XAutoCompleteFloatLabel, XAutoCompleteNode, XAutoCompleteOption, XAutoCompleteVariant };
+export type { XAutoCompleteFloatLabel, XAutoCompleteIconLayoutType, XAutoCompleteNode, XAutoCompleteOption, XAutoCompleteVariant };

package/contextmenu/index.d.ts

@@ -24,7 +24,7 @@ declare class XContextmenuProperty extends XContextmenuProperty_base {
      * @zh_CN 触发目标元素
      * @en_US Trigger target element
      */
-    readonly target: _angular_core.InputSignal<ElementRef<any> | HTMLElement | undefined>;
+    readonly target: _angular_core.InputSignal<HTMLElement | ElementRef<any> | undefined>;
     /**
      * @zh_CN 节点数据
      * @en_US Node data

package/core/index.d.ts

@@ -1267,6 +1267,7 @@ interface XAutoCompleteConfig {
     floatFixed?: boolean;
     variant?: XVariant;
     placement?: XPositionTopBottom;
+    iconLayout?: XPositionLeftRight;
     debounceTime?: number;
     size?: XSize;
     bordered?: boolean;

package/fesm2022/ng-nest-ui-auto-complete.mjs

@@ -1,12 +1,13 @@
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import * as i0 from '@angular/core';
-import { input, model, output, Component, viewChild, signal, inject, DestroyRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, computed, ViewContainerRef, ElementRef, effect, NgModule } from '@angular/core';
+import { input, model, output, Component, viewChild, signal, computed, inject, DestroyRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, ElementRef, effect, NgModule } from '@angular/core';
 import { XToNumber, XToBoolean, XToCssPixelValue, XIsChange, XIsObservable, XIsFunction, XSetData, XParents, XIsEmpty } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
 import { XInputComponent } from '@ng-nest/ui/input';
 import { takeUntil, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { XListComponent } from '@ng-nest/ui/list';
+import { NgTemplateOutlet } from '@angular/common';
 import { Overlay } from '@angular/cdk/overlay';
 import { DOWN_ARROW, UP_ARROW, ENTER, MAC_ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import * as i1 from '@angular/forms';
@@ -61,6 +62,16 @@ class XAutoCompleteProperty extends XFormControlFunction(X_AUTOCOMPLETE_CONFIG_N
          * @en_US Input Style
          */
         this.inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : []));
+        /**
+         * @zh_CN 图标
+         * @en_US Icon
+         */
+        this.icon = model(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * @zh_CN 图标布局方式
+         * @en_US Icon layout
+         */
+        this.iconLayout = input(this.config?.iconLayout ?? 'right', ...(ngDevMode ? [{ debugName: "iconLayout" }] : []));
         /**
          * @zh_CN 下拉框的最大高度
          * @en_US The biggest height of the drop-down box
@@ -85,6 +96,11 @@ class XAutoCompleteProperty extends XFormControlFunction(X_AUTOCOMPLETE_CONFIG_N
          * @en_US The style class name of the drop-down box
          */
         this.portalClass = input('', ...(ngDevMode ? [{ debugName: "portalClass" }] : []));
+        /**
+         * @zh_CN 自定义下拉框中的内容
+         * @en_US Custom content in the drop-down box
+         */
+        this.portalTemp = input(...(ngDevMode ? [undefined, { debugName: "portalTemp" }] : []));
         /**
          * @zh_CN 匹配区分大小写
          * @en_US Case-sensitive
@@ -210,14 +226,19 @@ class XAutoCompleteProperty extends XFormControlFunction(X_AUTOCOMPLETE_CONFIG_N
          * @en_US Node click event
          */
         this.nodeEmit = output();
+        /**
+         * @zh_CN 输入值变化事件
+         * @en_US Input value change event
+         */
+        this.searchChange = output();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompleteProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XAutoCompleteProperty, isStandalone: true, selector: "x-auto-complete-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, portalClass: { classPropertyName: "portalClass", publicName: "portalClass", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, onlySelect: { classPropertyName: "onlySelect", publicName: "onlySelect", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", nodeEmit: "nodeEmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XAutoCompleteProperty, isStandalone: true, selector: "x-auto-complete-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconLayout: { classPropertyName: "iconLayout", publicName: "iconLayout", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, portalClass: { classPropertyName: "portalClass", publicName: "portalClass", isSignal: true, isRequired: false, transformFunction: null }, portalTemp: { classPropertyName: "portalTemp", publicName: "portalTemp", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, onlySelect: { classPropertyName: "onlySelect", publicName: "onlySelect", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", active: "activeChange", nodeEmit: "nodeEmit", searchChange: "searchChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompleteProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAutoCompletePrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], portalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalHeight", required: false }] }], portalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalWidth", required: false }] }], portalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalClass", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], onlySelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelect", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatFixed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], inputValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValidator", required: false }] }], nodeEmit: [{ type: i0.Output, args: ["nodeEmit"] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }, { type: i0.Output, args: ["iconChange"] }], iconLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLayout", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], portalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalHeight", required: false }] }], portalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalWidth", required: false }] }], portalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalClass", required: false }] }], portalTemp: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalTemp", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], onlySelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelect", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatFixed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], inputValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValidator", required: false }] }], nodeEmit: [{ type: i0.Output, args: ["nodeEmit"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 /**
  * AutoComplete Portal
  * @selector x-auto-complete-portal
@@ -229,7 +250,7 @@ class XAutoCompletePortalComponent {
     constructor() {
         this.animateEnter = 'x-connect-enter';
         this.animateLeave = 'x-connect-leave';
-        this.list = viewChild.required('list', { read: XListComponent });
+        this.list = viewChild('list', ...(ngDevMode ? [{ debugName: "list", read: XListComponent }] : [{ read: XListComponent }]));
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
@@ -244,6 +265,14 @@ class XAutoCompletePortalComponent {
         this.nodeClick = output();
         this.active = signal(-1, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this.destroy = signal(false, ...(ngDevMode ? [{ debugName: "destroy" }] : []));
+        this.portalTemp = input(...(ngDevMode ? [undefined, { debugName: "portalTemp" }] : []));
+        this.portalTempContext = computed(() => ({
+            $implicit: this.data(),
+            $data: this.data(),
+            $value: this.value(),
+            $close: () => this.closeSubject.next(),
+            $nodeClick: (node) => this.onNodeClick(node)
+        }), ...(ngDevMode ? [{ debugName: "portalTempContext" }] : []));
         this.unSubject = new Subject();
         this.destroyRef = inject(DestroyRef);
     }
@@ -259,10 +288,10 @@ class XAutoCompletePortalComponent {
     }
     ngOnInit() {
         this.closeSubject.pipe(takeUntil(this.unSubject)).subscribe(() => {
-            this.list().setUnActive(this.active());
+            this.list()?.setUnActive(this.active());
         });
         this.keydownSubject.pipe(takeUntil(this.unSubject)).subscribe((x) => {
-            this.list().keydown(x);
+            this.list()?.keydown(x);
         });
         this.destroyRef.onDestroy(() => {
             this.destroy.set(true);
@@ -271,7 +300,7 @@ class XAutoCompletePortalComponent {
         });
     }
     ngAfterViewInit() {
-        this.list().keyManager.setFirstItemActive();
+        this.list()?.keyManager.setFirstItemActive();
     }
     stopPropagation(event) {
         event.stopPropagation();
@@ -287,11 +316,11 @@ class XAutoCompletePortalComponent {
         this.closeSubject.next();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompletePortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XAutoCompletePortalComponent, isStandalone: true, selector: "x-auto-complete-portal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keywordText: "keywordTextChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, read: XListComponent, isSignal: true }], ngImport: i0, template: "<div\r\n  #autoCompletePortal\r\n  class=\"x-auto-complete-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  <x-list\r\n    #list\r\n    [data]=\"data()!\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [scrollElement]=\"autoCompletePortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete-portal{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"], dependencies: [{ kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XAutoCompletePortalComponent, isStandalone: true, selector: "x-auto-complete-portal", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, portalMaxHeight: { classPropertyName: "portalMaxHeight", publicName: "portalMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, portalHeight: { classPropertyName: "portalHeight", publicName: "portalHeight", isSignal: true, isRequired: false, transformFunction: null }, portalWidth: { classPropertyName: "portalWidth", publicName: "portalWidth", isSignal: true, isRequired: false, transformFunction: null }, portalTemp: { classPropertyName: "portalTemp", publicName: "portalTemp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keywordText: "keywordTextChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, read: XListComponent, isSignal: true }], ngImport: i0, template: "<div\r\n  #autoCompletePortal\r\n  class=\"x-auto-complete-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  @if (portalTemp(); as portalTpl) {\r\n    <ng-template [ngTemplateOutlet]=\"portalTpl\" [ngTemplateOutletContext]=\"portalTempContext()\"></ng-template>\r\n  } @else {\r\n    <x-list\r\n      #list\r\n      [data]=\"data()!\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      (keyManagerChange)=\"onActive($event)\"\r\n      (keyManagerTabOut)=\"onTabOut()\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [scrollElement]=\"autoCompletePortal\"\r\n      [keywordText]=\"keywordText()\"\r\n      [caseSensitive]=\"caseSensitive()\"\r\n      [inPortal]=\"true\"\r\n    ></x-list>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete-portal{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"], dependencies: [{ kind: "component", type: XListComponent, selector: "x-list" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompletePortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XAutoCompletePortalPrefix}`, imports: [XListComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #autoCompletePortal\r\n  class=\"x-auto-complete-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  <x-list\r\n    #list\r\n    [data]=\"data()!\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    (keyManagerChange)=\"onActive($event)\"\r\n    (keyManagerTabOut)=\"onTabOut()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [scrollElement]=\"autoCompletePortal\"\r\n    [keywordText]=\"keywordText()\"\r\n    [caseSensitive]=\"caseSensitive()\"\r\n    [inPortal]=\"true\"\r\n  ></x-list>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete-portal{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"] }]
+            args: [{ selector: `${XAutoCompletePortalPrefix}`, imports: [XListComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #autoCompletePortal\r\n  class=\"x-auto-complete-portal\"\r\n  tabindex=\"-1\"\r\n  (click)=\"inputCom()?.inputFocus('focus'); stopPropagation($event)\"\r\n  [style.maxHeight]=\"portalHeight() ? portalHeight() : portalMaxHeight()\"\r\n  [style.height]=\"portalHeight()\"\r\n>\r\n  @if (portalTemp(); as portalTpl) {\r\n    <ng-template [ngTemplateOutlet]=\"portalTpl\" [ngTemplateOutletContext]=\"portalTempContext()\"></ng-template>\r\n  } @else {\r\n    <x-list\r\n      #list\r\n      [data]=\"data()!\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      (keyManagerChange)=\"onActive($event)\"\r\n      (keyManagerTabOut)=\"onTabOut()\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [scrollElement]=\"autoCompletePortal\"\r\n      [keywordText]=\"keywordText()\"\r\n      [caseSensitive]=\"caseSensitive()\"\r\n      [inPortal]=\"true\"\r\n    ></x-list>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete-portal{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"] }]
         }], propDecorators: { animateEnter: [{
                 type: HostBinding,
                 args: ['animate.enter']
@@ -304,21 +333,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }], start: [{
                 type: HostListener,
                 args: ['animationstart']
-            }], list: [{ type: i0.ViewChild, args: ['list', { ...{ read: XListComponent }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], inputCom: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputCom", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }, { type: i0.Output, args: ["keywordTextChange"] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], portalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalHeight", required: false }] }], portalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalWidth", required: false }] }], animating: [{ type: i0.Output, args: ["animating"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
+            }], list: [{ type: i0.ViewChild, args: ['list', { ...{ read: XListComponent }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], inputCom: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputCom", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }, { type: i0.Output, args: ["keywordTextChange"] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], portalMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMaxHeight", required: false }] }], portalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalHeight", required: false }] }], portalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalWidth", required: false }] }], animating: [{ type: i0.Output, args: ["animating"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], portalTemp: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalTemp", required: false }] }] } });
 
 class XAutoCompleteComponent extends XAutoCompleteProperty {
+    get hostWidth() {
+        return this.widthComputed() ? this.inputStyle()?.['width'] : null;
+    }
     constructor() {
         super();
         this.inputCom = viewChild.required('inputCom', { read: XInputComponent });
         this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
         this.searchNodes = signal([], ...(ngDevMode ? [{ debugName: "searchNodes" }] : []));
-        this.icon = signal('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         this.iconSpin = signal(false, ...(ngDevMode ? [{ debugName: "iconSpin" }] : []));
         this.animating = signal(false, ...(ngDevMode ? [{ debugName: "animating" }] : []));
         this.valueTplContextSignal = signal({ $node: null, $isValue: true }, ...(ngDevMode ? [{ debugName: "valueTplContextSignal" }] : []));
         this.valueTplContextComputed = computed(() => {
             return this.valueTplContext() ? this.valueTplContext() : this.valueTplContextSignal();
         }, ...(ngDevMode ? [{ debugName: "valueTplContextComputed" }] : []));
+        this.widthComputed = computed(() => {
+            const inputStyle = this.inputStyle() || {};
+            return !!inputStyle?.['width'];
+        }, ...(ngDevMode ? [{ debugName: "widthComputed" }] : []));
         this.inputChange = new BehaviorSubject(null);
         this.closeSubject = new Subject();
         this.keydownSubject = new Subject();
@@ -341,6 +376,7 @@ class XAutoCompleteComponent extends XAutoCompleteProperty {
         effect(() => this.portalComponent()?.setInput('caseSensitive', this.caseSensitive()));
         effect(() => this.portalComponent()?.setInput('inputCom', this.inputCom()));
         effect(() => this.portalComponent()?.setInput('keywordText', this.inputChanged()));
+        effect(() => this.portalComponent()?.setInput('portalTemp', this.portalTemp()));
     }
     ngOnInit() {
         this.setSubject();
@@ -431,10 +467,11 @@ class XAutoCompleteComponent extends XAutoCompleteProperty {
             return;
         this.active.set(true);
         if ((XIsObservable(this.data()) && this.nodes.length === 0) || XIsFunction(this.data())) {
+            const beforeIcon = this.icon() || '';
             this.icon.set('fto-loader');
             this.iconSpin.set(true);
             XSetData(this.data(), this.unSubject, true, this.value()).subscribe((x) => {
-                this.icon.set('');
+                this.icon.set(beforeIcon);
                 this.iconSpin.set(false);
                 this.nodes.set(x);
                 this.createPortal();
@@ -551,10 +588,11 @@ class XAutoCompleteComponent extends XAutoCompleteProperty {
                     this.closeSubject.next();
                 }
                 else {
+                    const beforeIcon = this.icon() || '';
                     this.icon.set('fto-loader');
                     this.iconSpin.set(true);
                     XSetData(this.data(), this.unSubject, true, value).subscribe((x) => {
-                        this.icon.set('');
+                        this.icon.set(beforeIcon);
                         this.iconSpin.set(false);
                         this.nodes.set(x);
                         this.searchNodes.set(this.nodes());
@@ -586,19 +624,29 @@ class XAutoCompleteComponent extends XAutoCompleteProperty {
     onKeydown($event) {
         this.keydownSubject.next($event);
     }
+    portalClose() {
+        this.closeSubject.next();
+    }
+    portalNodeClick(node) {
+        this.onNodeClick(node);
+    }
     onInput(_event) {
         this.formControlValidator();
         setTimeout(() => {
+            this.searchChange.emit(this.value());
             this.inputChange.next(this.value());
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XAutoCompleteComponent, isStandalone: true, selector: "x-auto-complete", providers: [XValueAccessor(XAutoCompleteComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #autoComplete class=\"x-auto-complete\">\r\n  <div class=\"x-auto-complete-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"false\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [inputStyle]=\"inputStyle()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xClick)=\"showPortal()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete{display:inline-block;width:12rem}.x-auto-complete{margin:0;padding:0}.x-auto-complete{width:100%}.x-auto-complete x-input{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XAutoCompleteComponent, isStandalone: true, selector: "x-auto-complete", host: { properties: { "style.width": "this.hostWidth" } }, providers: [XValueAccessor(XAutoCompleteComponent)], viewQueries: [{ propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #autoComplete class=\"x-auto-complete\">\r\n  <div class=\"x-auto-complete-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [iconLayout]=\"iconLayout()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"false\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [inputStyle]=\"inputStyle()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xClick)=\"showPortal()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete{display:inline-block;width:12rem}.x-auto-complete{margin:0;padding:0}.x-auto-complete{width:100%}.x-auto-complete x-input{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XAutoCompletePrefix}`, imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XAutoCompleteComponent)], template: "<div #autoComplete class=\"x-auto-complete\">\r\n  <div class=\"x-auto-complete-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"false\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [inputStyle]=\"inputStyle()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xClick)=\"showPortal()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete{display:inline-block;width:12rem}.x-auto-complete{margin:0;padding:0}.x-auto-complete{width:100%}.x-auto-complete x-input{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputCom: [{ type: i0.ViewChild, args: ['inputCom', { ...{ read: XInputComponent }, isSignal: true }] }] } });
+            args: [{ selector: `${XAutoCompletePrefix}`, imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XAutoCompleteComponent)], template: "<div #autoComplete class=\"x-auto-complete\">\r\n  <div class=\"x-auto-complete-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [iconSpin]=\"iconSpin()\"\r\n      [iconLayout]=\"iconLayout()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"false\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl()\"\r\n      [valueTplContext]=\"valueTplContextComputed()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [inputStyle]=\"inputStyle()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (xInput)=\"onInput($event)\"\r\n      (xKeydown)=\"onKeydown($event)\"\r\n      (xClick)=\"showPortal()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-auto-complete{display:inline-block;width:12rem}.x-auto-complete{margin:0;padding:0}.x-auto-complete{width:100%}.x-auto-complete x-input{width:100%}.x-auto-complete-portal{color:var(--x-text);width:100%;border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);position:relative;display:flex;background-color:var(--x-background-100);overflow:hidden auto;max-height:calc(calc(var(--x-font-size) + .875rem) * 6 + var(--x-border-width) * 7)}.x-auto-complete-portal:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputCom: [{ type: i0.ViewChild, args: ['inputCom', { ...{ read: XInputComponent }, isSignal: true }] }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }] } });
 
 class XAutoCompleteModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }