@ng-nest/ui 17.0.11 → 18.0.0

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

@@ -1,23 +1,23 @@
 import { Subject } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, InjectionToken, Directive, afterRender, AfterRenderPhase, ViewChild, ViewChildren, HostListener, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XDataConvert, XInputNumber, XInputBoolean, XWithConfig, XConfigService, XIsChange, XClearClass, XIsUndefined, XIsEmpty, XResize, XSetData, XIsNull } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
-import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { input, output, Component, model, inject, ElementRef, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, InjectionToken, Directive, signal, viewChild, afterRender, AfterRenderPhase, ViewChildren, HostListener, NgModule } from '@angular/core';
+import { XToNumber, XToBoolean, XIsUndefined, XIsEmpty, XIsChange, XResize, XSetData, XIsNull } from '@ng-nest/ui/core';
+import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
+import { CdkDropList, moveItemInArray, CdkDrag } from '@angular/cdk/drag-drop';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XKeywordDirective } from '@ng-nest/ui/keyword';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ENTER } from '@angular/cdk/keycodes';
-import { map, takeUntil, debounceTime } from 'rxjs/operators';
-import { XI18nService } from '@ng-nest/ui/i18n';
+import { map, debounceTime, takeUntil } from 'rxjs/operators';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
 import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
+import { coerceArray } from '@angular/cdk/coercion';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { XEmptyComponent } from '@ng-nest/ui/empty';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * List
@@ -25,179 +25,174 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  * @decorator component
  */
 const XListPrefix = 'x-list';
-const X_CONFIG_NAME = 'list';
+const X_LIST_CONFIG_NAME = 'list';
 /**
  * List Property
  */
