@ng-nest/ui 15.0.20 → 16.0.1

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

@@ -0,0 +1,689 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i1 from '@ng-nest/ui/core';
+import { XWithConfig, XInputBoolean, XInputNumber, XDataConvert, XIsChange, XClearClass, XIsEmpty, XResize, XIsUndefined } from '@ng-nest/ui/core';
+import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@ng-nest/ui/tag';
+import { XTagModule } from '@ng-nest/ui/tag';
+import * as i5 from '@ng-nest/ui/button';
+import { XButtonModule } from '@ng-nest/ui/button';
+import * as i6 from '@ng-nest/ui/dialog';
+import { XDialogModule } from '@ng-nest/ui/dialog';
+import * as i7 from '@ng-nest/ui/table';
+import { XTableModule } from '@ng-nest/ui/table';
+import * as i8 from '@ng-nest/ui/tree';
+import { XTreeModule } from '@ng-nest/ui/tree';
+import * as i9 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i10 from '@ng-nest/ui/empty';
+import { XEmptyModule } from '@ng-nest/ui/empty';
+import * as i11 from '@ng-nest/ui/input';
+import { XInputModule } from '@ng-nest/ui/input';
+
+/**
+ * Find
+ * @selector x-find
+ * @decorator component
+ */
+const XFindPrefix = 'x-find';
+const X_CONFIG_NAME = 'find';
+/**
+ * Find Property
+ */
+class XFindProperty extends XControlValueAccessor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 多选
+         * @en_US Multiple choice
+         */
+        this.multiple = false;
+        /**
+         * @zh_CN 弹框显示，隐藏
+         * @en_US Bullet box display, hide
+         */
+        this.dialogVisible = false;
+        /**
+         * @zh_CN 弹框显示，隐藏
+         * @en_US Bullet box display, hide
+         */
+        this.dialogVisibleChange = new EventEmitter();
+        /**
+         * @zh_CN 表格行数据
+         * @en_US Table row data
+         */
+        this.tableData = [];
+        /**
+         * @zh_CN 表格查询条件
+         * @en_US Number of data items per page
+         */
+        this.tableQuery = {};
+        /**
+         * @zh_CN 表格数据总条数
+         * @en_US Total number of table data
+         */
+        this.tableTotal = 0;
+        /**
+         * @zh_CN 页码变化的事件
+         * @en_US Page number change event
+         */
+        this.tableIndexChange = new EventEmitter();
+        /**
+         * @zh_CN 每页显示条数变化的事件
+         * @en_US Show the number of events on each page
+         */
+        this.tableSizeChange = new EventEmitter();
+        /**
+         * @zh_CN 排序点击的事件
+         * @en_US Sort click events
+         */
+        this.tableSortChange = new EventEmitter();
+        /**
+         * @zh_CN 表格列参数
+         * @en_US Table column parameters
+         */
+        this.tableColumns = [];
+        /**
+         * @zh_CN 表格行点击事件
+         * @en_US Table row click event
+         */
+        this.tableRowEmit = new EventEmitter();
+        /**
+         * @zh_CN 表格行点击事件
+         * @en_US Table row click event
+         */
+        this.tableCheckedRow = {};
+        /**
+         * @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;
+        /**
+         * @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;
+        /**
+         * @zh_CN 表格文档高度百分比，弹窗百分比高度用到
+         * @en_US Table document height percentage, used for pop-up window percentage height
+         */
+        this.tableDocPercent = 1;
+        /**
+         * @zh_CN 树节点数据
+         * @en_US Tree node data
+         */
+        this.treeData = [];
+        /**
+         * @zh_CN 树当前点击选中的节点变化的事件
+         * @en_US The event of the tree currently clicked on the selected node change
+         */
+        this.treeActivatedChange = new EventEmitter();
+        /**
+         * @zh_CN 树 checkbox 选中的节点
+         * @en_US Tree checkbox selected node
+         */
+        this.treeChecked = [];
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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 }); }
+}
+__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: "16.0.0", 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 {
+    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;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.detectChanges();
+    }
+    constructor(renderer, cdr, configService) {
+        super();
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.height = 100;
+        this._unSubject = new Subject();
+    }
+    ngOnChanges(simples) {
+        const { tableData, labelAlign, size } = 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);
+    }
+    setSubscribe() {
+        let resizeRef = [];
+        if (this.hasTable) {
+            resizeRef = [this.tableRef?.nativeElement];
+        }
+        if (this.hasTree && !this.hasTreeTable) {
+            resizeRef.push(this.treeRef?.nativeElement);
+        }
+        this._unSubject.next();
+        XResize(...resizeRef)
+            .pipe(debounceTime(30), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this._resizeObserver = x.resizeObserver;
+            if (this.tableRef) {
+                this.height = this.tableRef.nativeElement.clientHeight;
+            }
+            else if (this.hasTree) {
+                this.height = 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)
+            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.setTableCheckedRow();
+                this.setTreeChecked();
+            }
+            else {
+                this.tableActivatedRow = this.value;
+                if (!this.hasTreeTable && this.hasTree) {
+                    this.treeActivatedId = this.value.id;
+                }
+            }
+        }
+        else {
+            this.temp = this.multiple ? [] : null;
+        }
+        if (this.hasTable) {
+            this.tableCom.virtualBody?.scrollToIndex(0);
+            this.tableCom.virtualBody?.checkViewportSize();
+        }
+        this.cdr.detectChanges();
+    }
+    setTableCheckedRow() {
+        if (!this.multiple || XIsUndefined(this.temp))
+            return;
+        const ids = this.temp.map((x) => x.id);
+        this.tableCheckedRow = {
+            ...this.tableCheckedRow,
+            $checked: ids
+        };
+    }
+    setTreeChecked() {
+        if (this.hasTreeMultiple)
+            this.treeChecked = this.temp.map((x) => x.id);
+    }
+    sure() {
+        this.value = this.temp;
+        this.onChange(this.value);
+        this.formControlValidator();
+        this.cdr.detectChanges();
+    }
+    closeModal() {
+        this.cdr.detectChanges();
+    }
+    dialogCloseDone() {
+        if (this.hasTree) {
+            this.treeActivatedId = null;
+            this.temp = null;
+        }
+    }
+    tempClose(index, item) {
+        this.temp.splice(index, 1);
+        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);
+            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);
+        }
+        else {
+            this.value = null;
+            this.tableActivatedRow = null;
+            if (!this.hasTreeTable && this.hasTree) {
+                this.treeActivatedId = null;
+            }
+        }
+        this.onChange(this.value);
+        this.formControlValidator();
+        this.cdr.detectChanges();
+    }
+    tableActivatedRowChange(data) {
+        if (this.multiple) {
+            this.rowMultiple(data);
+        }
+        else {
+            this.temp = data;
+            this.dialogVisible = false;
+            this.sure();
+        }
+    }
+    rowMultiple(data) {
+        if (typeof this.temp === 'undefined')
+            this.temp = [];
+        // data['$checked'] = !data['$checked'];
+        if (data['$checked']) {
+            this.temp = [...this.temp, data];
+        }
+        else {
+            this.temp.splice(this.temp.findIndex((x) => x.id === data.id), 1);
+        }
+        this.cdr.detectChanges();
+    }
+    treeMultiple(node) {
+        if (typeof this.temp === 'undefined')
+            this.temp = [];
+        // node.$checked = !node.$checked;
+        if (node.checked) {
+            this.temp = [...this.temp, node];
+        }
+        else {
+            this.temp.splice(this.temp.findIndex((x) => x.id === node.id), 1);
+        }
+        this.cdr.detectChanges();
+    }
+    treeActivatedClick(node) {
+        if (!this.hasTreeTable && this.hasTree) {
+            if (this.multiple) {
+                // this.treeMultiple(node);
+            }
+            else {
+                this.temp = 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);
+            if (field) {
+                field.value = node.id;
+                field.operation = '=';
+            }
+            else {
+                this.tableQuery.filter = [...this.tableQuery.filter, { field: this.treeTableConnect, value: node.id, operation: '=' }];
+            }
+            this.tableCom.change(1);
+            this.treeActivatedId = node.id;
+        }
+        this.treeActivatedChange.emit(node);
+        this.cdr.detectChanges();
+    }
+    treeCheckboxChange(node) {
+        this.treeMultiple(node);
+    }
+    trackByItem(_index, item) {
+        return item.id;
+    }
+    formControlChanges() {
+        this.ngOnInit();
+        this.ngAfterViewInit();
+        this.treeCom?.setData();
+        this.cdr.detectChanges();
+    }
+    searchKeyDown(event) {
+        if (event.key === 'Enter') {
+            this.searchClick();
+        }
+        else if (event.key === 'Delete') {
+            this.search.value = '';
+        }
+    }
+    searchClick() {
+        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);
+        if (field) {
+            field.value = this.search.value || '';
+        }
+        else {
+            this.tableQuery.filter = [...this.tableQuery?.filter, this.search];
+        }
+        this.tableCom.change(1);
+        this.cdr.detectChanges();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XFindComponent, 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  <label *ngIf=\"label\" [class.x-find-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\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      <ng-container *ngIf=\"multiple; else singleTpl\">\r\n        <x-tag\r\n          *ngFor=\"let item of value; index as i; trackBy: trackByItem\"\r\n          closable\r\n          [size]=\"size\"\r\n          [bordered]=\"bordered\"\r\n          [disabled]=\"disabled\"\r\n          (close)=\"tagClose(i)\"\r\n          >{{ item[columnLabel] }}</x-tag\r\n        >\r\n      </ng-container>\r\n      <ng-template #singleTpl>\r\n        <x-tag *ngIf=\"value\" closable [disabled]=\"disabled\" [bordered]=\"bordered\" [size]=\"size\" (close)=\"tagClose()\">{{\r\n          value[columnLabel]\r\n        }}</x-tag>\r\n      </ng-template>\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  [(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    <div class=\"x-find-dialog-tree\" *ngIf=\"hasTree\" #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    <div class=\"x-find-dialog-table\" *ngIf=\"hasTable\" #tableRef>\r\n      <div class=\"x-find-search\" *ngIf=\"hasSearch\">\r\n        <x-input [label]=\"search.label\" direction=\"row\" (xKeydown)=\"searchKeyDown($event)\" [(ngModel)]=\"search.value\"></x-input>\r\n        <x-button type=\"primary\" plain (click)=\"searchClick()\">{{ search.button || '\u67E5\u8BE2' }}</x-button>\r\n      </div>\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    <div *ngIf=\"multiple\" class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty\" [style.height.px]=\"height\">\r\n      <x-empty *ngIf=\"getEmpty\" [content]=\"dialogEmptyContent\"></x-empty>\r\n      <div class=\"x-find-dialog-tags\">\r\n        <x-tag *ngFor=\"let item of temp; index as i; trackBy: trackByItem\" closable (close)=\"tempClose(i, item)\">\r\n          <span>{{ item[columnLabel] }}</span>\r\n        </x-tag>\r\n      </div>\r\n    </div>\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    <x-icon type=\"fto-check\" *ngIf=\"node.$checked\"></x-icon>\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:-moz-fit-content;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-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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.XTagComponent, selector: "x-tag" }, { kind: "component", type: i5.XButtonComponent, selector: "x-button" }, { kind: "component", type: i6.XDialogComponent, selector: "x-dialog" }, { kind: "component", type: i7.XTableComponent, selector: "x-table" }, { kind: "component", type: i8.XTreeComponent, selector: "x-tree" }, { kind: "component", type: i9.XIconComponent, selector: "x-icon" }, { kind: "component", type: i10.XEmptyComponent, selector: "x-empty" }, { kind: "component", type: i11.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XFindPrefix}`, 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  <label *ngIf=\"label\" [class.x-find-label-required]=\"required\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\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      <ng-container *ngIf=\"multiple; else singleTpl\">\r\n        <x-tag\r\n          *ngFor=\"let item of value; index as i; trackBy: trackByItem\"\r\n          closable\r\n          [size]=\"size\"\r\n          [bordered]=\"bordered\"\r\n          [disabled]=\"disabled\"\r\n          (close)=\"tagClose(i)\"\r\n          >{{ item[columnLabel] }}</x-tag\r\n        >\r\n      </ng-container>\r\n      <ng-template #singleTpl>\r\n        <x-tag *ngIf=\"value\" closable [disabled]=\"disabled\" [bordered]=\"bordered\" [size]=\"size\" (close)=\"tagClose()\">{{\r\n          value[columnLabel]\r\n        }}</x-tag>\r\n      </ng-template>\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  [(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    <div class=\"x-find-dialog-tree\" *ngIf=\"hasTree\" #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    <div class=\"x-find-dialog-table\" *ngIf=\"hasTable\" #tableRef>\r\n      <div class=\"x-find-search\" *ngIf=\"hasSearch\">\r\n        <x-input [label]=\"search.label\" direction=\"row\" (xKeydown)=\"searchKeyDown($event)\" [(ngModel)]=\"search.value\"></x-input>\r\n        <x-button type=\"primary\" plain (click)=\"searchClick()\">{{ search.button || '\u67E5\u8BE2' }}</x-button>\r\n      </div>\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    <div *ngIf=\"multiple\" class=\"x-find-dialog-checked\" [class.x-find-empty]=\"getEmpty\" [style.height.px]=\"height\">\r\n      <x-empty *ngIf=\"getEmpty\" [content]=\"dialogEmptyContent\"></x-empty>\r\n      <div class=\"x-find-dialog-tags\">\r\n        <x-tag *ngFor=\"let item of temp; index as i; trackBy: trackByItem\" closable (close)=\"tempClose(i, item)\">\r\n          <span>{{ item[columnLabel] }}</span>\r\n        </x-tag>\r\n      </div>\r\n    </div>\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    <x-icon type=\"fto-check\" *ngIf=\"node.$checked\"></x-icon>\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:-moz-fit-content;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-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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, 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']
+            }] } });
+
+class XFindModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XFindModule, declarations: [XFindComponent, XFindProperty], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            XTagModule,
+            XButtonModule,
+            XDialogModule,
+            XTableModule,
+            XTreeModule,
+            XIconModule,
+            XEmptyModule,
+            XInputModule,
+            XBaseFormModule], exports: [XFindComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            XTagModule,
+            XButtonModule,
+            XDialogModule,
+            XTableModule,
+            XTreeModule,
+            XIconModule,
+            XEmptyModule,
+            XInputModule,
+            XBaseFormModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XFindModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XFindComponent, XFindProperty],
+                    exports: [XFindComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        XTagModule,
+                        XButtonModule,
+                        XDialogModule,
+                        XTableModule,
+                        XTreeModule,
+                        XIconModule,
+                        XEmptyModule,
+                        XInputModule,
+                        XBaseFormModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XFindComponent, XFindModule, XFindPrefix, XFindProperty };
+//# sourceMappingURL=ng-nest-ui-find.mjs.map