@ng-nest/ui 17.0.12 → 18.0.1

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

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, Renderer2, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XWithConfig, XInputBoolean, XInputNumber, XDataConvert, XConfigService, XIsChange, XClearClass, XIsEmpty, XResize, XIsUndefined } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
+import { input, model, output, Component, viewChild, computed, signal, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { XToBoolean, XToCssPixelValue, XToDataConvert, XToNumber, XIsUndefined, XIsChange, XResize, XIsEmpty } from '@ng-nest/ui/core';
+import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { XTableComponent } from '@ng-nest/ui/table';
 import { XDialogComponent } from '@ng-nest/ui/dialog';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import { Subject, Observable } from 'rxjs';
+import { tap, debounceTime, takeUntil } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
 import { XTreeComponent } from '@ng-nest/ui/tree';
 import { XTagComponent } from '@ng-nest/ui/tag';
 import { XEmptyComponent } from '@ng-nest/ui/empty';
@@ -16,6 +15,7 @@ import { XInputComponent } from '@ng-nest/ui/input';
 import { NgClass } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 /**
  * Find
@@ -23,582 +23,601 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  * @decorator component
  */
 const XFindPrefix = 'x-find';
-const X_CONFIG_NAME = 'find';
+const X_FIND_CONFIG_NAME = 'find';
 /**
  * Find Property
  */
-class XFindProperty extends XControlValueAccessor {
+class XFindProperty extends XFormControlFunction(X_FIND_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 显示边框
+         * @en_US Display Border
+         */
+        this.bordered = input(this.config?.bordered ?? true, { transform: XToBoolean });
         /**
          * @zh_CN 多选
          * @en_US Multiple choice
          */
-        this.multiple = false;
+        this.multiple = input(false, { transform: XToBoolean });
         /**
-         * @zh_CN 弹框显示，隐藏
-         * @en_US Bullet box display, hide
+         * @zh_CN 选中 label 名称字段
+         * @en_US Check the label name field
+         */
+        this.columnLabel = input(this.config?.columnLabel ?? 'label');
+        /**
+         * @zh_CN 弹框标题
+         * @en_US Bullet title
+         */
+        this.dialogTitle = input(this.config?.dialogTitle ?? '查找选择');
+        /**
+         * @zh_CN 弹框表格选择列头名称
+         * @en_US Ball Form Select List Name
+         */
+        this.dialogCheckboxLabel = input(this.config?.dialogCheckboxLabel ?? '选择');
+        /**
+         * @zh_CN 弹框表格选择列宽
+         * @en_US Ball Form Select List width
+         */
+        this.dialogCheckboxWidth = input(this.config?.dialogCheckboxWidth ?? '60px', {
+            transform: XToCssPixelValue
+        });
+        /**
+         * @zh_CN 弹框选择数据为空的提示信息
+         * @en_US Ball box selection data empty prompt information
+         */
+        this.dialogEmptyContent = input(this.config?.dialogEmptyContent ?? '请选择数据');
+        /**
+         * @zh_CN 弹框宽度
+         * @en_US Bullet frame width
+         */
+        this.dialogWidth = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 弹框高度
+         * @en_US Height of bullet frame
          */
-        this.dialogVisible = false;
+        this.dialogHeight = input('', { transform: XToCssPixelValue });
         /**
          * @zh_CN 弹框显示，隐藏
          * @en_US Bullet box display, hide
          */
-        this.dialogVisibleChange = new EventEmitter();
+        this.dialogVisible = model(false);
+        /**
+         * @zh_CN 按钮居中
+         * @en_US Button centered
+         */
+        this.dialogButtonsCenter = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 表格行数据
          * @en_US Table row data
          */
-        this.tableData = [];
+        this.tableData = input([], { transform: XToDataConvert });
         /**
-         * @zh_CN 表格查询条件
-         * @en_US Number of data items per page
+         * @zh_CN 表格页码
+         * @en_US Table page number
          */
-        this.tableQuery = {};
+        this.tableIndex = model(this.config?.tableIndex ?? 1);
         /**
-         * @zh_CN 表格数据总条数
-         * @en_US Total number of table data
+         * @zh_CN 表每页数据条数
+         * @en_US Number of data items per page
          */
-        this.tableTotal = 0;
+        this.tableSize = model(this.config?.tableSize ?? 10);
         /**
-         * @zh_CN 页码变化的事件
-         * @en_US Page number change event
+         * @zh_CN 表格查询条件
+         * @en_US Number of data items per page
          */
-        this.tableIndexChange = new EventEmitter();
+        this.tableQuery = model({});
         /**
-         * @zh_CN 每页显示条数变化的事件
-         * @en_US Show the number of events on each page
+         * @zh_CN 表格数据总条数
+         * @en_US Total number of table data
          */
-        this.tableSizeChange = new EventEmitter();
+        this.tableTotal = model(0);
         /**
          * @zh_CN 排序点击的事件
          * @en_US Sort click events
          */
-        this.tableSortChange = new EventEmitter();
+        this.tableSortChange = output();
         /**
          * @zh_CN 表格列参数
          * @en_US Table column parameters
          */
-        this.tableColumns = [];
+        this.tableColumns = input([]);
+        /**
+         * @zh_CN 当前选中行数据
+         * @en_US Currently selected row data
+         */
+        this.tableActivatedRow = model();
         /**
          * @zh_CN 表格行点击事件
          * @en_US Table row click event
          */
-        this.tableRowEmit = new EventEmitter();
+        this.tableRowEmit = output();
         /**
          * @zh_CN 表格行点击事件
          * @en_US Table row click event
          */
-        this.tableCheckedRow = {};
+        this.tableCheckedRow = model({});
+        /**
+         * @zh_CN 是否启用加载 loading
+         * @en_US Whether to enable loading loading
+         */
+        this.tableLoading = input(this.config?.tableLoading ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 表格开启虚拟滚动
+         * @en_US Table opens virtual scrolling
+         */
+        this.tableVirtualScroll = input(this.config?.tableVirtualScroll ?? false, {
+            transform: XToBoolean
+        });
+        /**
+         * @zh_CN 表格 body 数据高度
+         * @en_US Table body data height
+         */
+        this.tableBodyHeight = input(null, { transform: XToNumber });
         /**
          * @zh_CN 表格超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数
          * @en_US The table exceeds the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
          */
-        this.tableMinBufferPx = 100;
+        this.tableMinBufferPx = input(100, { transform: XToNumber });
         /**
          * @zh_CN 表格渲染新数据缓冲区的像素，对应 cdk scroll 中的参数
          * @en_US The pixels of the new data buffer for the table rendering, corresponding to the parameters in cdk scroll
          */
-        this.tableMaxBufferPx = 200;
+        this.tableMaxBufferPx = input(200, { transform: XToNumber });
+        /**
+         * @zh_CN 表格自适应高度，table 高度等于屏幕高度减掉此处设置的数值
+         * @en_US Table adaptive height, table height is equal to the screen height minus the value set here
+         */
+        this.tableAdaptionHeight = input(null, { transform: XToNumber });
         /**
          * @zh_CN 表格文档高度百分比，弹窗百分比高度用到
          * @en_US Table document height percentage, used for pop-up window percentage height
          */
-        this.tableDocPercent = 1;
+        this.tableDocPercent = input(1, { transform: XToNumber });
+        /**
+         * @zh_CN 表格行高度，单位 px
+         * @en_US Table row height, unit px
+         */
+        this.tableRowHeight = input(this.config?.tableRowHeight ?? 42, { transform: XToNumber });
         /**
          * @zh_CN 树节点数据
          * @en_US Tree node data
          */
-        this.treeData = [];
+        this.treeData = input([], { transform: XToDataConvert });
+        /**
+         * @zh_CN 树当前激活的节点 Id
+         * @en_US Id of the currently active node of the tree
+         */
+        this.treeActivatedId = model();
         /**
-         * @zh_CN 树当前点击选中的节点变化的事件
-         * @en_US The event of the tree currently clicked on the selected node change
+         * @zh_CN 树默认展开的层级
+         * @en_US The level of the tree expanded by default
          */
-        this.treeActivatedChange = new EventEmitter();
+        this.treeExpandedLevel = input(this.config?.treeExpandedLevel ?? 0, { transform: XToNumber });
         /**
          * @zh_CN 树 checkbox 选中的节点
          * @en_US Tree checkbox selected node
          */
-        this.treeChecked = [];
+        this.treeChecked = model([]);
+        /**
+         * @zh_CN 树显示多选框
+         * @en_US Tree display checkbox
+         */
+        this.treeCheckbox = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 树和表格同时存在的时候，树节点 id 对应表格的属性，用来做表格数据过滤
+         * @en_US When the tree and the table exist at the same time, the tree node id corresponds to the attribute of the table, which is used to filter the table data
+         */
+        this.treeTableConnect = input();
+        /**
+         * @zh_CN 数据查询过滤表单
+         * @en_US form for data filter
+         */
+        this.search = model(null);
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 输入框点击样式
+         * @en_US Input pointer
+         */
+        this.pointer = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 标签
+         * @en_US Label
+         */
+        this.label = input('');
+        /**
+         * @zh_CN 标签宽度
+         * @en_US Label width
+         */
+        this.labelWidth = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 标签文字对齐方式
+         * @en_US Label text alignment method
+         */
+        this.labelAlign = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素水平排列方式
+         * @en_US The level of sub-element level arrangement under flex layout
+         */
+        this.justify = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素垂直排列方式
+         * @en_US sub-element vertical arrangement method under flex layout
+         */
+        this.align = input('start');
+        /**
+         * @zh_CN flex 布局下的子元素排列方向
+         * @en_US The direction of the sub-element arrangement under flex layout
+         */
+        this.direction = input('column');
+        /**
+         * @zh_CN 输入提示信息
+         * @en_US Enter prompt information
+         */
+        this.placeholder = input('');
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 必填
+         * @en_US Required
+         */
+        this.required = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 只读
+         * @en_US Readonly
+         */
+        this.readonly = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 值模板
+         * @en_US Node template
+         */
+        this.valueTpl = input();
+        /**
+         * @zh_CN 值模板参数
+         * @en_US Node template
+         */
+        this.valueTplContext = input();
+        /**
+         * @zh_CN 前置标签
+         * @en_US Before label
+         */
+        this.before = input();
+        /**
+         * @zh_CN 后置标签
+         * @en_US After label
+         */
+        this.after = input();
+        /**
+         * @zh_CN 正则验证规则
+         * @en_US Regular verification rules
+         */
+        this.pattern = input(null);
+        /**
+         * @zh_CN 验证不通过提示文字
+         * @en_US Verify not pass the prompt text
+         */
+        this.message = input([]);
+        /**
+         * @zh_CN 激活状态
+         * @en_US Activation state
+         */
+        this.active = model(false);
+        /**
+         * @zh_CN 输入验证函数
+         * @en_US Enter the verification function
+         */
+        this.inputValidator = input();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XFindProperty, selector: "x-find-property", inputs: { size: "size", bordered: "bordered", multiple: "multiple", columnLabel: "columnLabel", dialogTitle: "dialogTitle", dialogCheckboxLabel: "dialogCheckboxLabel", dialogCheckboxWidth: "dialogCheckboxWidth", dialogEmptyContent: "dialogEmptyContent", dialogWidth: "dialogWidth", dialogHeight: "dialogHeight", dialogVisible: "dialogVisible", dialogButtonsCenter: "dialogButtonsCenter", tableData: "tableData", tableIndex: "tableIndex", tableSize: "tableSize", tableQuery: "tableQuery", tableTotal: "tableTotal", tableColumns: "tableColumns", tableActivatedRow: "tableActivatedRow", tableCheckedRow: "tableCheckedRow", tableLoading: "tableLoading", tableVirtualScroll: "tableVirtualScroll", tableBodyHeight: "tableBodyHeight", tableMinBufferPx: "tableMinBufferPx", tableMaxBufferPx: "tableMaxBufferPx", tableAdaptionHeight: "tableAdaptionHeight", tableDocPercent: "tableDocPercent", tableRowHeight: "tableRowHeight", treeData: "treeData", treeActivatedId: "treeActivatedId", treeExpandedLevel: "treeExpandedLevel", treeChecked: "treeChecked", treeCheckbox: "treeCheckbox", treeTableConnect: "treeTableConnect", search: "search" }, outputs: { dialogVisibleChange: "dialogVisibleChange", tableIndexChange: "tableIndexChange", tableSizeChange: "tableSizeChange", tableSortChange: "tableSortChange", tableRowEmit: "tableRowEmit", treeActivatedChange: "treeActivatedChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XFindProperty, selector: "x-find-property", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, columnLabel: { classPropertyName: "columnLabel", publicName: "columnLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogCheckboxLabel: { classPropertyName: "dialogCheckboxLabel", publicName: "dialogCheckboxLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogCheckboxWidth: { classPropertyName: "dialogCheckboxWidth", publicName: "dialogCheckboxWidth", isSignal: true, isRequired: false, transformFunction: null }, dialogEmptyContent: { classPropertyName: "dialogEmptyContent", publicName: "dialogEmptyContent", isSignal: true, isRequired: false, transformFunction: null }, dialogWidth: { classPropertyName: "dialogWidth", publicName: "dialogWidth", isSignal: true, isRequired: false, transformFunction: null }, dialogHeight: { classPropertyName: "dialogHeight", publicName: "dialogHeight", isSignal: true, isRequired: false, transformFunction: null }, dialogVisible: { classPropertyName: "dialogVisible", publicName: "dialogVisible", isSignal: true, isRequired: false, transformFunction: null }, dialogButtonsCenter: { classPropertyName: "dialogButtonsCenter", publicName: "dialogButtonsCenter", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, tableIndex: { classPropertyName: "tableIndex", publicName: "tableIndex", isSignal: true, isRequired: false, transformFunction: null }, tableSize: { classPropertyName: "tableSize", publicName: "tableSize", isSignal: true, isRequired: false, transformFunction: null }, tableQuery: { classPropertyName: "tableQuery", publicName: "tableQuery", isSignal: true, isRequired: false, transformFunction: null }, tableTotal: { classPropertyName: "tableTotal", publicName: "tableTotal", isSignal: true, isRequired: false, transformFunction: null }, tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: false, transformFunction: null }, tableActivatedRow: { classPropertyName: "tableActivatedRow", publicName: "tableActivatedRow", isSignal: true, isRequired: false, transformFunction: null }, tableCheckedRow: { classPropertyName: "tableCheckedRow", publicName: "tableCheckedRow", isSignal: true, isRequired: false, transformFunction: null }, tableLoading: { classPropertyName: "tableLoading", publicName: "tableLoading", isSignal: true, isRequired: false, transformFunction: null }, tableVirtualScroll: { classPropertyName: "tableVirtualScroll", publicName: "tableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, tableBodyHeight: { classPropertyName: "tableBodyHeight", publicName: "tableBodyHeight", isSignal: true, isRequired: false, transformFunction: null }, tableMinBufferPx: { classPropertyName: "tableMinBufferPx", publicName: "tableMinBufferPx", isSignal: true, isRequired: false, transformFunction: null }, tableMaxBufferPx: { classPropertyName: "tableMaxBufferPx", publicName: "tableMaxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, tableAdaptionHeight: { classPropertyName: "tableAdaptionHeight", publicName: "tableAdaptionHeight", isSignal: true, isRequired: false, transformFunction: null }, tableDocPercent: { classPropertyName: "tableDocPercent", publicName: "tableDocPercent", isSignal: true, isRequired: false, transformFunction: null }, tableRowHeight: { classPropertyName: "tableRowHeight", publicName: "tableRowHeight", isSignal: true, isRequired: false, transformFunction: null }, treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: false, transformFunction: null }, treeActivatedId: { classPropertyName: "treeActivatedId", publicName: "treeActivatedId", isSignal: true, isRequired: false, transformFunction: null }, treeExpandedLevel: { classPropertyName: "treeExpandedLevel", publicName: "treeExpandedLevel", isSignal: true, isRequired: false, transformFunction: null }, treeChecked: { classPropertyName: "treeChecked", publicName: "treeChecked", isSignal: true, isRequired: false, transformFunction: null }, treeCheckbox: { classPropertyName: "treeCheckbox", publicName: "treeCheckbox", isSignal: true, isRequired: false, transformFunction: null }, treeTableConnect: { classPropertyName: "treeTableConnect", publicName: "treeTableConnect", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dialogVisible: "dialogVisibleChange", tableIndex: "tableIndexChange", tableSize: "tableSizeChange", tableQuery: "tableQueryChange", tableTotal: "tableTotalChange", tableSortChange: "tableSortChange", tableActivatedRow: "tableActivatedRowChange", tableRowEmit: "tableRowEmit", tableCheckedRow: "tableCheckedRowChange", treeActivatedId: "treeActivatedIdChange", treeChecked: "treeCheckedChange", search: "searchChange", active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XFindProperty.prototype, "size", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, true)
-], XFindProperty.prototype, "bordered", void 0);
-__decorate([
-    XInputBoolean()
-], XFindProperty.prototype, "multiple", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'label')
-], XFindProperty.prototype, "columnLabel", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '查找选择')
-], XFindProperty.prototype, "dialogTitle", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '选择')
-], XFindProperty.prototype, "dialogCheckboxLabel", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 60),
-    XInputNumber()
-], XFindProperty.prototype, "dialogCheckboxWidth", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '请选择数据')
-], XFindProperty.prototype, "dialogEmptyContent", void 0);
-__decorate([
-    XInputBoolean()
-], XFindProperty.prototype, "dialogVisible", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XFindProperty.prototype, "dialogButtonsCenter", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 1)
-], XFindProperty.prototype, "tableIndex", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 10)
-], XFindProperty.prototype, "tableSize", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XFindProperty.prototype, "tableLoading", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XFindProperty.prototype, "tableVirtualScroll", void 0);
-__decorate([
-    XInputNumber()
-], XFindProperty.prototype, "tableBodyHeight", void 0);
-__decorate([
-    XInputNumber()
-], XFindProperty.prototype, "tableAdaptionHeight", void 0);
-__decorate([
-    XInputNumber()
-], XFindProperty.prototype, "tableDocPercent", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 42),
-    XInputNumber()
-], XFindProperty.prototype, "tableRowHeight", void 0);
-__decorate([
-    XDataConvert()
-], XFindProperty.prototype, "treeData", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 0),
-    XInputNumber()
-], XFindProperty.prototype, "treeExpandedLevel", void 0);
-__decorate([
-    XInputBoolean()
-], XFindProperty.prototype, "treeCheckbox", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XFindPrefix}-property`, template: '' }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], columnLabel: [{
-                type: Input
-            }], dialogTitle: [{
-                type: Input
-            }], dialogCheckboxLabel: [{
-                type: Input
-            }], dialogCheckboxWidth: [{
-                type: Input
-            }], dialogEmptyContent: [{
-                type: Input
-            }], dialogWidth: [{
-                type: Input
-            }], dialogHeight: [{
-                type: Input
-            }], dialogVisible: [{
-                type: Input
-            }], dialogVisibleChange: [{
-                type: Output
-            }], dialogButtonsCenter: [{
-                type: Input
-            }], tableData: [{
-                type: Input
-            }], tableIndex: [{
-                type: Input
-            }], tableSize: [{
-                type: Input
-            }], tableQuery: [{
-                type: Input
-            }], tableTotal: [{
-                type: Input
-            }], tableIndexChange: [{
-                type: Output
-            }], tableSizeChange: [{
-                type: Output
-            }], tableSortChange: [{
-                type: Output
-            }], tableColumns: [{
-                type: Input
-            }], tableActivatedRow: [{
-                type: Input
-            }], tableRowEmit: [{
-                type: Output
-            }], tableCheckedRow: [{
-                type: Input
-            }], tableLoading: [{
-                type: Input
-            }], tableVirtualScroll: [{
-                type: Input
-            }], tableBodyHeight: [{
-                type: Input
-            }], tableMinBufferPx: [{
-                type: Input
-            }], tableMaxBufferPx: [{
-                type: Input
-            }], tableAdaptionHeight: [{
-                type: Input
-            }], tableDocPercent: [{
-                type: Input
-            }], tableRowHeight: [{
-                type: Input
-            }], treeData: [{
-                type: Input
-            }], treeActivatedChange: [{
-                type: Output
-            }], treeActivatedId: [{
-                type: Input
-            }], treeExpandedLevel: [{
-                type: Input
-            }], treeChecked: [{
-                type: Input
-            }], treeCheckbox: [{
-                type: Input
-            }], treeTableConnect: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }] } });
+        }] });
 
 class XFindComponent extends XFindProperty {
     constructor() {
         super(...arguments);
-        this.height = 100;
-        this._unSubject = new Subject();
-        this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
-        this.configService = inject(XConfigService);
-    }
-    get tableRef() {
-        return this._tableRef;
-    }
-    set tableRef(value) {
-        this._tableRef = value;
-        if (value && this.multiple) {
-            this.setSubscribe();
-        }
-    }
-    get treeRef() {
-        return this._treeRef;
-    }
-    set treeRef(value) {
-        this._treeRef = value;
-        if (value && this.multiple) {
-            this.setSubscribe();
-        }
-    }
-    get getEmpty() {
-        return !this.temp || this.temp.length === 0;
-    }
-    get hasTable() {
-        return this.tableColumns?.length > 0;
-    }
-    get hasTree() {
-        return ((Array.isArray(this.treeData) && this.treeData.length > 0) ||
-            this.treeData instanceof Function ||
-            this.treeData instanceof Observable);
-    }
-    get hasTreeTable() {
-        return this.hasTable && this.hasTree;
-    }
-    get hasTreeMultiple() {
-        return this.hasTree && !this.hasTreeTable && this.multiple;
-    }
-    get hasSearch() {
-        return this.search && this.hasTable;
+        this.find = viewChild.required('find');
+        this.dialogCom = viewChild.required('dialogCom');
+        this.tableCom = viewChild('tableCom');
+        this.treeCom = viewChild('treeCom');
+        this.buttonCom = viewChild.required('buttonCom');
+        this.tableRef = viewChild('tableRef');
+        this.treeRef = viewChild('treeRef');
+        this.tableRefChanged = toObservable(this.tableRef)
+            .pipe(tap((x) => x && this.multiple() && this.setSubscribe()))
+            .subscribe();
+        this.treeRefChanged = toObservable(this.treeRef)
+            .pipe(tap((x) => x && this.multiple() && this.setSubscribe()))
+            .subscribe();
+        this.tableColumnsSignal = computed(() => {
+            if (!this.multiple())
+                return this.tableColumns();
+            if (this.hasTable()) {
+                if (!this.tableColumns().find((x) => x.rowChecked)) {
+                    return [
+                        {
+                            id: '$checked',
+                            label: this.dialogCheckboxLabel(),
+                            rowChecked: true,
+                            type: 'checkbox',
+                            width: this.dialogCheckboxWidth()
+                        },
+                        ...this.tableColumns()
+                    ];
+                }
+            }
+            return this.tableColumns();
+        });
+        this.getEmpty = computed(() => !this.temp() || this.temp().length === 0);
+        this.hasTable = computed(() => this.tableColumns().length > 0);
+        this.hasTree = computed(() => (Array.isArray(this.treeData()) && this.treeData().length > 0) ||
+            this.treeData() instanceof Function ||
+            this.treeData() instanceof Observable);
+        this.hasTreeTable = computed(() => this.hasTable() && this.hasTree());
+        this.hasTreeMultiple = computed(() => this.hasTree() && !this.hasTreeTable() && this.multiple());
+        this.hasSearch = computed(() => this.search() && this.hasTable());
+        this.dialogWidthSignal = computed(() => {
+            if (XIsUndefined(this.dialogWidth())) {
+                if ((this.hasTable() && this.hasTree()) || this.hasTable()) {
+                    return '50rem';
+                }
+                else if (this.hasTree() && this.multiple()) {
+                    return '30rem';
+                }
+                else if (this.hasTree()) {
+                    return '20rem';
+                }
+            }
+            return this.dialogWidth();
+        });
+        this.temp = signal(undefined);
+        this.height = signal(100);
+        this.unSubject = new Subject();
+        this.classMap = computed(() => ({
+            [`${XFindPrefix}-${this.size()}`]: !!this.size(),
+            [`x-justify-${this.justify()}`]: !!this.justify(),
+            [`x-align-${this.align()}`]: !!this.align(),
+            [`x-direction-${this.direction()}`]: !!this.direction()
+        }));
+        this.labelMapSignal = computed(() => ({
+            [`x-text-align-${this.labelAlign()}`]: !!this.labelAlign()
+        }));
     }
     writeValue(value) {
-        this.value = value;
-        this.cdr.detectChanges();
+        this.value.set(value);
     }
     ngOnChanges(simples) {
-        const { tableData, labelAlign, size } = simples;
+        const { tableData } = simples;
         XIsChange(tableData) && this.setTableCheckedRow();
-        XIsChange(labelAlign, size) && this.setClassMap();
-    }
-    ngOnInit() {
-        this.setFlex(this.find.nativeElement, this.renderer, this.justify, this.align, this.direction);
-        this.setClassMap();
-        this.setMultiple();
-        this.setWidth();
-    }
-    ngAfterViewInit() {
-        if (this.value)
-            this.cdr.detectChanges();
     }
     ngOnDestroy() {
-        this._resizeObserver?.disconnect();
-    }
-    setClassMap() {
-        XClearClass(this.labelMap, this.classMap);
-        this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
-        this.classMap[`x-find-${this.size}`] = !XIsEmpty(this.size);
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
     }
     setSubscribe() {
         let resizeRef = [];
-        if (this.hasTable) {
-            resizeRef = [this.tableRef?.nativeElement];
+        if (this.hasTable()) {
+            resizeRef = [this.tableRef().nativeElement];
         }
-        if (this.hasTree && !this.hasTreeTable) {
-            resizeRef.push(this.treeRef?.nativeElement);
+        if (this.hasTree() && !this.hasTreeTable()) {
+            resizeRef.push(this.treeRef().nativeElement);
         }
-        this._unSubject.next();
+        this.unSubject.next();
+        if (resizeRef.length === 0)
+            return;
         XResize(...resizeRef)
-            .pipe(debounceTime(30), takeUntil(this._unSubject))
+            .pipe(debounceTime(30), takeUntil(this.unSubject))
             .subscribe((x) => {
-            this._resizeObserver = x.resizeObserver;
-            if (this.tableRef) {
-                this.height = this.tableRef.nativeElement.clientHeight;
+            this.resizeObserver = x.resizeObserver;
+            if (this.tableRef()) {
+                this.height.set(this.tableRef().nativeElement.clientHeight);
             }
-            else if (this.hasTree) {
-                this.height = this.treeRef?.nativeElement.clientHeight;
+            else if (this.hasTree()) {
+                this.height.set(this.treeRef().nativeElement.clientHeight);
             }
-            this.cdr.detectChanges();
         });
     }
-    setMultiple() {
-        if (!this.multiple)
-            return;
-        if (this.hasTable) {
-            if (!this.tableColumns.find((x) => x.rowChecked)) {
-                this.tableColumns = [
-                    {
-                        id: '$checked',
-                        label: this.dialogCheckboxLabel,
-                        rowChecked: true,
-                        type: 'checkbox',
-                        width: this.dialogCheckboxWidth
-                    },
-                    ...this.tableColumns
-                ];
-            }
-        }
-    }
-    setWidth() {
-        if (XIsUndefined(this.dialogWidth)) {
-            if ((this.hasTable && this.hasTree) || this.hasTable) {
-                this.dialogWidth = '50rem';
-            }
-            else if (this.hasTree && this.multiple) {
-                this.dialogWidth = '30rem';
-            }
-            else if (this.hasTree) {
-                this.dialogWidth = '20rem';
-            }
-        }
-    }
     showModal() {
-        if (this.disabled)
+        if (this.disabledComputed())
             return;
-        this.dialogVisible = true;
-        this.dialogVisibleChange.emit(this.dialogVisible);
-        if (this.value) {
-            if (this.multiple) {
-                this.temp = this.value.map((x) => Object.assign({}, x));
+        this.dialogVisible.set(true);
+        if (this.value()) {
+            if (this.multiple()) {
+                this.temp.set(this.value().map((x) => Object.assign({}, x)));
                 this.setTableCheckedRow();
                 this.setTreeChecked();
             }
             else {
-                this.tableActivatedRow = this.value;
-                if (!this.hasTreeTable && this.hasTree) {
-                    this.treeActivatedId = this.value.id;
+                this.tableActivatedRow.set(this.value());
+                if (!this.hasTreeTable() && this.hasTree()) {
+                    this.treeActivatedId.set(this.value().id);
                 }
             }
         }
         else {
-            this.temp = this.multiple ? [] : null;
+            this.temp.set(this.multiple() ? [] : undefined);
         }
-        if (this.hasTable) {
-            this.tableCom.virtualBody?.scrollToIndex(0);
-            this.tableCom.virtualBody?.checkViewportSize();
+        if (this.hasTable()) {
+            this.tableCom()?.virtualBody()?.scrollToIndex(0);
+            this.tableCom()?.virtualBody()?.checkViewportSize();
         }
-        this.cdr.detectChanges();
     }
     setTableCheckedRow() {
-        if (!this.multiple || XIsUndefined(this.temp))
+        if (!this.multiple() || XIsUndefined(this.temp()))
             return;
-        const ids = this.temp.map((x) => x.id);
-        this.tableCheckedRow = {
-            ...this.tableCheckedRow,
+        const ids = this.temp().map((x) => x.id);
+        this.tableCheckedRow.update((x) => ({
+            ...x,
             $checked: ids
-        };
+        }));
     }
     setTreeChecked() {
-        if (this.hasTreeMultiple)
-            this.treeChecked = this.temp.map((x) => x.id);
+        if (this.hasTreeMultiple())
+            this.treeChecked.set(this.temp().map((x) => x.id));
     }
     sure() {
-        this.value = this.temp;
-        this.onChange(this.value);
+        this.value.set(this.temp());
+        this.onChange && this.onChange(this.value());
         this.formControlValidator();
-        this.cdr.detectChanges();
-    }
-    closeModal() {
-        this.cdr.detectChanges();
     }
     dialogCloseDone() {
-        if (this.hasTree) {
-            this.treeActivatedId = null;
-            this.temp = null;
+        if (this.hasTree()) {
+            this.treeActivatedId.set(null);
+            this.temp.set(null);
         }
     }
     tempClose(index, item) {
-        this.temp.splice(index, 1);
-        if (this.hasTable) {
-            let it = this.tableCom?.tableData.find((x) => item.id === x.id);
+        this.temp.update((x) => {
+            x.splice(index, 1);
+            return [...x];
+        });
+        if (this.hasTable()) {
+            let it = this.tableCom()
+                .tableData()
+                .find((x) => item.id === x.id);
             if (it) {
                 it['$checked'] = false;
-                this.tableCom?.bodyChange();
             }
         }
-        else if (this.hasTree) {
-            let it = this.treeCom?.treeData.find((x) => item.id === x.id);
+        else if (this.hasTree()) {
+            let it = this.treeCom()
+                .treeData()
+                .find((x) => item.id === x.id);
             if (it) {
                 it.checked = false;
                 it.change && it.change();
-                this.treeCom?.cdr.detectChanges();
             }
         }
-        this.cdr.detectChanges();
     }
     tagClose(index = -1) {
         if (index >= 0) {
-            this.value.splice(index, 1);
+            this.value.update((x) => {
+                x.splice(index, 1);
+                return [...x];
+            });
         }
         else {
-            this.value = null;
-            this.tableActivatedRow = null;
-            if (!this.hasTreeTable && this.hasTree) {
-                this.treeActivatedId = null;
+            this.value.set(null);
+            this.tableActivatedRow.set(null);
+            if (!this.hasTreeTable() && this.hasTree()) {
+                this.treeActivatedId.set(null);
             }
         }
-        this.onChange(this.value);
+        this.onChange && this.onChange(this.value());
         this.formControlValidator();
-        this.cdr.detectChanges();
     }
     tableActivatedRowChange(data) {
-        if (this.multiple) {
+        if (this.multiple()) {
             this.rowMultiple(data);
         }
         else {
-            this.temp = data;
-            this.dialogVisible = false;
+            this.temp.set(data);
+            this.dialogVisible.set(false);
             this.sure();
         }
     }
     rowMultiple(data) {
-        if (typeof this.temp === 'undefined')
-            this.temp = [];
-        // data['$checked'] = !data['$checked'];
+        if (typeof this.temp() === 'undefined')
+            this.temp.set([]);
         if (data['$checked']) {
-            this.temp = [...this.temp, data];
+            this.temp.update((x) => {
+                if (XIsEmpty(x))
+                    x = [];
+                x.push(data);
+                return x;
+            });
         }
         else {
-            this.temp.splice(this.temp.findIndex((x) => x.id === data.id), 1);
+            this.temp.update((x) => {
+                x.splice(x.findIndex((x) => x.id === data.id), 1);
+                return [...x];
+            });
         }
-        this.cdr.detectChanges();
     }
     treeMultiple(node) {
-        if (typeof this.temp === 'undefined')
-            this.temp = [];
-        // node.$checked = !node.$checked;
+        if (typeof this.temp() === 'undefined')
+            this.temp.set([]);
         if (node.checked) {
-            this.temp = [...this.temp, node];
+            this.temp.update((x) => [...x, node]);
         }
         else {
-            this.temp.splice(this.temp.findIndex((x) => x.id === node.id), 1);
+            this.temp.update((x) => {
+                x.splice(x.findIndex((x) => x.id === node.id), 1);
+                return [...x];
+            });
         }
-        this.cdr.detectChanges();
     }
     treeActivatedClick(node) {
-        if (!this.hasTreeTable && this.hasTree) {
-            if (this.multiple) {
-                // this.treeMultiple(node);
-            }
-            else {
-                this.temp = node;
+        if (!this.hasTreeTable() && this.hasTree()) {
+            if (!this.multiple()) {
+                this.temp.set(node);
             }
         }
-        else if (this.hasTreeTable && this.treeTableConnect) {
-            if (!this.tableQuery)
-                this.tableQuery = {};
-            if (!this.tableQuery.filter)
-                this.tableQuery.filter = [];
-            let field = this.tableQuery.filter.find((x) => x.field === this.treeTableConnect);
+        else if (this.hasTreeTable() && this.treeTableConnect()) {
+            const tableQuery = this.tableQuery();
+            if (!tableQuery.filter)
+                tableQuery.filter = [];
+            let field = tableQuery.filter.find((x) => x.field === this.treeTableConnect());
             if (field) {
                 field.value = node.id;
                 field.operation = '=';
             }
             else {
-                this.tableQuery.filter = [
-                    ...this.tableQuery.filter,
-                    { field: this.treeTableConnect, value: node.id, operation: '=' }
-                ];
+                tableQuery.filter = [...tableQuery.filter, { field: this.treeTableConnect(), value: node.id, operation: '=' }];
             }
-            this.tableCom.change(1);
-            this.treeActivatedId = node.id;
+            this.tableQuery.set(tableQuery);
+            this.tableCom().change(1);
+            this.treeActivatedId.set(node.id);
         }
-        this.treeActivatedChange.emit(node);
-        this.cdr.detectChanges();
     }
     treeCheckboxChange(node) {
         this.treeMultiple(node);
     }
     formControlChanges() {
-        this.ngOnInit();
-        this.ngAfterViewInit();
-        this.treeCom?.setData();
-        this.cdr.detectChanges();
+        this.treeCom()?.setData();
     }
     searchKeyDown(event) {
         if (event.key === 'Enter') {
             this.searchClick();
         }
         else if (event.key === 'Delete') {
-            this.search.value = '';
+            this.search.update((x) => {
+                x.value = '';
+                return { ...x };
+            });
         }
     }
     searchClick() {
-        if (!this.hasSearch) {
+        if (!this.hasSearch()) {
             return;
         }
-        this.tableQuery = this.tableQuery || [];
-        this.tableQuery.filter = this.tableQuery.filter || [];
-        const field = this.tableQuery.filter.find((x) => x.field === this.search.field);
+        const tableQuery = this.tableQuery() || {};
+        tableQuery.filter = tableQuery.filter || [];
+        const field = tableQuery.filter.find((x) => x.field === this.search().field);
         if (field) {
-            field.value = this.search.value || '';
+            field.value = this.search().value || '';
         }
         else {
-            this.tableQuery.filter = [...this.tableQuery?.filter, this.search];
+            tableQuery.filter = [...tableQuery.filter, this.search()];
         }
-        this.tableCom.change(1);
-        this.cdr.detectChanges();
+        this.tableQuery.set(tableQuery);
+        this.tableCom().change(1);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XFindComponent, isStandalone: true, selector: "x-find", providers: [XValueAccessor(XFindComponent)], viewQueries: [{ propertyName: "find", first: true, predicate: ["find"], descendants: true, static: true }, { propertyName: "dialogCom", first: true, predicate: ["dialogCom"], descendants: true }, { propertyName: "tableCom", first: true, predicate: ["tableCom"], descendants: true }, { propertyName: "treeCom", first: true, predicate: ["treeCom"], descendants: true }, { propertyName: "buttonCom", first: true, predicate: ["buttonCom"], descendants: true }, { propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }, { propertyName: "treeRef", first: true, predicate: ["treeRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #find\r\n  class=\"x-find\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-checked]=\"value\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  @if (label) {\r\n    <label [class.x-find-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  }\r\n  <div class=\"x-find-row\">\r\n    <x-button\r\n      #buttonCom\r\n      icon=\"fto-search\"\r\n      [onlyIcon]=\"!bordered\"\r\n      [size]=\"size\"\r\n      [disabled]=\"disabled\"\r\n      attrType=\"button\"\r\n      (click)=\"showModal()\"\r\n    ></x-button>\r\n    <div class=\"x-find-tags\">\r\n      @if (multiple) {\r\n        @for (item of value; track item.id; let i = $index) {\r\n          <x-tag closable [size]=\"size\" [bordered]=\"bordered\" [disabled]=\"disabled\" (close)=\"tagClose(i)\">{{\r\n            item[columnLabel]\r\n          }}</x-tag>\r\n        }\r\n      } @else if (value) {\r\n        <x-tag closable [disabled]=\"disabled\" [bordered]=\"bordered\" [size]=\"size\" (close)=\"tagClose()\">{{\r\n          value[columnLabel]\r\n        }}</x-tag>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<x-dialog\r\n  #dialogCom\r\n  [title]=\"dialogTitle\"\r\n  [width]=\"dialogWidth\"\r\n  [height]=\"dialogHeight\"\r\n  [buttonsCenter]=\"dialogButtonsCenter\"\r\n  [className]=\"'x-find-dialog-container'\"\r\n  [(visible)]=\"dialogVisible\"\r\n  (visibleChange)=\"dialogVisibleChange.emit($event)\"\r\n  (closeDone)=\"dialogCloseDone()\"\r\n  (cancel)=\"closeModal()\"\r\n  (close)=\"closeModal()\"\r\n  (confirm)=\"sure()\"\r\n>\r\n  <div class=\"x-find-dialog\" [class.x-find-dialog-tree-table]=\"hasTable && hasTree\">\r\n    @if (hasTree) {\r\n      <div class=\"x-find-dialog-tree\" #treeRef [style.height.px]=\"hasTreeTable && multiple && height\">\r\n        <x-tree\r\n          #treeCom\r\n          [data]=\"treeData\"\r\n          nodeHeight=\"1.8\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [activatedId]=\"treeActivatedId\"\r\n          [expandedLevel]=\"treeExpandedLevel\"\r\n          (activatedChange)=\"treeActivatedClick($event)\"\r\n          [checkbox]=\"hasTreeMultiple\"\r\n          [checked]=\"treeChecked\"\r\n          (checkboxChange)=\"treeCheckboxChange($event)\"\r\n          [levelCheck]=\"!hasTreeMultiple\"\r\n        ></x-tree>\r\n      </div>\r\n    }\r\n    @if (hasTable) {\r\n      <div class=\"x-find-dialog-table\" #tableRef>\r\n        @if (hasSearch) {\r\n          <div class=\"x-find-search\">\r\n            <x-input\r\n              [label]=\"search.label\"\r\n              direction=\"row\"\r\n              (xKeydown)=\"searchKeyDown($event)\"\r\n              [(ngModel)]=\"search.value\"\r\n            ></x-input>\r\n            <x-button type=\"primary\" plain (click)=\"searchClick()\">{{ search.button || '\u67E5\u8BE2' }}</x-button>\r\n          </div>\r\n        }\r\n        <x-table\r\n          #tableCom\r\n          [data]=\"tableData\"\r\n          [columns]=\"tableColumns\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [(index)]=\"tableIndex\"\r\n          [(size)]=\"tableSize\"\r\n          [query]=\"tableQuery\"\r\n          [total]=\"tableTotal\"\r\n          [allowSelectRow]=\"!multiple\"\r\n          [allowCheckRow]=\"multiple\"\r\n          [checkedRow]=\"tableCheckedRow\"\r\n          [loading]=\"tableLoading\"\r\n          (indexChange)=\"tableIndexChange.emit($event)\"\r\n          (sortChange)=\"tableSortChange.emit($event)\"\r\n          [(activatedRow)]=\"tableActivatedRow\"\r\n          (activatedRowChange)=\"tableActivatedRowChange($event)\"\r\n          [rowHeight]=\"tableRowHeight\"\r\n          [bodyHeight]=\"tableBodyHeight\"\r\n          [virtualScroll]=\"tableVirtualScroll\"\r\n          [minBufferPx]=\"tableMinBufferPx\"\r\n          [maxBufferPx]=\"tableMaxBufferPx\"\r\n          [adaptionHeight]=\"tableAdaptionHeight\"\r\n          [docPercent]=\"tableDocPercent\"\r\n        ></x-table>\r\n      </div>\r\n    }\r\n    @if (multiple) {\r\n      <div class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty\" [style.height.px]=\"height\">\r\n        @if (getEmpty) {\r\n          <x-empty [content]=\"dialogEmptyContent\"></x-empty>\r\n        }\r\n        <div class=\"x-find-dialog-tags\">\r\n          @for (item of temp; track item.id; let i = $index) {\r\n            <x-tag closable (close)=\"tempClose(i, item)\">\r\n              <span>{{ item[columnLabel] }}</span>\r\n            </x-tag>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</x-dialog>\r\n\r\n<ng-template #treeLabelTpl let-node=\"$node\">\r\n  <div class=\"x-find-dialog-tree-node\">\r\n    <span>{{ node.label }} </span>\r\n    @if (node.$checked) {\r\n      <x-icon type=\"fto-check\"></x-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-find{margin:0;padding:0;width:100%}.x-find.x-flex{display:flex}.x-find.x-justify-start{justify-content:flex-start}.x-find.x-justify-center{justify-content:center}.x-find.x-justify-end{justify-content:flex-end}.x-find.x-justify-space-between{justify-content:space-between}.x-find.x-justify-space-around{justify-content:space-around}.x-find.x-align-start{align-items:flex-start}.x-find.x-align-center{align-items:center}.x-find.x-align-end{align-items:flex-end}.x-find.x-direction-column{flex-direction:column}.x-find.x-direction-column-reverse{flex-direction:column-reverse}.x-find.x-direction-row{flex-direction:row}.x-find.x-direction-row-reverse{flex-direction:row-reverse}.x-find>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-find>label.x-text-align-start{text-align:start}.x-find>label.x-text-align-center{text-align:center}.x-find>label.x-text-align-end{text-align:end}.x-find-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-find-row{flex:1;display:flex;align-items:flex-start;position:relative}.x-find-tags{margin:-.0625rem -.0625rem -.0625rem .4375rem}.x-find-tags>x-tag{margin:.0625rem}.x-find.x-required>label{color:var(--x-danger)}.x-find.x-direction-row>label{padding:0 .5rem 0 0}.x-find.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-find.x-direction-column,.x-find.x-direction-column-reverse{align-items:inherit}.x-find-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-find-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-find-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-find-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-find-small .x-find-tags{margin-top:-.1875rem}.x-find-small .x-find-tags>x-tag{margin-top:.125rem}.x-find-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-find-mini .x-find-tags{margin-top:-.25rem}.x-find-mini .x-find-tags>x-tag{margin-top:.125rem}.x-find-dialog{flex:1;display:flex}.x-find-dialog-table{flex:1;min-height:18.75rem;height:fit-content}.x-find-dialog-tree{flex:1;min-height:18.75rem;max-height:25rem;overflow-y:auto}.x-find-dialog-tree .x-tree-node-content.x-activated{color:var(--x-primary)}.x-find-dialog-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between}.x-find-dialog-tree-node>span{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}.x-find-dialog-tree-table .x-find-dialog-tree{flex:initial;min-height:initial;max-height:initial;width:14rem;margin-right:1rem;padding-right:1rem;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-find-dialog-checked{margin-left:1rem;border-left:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:1rem;width:10rem;overflow-y:auto;height:100%}.x-find-dialog-checked x-tag{display:block}.x-find-dialog-checked x-tag:not(:first-child){margin-top:.5rem}.x-find-dialog-checked x-tag .x-tag{width:100%;display:flex;justify-content:space-between}.x-find-dialog-checked x-tag .x-tag>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-find-dialog-checked.x-find-empty{display:flex;align-items:center;justify-content:center}.x-find-dialog-container .x-dialog-content{overflow:initial}.x-find-search{display:flex;padding:.3rem}.x-find-search .x-input,.x-find-search x-input{width:15rem}.x-find-search .x-button{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XDialogComponent, selector: "x-dialog" }, { kind: "component", type: XTableComponent, selector: "x-table" }, { kind: "component", type: XTreeComponent, selector: "x-tree" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XInputComponent, selector: "x-input" }], 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: XFindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XFindComponent, isStandalone: true, selector: "x-find", providers: [XValueAccessor(XFindComponent)], viewQueries: [{ propertyName: "find", first: true, predicate: ["find"], descendants: true, isSignal: true }, { propertyName: "dialogCom", first: true, predicate: ["dialogCom"], descendants: true, isSignal: true }, { propertyName: "tableCom", first: true, predicate: ["tableCom"], descendants: true, isSignal: true }, { propertyName: "treeCom", first: true, predicate: ["treeCom"], descendants: true, isSignal: true }, { propertyName: "buttonCom", first: true, predicate: ["buttonCom"], descendants: true, isSignal: true }, { propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, isSignal: true }, { propertyName: "treeRef", first: true, predicate: ["treeRef"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #find\r\n  class=\"x-find\"\r\n  [class.x-flex]=\"justify() || align() || direction()\"\r\n  [class.x-checked]=\"value()\"\r\n  [class.x-disabled]=\"disabledComputed()\"\r\n  [class.x-required]=\"requiredIsEmpty()\"\r\n  [class.x-invalid]=\"invalid()\"\r\n  [ngClass]=\"classMap()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-find-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div class=\"x-find-row\">\r\n    <x-button\r\n      #buttonCom\r\n      icon=\"fto-search\"\r\n      [onlyIcon]=\"!bordered()\"\r\n      [size]=\"size()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      attrType=\"button\"\r\n      (click)=\"showModal()\"\r\n      flat\r\n      plain\r\n    ></x-button>\r\n    <div class=\"x-find-tags\">\r\n      @if (multiple()) {\r\n        @for (item of value(); track item.id; let i = $index) {\r\n          <x-tag\r\n            closable\r\n            [size]=\"size()\"\r\n            [bordered]=\"bordered()\"\r\n            [disabled]=\"disabledComputed()\"\r\n            (close)=\"tagClose(i)\"\r\n            >{{ item[columnLabel()] }}</x-tag\r\n          >\r\n        }\r\n      } @else if (value()) {\r\n        <x-tag closable [disabled]=\"disabledComputed()\" [bordered]=\"bordered()\" [size]=\"size()\" (close)=\"tagClose()\">{{\r\n          value()[columnLabel()]\r\n        }}</x-tag>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<x-dialog\r\n  #dialogCom\r\n  [title]=\"dialogTitle()\"\r\n  [width]=\"dialogWidthSignal()\"\r\n  [height]=\"dialogHeight()\"\r\n  [buttonsCenter]=\"dialogButtonsCenter()\"\r\n  [className]=\"'x-find-dialog-container'\"\r\n  [(visible)]=\"dialogVisible\"\r\n  (closeDone)=\"dialogCloseDone()\"\r\n  (confirm)=\"sure()\"\r\n>\r\n  <div class=\"x-find-dialog\" [class.x-find-dialog-tree-table]=\"hasTable() && hasTree()\">\r\n    @if (hasTree()) {\r\n      <div class=\"x-find-dialog-tree\" #treeRef [style.height.px]=\"hasTreeTable() && multiple() && height()\">\r\n        <x-tree\r\n          #treeCom\r\n          [data]=\"treeData()\"\r\n          [nodeHeight]=\"'1.8rem'\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [activatedId]=\"treeActivatedId()\"\r\n          [expandedLevel]=\"treeExpandedLevel()\"\r\n          (activatedChange)=\"treeActivatedClick($event)\"\r\n          [checkbox]=\"hasTreeMultiple()\"\r\n          [checked]=\"treeChecked()\"\r\n          (checkboxChange)=\"treeCheckboxChange($event)\"\r\n          [levelCheck]=\"!hasTreeMultiple()\"\r\n        ></x-tree>\r\n      </div>\r\n    }\r\n    @if (hasTable()) {\r\n      <div class=\"x-find-dialog-table\" #tableRef>\r\n        @if (hasSearch()) {\r\n          <div class=\"x-find-search\">\r\n            <x-input\r\n              [label]=\"search()!.label!\"\r\n              direction=\"row\"\r\n              (xKeydown)=\"searchKeyDown($event)\"\r\n              [(ngModel)]=\"search()!.value\"\r\n            ></x-input>\r\n            <x-button plain text (click)=\"searchClick()\">{{ search()!.button || '\u67E5\u8BE2' }}</x-button>\r\n          </div>\r\n        }\r\n        <x-table\r\n          #tableCom\r\n          [data]=\"tableData()\"\r\n          [columns]=\"tableColumnsSignal()\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [(index)]=\"tableIndex\"\r\n          [(size)]=\"tableSize\"\r\n          [(query)]=\"tableQuery\"\r\n          [(total)]=\"tableTotal\"\r\n          [allowSelectRow]=\"!multiple()\"\r\n          [allowCheckRow]=\"multiple()\"\r\n          [checkedRow]=\"tableCheckedRow()\"\r\n          [loading]=\"tableLoading()\"\r\n          (sortChange)=\"tableSortChange.emit($event)\"\r\n          [(activatedRow)]=\"tableActivatedRow\"\r\n          (activatedRowChange)=\"tableActivatedRowChange($event!)\"\r\n          [rowHeight]=\"tableRowHeight()\"\r\n          [bodyHeight]=\"tableBodyHeight()!\"\r\n          [virtualScroll]=\"tableVirtualScroll()\"\r\n          [minBufferPx]=\"tableMinBufferPx()\"\r\n          [maxBufferPx]=\"tableMaxBufferPx()\"\r\n          [adaptionHeight]=\"tableAdaptionHeight()!\"\r\n          [docPercent]=\"tableDocPercent()\"\r\n        ></x-table>\r\n      </div>\r\n    }\r\n    @if (multiple()) {\r\n      <div class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty()\" [style.height.px]=\"height()\">\r\n        @if (getEmpty()) {\r\n          <x-empty [content]=\"dialogEmptyContent()\"></x-empty>\r\n        }\r\n        <div class=\"x-find-dialog-tags\">\r\n          @for (item of temp(); track item.id; let i = $index) {\r\n            <x-tag closable (close)=\"tempClose(i, item)\">\r\n              <span>{{ item[columnLabel()] }}</span>\r\n            </x-tag>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</x-dialog>\r\n\r\n<ng-template #treeLabelTpl let-node=\"$node\">\r\n  <div class=\"x-find-dialog-tree-node\">\r\n    <span>{{ node.label }} </span>\r\n    @if (node.$checked) {\r\n      <x-icon type=\"fto-check\"></x-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-find{margin:0;padding:0;width:100%}.x-find.x-flex{display:flex}.x-find.x-justify-start{justify-content:flex-start}.x-find.x-justify-center{justify-content:center}.x-find.x-justify-end{justify-content:flex-end}.x-find.x-justify-space-between{justify-content:space-between}.x-find.x-justify-space-around{justify-content:space-around}.x-find.x-align-start{align-items:flex-start}.x-find.x-align-center{align-items:center}.x-find.x-align-end{align-items:flex-end}.x-find.x-direction-column{flex-direction:column}.x-find.x-direction-column-reverse{flex-direction:column-reverse}.x-find.x-direction-row{flex-direction:row}.x-find.x-direction-row-reverse{flex-direction:row-reverse}.x-find>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-find>label.x-text-align-start{text-align:start}.x-find>label.x-text-align-center{text-align:center}.x-find>label.x-text-align-end{text-align:end}.x-find-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-find-row{flex:1;display:flex;align-items:flex-start;position:relative}.x-find-tags{margin:-.0625rem -.0625rem -.0625rem .4375rem}.x-find-tags>x-tag{margin:.0625rem}.x-find.x-required>label{color:var(--x-danger)}.x-find.x-direction-row>label{padding:0 .5rem 0 0}.x-find.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-find.x-direction-column,.x-find.x-direction-column-reverse{align-items:inherit}.x-find-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-find-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-find-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-find-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-find-small .x-find-tags{margin-top:-.1875rem}.x-find-small .x-find-tags>x-tag{margin-top:.125rem}.x-find-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-find-mini .x-find-tags{margin-top:-.25rem}.x-find-mini .x-find-tags>x-tag{margin-top:.125rem}.x-find-dialog{flex:1;display:flex}.x-find-dialog-table{flex:1;min-height:18.75rem;height:fit-content}.x-find-dialog-tree{flex:1;min-height:18.75rem;max-height:25rem;overflow-y:auto}.x-find-dialog-tree .x-tree-node-content.x-activated{color:var(--x-primary)}.x-find-dialog-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between}.x-find-dialog-tree-node>span{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}.x-find-dialog-tree-table .x-find-dialog-tree{flex:initial;min-height:initial;max-height:initial;width:14rem;margin-right:1rem;padding-right:1rem;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-find-dialog-checked{margin-left:1rem;border-left:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:1rem;width:10rem;overflow-y:auto;height:100%}.x-find-dialog-checked x-tag{display:block}.x-find-dialog-checked x-tag:not(:first-child){margin-top:.5rem}.x-find-dialog-checked x-tag .x-tag{width:100%;display:flex;justify-content:space-between}.x-find-dialog-checked x-tag .x-tag>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-find-dialog-checked.x-find-empty{display:flex;align-items:center;justify-content:center}.x-find-dialog-container .x-dialog-content{overflow:initial}.x-find-search{display:flex;padding:.3rem}.x-find-search .x-input,.x-find-search x-input{width:15rem}.x-find-search .x-button{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XTagComponent, selector: "x-tag" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XDialogComponent, selector: "x-dialog" }, { kind: "component", type: XTableComponent, selector: "x-table" }, { kind: "component", type: XTreeComponent, selector: "x-tree" }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XFindPrefix}`, standalone: true, imports: [
                         NgClass,
@@ -611,38 +630,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XTreeComponent,
                         XIconComponent,
                         XEmptyComponent,
-                        XInputComponent,
-                        XControlValueAccessor
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XFindComponent)], template: "<div\r\n  #find\r\n  class=\"x-find\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-checked]=\"value\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  @if (label) {\r\n    <label [class.x-find-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  }\r\n  <div class=\"x-find-row\">\r\n    <x-button\r\n      #buttonCom\r\n      icon=\"fto-search\"\r\n      [onlyIcon]=\"!bordered\"\r\n      [size]=\"size\"\r\n      [disabled]=\"disabled\"\r\n      attrType=\"button\"\r\n      (click)=\"showModal()\"\r\n    ></x-button>\r\n    <div class=\"x-find-tags\">\r\n      @if (multiple) {\r\n        @for (item of value; track item.id; let i = $index) {\r\n          <x-tag closable [size]=\"size\" [bordered]=\"bordered\" [disabled]=\"disabled\" (close)=\"tagClose(i)\">{{\r\n            item[columnLabel]\r\n          }}</x-tag>\r\n        }\r\n      } @else if (value) {\r\n        <x-tag closable [disabled]=\"disabled\" [bordered]=\"bordered\" [size]=\"size\" (close)=\"tagClose()\">{{\r\n          value[columnLabel]\r\n        }}</x-tag>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<x-dialog\r\n  #dialogCom\r\n  [title]=\"dialogTitle\"\r\n  [width]=\"dialogWidth\"\r\n  [height]=\"dialogHeight\"\r\n  [buttonsCenter]=\"dialogButtonsCenter\"\r\n  [className]=\"'x-find-dialog-container'\"\r\n  [(visible)]=\"dialogVisible\"\r\n  (visibleChange)=\"dialogVisibleChange.emit($event)\"\r\n  (closeDone)=\"dialogCloseDone()\"\r\n  (cancel)=\"closeModal()\"\r\n  (close)=\"closeModal()\"\r\n  (confirm)=\"sure()\"\r\n>\r\n  <div class=\"x-find-dialog\" [class.x-find-dialog-tree-table]=\"hasTable && hasTree\">\r\n    @if (hasTree) {\r\n      <div class=\"x-find-dialog-tree\" #treeRef [style.height.px]=\"hasTreeTable && multiple && height\">\r\n        <x-tree\r\n          #treeCom\r\n          [data]=\"treeData\"\r\n          nodeHeight=\"1.8\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [activatedId]=\"treeActivatedId\"\r\n          [expandedLevel]=\"treeExpandedLevel\"\r\n          (activatedChange)=\"treeActivatedClick($event)\"\r\n          [checkbox]=\"hasTreeMultiple\"\r\n          [checked]=\"treeChecked\"\r\n          (checkboxChange)=\"treeCheckboxChange($event)\"\r\n          [levelCheck]=\"!hasTreeMultiple\"\r\n        ></x-tree>\r\n      </div>\r\n    }\r\n    @if (hasTable) {\r\n      <div class=\"x-find-dialog-table\" #tableRef>\r\n        @if (hasSearch) {\r\n          <div class=\"x-find-search\">\r\n            <x-input\r\n              [label]=\"search.label\"\r\n              direction=\"row\"\r\n              (xKeydown)=\"searchKeyDown($event)\"\r\n              [(ngModel)]=\"search.value\"\r\n            ></x-input>\r\n            <x-button type=\"primary\" plain (click)=\"searchClick()\">{{ search.button || '\u67E5\u8BE2' }}</x-button>\r\n          </div>\r\n        }\r\n        <x-table\r\n          #tableCom\r\n          [data]=\"tableData\"\r\n          [columns]=\"tableColumns\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [(index)]=\"tableIndex\"\r\n          [(size)]=\"tableSize\"\r\n          [query]=\"tableQuery\"\r\n          [total]=\"tableTotal\"\r\n          [allowSelectRow]=\"!multiple\"\r\n          [allowCheckRow]=\"multiple\"\r\n          [checkedRow]=\"tableCheckedRow\"\r\n          [loading]=\"tableLoading\"\r\n          (indexChange)=\"tableIndexChange.emit($event)\"\r\n          (sortChange)=\"tableSortChange.emit($event)\"\r\n          [(activatedRow)]=\"tableActivatedRow\"\r\n          (activatedRowChange)=\"tableActivatedRowChange($event)\"\r\n          [rowHeight]=\"tableRowHeight\"\r\n          [bodyHeight]=\"tableBodyHeight\"\r\n          [virtualScroll]=\"tableVirtualScroll\"\r\n          [minBufferPx]=\"tableMinBufferPx\"\r\n          [maxBufferPx]=\"tableMaxBufferPx\"\r\n          [adaptionHeight]=\"tableAdaptionHeight\"\r\n          [docPercent]=\"tableDocPercent\"\r\n        ></x-table>\r\n      </div>\r\n    }\r\n    @if (multiple) {\r\n      <div class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty\" [style.height.px]=\"height\">\r\n        @if (getEmpty) {\r\n          <x-empty [content]=\"dialogEmptyContent\"></x-empty>\r\n        }\r\n        <div class=\"x-find-dialog-tags\">\r\n          @for (item of temp; track item.id; let i = $index) {\r\n            <x-tag closable (close)=\"tempClose(i, item)\">\r\n              <span>{{ item[columnLabel] }}</span>\r\n            </x-tag>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</x-dialog>\r\n\r\n<ng-template #treeLabelTpl let-node=\"$node\">\r\n  <div class=\"x-find-dialog-tree-node\">\r\n    <span>{{ node.label }} </span>\r\n    @if (node.$checked) {\r\n      <x-icon type=\"fto-check\"></x-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-find{margin:0;padding:0;width:100%}.x-find.x-flex{display:flex}.x-find.x-justify-start{justify-content:flex-start}.x-find.x-justify-center{justify-content:center}.x-find.x-justify-end{justify-content:flex-end}.x-find.x-justify-space-between{justify-content:space-between}.x-find.x-justify-space-around{justify-content:space-around}.x-find.x-align-start{align-items:flex-start}.x-find.x-align-center{align-items:center}.x-find.x-align-end{align-items:flex-end}.x-find.x-direction-column{flex-direction:column}.x-find.x-direction-column-reverse{flex-direction:column-reverse}.x-find.x-direction-row{flex-direction:row}.x-find.x-direction-row-reverse{flex-direction:row-reverse}.x-find>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-find>label.x-text-align-start{text-align:start}.x-find>label.x-text-align-center{text-align:center}.x-find>label.x-text-align-end{text-align:end}.x-find-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-find-row{flex:1;display:flex;align-items:flex-start;position:relative}.x-find-tags{margin:-.0625rem -.0625rem -.0625rem .4375rem}.x-find-tags>x-tag{margin:.0625rem}.x-find.x-required>label{color:var(--x-danger)}.x-find.x-direction-row>label{padding:0 .5rem 0 0}.x-find.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-find.x-direction-column,.x-find.x-direction-column-reverse{align-items:inherit}.x-find-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-find-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-find-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-find-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-find-small .x-find-tags{margin-top:-.1875rem}.x-find-small .x-find-tags>x-tag{margin-top:.125rem}.x-find-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-find-mini .x-find-tags{margin-top:-.25rem}.x-find-mini .x-find-tags>x-tag{margin-top:.125rem}.x-find-dialog{flex:1;display:flex}.x-find-dialog-table{flex:1;min-height:18.75rem;height:fit-content}.x-find-dialog-tree{flex:1;min-height:18.75rem;max-height:25rem;overflow-y:auto}.x-find-dialog-tree .x-tree-node-content.x-activated{color:var(--x-primary)}.x-find-dialog-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between}.x-find-dialog-tree-node>span{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}.x-find-dialog-tree-table .x-find-dialog-tree{flex:initial;min-height:initial;max-height:initial;width:14rem;margin-right:1rem;padding-right:1rem;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-find-dialog-checked{margin-left:1rem;border-left:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:1rem;width:10rem;overflow-y:auto;height:100%}.x-find-dialog-checked x-tag{display:block}.x-find-dialog-checked x-tag:not(:first-child){margin-top:.5rem}.x-find-dialog-checked x-tag .x-tag{width:100%;display:flex;justify-content:space-between}.x-find-dialog-checked x-tag .x-tag>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-find-dialog-checked.x-find-empty{display:flex;align-items:center;justify-content:center}.x-find-dialog-container .x-dialog-content{overflow:initial}.x-find-search{display:flex;padding:.3rem}.x-find-search .x-input,.x-find-search x-input{width:15rem}.x-find-search .x-button{margin-left:.5rem}\n"] }]
-        }], propDecorators: { find: [{
-                type: ViewChild,
-                args: ['find', { static: true }]
-            }], dialogCom: [{
-                type: ViewChild,
-                args: ['dialogCom']
-            }], tableCom: [{
-                type: ViewChild,
-                args: ['tableCom']
-            }], treeCom: [{
-                type: ViewChild,
-                args: ['treeCom']
-            }], buttonCom: [{
-                type: ViewChild,
-                args: ['buttonCom']
-            }], tableRef: [{
-                type: ViewChild,
-                args: ['tableRef']
-            }], treeRef: [{
-                type: ViewChild,
-                args: ['treeRef']
-            }] } });
+                        XInputComponent
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XFindComponent)], template: "<div\r\n  #find\r\n  class=\"x-find\"\r\n  [class.x-flex]=\"justify() || align() || direction()\"\r\n  [class.x-checked]=\"value()\"\r\n  [class.x-disabled]=\"disabledComputed()\"\r\n  [class.x-required]=\"requiredIsEmpty()\"\r\n  [class.x-invalid]=\"invalid()\"\r\n  [ngClass]=\"classMap()\"\r\n>\r\n  @if (label()) {\r\n    <label\r\n      [class.x-find-label-required]=\"requiredComputed()\"\r\n      [style.width]=\"labelWidth()\"\r\n      [ngClass]=\"labelMapSignal()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div class=\"x-find-row\">\r\n    <x-button\r\n      #buttonCom\r\n      icon=\"fto-search\"\r\n      [onlyIcon]=\"!bordered()\"\r\n      [size]=\"size()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      attrType=\"button\"\r\n      (click)=\"showModal()\"\r\n      flat\r\n      plain\r\n    ></x-button>\r\n    <div class=\"x-find-tags\">\r\n      @if (multiple()) {\r\n        @for (item of value(); track item.id; let i = $index) {\r\n          <x-tag\r\n            closable\r\n            [size]=\"size()\"\r\n            [bordered]=\"bordered()\"\r\n            [disabled]=\"disabledComputed()\"\r\n            (close)=\"tagClose(i)\"\r\n            >{{ item[columnLabel()] }}</x-tag\r\n          >\r\n        }\r\n      } @else if (value()) {\r\n        <x-tag closable [disabled]=\"disabledComputed()\" [bordered]=\"bordered()\" [size]=\"size()\" (close)=\"tagClose()\">{{\r\n          value()[columnLabel()]\r\n        }}</x-tag>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<x-dialog\r\n  #dialogCom\r\n  [title]=\"dialogTitle()\"\r\n  [width]=\"dialogWidthSignal()\"\r\n  [height]=\"dialogHeight()\"\r\n  [buttonsCenter]=\"dialogButtonsCenter()\"\r\n  [className]=\"'x-find-dialog-container'\"\r\n  [(visible)]=\"dialogVisible\"\r\n  (closeDone)=\"dialogCloseDone()\"\r\n  (confirm)=\"sure()\"\r\n>\r\n  <div class=\"x-find-dialog\" [class.x-find-dialog-tree-table]=\"hasTable() && hasTree()\">\r\n    @if (hasTree()) {\r\n      <div class=\"x-find-dialog-tree\" #treeRef [style.height.px]=\"hasTreeTable() && multiple() && height()\">\r\n        <x-tree\r\n          #treeCom\r\n          [data]=\"treeData()\"\r\n          [nodeHeight]=\"'1.8rem'\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [activatedId]=\"treeActivatedId()\"\r\n          [expandedLevel]=\"treeExpandedLevel()\"\r\n          (activatedChange)=\"treeActivatedClick($event)\"\r\n          [checkbox]=\"hasTreeMultiple()\"\r\n          [checked]=\"treeChecked()\"\r\n          (checkboxChange)=\"treeCheckboxChange($event)\"\r\n          [levelCheck]=\"!hasTreeMultiple()\"\r\n        ></x-tree>\r\n      </div>\r\n    }\r\n    @if (hasTable()) {\r\n      <div class=\"x-find-dialog-table\" #tableRef>\r\n        @if (hasSearch()) {\r\n          <div class=\"x-find-search\">\r\n            <x-input\r\n              [label]=\"search()!.label!\"\r\n              direction=\"row\"\r\n              (xKeydown)=\"searchKeyDown($event)\"\r\n              [(ngModel)]=\"search()!.value\"\r\n            ></x-input>\r\n            <x-button plain text (click)=\"searchClick()\">{{ search()!.button || '\u67E5\u8BE2' }}</x-button>\r\n          </div>\r\n        }\r\n        <x-table\r\n          #tableCom\r\n          [data]=\"tableData()\"\r\n          [columns]=\"tableColumnsSignal()\"\r\n          [(manual)]=\"dialogVisible\"\r\n          [(index)]=\"tableIndex\"\r\n          [(size)]=\"tableSize\"\r\n          [(query)]=\"tableQuery\"\r\n          [(total)]=\"tableTotal\"\r\n          [allowSelectRow]=\"!multiple()\"\r\n          [allowCheckRow]=\"multiple()\"\r\n          [checkedRow]=\"tableCheckedRow()\"\r\n          [loading]=\"tableLoading()\"\r\n          (sortChange)=\"tableSortChange.emit($event)\"\r\n          [(activatedRow)]=\"tableActivatedRow\"\r\n          (activatedRowChange)=\"tableActivatedRowChange($event!)\"\r\n          [rowHeight]=\"tableRowHeight()\"\r\n          [bodyHeight]=\"tableBodyHeight()!\"\r\n          [virtualScroll]=\"tableVirtualScroll()\"\r\n          [minBufferPx]=\"tableMinBufferPx()\"\r\n          [maxBufferPx]=\"tableMaxBufferPx()\"\r\n          [adaptionHeight]=\"tableAdaptionHeight()!\"\r\n          [docPercent]=\"tableDocPercent()\"\r\n        ></x-table>\r\n      </div>\r\n    }\r\n    @if (multiple()) {\r\n      <div class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty()\" [style.height.px]=\"height()\">\r\n        @if (getEmpty()) {\r\n          <x-empty [content]=\"dialogEmptyContent()\"></x-empty>\r\n        }\r\n        <div class=\"x-find-dialog-tags\">\r\n          @for (item of temp(); track item.id; let i = $index) {\r\n            <x-tag closable (close)=\"tempClose(i, item)\">\r\n              <span>{{ item[columnLabel()] }}</span>\r\n            </x-tag>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</x-dialog>\r\n\r\n<ng-template #treeLabelTpl let-node=\"$node\">\r\n  <div class=\"x-find-dialog-tree-node\">\r\n    <span>{{ node.label }} </span>\r\n    @if (node.$checked) {\r\n      <x-icon type=\"fto-check\"></x-icon>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.x-find{margin:0;padding:0;width:100%}.x-find.x-flex{display:flex}.x-find.x-justify-start{justify-content:flex-start}.x-find.x-justify-center{justify-content:center}.x-find.x-justify-end{justify-content:flex-end}.x-find.x-justify-space-between{justify-content:space-between}.x-find.x-justify-space-around{justify-content:space-around}.x-find.x-align-start{align-items:flex-start}.x-find.x-align-center{align-items:center}.x-find.x-align-end{align-items:flex-end}.x-find.x-direction-column{flex-direction:column}.x-find.x-direction-column-reverse{flex-direction:column-reverse}.x-find.x-direction-row{flex-direction:row}.x-find.x-direction-row-reverse{flex-direction:row-reverse}.x-find>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-find>label.x-text-align-start{text-align:start}.x-find>label.x-text-align-center{text-align:center}.x-find>label.x-text-align-end{text-align:end}.x-find-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-find-row{flex:1;display:flex;align-items:flex-start;position:relative}.x-find-tags{margin:-.0625rem -.0625rem -.0625rem .4375rem}.x-find-tags>x-tag{margin:.0625rem}.x-find.x-required>label{color:var(--x-danger)}.x-find.x-direction-row>label{padding:0 .5rem 0 0}.x-find.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-find.x-direction-column,.x-find.x-direction-column-reverse{align-items:inherit}.x-find-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-find-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-find-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-find-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-find-small .x-find-tags{margin-top:-.1875rem}.x-find-small .x-find-tags>x-tag{margin-top:.125rem}.x-find-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-find-mini .x-find-tags{margin-top:-.25rem}.x-find-mini .x-find-tags>x-tag{margin-top:.125rem}.x-find-dialog{flex:1;display:flex}.x-find-dialog-table{flex:1;min-height:18.75rem;height:fit-content}.x-find-dialog-tree{flex:1;min-height:18.75rem;max-height:25rem;overflow-y:auto}.x-find-dialog-tree .x-tree-node-content.x-activated{color:var(--x-primary)}.x-find-dialog-tree-node{flex:1;display:flex;align-items:center;justify-content:space-between}.x-find-dialog-tree-node>span{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}.x-find-dialog-tree-table .x-find-dialog-tree{flex:initial;min-height:initial;max-height:initial;width:14rem;margin-right:1rem;padding-right:1rem;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-find-dialog-checked{margin-left:1rem;border-left:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:1rem;width:10rem;overflow-y:auto;height:100%}.x-find-dialog-checked x-tag{display:block}.x-find-dialog-checked x-tag:not(:first-child){margin-top:.5rem}.x-find-dialog-checked x-tag .x-tag{width:100%;display:flex;justify-content:space-between}.x-find-dialog-checked x-tag .x-tag>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-find-dialog-checked.x-find-empty{display:flex;align-items:center;justify-content:center}.x-find-dialog-container .x-dialog-content{overflow:initial}.x-find-search{display:flex;padding:.3rem}.x-find-search .x-input,.x-find-search x-input{width:15rem}.x-find-search .x-button{margin-left:.5rem}\n"] }]
+        }] });
 
 class XFindModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XFindModule, imports: [XFindComponent], exports: [XFindComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindModule, imports: [XFindComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XFindModule, imports: [XFindComponent], exports: [XFindComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindModule, imports: [XFindComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFindModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFindModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XFindComponent],