-class XListProperty extends XControlValueAccessor {
+class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 列表数据
          * @en_US List data
          */
-        this.data = [];
+        this.data = input([]);
         /**
          * @zh_CN 多选个数，设置为0，不限制选择个数
          * @en_US Multiple choice
          */
-        this.multiple = 1;
+        this.multiple = input(1, { transform: XToNumber });
+        /**
+         * @zh_CN 多选添加全选功能，适用于 multiple=0
+         * @en_US Multi choice to add full selection function
+         */
+        this.selectAll = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 全选的文字
+         * @en_US Selected all text
+         * @default '全选'
+         */
+        this.selectAllText = input(this.config?.selectAllText ?? '');
+        /**
+         * @zh_CN 选中
+         * @en_US Selected
+         */
+        this.checked = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 拖动
+         * @en_US Drag
+         */
+        this.drag = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 当开启多选的时候，ngModel 的值为对象数组
+         * @en_US When multiple selection is enabled, the value of ngmodel is an array of objects
+         */
+        this.objectArray = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 节点模板
+         * @en_US Node template
+         */
+        this.nodeTpl = input();
+        /**
+         * @zh_CN 列表头部
+         * @en_US List header
+         */
+        this.header = input();
+        /**
+         * @zh_CN 列表底部
+         * @en_US List footer
+         */
+        this.footer = input();
+        /**
+         * @zh_CN 滚动区域元素
+         * @en_US Rolling area element
+         */
+        this.scrollElement = input();
+        /**
+         * @zh_CN 加载更多
+         * @en_US load more
+         */
+        this.loadMore = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 加载更多的文字
+         * @en_US Load more text
+         * @default '加载更多'
+         */
+        this.loadMoreText = input(this.config?.loadMoreText ?? '');
+        /**
+         * @zh_CN 正在加载中的文字
+         * @en_US Loading
+         * @default '正在加载中'
+         */
+        this.loadingMoreText = input(this.config?.loadingMoreText ?? '');
+        /**
+         * @zh_CN 开启虚拟滚动，不支持节点拖动功能
+         * @en_US Turn on virtual scrolling
+         */
+        this.virtualScroll = input(this.config?.virtualScroll ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 虚拟滚动高度, 实际会去掉头尾、全选、更多的高度
+         * @en_US The virtual rolling height will actually remove the head and end, the full selection, more height
+         */
+        this.scrollHeight = input(this.config?.scrollHeight ?? 400, { transform: XToNumber });
+        /**
+         * @zh_CN 虚拟滚动高度自适应指定元素
+         * @en_US virtual rolling height follows the specified object
+         */
+        this.heightAdaption = input();
         /**
          * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数
          * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
          */
-        this.minBufferPx = 100;
+        this.minBufferPx = input(100, { transform: XToNumber });
         /**
          * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数
          * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
          */
-        this.maxBufferPx = 200;
+        this.maxBufferPx = input(200, { transform: XToNumber });
+        /**
+         * @zh_CN 关键字高亮
+         * @en_US Keyword highlighting
+         */
+        this.keywordText = input();
+        /**
+         * @zh_CN 匹配关键字区分大小写
+         * @en_US Case-sensitive
+         */
+        this.caseSensitive = input(this.config?.caseSensitive ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 在弹框中选择时的样式，根据尺寸来决定
+         * @en_US The style selected in the pop-up box is determined by size
+         */
+        this.inPortal = input(false, { transform: XToBoolean });
         /**
          * @zh_CN Full event
          * @en_US 全选事件
          */
-        this.onSelectAll = new EventEmitter();
+        this.onSelectAll = output();
         /**
          * @zh_CN 节点 mouseenter 事件
          * @en_US Node mouseenter event
          */
-        this.nodeMouseenter = new EventEmitter();
+        this.nodeMouseenter = output();
         /**
          * @zh_CN 节点 mouseleave 事件
          * @en_US Node mouseleave event
          */
-        this.nodeMouseleave = new EventEmitter();
+        this.nodeMouseleave = output();
         /**
          * @zh_CN 节点点击事件
          * @en_US Node click event
          */
-        this.nodeClick = new EventEmitter();
+        this.nodeClick = output();
         /**
          * @zh_CN 拖动结束事件
          * @en_US Drag the end
          */
-        this.dropListDropped = new EventEmitter();
+        this.dropListDropped = output();
         /**
          * @zh_CN Tab out 事件
          * @en_US Tab Out event
          */
-        this.keyManagerTabOut = new EventEmitter();
+        this.keyManagerTabOut = output();
         /**
          * @zh_CN Tab out 事件
          * @en_US Tab Out event
          */
-        this.keyManagerChange = new EventEmitter();
+        this.keyManagerChange = output();
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XListProperty, selector: "x-list-property", inputs: { data: "data", multiple: "multiple", selectAll: "selectAll", selectAllText: "selectAllText", checked: "checked", drag: "drag", objectArray: "objectArray", nodeTpl: "nodeTpl", header: "header", footer: "footer", scrollElement: "scrollElement", size: "size", loadMore: "loadMore", loadMoreText: "loadMoreText", loadingMoreText: "loadingMoreText", virtualScroll: "virtualScroll", scrollHeight: "scrollHeight", heightAdaption: "heightAdaption", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", keywordText: "keywordText", caseSensitive: "caseSensitive" }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XListProperty, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", 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 }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XListProperty.prototype, "data", void 0);
-__decorate([
-    XInputNumber()
-], XListProperty.prototype, "multiple", void 0);
-__decorate([
-    XInputBoolean()
-], XListProperty.prototype, "selectAll", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XListProperty.prototype, "selectAllText", void 0);
-__decorate([
-    XInputBoolean()
-], XListProperty.prototype, "checked", void 0);
-__decorate([
-    XInputBoolean()
-], XListProperty.prototype, "drag", void 0);
-__decorate([
-    XInputBoolean()
-], XListProperty.prototype, "objectArray", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XListProperty.prototype, "size", void 0);
-__decorate([
-    XInputBoolean()
-], XListProperty.prototype, "loadMore", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XListProperty.prototype, "loadMoreText", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XListProperty.prototype, "loadingMoreText", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XListProperty.prototype, "virtualScroll", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 400),
-    XInputNumber()
-], XListProperty.prototype, "scrollHeight", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, true)
-], XListProperty.prototype, "caseSensitive", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XListPrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], selectAll: [{
-                type: Input
-            }], selectAllText: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], drag: [{
-                type: Input
-            }], objectArray: [{
-                type: Input
-            }], nodeTpl: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], scrollElement: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], loadMore: [{
-                type: Input
-            }], loadMoreText: [{
-                type: Input
-            }], loadingMoreText: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], scrollHeight: [{
-                type: Input
-            }], heightAdaption: [{
-                type: Input
-            }], minBufferPx: [{
-                type: Input
-            }], maxBufferPx: [{
-                type: Input
-            }], keywordText: [{
-                type: Input
-            }], caseSensitive: [{
-                type: Input
-            }], onSelectAll: [{
-                type: Output
-            }], nodeMouseenter: [{
-                type: Output
-            }], nodeMouseleave: [{
-                type: Output
-            }], nodeClick: [{
-                type: Output
-            }], dropListDropped: [{
-                type: Output
-            }], keyManagerTabOut: [{
-                type: Output
-            }], keyManagerChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * List Option
  * @selector x-list-option
