@ng-nest/ui 14.0.8 → 14.0.9

package/fesm2015/ng-nest-ui-transfer.mjs

@@ -2,22 +2,27 @@ import * as i0 from '@angular/core';
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XDataConvert, XWithConfig, XInputBoolean, XIsChange, XIsEmpty, XSetData } from '@ng-nest/ui/core';
+import { XDataConvert, XWithConfig, XInputBoolean, XIsArray, XIsObjectArray, XIsEmpty, XIsChange, XRemove, XSetData, XIsFunction, XIsObject, XIsBoolean } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
-import { Subject, of } from 'rxjs';
-import { delay, takeUntil } from 'rxjs/operators';
-import * as i4 from '@angular/cdk/drag-drop';
+import { Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import * as i5 from '@angular/cdk/drag-drop';
 import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2 from '@angular/common';
+import * as i2 from '@ng-nest/ui/i18n';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i5 from '@ng-nest/ui/outlet';
+import * as i6 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i6 from '@ng-nest/ui/checkbox';
+import * as i7 from '@ng-nest/ui/checkbox';
 import { XCheckboxModule } from '@ng-nest/ui/checkbox';
-import * as i7 from '@ng-nest/ui/button';
+import * as i8 from '@ng-nest/ui/button';
 import { XButtonModule } from '@ng-nest/ui/button';
+import * as i9 from '@ng-nest/ui/tree';
+import { XTreeModule } from '@ng-nest/ui/tree';
+import * as i10 from '@ng-nest/ui/table';
+import { XTableModule } from '@ng-nest/ui/table';
 import { XInputModule } from '@ng-nest/ui/input';
 
 /**
@@ -38,30 +43,58 @@ class XTransferProperty extends XControlValueAccessor {
          * @en_US Data object
          */
         this.data = [];
+        /**
+         * @zh_CN 表格查询条件
+         * @en_US Number of data items per page
+         */
+        this.tableQuery = {};
+        /**
+         * @zh_CN 表格数据总条数
+         * @en_US Total number of table data
+         */
+        this.tableTotal = 0;
     }
 }
 /** @nocollapse */ XTransferProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTransferProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTransferProperty, selector: "ng-component", inputs: { data: "data", titles: "titles", drag: "drag", search: "search", nodeTpl: "nodeTpl", titleTpl: "titleTpl" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XTransferProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTransferProperty, selector: "ng-component", inputs: { data: "data", type: "type", titles: "titles", listStyle: "listStyle", hiddenCheckAll: "hiddenCheckAll", drag: "drag", search: "search", nodeTpl: "nodeTpl", titleTpl: "titleTpl", tableColumns: "tableColumns", tableIndex: "tableIndex", tableSize: "tableSize", tableQuery: "tableQuery", tableTotal: "tableTotal" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XDataConvert()
 ], XTransferProperty.prototype, "data", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'list')
+], XTransferProperty.prototype, "type", void 0);
 __decorate([
     XWithConfig(X_CONFIG_NAME)
 ], XTransferProperty.prototype, "titles", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME),
+    XWithConfig(X_CONFIG_NAME)
+], XTransferProperty.prototype, "listStyle", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, false),
     XInputBoolean()
 ], XTransferProperty.prototype, "drag", void 0);
 __decorate([
     XInputBoolean()
 ], XTransferProperty.prototype, "search", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 1)
+], XTransferProperty.prototype, "tableIndex", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 10)
+], XTransferProperty.prototype, "tableSize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { data: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], titles: [{
                 type: Input
+            }], listStyle: [{
+                type: Input
+            }], hiddenCheckAll: [{
+                type: Input
             }], drag: [{
                 type: Input
             }], search: [{
@@ -70,38 +103,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], titleTpl: [{
                 type: Input
+            }], tableColumns: [{
+                type: Input
+            }], tableIndex: [{
+                type: Input
+            }], tableSize: [{
+                type: Input
+            }], tableQuery: [{
+                type: Input
+            }], tableTotal: [{
+                type: Input
             }] } });
 
 class XTransferComponent extends XTransferProperty {
-    constructor(renderer, elementRef, cdr, configService) {
+    constructor(renderer, elementRef, cdr, configService, i18n) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.configService = configService;
+        this.i18n = i18n;
         this.nodes = [];
         this.left = {
             list: [],
             searchList: [],
             checkedCount: 0,
+            direction: 'left',
             disabledButton: true
         };
         this.right = {
             list: [],
             searchList: [],
             checkedCount: 0,
+            direction: 'right',
             disabledButton: true
         };
         this.searchInput = '';
-        this._titles = ['List', 'Selected'];
+        this.locale = {};
         this._unSubject = new Subject();
+        this.treeActivatedId = [];
+        this.tableData = [];
+        this.isObjectArray = false;
+    }
+    get localTitle() {
+        if (this.type === 'tree') {
+            return this.locale.treeTitle;
+        }
+        else {
+            return this.locale.listTitle;
+        }
     }
     writeValue(value) {
         this.value = value;
-        this.setList();
+        if (XIsArray(value)) {
+            this.treeActivatedId = [...value];
+            if (XIsObjectArray(value)) {
+                this.isObjectArray = true;
+            }
+        }
+        this.setList(this.nodes);
+    }
+    get values() {
+        if (this.isObjectArray) {
+            return this.value.map((x) => x.id);
+        }
+        else {
+            return this.value;
+        }
     }
     ngOnInit() {
         this.setTitles();
+        this.setListStyle();
+        this.setHiddenCheckAll();
+        this.getTableCheckColumn();
+        this.i18n.localeChange
+            .pipe(map((x) => x.transfer), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this.locale = x;
+            XIsEmpty(this.titles) && this.setTitles();
+            this.cdr.markForCheck();
+        });
     }
     ngOnChanges(changes) {
         const { data } = changes;
@@ -122,6 +203,9 @@ class XTransferComponent extends XTransferProperty {
             x.checked = $event;
             return x;
         });
+        if (this.type === 'tree' && source.direction === 'left') {
+            this.treeActivatedId = $event ? source.list.map((x) => x.id) : source.list.filter((x) => x.disabled).map((x) => x.id);
+        }
         source.checkedCount = $event ? list.length : 0;
         source.indeterminate = $event;
         this.setButtonDisabled(source);