@@ -210,119 +205,116 @@ const XListOptionPrefix = 'x-list-option';
 class XListOptionProperty {
     constructor() {
         /**
-         * @zh_CN 有子节点
+         * @zh_CN 节点参数
+         * @en_US Node param
+         */
+        this.node = input();
+        /**
+         * @zh_CN 选中
+         * @en_US Selected
+         */
+        this.checked = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 节点模板
+         * @en_US Node template
+         */
+        this.nodeTpl = input();
+        /**
+         * @zh_CN 选中
+         * @en_US selected
+         */
+        this.selected = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 禁用
+         * @en_US forbidden
+         */
+        this.forbidden = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 激活
+         * @en_US active
+         */
+        this.active = model(false);
+        /**
+         * @zh_CN 打开弹框
+         * @en_US open portal
+         */
+        this.openPortal = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 自定义数据对象样式
+         * @en_US Customize data object styles
+         */
+        this.optionClass = input();
+        /**
+         * @zh_CN 图标
+         * @en_US icon
+         */
+        this.icon = input();
+        /**
+         * @zh_CN 分割线
+         * @en_US Split line
+         */
+        this.divided = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 标签
+         * @en_US label
+         */
+        this.label = input();
+        /**
+         * @zh_CN 叶子节点
          * @en_US leaf
          */
-        this.activeChange = new EventEmitter();
+        this.leaf = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input('medium');
+        /**
+         * @zh_CN 关键字高亮
+         * @en_US Keyword highlighting
+         */
+        this.keywordText = input();
+        /**
+         * @zh_CN 匹配关键字区分大小写
+         * @en_US Case-sensitive
+         */
+        this.caseSensitive = input(true, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XListOptionProperty, selector: "x-list-option-property", inputs: { node: "node", checked: "checked", nodeTpl: "nodeTpl", selected: "selected", disabled: "disabled", active: "active", openPortal: "openPortal", optionClass: "optionClass", icon: "icon", divided: "divided", label: "label", leaf: "leaf", size: "size", keywordText: "keywordText", caseSensitive: "caseSensitive" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XListOptionProperty, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "checked", void 0);
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "selected", void 0);
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "disabled", void 0);
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "active", void 0);
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "openPortal", void 0);
-__decorate([
-    XInputBoolean()
-], XListOptionProperty.prototype, "leaf", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XListOptionProperty.prototype, "size", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, true)
-], XListOptionProperty.prototype, "caseSensitive", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListOptionProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListOptionProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XListOptionPrefix}-property`, template: '' }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], nodeTpl: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], openPortal: [{
-                type: Input
-            }], optionClass: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], divided: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], leaf: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], keywordText: [{
-                type: Input
-            }], caseSensitive: [{
-                type: Input
-            }], activeChange: [{
-                type: Output
-            }] } });
+        }] });
 
 class XListOptionComponent extends XListOptionProperty {
     constructor() {
-        super(...arguments);
+        super();
         this.role = 'option';
-        this.classMap = {};
-        this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
-    }
-    ngOnInit() {
-        if (this.node)
-            this.node.change = () => {
-                this.cdr.detectChanges();
-            };
-    }
-    ngOnChanges(changes) {
-        const { size } = changes;
-        XIsChange(size) && this.setClassMap();
-    }
-    setClassMap() {
-        XClearClass(this.classMap);
-        this.classMap[`${XListOptionPrefix}-${this.size}`] = this.size ? true : false;
+        this.classMap = computed(() => ({
+            [`${XListOptionPrefix}-${this.size()}`]: this.size() ? true : false
+        }));
+        this.disabled = false;
+        effect(() => (this.disabled = this.forbidden()));
     }
     setActiveStyles() {
-        this.active = true;
-        this.activeChange.emit(this.active);
-        this.cdr.detectChanges();
+        this.active.set(true);
     }
     setInactiveStyles() {
-        this.active = false;
-        this.activeChange.emit(this.active);
-        this.cdr.detectChanges();
+        this.active.set(false);
     }
     getLabel() {
-        return this.label;
+        return this.label();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    } @else {\r\n      @if (icon) {\r\n        <x-icon [type]=\"icon\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked && !leaf && selected) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n    } @else {\r\n      @if (icon()) {\r\n        <x-icon [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\">{{ label() }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XListOptionPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-selected]=\"selected\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-open-portal]=\"node?.openPortal\"\r\n  [class.x-active]=\"active\"\r\n  [class.x-list-icon]=\"icon\"\r\n  [class.x-list-divided]=\"divided\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl; context: { $node: node }\"></ng-template>\r\n    } @else {\r\n      @if (icon) {\r\n        <x-icon [type]=\"icon\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText\" [caseSensitive]=\"caseSensitive\">{{ label }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked && !leaf && selected) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-background-a400);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
-        }], propDecorators: { role: [{
+            args: [{ selector: `${XListOptionPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n    } @else {\r\n      @if (icon()) {\r\n        <x-icon [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\">{{ label() }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled),.x-list-option.x-active:not(.x-disabled){background-color:var(--x-background-a200)}.x-list-option.x-list-divided{margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }] } });
@@ -331,13 +323,7 @@ const X_LIST_DROP_GROUP = new InjectionToken('XListDropGroup');
 class XListDropGroup {
     constructor() {
         this.dropLists = new Set();
-        this._disabled = false;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        this.disabled = input(false, { transform: XToBoolean, alias: 'xListDropGroupDisabled' });
     }
     setConnectedTo() {
         this.dropLists.forEach((x) => {
@@ -352,25 +338,21 @@ class XListDropGroup {
                 }
             });
         });
-        console.log(this.dropLists);
     }
     ngOnDestroy() {
         this.dropLists.clear();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListDropGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XListDropGroup, isStandalone: true, selector: "[xListDropGroup]", inputs: { disabled: ["xListDropGroupDisabled", "disabled"] }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListDropGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: XListDropGroup, isStandalone: true, selector: "[xListDropGroup]", inputs: { disabled: { classPropertyName: "disabled", publicName: "xListDropGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListDropGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListDropGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xListDropGroup]',
                     standalone: true,
                     providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }]
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input,
-                args: ['xListDropGroupDisabled']
-            }] } });
+        }] });
 
 class XListComponent extends XListProperty {
     keydown($event) {
@@ -378,51 +360,48 @@ class XListComponent extends XListProperty {
         const activeIndex = this.keyManager.activeItemIndex;
         if ($event.keyCode === ENTER && !XIsUndefined(activeIndex)) {
             this.setUnActive(activeIndex);
-            this.onNodeClick($event, this.nodes[activeIndex]);
+            this.onNodeClick($event, this.nodes()[activeIndex]);
         }
     }
-    get getItemSize() {
-        return this.itemSizeMap[this.size];
-    }
-    get isEmpty() {
-        return XIsEmpty(this.nodes);
-    }
-    get getSelectAllText() {
-        return this.selectAllText || this.locale.selectAllText;
-    }
-    get getLoadMoreText() {
-        return this.loadMoreText || this.locale.loadMoreText;
-    }
-    get getLoadingMoreText() {
-        return this.loadingMoreText || this.locale.loadingMoreText;
-    }
-    get getVirtualScrollHeight() {
+    getVirtualScrollHeight() {
         let headerH = 0, footerH = 0, selectAllH = 0, loadMoreH = 0;
-        if (this.headerRef)
-            headerH = this.headerRef.nativeElement.clientHeight;
-        if (this.footerRef)
-            footerH = this.footerRef.nativeElement.clientHeight;
-        if (this.selectAllRef)
-            selectAllH = this.selectAllRef.nativeElement.clientHeight;
-        if (this.loadMoreRef)
-            loadMoreH = this.loadMoreRef.nativeElement.clientHeight;
-        return Number(this.scrollHeight) - headerH - footerH - selectAllH - loadMoreH;
+        if (this.headerRef())
+            headerH = this.headerRef().nativeElement.clientHeight;
+        if (this.footerRef())
+            footerH = this.footerRef().nativeElement.clientHeight;
+        if (this.selectAllRef())
+            selectAllH = this.selectAllRef().nativeElement.clientHeight;
+        if (this.loadMoreRef())
+            loadMoreH = this.loadMoreRef().nativeElement.clientHeight;
+        return this.scrollHeightSignal() - headerH - footerH - selectAllH - loadMoreH;
     }
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
         this.setSelected();
         this.setKeyManager();
-        this.cdr.detectChanges();
     }
     constructor() {
         super();
-        this.nodes = [];
-        this.selectedNodes = [];
-        this.isSelectAll = false;
-        this.locale = {};
-        this.loadMoreIndex = 0;
-        this.icon = '';
-        this.iconSpin = false;
+        this.unSubject = new Subject();
+        this.i18n = inject(XI18nService);
+        this.group = inject(X_LIST_DROP_GROUP, { optional: true, skipSelf: true });
+        this.nodes = signal([]);
+        this.selectedNodes = signal([]);
+        this.headerRef = viewChild('headerRef');
+        this.footerRef = viewChild('footerRef');
+        this.selectAllRef = viewChild('selectAllRef');
+        this.loadMoreRef = viewChild('loadMoreRef');
+        this.virtualBody = viewChild('virtualBody');
+        this.dropList = viewChild(CdkDropList);
+        this.isSelectAll = signal(false);
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.list)), { initialValue: zh_CN.list });
+        this.loadMoreIndex = signal(0);
+        this.icon = signal('');
+        this.iconSpin = signal(false);
+        this.scrollHeightSignal = signal(0);
+        this.classMap = computed(() => ({
+            [`${XListPrefix}-${this.size()}`]: this.size() ? true : false
+        }));
         this.role = 'listbox';
         this.tabindex = -1;
         this.itemSizeMap = {
@@ -432,94 +411,101 @@ class XListComponent extends XListProperty {
             large: 32,
             big: 36
         };
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
-        this.i18n = inject(XI18nService);
-        this.group = inject(X_LIST_DROP_GROUP, { optional: true, skipSelf: true });
-        this.configService = inject(XConfigService);
+        this.itemSize = computed(() => this.itemSizeMap[this.size()]);
+        this.isEmpty = computed(() => XIsEmpty(this.nodes()));
+        this.getSelectAllText = computed(() => this.selectAllText() || this.locale().selectAllText);
+        this.getLoadMoreText = computed(() => this.loadMoreText() || this.locale().loadMoreText);
+        this.getLoadingMoreText = computed(() => this.loadingMoreText() || this.locale().loadingMoreText);
+        this.minBufferPxSignal = computed(() => {
+            if (this.virtualScroll() && this.heightAdaption()) {
+                return this.getVirtualScrollHeight();
+            }
+            else {
+                return this.minBufferPx();
+            }
+        });
+        this.maxBufferPxSignal = computed(() => {
+            if (this.virtualScroll() && this.heightAdaption()) {
+                return this.getVirtualScrollHeight() * 1.2;
+            }
+            else {
+                return this.maxBufferPx();
+            }
+        });
         afterRender(() => {
-            if (this.virtualScroll && this.scrollHeight) {
-                this.virtualBody?.checkViewportSize();
+            if (this.virtualScroll() && this.scrollHeight()) {
+                this.virtualBody()?.checkViewportSize();
             }
         }, { phase: AfterRenderPhase.MixedReadWrite });
     }
-    ngOnInit() {
-        this.i18n.localeChange
-            .pipe(map((x) => x.list), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
-        });
-    }
     ngOnChanges(changes) {
         const { data } = changes;
         XIsChange(data) && this.setData();
     }
     ngAfterViewInit() {
         this.initKeyManager();
-        if (this.virtualScroll && this.heightAdaption) {
+        if (this.virtualScroll() && this.heightAdaption()) {
             this.setVirtualScrollHeight();
-            XResize(this.heightAdaption)
-                .pipe(debounceTime(30), takeUntil(this._unSubject))
+            XResize(this.heightAdaption())
+                .pipe(debounceTime(30), takeUntil(this.unSubject))
                 .subscribe((x) => {
-                this._resizeObserver = x.resizeObserver;
+                this.resizeObserver = x.resizeObserver;
                 this.setVirtualScrollHeight();
             });
         }
-        if (this.group && this.dropList) {
-            this.group.dropLists.add(this.dropList);
+        else {
+            this.scrollHeightSignal.set(this.scrollHeight());
+        }
+        if (this.group && this.dropList()) {
+            this.group.dropLists.add(this.dropList());
             this.group.setConnectedTo();
         }
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-        this._resizeObserver?.disconnect();
-        this.group?.dropLists.delete(this.dropList);
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
+        this.group?.dropLists.delete(this.dropList());
     }
     setVirtualScrollHeight() {
-        this.scrollHeight = this.heightAdaption.clientHeight;
-        this.minBufferPx = this.getVirtualScrollHeight;
-        this.maxBufferPx = this.getVirtualScrollHeight * 1.2;
-        this.virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPx;
-        this.virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPx;
-        this.cdr.detectChanges();
+        this.scrollHeightSignal.set(this.heightAdaption().clientHeight);
+        this.virtualBody()['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
+        this.virtualBody()['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPxSignal();
     }
     setData() {
-        if (this.loadMore) {
-            this.icon = 'fto-loader';
-            this.iconSpin = true;
+        if (this.loadMore()) {
+            this.icon.set('fto-loader');
+            this.iconSpin.set(true);
         }
-        XSetData(this.data, this._unSubject, true, this.loadMoreIndex).subscribe((x) => {
-            if (this.loadMore) {
-                this.nodes = [...this.nodes, ...x];
-                this.icon = '';
-                this.iconSpin = false;
+        XSetData(this.data(), this.unSubject, true, this.loadMoreIndex()).subscribe((x) => {
+            if (this.loadMore()) {
+                this.nodes.update((y) => [...y, ...x]);
+                this.icon.set('');
+                this.iconSpin.set(false);
             }
             else {
-                this.nodes = x;
+                this.nodes.set(x);
             }
             this.setSelected();
             this.setKeyManager();
-            this.cdr.detectChanges();
         });
     }
     initKeyManager() {
         this.keyManager = new ActiveDescendantKeyManager(this.options).withWrap();
-        this.keyManager.tabOut.pipe(takeUntil(this._unSubject)).subscribe(() => {
+        this.keyManager.tabOut.pipe(takeUntil(this.unSubject)).subscribe(() => {
             this.setUnActive(this.keyManager.activeItemIndex);
             this.keyManagerTabOut.emit();
         });
-        this.keyManager.change.pipe(takeUntil(this._unSubject)).subscribe((num) => {
+        this.keyManager.change.pipe(takeUntil(this.unSubject)).subscribe((num) => {
             this.setScorllTop(num);
             this.keyManagerChange.emit(num);
         });
     }
     setScorllTop(_num) {
-        if (!this.scrollElement || !this.keyManager.activeItem)
+        let list = this.scrollElement();
+        if (!list || !this.keyManager.activeItem)
             return;
         let ele = this.keyManager.activeItem.elementRef.nativeElement;
-        let list = this.scrollElement;
         let min = list.scrollTop;
         let max = list.scrollTop + list.clientHeight;
         if (ele.offsetTop + ele.clientHeight > max) {
@@ -531,61 +517,66 @@ class XListComponent extends XListProperty {
         }
     }
     setSelected() {
-        if (this.nodes.length > 0) {
-            this.nodes
+        const nodes = this.nodes();
+        const value = this.value();
+        const objectArray = this.objectArray();
+        if (nodes.length > 0) {
+            nodes
                 .filter((x) => x.selected)
                 .map((x) => {
                 x.selected = false;
             });
             let valArry = [];
-            if (this.value instanceof Array) {
-                valArry = this.value;
-                if (valArry.length === this.nodes.length) {
-                    this.isSelectAll = true;
+            if (value instanceof Array) {
+                valArry = value;
+                if (valArry.length === nodes.length) {
+                    this.isSelectAll.set(true);
                 }
             }
             else {
-                valArry = [this.value];
+                valArry = [value];
             }
             let ids = [];
             let selectedNodes = [];
-            if (this.objectArray) {
+            if (objectArray) {
                 ids = valArry.filter((x) => !XIsUndefined(x) && !XIsNull(x)).map((x) => x.id);
             }
             else {
                 ids = valArry;
             }
             for (let id of ids) {
-                let node = this.nodes.find((x) => x.id === id);
+                let node = nodes.find((x) => x.id === id);
                 if (node) {
                     node.selected = true;
                     selectedNodes.push(node);
                 }
             }
-            this.selectedNodes = selectedNodes;
+            this.selectedNodes.set(selectedNodes);
         }
     }
     setKeyManager() {
-        if (XIsUndefined(this.keyManager) || XIsUndefined(this.nodes) || this.nodes.length === 0)
+        if (XIsUndefined(this.keyManager) || XIsEmpty(this.nodes()))
             return;
         let activeIndex = 0;
-        if (XIsEmpty(this.value)) {
+        let value = this.value();
+        let objectArray = this.objectArray();
+        if (XIsEmpty(value)) {
             this.keyManager.updateActiveItem(activeIndex);
             return;
         }
         let valArry = [];
-        if (this.value instanceof Array) {
-            valArry = this.value;
+        if (value instanceof Array) {
+            valArry = value;
         }
         else {
-            valArry = [this.value];
+            valArry = [value];
         }
         const first = valArry[0];
-        if (this.objectArray) {
-            activeIndex = this.nodes.findIndex((x) => x.id === first.id);
+        if (objectArray) {
+            activeIndex = this.nodes().findIndex((x) => x.id === first.id);
         }
         else {
-            activeIndex = this.nodes.findIndex((x) => x.id === first);
+            activeIndex = this.nodes().findIndex((x) => x.id === first);
         }
         this.keyManager.updateActiveItem(activeIndex);
         this.setScorllTop(activeIndex);
@@ -597,26 +588,27 @@ class XListComponent extends XListProperty {
         }
         if (node.disabled)
             return;
-        if (node.selected && this.multiple === 1) {
+        if (node.selected && this.multiple() === 1) {
             node.event = event;
             this.nodeClick.emit(node);
             return;
         }
         const selected = !node.selected;
         if (selected) {
-            if (this.selectedNodes.length < Number(this.multiple) || this.multiple === 0) {
+            if (this.selectedNodes().length < this.multiple() || this.multiple() === 0 || isNaN(this.multiple())) {
                 node.selected = selected;
-                this.selectedNodes = [...this.selectedNodes, node];
-                if (this.selectedNodes.length === this.nodes.length) {
-                    this.isSelectAll = true;
+                this.selectedNodes.update((x) => [...x, node]);
+                if (this.selectedNodes().length === this.nodes().length) {
+                    this.isSelectAll.set(true);
                 }
-                this.cdr.detectChanges();
             }
-            else if (this.multiple === 1 && this.selectedNodes.length === 1) {
+            else if (this.multiple() === 1 && this.selectedNodes().length === 1) {
                 node.selected = selected;
-                this.selectedNodes[0].selected = false;
-                this.selectedNodes[0] = node;
-                this.cdr.detectChanges();
+                this.selectedNodes.update((x) => {
+                    x[0].selected = false;
+                    x[0] = node;
+                    return [...x];
+                });
             }
             else {
                 return;
@@ -624,18 +616,20 @@ class XListComponent extends XListProperty {
         }
         else {
             node.selected = selected;
-            this.selectedNodes.splice(this.selectedNodes.findIndex((x) => x.id == node.id), 1);
-            this.isSelectAll = false;
+            this.selectedNodes.update((x) => {
+                x.splice(x.findIndex((x) => x.id == node.id), 1);
+                return [...x];
+            });
+            this.isSelectAll.set(false);
         }
-        if (this.multiple === 1 && this.selectedNodes.length === 1) {
-            this.value = this.objectArray ? this.selectedNodes[0] : this.selectedNodes[0].id;
+        if (this.multiple() === 1 && this.selectedNodes().length === 1) {
+            this.value.set(this.objectArray() ? this.selectedNodes()[0] : this.selectedNodes()[0].id);
         }
         else {
-            this.value = this.objectArray ? this.selectedNodes : this.selectedNodes.map((x) => x.id);
+            this.value.set(this.objectArray() ? this.selectedNodes() : this.selectedNodes().map((x) => x.id));
         }
         if (this.onChange)
-            this.onChange(this.value);
-        this.cdr.detectChanges();
+            this.onChange(this.value());
         node.event = event;
         this.nodeClick.emit(node);
     }
@@ -656,41 +650,43 @@ class XListComponent extends XListProperty {
         this.nodeMouseleave.emit(node);
     }
     dropCdk(event) {
-        moveItemInArray(this.nodes, event.previousIndex, event.currentIndex);
+        this.nodes.update((x) => {
+            moveItemInArray(x, event.previousIndex, event.currentIndex);
+            return [...x];
+        });
         this.dropListDropped.emit({
-            data: this.nodes,
-            current: this.nodes[event.currentIndex],
+            data: this.nodes(),
+            current: this.nodes()[event.currentIndex],
             currentIndex: event.currentIndex,
             event: event
         });
-        this.cdr.detectChanges();
     }
     predicate(_drag, _drop) {
         return true;
     }
     onSelectAllNodes() {
-        this.isSelectAll = !this.isSelectAll;
-        if (this.isSelectAll) {
-            this.nodes.map((x) => {
-                x.selected = true;
-                return x;
+        this.isSelectAll.update((x) => !x);
+        if (this.isSelectAll()) {
+            this.nodes.update((x) => {
+                x.forEach((y) => (y.selected = true));
+                return [...x];
             });
-            this.selectedNodes = [...this.nodes];
+            this.selectedNodes.set(this.nodes());
         }
         else {
-            this.nodes.map((x) => {
-                x.selected = false;
-                return x;
+            this.nodes.update((x) => {
+                x.forEach((y) => (y.selected = false));
+                return [...x];
             });
-            this.selectedNodes = [];
+            this.selectedNodes.set([]);
         }
-        this.value = this.objectArray ? this.selectedNodes : this.selectedNodes.map((x) => x.id);
+        this.value.set(this.objectArray() ? this.selectedNodes() : this.selectedNodes().map((x) => x.id));
         if (this.onChange)
-            this.onChange(this.value);
-        this.onSelectAll.emit(this.isSelectAll);
+            this.onChange(this.value());
+        this.onSelectAll.emit(this.isSelectAll());
     }
     onLoadMore() {
-        this.loadMoreIndex++;
+        this.loadMoreIndex.update((x) => x + 1);
         this.setData();
     }
     trackByNode(_index, item) {
@@ -698,14 +694,15 @@ class XListComponent extends XListProperty {
     }
     setUnActive(num) {
         if (num > -1)
-            this.nodes[num].active = false;
+            this.nodes()[num].active = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent)], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true }, { propertyName: "listItems", first: true, predicate: ["listItems"], descendants: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\">\r\n  @if (header) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  }\r\n  @if (selectAll && multiple === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"getItemSize\"\r\n      [minBufferPx]=\"minBufferPx\"\r\n      [maxBufferPx]=\"maxBufferPx\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight\"\r\n      [hidden]=\"isEmpty\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked\"\r\n        [nodeTpl]=\"nodeTpl\"\r\n        [selected]=\"node.selected\"\r\n        [disabled]=\"node.disabled\"\r\n        [openPortal]=\"node.openPortal\"\r\n        [(active)]=\"node.active\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf\"\r\n        [size]=\"size\"\r\n        [keywordText]=\"keywordText\"\r\n        [caseSensitive]=\"caseSensitive\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-list-content\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes; track node.id) {\r\n        <x-list-option\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          [node]=\"node\"\r\n          [checked]=\"checked\"\r\n          [nodeTpl]=\"nodeTpl\"\r\n          [selected]=\"node.selected\"\r\n          [disabled]=\"node.disabled\"\r\n          [(active)]=\"node.active\"\r\n          [openPortal]=\"node.openPortal\"\r\n          [icon]=\"node.icon\"\r\n          [label]=\"node.label\"\r\n          [leaf]=\"node.leaf\"\r\n          [size]=\"size\"\r\n          [keywordText]=\"keywordText\"\r\n          [caseSensitive]=\"caseSensitive\"\r\n          (click)=\"onNodeClick($event, node)\"\r\n          (mouseenter)=\"onMouseenter($event, node)\"\r\n          (mouseleave)=\"onMouseleave($event, node)\"\r\n        ></x-list-option>\r\n      }\r\n    </div>\r\n  }\r\n  @if (loadMore && !isEmpty) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon && iconSpin) {\r\n        <x-icon [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      }\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  }\r\n  @if (isEmpty) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent)], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-list-content\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id) {\r\n        <x-list-option\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          [node]=\"node\"\r\n          [checked]=\"checked()\"\r\n          [nodeTpl]=\"nodeTpl()\"\r\n          [selected]=\"node.selected!\"\r\n          [forbidden]=\"node.disabled!\"\r\n          [active]=\"node.active!\"\r\n          (activeChange)=\"node.active = $event\"\r\n          [openPortal]=\"node.openPortal!\"\r\n          [icon]=\"node.icon\"\r\n          [label]=\"node.label\"\r\n          [leaf]=\"node.leaf!\"\r\n          [size]=\"size()\"\r\n          [keywordText]=\"keywordText()\"\r\n          [caseSensitive]=\"caseSensitive()\"\r\n          (click)=\"onNodeClick($event, node)\"\r\n          (mouseenter)=\"onMouseenter($event, node)\"\r\n          (mouseleave)=\"onMouseleave($event, node)\"\r\n        ></x-list-option>\r\n      }\r\n    </div>\r\n  }\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size()\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}\r\n    </ng-template>\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius)}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XListPrefix}`, standalone: true, imports: [
+                        NgClass,
                         FormsModule,
                         ReactiveFormsModule,
                         CdkDropList,
@@ -715,29 +712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         XEmptyComponent,
                         XListOptionComponent,
                         XOutletDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent)], template: "<div class=\"x-list\">\r\n  @if (header) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header\">{{ header }}</div>\r\n  }\r\n  @if (selectAll && multiple === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size\"\r\n        [label]=\"getSelectAllText\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"getItemSize\"\r\n      [minBufferPx]=\"minBufferPx\"\r\n      [maxBufferPx]=\"maxBufferPx\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight\"\r\n      [hidden]=\"isEmpty\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes; trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked\"\r\n        [nodeTpl]=\"nodeTpl\"\r\n        [selected]=\"node.selected\"\r\n        [disabled]=\"node.disabled\"\r\n        [openPortal]=\"node.openPortal\"\r\n        [(active)]=\"node.active\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf\"\r\n        [size]=\"size\"\r\n        [keywordText]=\"keywordText\"\r\n        [caseSensitive]=\"caseSensitive\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-list-content\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes; track node.id) {\r\n        <x-list-option\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          [node]=\"node\"\r\n          [checked]=\"checked\"\r\n          [nodeTpl]=\"nodeTpl\"\r\n          [selected]=\"node.selected\"\r\n          [disabled]=\"node.disabled\"\r\n          [(active)]=\"node.active\"\r\n          [openPortal]=\"node.openPortal\"\r\n          [icon]=\"node.icon\"\r\n          [label]=\"node.label\"\r\n          [leaf]=\"node.leaf\"\r\n          [size]=\"size\"\r\n          [keywordText]=\"keywordText\"\r\n          [caseSensitive]=\"caseSensitive\"\r\n          (click)=\"onNodeClick($event, node)\"\r\n          (mouseenter)=\"onMouseenter($event, node)\"\r\n          (mouseleave)=\"onMouseleave($event, node)\"\r\n        ></x-list-option>\r\n      }\r\n    </div>\r\n  }\r\n  @if (loadMore && !isEmpty) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon && iconSpin) {\r\n        <x-icon [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      }\r\n      {{ icon && iconSpin ? getLoadingMoreText : getLoadMoreText }}\r\n    </ng-template>\r\n  }\r\n  @if (isEmpty) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer\">{{ footer }}</div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{padding:0 .4rem;height:calc(var(--x-font-size) + 1rem);line-height:calc(var(--x-font-size) + 1rem);font-weight:700}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { headerRef: [{
-                type: ViewChild,
-                args: ['headerRef']
-            }], footerRef: [{
-                type: ViewChild,
-                args: ['footerRef']
-            }], selectAllRef: [{
-                type: ViewChild,
-                args: ['selectAllRef']
-            }], loadMoreRef: [{
-                type: ViewChild,
-                args: ['loadMoreRef']
-            }], virtualBody: [{
-                type: ViewChild,
-                args: ['virtualBody']
-            }], dropList: [{
-                type: ViewChild,
-                args: [CdkDropList]
-            }], listItems: [{
-                type: ViewChild,
-                args: ['listItems']
-            }], options: [{
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent)], template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-list-content\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id) {\r\n        <x-list-option\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          [node]=\"node\"\r\n          [checked]=\"checked()\"\r\n          [nodeTpl]=\"nodeTpl()\"\r\n          [selected]=\"node.selected!\"\r\n          [forbidden]=\"node.disabled!\"\r\n          [active]=\"node.active!\"\r\n          (activeChange)=\"node.active = $event\"\r\n          [openPortal]=\"node.openPortal!\"\r\n          [icon]=\"node.icon\"\r\n          [label]=\"node.label\"\r\n          [leaf]=\"node.leaf!\"\r\n          [size]=\"size()\"\r\n          [keywordText]=\"keywordText()\"\r\n          [caseSensitive]=\"caseSensitive()\"\r\n          (click)=\"onNodeClick($event, node)\"\r\n          (mouseenter)=\"onMouseenter($event, node)\"\r\n          (mouseleave)=\"onMouseleave($event, node)\"\r\n        ></x-list-option>\r\n      }\r\n    </div>\r\n  }\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option [size]=\"size()\" [nodeTpl]=\"loadMoreTpl\" (click)=\"onLoadMore()\"></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}\r\n    </ng-template>\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0;width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more,.x-list-content{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius)}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
                 type: ViewChildren,
                 args: [XListOptionComponent]
             }], role: [{
@@ -752,11 +728,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class XListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XListModule, imports: [XListComponent, XListDropGroup, XListOptionComponent], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListModule, imports: [XListComponent, XListOptionComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XListModule, imports: [XListComponent, XListDropGroup, XListOptionComponent], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListModule, imports: [XListComponent, XListOptionComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XListModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XListComponent, XListDropGroup, XListOptionComponent],