@@ -137,10 +221,22 @@ class XTransferComponent extends XTransferProperty {
         this.cdr.detectChanges();
     }
     move(from, to) {
-        var _a;
         if (from.disabledButton)
             return;
-        let checkedItems = (_a = from.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !XIsEmpty(x.checked));
+        switch (this.type) {
+            case 'list':
+                this.moveList(from, to);
+                break;
+            case 'tree':
+                this.moveTree(from, to);
+                break;
+            case 'table':
+                this.moveTable(from, to);
+        }
+    }
+    moveList(from, to) {
+        var _a;
+        let checkedItems = (_a = from.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !x.disabled && x.checked);
         let j = 0;
         checkedItems.forEach((x) => {
             var _a;
@@ -149,14 +245,97 @@ class XTransferComponent extends XTransferProperty {
             transferArrayItem(from.list, to.list, index, j);
             j++;
         });
-        from.checkedAll = false;
-        from.checkedCount = 0;
-        from.indeterminate = false;
-        from.disabledButton = true;
+        from.list = [...from.list];
+        to.list = [...to.list];
+        this.setCheckedCount('list', from, to);
+        this.setListCount('list', from, to);
+        this.setCheckedAll(from, to);
+        this.setButtonDisabled(from, to);
         this.setSearchList(from, to);
         this.setValue();
         this.cdr.detectChanges();
     }
+    moveTree(from, to) {
+        var _a, _b, _c;
+        let checkedItems = [];
+        if (to.direction === 'right') {
+            checkedItems = (_a = from.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !x.disabled && !XIsEmpty(this.treeActivatedId) && this.treeActivatedId.includes(x.id));
+            checkedItems.forEach((x) => {
+                x.disabled = true;
+                x.change && x.change();
+            });
+            (_b = to.list) === null || _b === void 0 ? void 0 : _b.unshift(...checkedItems.map((x) => {
+                let res = Object.assign({}, x);
+                res.checked = false;
+                res.disabled = false;
+                return res;
+            }));
+            this.setCheckedCount('tree', from);
+            this.setCheckedCount('list', to);
+        }
+        else {
+            checkedItems = XRemove(from.list, (x) => !x.disabled && x.checked);
+            for (let item of checkedItems) {
+                let node = (_c = to.list) === null || _c === void 0 ? void 0 : _c.find((x) => x.id === item.id);
+                if (node) {
+                    node.checked = false;
+                    node.disabled = false;
+                    const idx = this.treeActivatedId.findIndex((x) => x === node.id);
+                    if (idx >= 0) {
+                        this.treeActivatedId.splice(idx, 1);
+                    }
+                    node.change && node.change();
+                }
+            }
+            this.setCheckedCount('tree', to);
+            this.setCheckedCount('list', from);
+        }
+        this.setCheckedAll(from, to);
+        this.setListCount('list', from, to);
+        this.setButtonDisabled(from, to);
+        this.setSearchList(from, to);
+        this.setValue();
+    }
+    moveTable(from, to) {
+        var _a;
+        let checkedItems = [];
+        if (to.direction === 'right') {
+            checkedItems = (_a = from.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !x.disabled && x.checked);
+            to.list = [
+                ...checkedItems.map((x) => {
+                    const res = Object.assign({}, x);
+                    x.disabled = true;
+                    x.checked = true;
+                    res.disabled = false;
+                    res.checked = false;
+                    return res;
+                }),
+                ...to.list
+            ];
+            this.tableData = [...from.list];
+            this.setCheckedCount('table', from);
+            this.setCheckedCount('list', to);
+        }
+        else {
+            checkedItems = XRemove(from.list, (x) => !x.disabled && x.checked);
+            const ids = checkedItems.map((x) => x.id);
+            for (let item of to.list) {
+                if (ids.includes(item.id)) {
+                    item.checked = false;
+                    item.disabled = false;
+                }
+            }
+            from.list = [...from.list];
+            this.tableData = [...to.list];
+            this.setCheckedCount('table', to);
+            this.setCheckedCount('list', from);
+        }
+        this.setListCount('table', from, to);
+        this.setCheckedAll(from, to);
+        this.setButtonDisabled(from, to);
+        this.setSearchList(from, to);
+        this.setValue();
+    }
     dropCdk(event) {
         const ev = event;
         if (ev.previousContainer === ev.container) {
@@ -164,8 +343,9 @@ class XTransferComponent extends XTransferProperty {
         }
         else {
             transferArrayItem(ev.previousContainer.data, ev.container.data, ev.previousIndex, ev.currentIndex);
-            this.setCheckedCount(this.left, this.right);
+            this.setCheckedCount('list', this.left, this.right);
             this.setCheckedAll(this.left, this.right);
+            this.setListCount('list', this.left, this.right);
             this.setButtonDisabled(this.left, this.right);
         }
         this.setSearchList(this.left, this.right);
@@ -178,6 +358,56 @@ class XTransferComponent extends XTransferProperty {
     trackByNode(_index, item) {
         return item.id;
     }
+    setListCount(type = 'list', ...sources) {
+        var _a, _b;
+        if (['list', 'tree'].includes(type)) {
+            for (let source of sources) {
+                source.count = (_a = source.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !x.disabled).length;
+            }
+        }
+        else if (type === 'table') {
+            for (let source of sources) {
+                if (source.direction === 'left') {
+                    source.count = this.tableTotal - this.right.list.length || 0;
+                }
+                else {
+                    source.count = (_b = source.list) === null || _b === void 0 ? void 0 : _b.filter((x) => !x.disabled).length;
+                }
+            }
+        }
+    }
+    onTreeNodeClick(_node) {
+        this.setCheckedCount('tree', this.left);
+        this.setCheckedAll(this.left);
+        this.setButtonDisabled(this.left);
+    }
+    onTableCheckedRow(row, source) {
+        if (!this.tableCheckboxColumn)
+            return;
+        let checked = row[this.tableCheckboxColumn.id];
+        row.checked = checked;
+        this.setCheckedCount('table', source);
+        this.setCheckedAll(source);
+        this.setButtonDisabled(source);
+    }
+    onTableCheckedAll(row, source) {
+        if (!this.tableCheckboxColumn)
+            return;
+        let checked = row[this.tableCheckboxColumn.id];
+        for (let item of source.list) {
+            if (!item.disabled) {
+                item.checked = checked;
+            }
+        }
+        this.setCheckedCount('table', source);
+        this.setButtonDisabled(source);
+    }
+    getTableCheckColumn() {
+        var _a;
+        if (this.type !== 'table' || XIsEmpty(this.tableColumns))
+            return;
+        this.tableCheckboxColumn = (_a = this.tableColumns) === null || _a === void 0 ? void 0 : _a.find((x) => x.rowChecked);
+    }
     setCheckedAll(...sources) {
         var _a;
         for (let source of sources) {
@@ -191,14 +421,21 @@ class XTransferComponent extends XTransferProperty {
                 }
             }
             else {
+                source.checkedAll = false;
                 source.indeterminate = false;
             }
         }
     }
-    setCheckedCount(...sources) {
-        var _a;
-        for (let source of sources)
-            source.checkedCount = (_a = source.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !XIsEmpty(x.checked)).length;
+    setCheckedCount(type = 'list', ...sources) {
+        var _a, _b;
+        for (let source of sources) {
+            if (['table', 'list'].includes(type)) {
+                source.checkedCount = (_a = source.list) === null || _a === void 0 ? void 0 : _a.filter((x) => !x.disabled && x.checked).length;
+            }
+            else if (type === 'tree') {
+                source.checkedCount = (_b = source.list) === null || _b === void 0 ? void 0 : _b.filter((x) => !x.disabled && !XIsEmpty(this.treeActivatedId) && this.treeActivatedId.includes(x.id)).length;
+            }
+        }
     }
     setButtonDisabled(...sources) {
         for (let source of sources)
@@ -206,65 +443,204 @@ class XTransferComponent extends XTransferProperty {
     }
     setValue() {
         var _a;
-        this.value = (_a = this.right.list) === null || _a === void 0 ? void 0 : _a.map((x) => x.id);
+        if (this.isObjectArray) {
+            this.value = this.right.list;
+        }
+        else {
+            this.value = (_a = this.right.list) === null || _a === void 0 ? void 0 : _a.map((x) => x.id);
+        }
         this.onChange(this.value);
     }
-    setSearchList(...sources) {
-        if (this.search) {
-            for (let source of sources) {
-                if (XIsEmpty(source.searchInput)) {
-                    source.searchList = [...source.list];
-                }
-            }
-        }
+    setSearchList(..._sources) {
+        // if (this.search) {
+        //   for (let source of sources) {
+        //     if (XIsEmpty(source.searchInput)) {
+        //       source.searchList = [...(source.list as XTransferNode[])];
+        //     }
+        //   }
+        // }
     }
     setData() {
+        if (this.type === 'table') {
+            this.getTableData();
+            return;
+        }
         XSetData(this.data, this._unSubject).subscribe((x) => {
-            this.nodes = x;
+            this.setList(x);
         });
     }
-    setList() {
-        if (!XIsEmpty(this.value)) {
-            this.left.list = this.nodes.filter((x) => this.value.indexOf(x.id) < 0);
-            this.right.list = this.nodes.filter((x) => this.value.indexOf(x.id) >= 0);
+    setList(data) {
+        if (XIsEmpty(data))
+            return;
+        switch (this.type) {
+            case 'list':
+                this.nodes = data;
+                if (!XIsEmpty(this.values)) {
+                    this.left.list = this.nodes.filter((x) => this.values.indexOf(x.id) < 0);
+                    this.right.list = this.nodes.filter((x) => this.values.indexOf(x.id) >= 0);
+                }
+                else {
+                    this.left.list = [...this.nodes];
+                }
+                this.setSearchList(this.left, this.right);
+                this.setListCount(this.type, this.left, this.right);
+                break;
+            case 'tree':
+                this.nodes = data;
+                this.setTreeNodeDisabled();
+                this.left.list = [...this.nodes];
+                if (!XIsEmpty(this.values)) {
+                    this.right.list = this.nodes
+                        .filter((x) => this.values.indexOf(x.id) >= 0)
+                        .map((x) => {
+                        let res = Object.assign({}, x);
+                        res.checked = false;
+                        res.disabled = false;
+                        return res;
+                    });
+                }
+                this.setSearchList(this.left, this.right);
+                this.setListCount(this.type, this.left, this.right);
+                break;
+            case 'table':
+                this.nodes = data;
+                this.setTableDataDisabled();
+                this.left.list = [...this.nodes];
+                if (!XIsEmpty(this.values)) {
+                    if (this.isObjectArray) {
+                        this.right.list = [
+                            ...this.value.map((x) => {
+                                let res = Object.assign({}, x);
+                                res.disabled = false;
+                                res.checked = false;
+                                return res;
+                            })
+                        ];
+                    }
+                    else {
+                        this.right.list = [...this.value];
+                    }
+                }
+                this.setSearchList(this.left, this.right);
+                this.setListCount(this.type, this.left, this.right);
+                break;
         }
-        else {
-            this.left.list = this.nodes;
+        this.cdr.detectChanges();
+    }
+    getTableData() {
+        if (XIsFunction(this.data)) {
+            this.data(this.tableIndex, this.tableSize, this.tableQuery).subscribe((x) => {
+                this.tableTotal = x.total;
+                this.tableData = x.list;
+                this.setList(x.list);
+            });
         }
-        this.setSearchList(this.left, this.right);
-        // ToDo: x-checkbox error. Attempt to use a destroyed view: detectChanges
-        of(true)
-            .pipe(delay(0), takeUntil(this._unSubject))
-            .subscribe(() => this.cdr.detectChanges());
     }
     setTitles() {
+        let titles = [];
         if (XIsEmpty(this.titles)) {
-            this.titles = this._titles;
+            titles = [this.localTitle, this.locale.selectedTitle];
+        }
+        else {
+            titles = this.titles;
         }
-        this.left.title = this.titles[0];
-        if (this.titles.length > 1)
-            this.right.title = this.titles[1];
+        if (titles.length > 0)
+            this.left.title = titles[0];
+        if (titles.length > 1)
+            this.right.title = titles[1];
+        this.cdr.detectChanges();
+    }
+    setListStyle() {
+        if (XIsEmpty(this.listStyle))
+            return;
+        let styles = [];
+        if (XIsObject(this.listStyle)) {
+            styles = [this.listStyle, this.listStyle];
+        }
+        else if (XIsObjectArray(this.listStyle)) {
+            styles = this.listStyle;
+        }
+        if (styles.length > 0)
+            this.left.listStyle = styles[0];
+        if (styles.length > 1)
+            this.right.listStyle = styles[1];
+        this.cdr.detectChanges();
+    }
+    setTreeNodeDisabled() {
+        if (!XIsEmpty(this.values) && this.nodes) {
+            for (let item of this.nodes) {
+                let hasIn = this.values.indexOf(item.id) >= 0;
+                item.disabled = hasIn;
+                item.checked = hasIn;
+            }
+        }
+    }
+    setTableDataDisabled() {
+        if (!XIsEmpty(this.values) && this.nodes) {
+            for (let item of this.nodes) {
+                let hasIn = this.values.indexOf(item.id) >= 0;
+                item.disabled = hasIn;
+                item.checked = hasIn;
+            }
+        }
+    }
+    setHiddenCheckAll() {
+        if (XIsEmpty(this.hiddenCheckAll))
+            return;
+        if (this.hiddenCheckAll.length > 0 && XIsBoolean(this.hiddenCheckAll[0]))
+            this.left.hiddenCheckAll = this.hiddenCheckAll[0];
+        if (this.hiddenCheckAll.length > 1 && XIsBoolean(this.hiddenCheckAll[1]))
+            this.right.hiddenCheckAll = this.hiddenCheckAll[1];
         this.cdr.detectChanges();
     }
 }
-/** @nocollapse */ XTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTransferComponent, selector: "x-transfer", providers: [XValueAccessor(XTransferComponent)], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"left.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"right.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.list.length }\"\r\n      ><span>{{ source.checkedCount }} / {{ source.list.length }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-box{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);width:12rem}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border-bottom:.0625rem solid var(--x-border);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title>span{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;padding:.25rem;height:18rem;overflow-y:auto}.x-transfer-list>li{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-list.cdk-drop-list-dragging>li:hover{background-color:transparent}.x-transfer-list.cdk-drop-list-dragging>li.cdk-drag-placeholder{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}.x-transfer-list.cdk-drop-list-dragging>li:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i6.XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: i7.XButtonComponent, selector: "x-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTransferComponent, selector: "x-transfer", providers: [XValueAccessor(XTransferComponent)], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <div [ngStyle]=\"left.listStyle!\" class=\"x-transfer-list\">\r\n      <ng-container [ngSwitch]=\"type\">\r\n        <ul\r\n          *ngSwitchCase=\"'list'\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"dropCdk($event)\"\r\n          [cdkDropListData]=\"left.list\"\r\n          [cdkDropListDisabled]=\"!drag && type === 'list'\"\r\n          [cdkDropListEnterPredicate]=\"predicate\"\r\n          class=\"x-transfer-droplist\"\r\n        >\r\n          <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n            <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n          </li>\r\n        </ul>\r\n        <x-tree\r\n          *ngSwitchCase=\"'tree'\"\r\n          [data]=\"left.list!\"\r\n          multiple\r\n          allowManyActivated\r\n          [(activatedId)]=\"treeActivatedId\"\r\n          (nodeClick)=\"onTreeNodeClick($event)\"\r\n        ></x-tree>\r\n        <x-table\r\n          *ngSwitchCase=\"'table'\"\r\n          [data]=\"tableData\"\r\n          [columns]=\"tableColumns!\"\r\n          [(size)]=\"tableSize\"\r\n          [(index)]=\"tableIndex\"\r\n          (indexChange)=\"getTableData()\"\r\n          [query]=\"tableQuery\"\r\n          [total]=\"tableTotal\"\r\n          (activatedRowChange)=\"onTableCheckedRow($event, left)\"\r\n          (headCheckboxChange)=\"onTableCheckedAll($event, left)\"\r\n          hiddenWrapBorder\r\n          hiddenPaginationBorder\r\n          showEllipsis=\"false\"\r\n          showTotal=\"false\"\r\n          paginationPosition=\"bottom-center\"\r\n          allowSelectRow=\"false\"\r\n        ></x-table>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <div [ngSwitch]=\"type\" [ngStyle]=\"right.listStyle!\" class=\"x-transfer-list\">\r\n      <x-table\r\n        *ngSwitchCase=\"'table'\"\r\n        [data]=\"right.list!\"\r\n        [columns]=\"tableColumns!\"\r\n        (activatedRowChange)=\"onTableCheckedRow($event, right)\"\r\n        (headCheckboxChange)=\"onTableCheckedAll($event, right)\"\r\n        hiddenWrapBorder\r\n        hiddenPaginationBorder\r\n        showPagination=\"false\"\r\n        showEllipsis=\"false\"\r\n        showTotal=\"false\"\r\n        paginationPosition=\"bottom-center\"\r\n        allowSelectRow=\"false\"\r\n      ></x-table>\r\n      <ul\r\n        *ngSwitchDefault\r\n        cdkDropList\r\n        (cdkDropListDropped)=\"dropCdk($event)\"\r\n        [cdkDropListData]=\"right.list\"\r\n        [cdkDropListDisabled]=\"!drag || (drag && type !== 'list')\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n        class=\"x-transfer-droplist\"\r\n      >\r\n        <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n          <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      *ngIf=\"source.title && !source.hiddenCheckAll\"\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <span *ngIf=\"source.title && source.hiddenCheckAll\">{{ source.title }}</span>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.count }\"\r\n      ><span class=\"x-transfer-total\">{{ source.checkedCount }} / {{ source.count }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-bottom:none;background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-total{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;height:18rem;width:12rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);overflow:auto}.x-transfer-item{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-droplist{height:100%;padding:.25rem}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item:hover{background-color:transparent}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item.cdk-drag-placeholder{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i7.XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: i8.XButtonComponent, selector: "x-button" }, { kind: "component", type: i9.XTreeComponent, selector: "x-tree" }, { kind: "component", type: i10.XTableComponent, selector: "x-table" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTransferPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTransferComponent)], template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"left.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <ul\r\n      class=\"x-transfer-list\"\r\n      cdkDropList\r\n      (cdkDropListDropped)=\"dropCdk($event)\"\r\n      [cdkDropListData]=\"right.list\"\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n        <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.list.length }\"\r\n      ><span>{{ source.checkedCount }} / {{ source.list.length }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-box{border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);width:12rem}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border-bottom:.0625rem solid var(--x-border);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title>span{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;padding:.25rem;height:18rem;overflow-y:auto}.x-transfer-list>li{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-list.cdk-drop-list-dragging>li:hover{background-color:transparent}.x-transfer-list.cdk-drop-list-dragging>li.cdk-drag-placeholder{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}.x-transfer-list.cdk-drop-list-dragging>li:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; } });
+            args: [{ selector: `${XTransferPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XTransferComponent)], template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: left }\"></ng-container>\r\n    <div [ngStyle]=\"left.listStyle!\" class=\"x-transfer-list\">\r\n      <ng-container [ngSwitch]=\"type\">\r\n        <ul\r\n          *ngSwitchCase=\"'list'\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"dropCdk($event)\"\r\n          [cdkDropListData]=\"left.list\"\r\n          [cdkDropListDisabled]=\"!drag && type === 'list'\"\r\n          [cdkDropListEnterPredicate]=\"predicate\"\r\n          class=\"x-transfer-droplist\"\r\n        >\r\n          <li class=\"x-transfer-item\" *ngFor=\"let node of left.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n            <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: left }\"></ng-container>\r\n          </li>\r\n        </ul>\r\n        <x-tree\r\n          *ngSwitchCase=\"'tree'\"\r\n          [data]=\"left.list!\"\r\n          multiple\r\n          allowManyActivated\r\n          [(activatedId)]=\"treeActivatedId\"\r\n          (nodeClick)=\"onTreeNodeClick($event)\"\r\n        ></x-tree>\r\n        <x-table\r\n          *ngSwitchCase=\"'table'\"\r\n          [data]=\"tableData\"\r\n          [columns]=\"tableColumns!\"\r\n          [(size)]=\"tableSize\"\r\n          [(index)]=\"tableIndex\"\r\n          (indexChange)=\"getTableData()\"\r\n          [query]=\"tableQuery\"\r\n          [total]=\"tableTotal\"\r\n          (activatedRowChange)=\"onTableCheckedRow($event, left)\"\r\n          (headCheckboxChange)=\"onTableCheckedAll($event, left)\"\r\n          hiddenWrapBorder\r\n          hiddenPaginationBorder\r\n          showEllipsis=\"false\"\r\n          showTotal=\"false\"\r\n          paginationPosition=\"bottom-center\"\r\n          allowSelectRow=\"false\"\r\n        ></x-table>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-transfer-buttons\">\r\n    <x-button type=\"primary\" icon=\"fto-chevron-right\" [disabled]=\"left.disabledButton\" (click)=\"move(left, right)\"></x-button>\r\n    <x-button type=\"primary\" icon=\"fto-chevron-left\" [disabled]=\"right.disabledButton\" (click)=\"move(right, left)\"></x-button>\r\n  </div>\r\n  <div class=\"x-transfer-box\">\r\n    <ng-container *ngTemplateOutlet=\"sourceTitleTpl; context: { source: right }\"></ng-container>\r\n    <div [ngSwitch]=\"type\" [ngStyle]=\"right.listStyle!\" class=\"x-transfer-list\">\r\n      <x-table\r\n        *ngSwitchCase=\"'table'\"\r\n        [data]=\"right.list!\"\r\n        [columns]=\"tableColumns!\"\r\n        (activatedRowChange)=\"onTableCheckedRow($event, right)\"\r\n        (headCheckboxChange)=\"onTableCheckedAll($event, right)\"\r\n        hiddenWrapBorder\r\n        hiddenPaginationBorder\r\n        showPagination=\"false\"\r\n        showEllipsis=\"false\"\r\n        showTotal=\"false\"\r\n        paginationPosition=\"bottom-center\"\r\n        allowSelectRow=\"false\"\r\n      ></x-table>\r\n      <ul\r\n        *ngSwitchDefault\r\n        cdkDropList\r\n        (cdkDropListDropped)=\"dropCdk($event)\"\r\n        [cdkDropListData]=\"right.list\"\r\n        [cdkDropListDisabled]=\"!drag || (drag && type !== 'list')\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n        class=\"x-transfer-droplist\"\r\n      >\r\n        <li class=\"x-transfer-item\" *ngFor=\"let node of right.list; trackBy: trackByNode\" cdkDrag [cdkDragData]=\"node\">\r\n          <ng-container *ngTemplateOutlet=\"sourceNodeTpl; context: { node: node, source: right }\"></ng-container>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #sourceTitleTpl let-source=\"source\">\r\n  <div class=\"x-transfer-title\">\r\n    <x-checkbox\r\n      *ngIf=\"source.title && !source.hiddenCheckAll\"\r\n      [data]=\"[titleTpl ? '' : source.title]\"\r\n      [(ngModel)]=\"source.checkedAll\"\r\n      (ngModelChange)=\"checkedAllChange($event, source)\"\r\n      [indeterminate]=\"source.indeterminate\"\r\n    ></x-checkbox>\r\n    <span *ngIf=\"source.title && source.hiddenCheckAll\">{{ source.title }}</span>\r\n    <ng-container *xOutlet=\"titleTpl; context: { $title: source.title, $checkedCount: source.checkedCount, $count: source.count }\"\r\n      ><span class=\"x-transfer-total\">{{ source.checkedCount }} / {{ source.count }}</span></ng-container\r\n    >\r\n  </div>\r\n  <!-- <div class=\"x-transfer-search\" *ngIf=\"search\">\r\n    <x-input\r\n      icon=\"fto-search\"\r\n      [(ngModel)]=\"source.searchInput\"\r\n      (ngModelChange)=\"searchInputChange(source)\"\r\n      clearable\r\n    ></x-input>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #sourceNodeTpl let-node=\"node\" let-source=\"source\">\r\n  <x-checkbox\r\n    [data]=\"[{ id: node.id, label: nodeTpl ? nodeTpl : node.label, node: node }]\"\r\n    [disabled]=\"node.disabled\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"checkedChange($event, source)\"\r\n  ></x-checkbox>\r\n</ng-template>\r\n", styles: [".x-transfer{margin:0;padding:0;display:inline-flex;align-items:center}.x-transfer-title{padding:.25rem .5625rem;display:flex;align-items:center;justify-content:space-between;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-bottom:none;background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-total{margin-left:.325rem}.x-transfer-list{display:flex;flex-direction:column;height:18rem;width:12rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);overflow:auto}.x-transfer-item{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-transfer-droplist{height:100%;padding:.25rem}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item:hover{background-color:transparent}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item.cdk-drag-placeholder{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-transfer-droplist.cdk-drop-list-dragging .x-transfer-item:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-transfer-buttons{margin:0 1rem;display:flex;flex-direction:column}.x-transfer-buttons>x-button:not(:first-child){margin-top:.5rem}.x-transfer-search{padding:.5rem;border-bottom:.0625rem solid var(--x-border)}body>li.x-transfer-item.cdk-drag-preview{padding:.125rem .25rem;border-radius:var(--x-border-radius);display:flex;align-items:center;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>li.x-transfer-item.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i2.XI18nService }]; } });
 
 class XTransferModule {
 }
 /** @nocollapse */ XTransferModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XTransferModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, declarations: [XTransferComponent, XTransferProperty], imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule], exports: [XTransferComponent] });
-/** @nocollapse */ XTransferModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule] });
+/** @nocollapse */ XTransferModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, declarations: [XTransferComponent, XTransferProperty], imports: [CommonModule,
+        FormsModule,
+        DragDropModule,
+        XOutletModule,
+        XCheckboxModule,
+        XButtonModule,
+        XInputModule,
+        XBaseFormModule,
+        XTreeModule,
+        XTableModule], exports: [XTransferComponent] });
+/** @nocollapse */ XTransferModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, imports: [CommonModule,
+        FormsModule,
+        DragDropModule,
+        XOutletModule,
+        XCheckboxModule,
+        XButtonModule,
+        XInputModule,
+        XBaseFormModule,
+        XTreeModule,
+        XTableModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTransferModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XTransferComponent, XTransferProperty],
                     exports: [XTransferComponent],
-                    imports: [CommonModule, FormsModule, DragDropModule, XOutletModule, XCheckboxModule, XButtonModule, XInputModule, XBaseFormModule]
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        XOutletModule,
+                        XCheckboxModule,
+                        XButtonModule,
+                        XInputModule,
+                        XBaseFormModule,
+                        XTreeModule,
+                        XTableModule
+                    ]
                 }]
         }] });