@ng-nest/ui 15.0.3 → 15.0.5

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XDataConvert, XWithConfig, XInputBoolean, XIsArray, XIsObjectArray, XIsEmpty, XIsChange, XRemove, XSetData, XIsFunction, XIsObject, XIsBoolean } from '@ng-nest/ui/core';
+import { XDataConvert, XWithConfig, XInputBoolean, XIsArray, XIsObjectArray, XIsEmpty, XIsChange, XIsUndefined, XRemove, XSetData, XIsFunction, XIsObject, XIsBoolean } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
 import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { map, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i5 from '@angular/cdk/drag-drop';
 import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@ng-nest/ui/i18n';
@@ -19,11 +19,16 @@ import * as i7 from '@ng-nest/ui/checkbox';
 import { XCheckboxModule } from '@ng-nest/ui/checkbox';
 import * as i8 from '@ng-nest/ui/button';
 import { XButtonModule } from '@ng-nest/ui/button';
-import * as i9 from '@ng-nest/ui/tree';
+import * as i9 from '@ng-nest/ui/input';
+import { XInputModule } from '@ng-nest/ui/input';
+import * as i10 from '@ng-nest/ui/tree';
 import { XTreeModule } from '@ng-nest/ui/tree';
-import * as i10 from '@ng-nest/ui/table';
+import * as i11 from '@ng-nest/ui/table';
 import { XTableModule } from '@ng-nest/ui/table';
-import { XInputModule } from '@ng-nest/ui/input';
+import * as i12 from '@ng-nest/ui/keyword';
+import { XKeywordModule } from '@ng-nest/ui/keyword';
+import * as i13 from '@ng-nest/ui/link';
+import { XLinkModule } from '@ng-nest/ui/link';
 
 /**
  * Transfer
@@ -56,7 +61,7 @@ class XTransferProperty extends XControlValueAccessor {
     }
 }
 /** @nocollapse */ XTransferProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTransferProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTransferProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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 });
+/** @nocollapse */ XTransferProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTransferProperty, selector: "ng-component", inputs: { data: "data", type: "type", titles: "titles", listStyle: "listStyle", hiddenCheckAll: "hiddenCheckAll", drag: "drag", search: "search", tableHeadSearchTpl: "tableHeadSearchTpl", nodeTpl: "nodeTpl", titleTpl: "titleTpl", footerTpl: "footerTpl", tableColumns: "tableColumns", tableIndex: "tableIndex", tableSize: "tableSize", tableQuery: "tableQuery", tableTotal: "tableTotal", inverse: "inverse" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XDataConvert()
 ], XTransferProperty.prototype, "data", void 0);
@@ -82,6 +87,9 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME, 10)
 ], XTransferProperty.prototype, "tableSize", void 0);
+__decorate([
+    XInputBoolean()
+], XTransferProperty.prototype, "inverse", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTransferProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -99,10 +107,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 type: Input
             }], search: [{
                 type: Input
+            }], tableHeadSearchTpl: [{
+                type: Input
             }], nodeTpl: [{
                 type: Input
             }], titleTpl: [{
                 type: Input
+            }], footerTpl: [{
+                type: Input
             }], tableColumns: [{
                 type: Input
             }], tableIndex: [{
@@ -113,6 +125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 type: Input
             }], tableTotal: [{
                 type: Input
+            }], inverse: [{
+                type: Input
             }] } });
 
 class XTransferComponent extends XTransferProperty {
@@ -139,6 +153,9 @@ class XTransferComponent extends XTransferProperty {
             disabledButton: true
         };
         this.searchInput = '';
+        this.searchInputLeftChange = new Subject();
+        this.searchInputRightChange = new Subject();
+        this.searchDebounceTime = 200;
         this.locale = {};
         this._unSubject = new Subject();
         this.treeActivatedId = [];
@@ -176,6 +193,8 @@ class XTransferComponent extends XTransferProperty {
         this.setListStyle();
         this.setHiddenCheckAll();
         this.getTableCheckColumn();
+        this.setFooterTpl();
+        this.setTableHeadSearchTpl();
         this.i18n.localeChange
             .pipe(map((x) => x.transfer), takeUntil(this._unSubject))
             .subscribe((x) => {
@@ -183,6 +202,16 @@ class XTransferComponent extends XTransferProperty {
             XIsEmpty(this.titles) && this.setTitles();
             this.cdr.markForCheck();
         });
+        this.searchInputLeftChange
+            .pipe(debounceTime(this.searchDebounceTime), distinctUntilChanged(), takeUntil(this._unSubject))
+            .subscribe(() => {
+            this.setSearchInputChange(this.left);
+        });
+        this.searchInputRightChange
+            .pipe(debounceTime(this.searchDebounceTime), distinctUntilChanged(), takeUntil(this._unSubject))
+            .subscribe(() => {
+            this.setSearchInputChange(this.right);
+        });
     }
     ngOnChanges(changes) {
         const { data } = changes;
@@ -192,9 +221,54 @@ class XTransferComponent extends XTransferProperty {
         this._unSubject.next();
         this._unSubject.unsubscribe();
     }
-    searchInputChange(source) {
-        var _a;
-        source.list = (_a = source.searchList) === null || _a === void 0 ? void 0 : _a.filter((x) => x.label.indexOf(source.searchInput) >= 0);
+    onSearchInputChange(source) {
+        if (source.direction === 'left') {
+            this.searchInputLeftChange.next(source.searchInput);
+        }
+        else if (source.direction === 'right') {
+            this.searchInputRightChange.next(source.searchInput);
+        }
+    }
+    setSearchInputChange(source) {
+        var _a, _b, _c;
+        if (XIsUndefined(source.searchInput))
+            return;
+        if (XIsEmpty(source.searchInput)) {
+            source.list = [...source.searchList];
+        }
+        else {
+            switch (this.type) {
+                case 'list':
+                    source.list = (_a = source.searchList) === null || _a === void 0 ? void 0 : _a.filter((x) => x.label.indexOf(source.searchInput) >= 0);
+                    break;
+                case 'tree':
+                    if (source.direction === 'right') {
+                        source.list = (_b = source.searchList) === null || _b === void 0 ? void 0 : _b.filter((x) => x.label.indexOf(source.searchInput) >= 0);
+                    }
+                    else if (source.direction === 'left') {
+                        let searchList = (_c = source.searchList) === null || _c === void 0 ? void 0 : _c.filter((x) => x.label.indexOf(source.searchInput) >= 0);
+                        let parents = [];
+                        const findParent = (item) => {
+                            var _a;
+                            if (!item.pid)
+                                return;
+                            let parent = (_a = source.searchList) === null || _a === void 0 ? void 0 : _a.find((x) => x.id === item.pid);
+                            if (parent && !parents.some((x) => x.id === parent.id)) {
+                                parents.push(parent);
+                                findParent(parent);
+                            }
+                        };
+                        for (let item of searchList) {
+                            findParent(item);
+                        }
+                        source.list = [...searchList, ...parents];
+                    }
+                    break;
+                case 'table':
+                    break;
+            }
+        }
+        this.setListCount(this.type, source);
         this.cdr.detectChanges();
     }
     checkedAllChange($event, source) {
@@ -239,10 +313,14 @@ class XTransferComponent extends XTransferProperty {
         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;
-            const index = (_a = from.list) === null || _a === void 0 ? void 0 : _a.indexOf(x);
+            var _a, _b;
+            let index = (_a = from.list) === null || _a === void 0 ? void 0 : _a.indexOf(x);
             x.checked = false;
             transferArrayItem(from.list, to.list, index, j);
+            if (this.search) {
+                index = (_b = from.searchList) === null || _b === void 0 ? void 0 : _b.indexOf(x);
+                transferArrayItem(from.searchList, to.searchList, index, j);
+            }
             j++;
         });
         from.list = [...from.list];
@@ -275,6 +353,9 @@ class XTransferComponent extends XTransferProperty {
         }
         else {
             checkedItems = XRemove(from.list, (x) => !x.disabled && x.checked);
+            if (this.search) {
+                XRemove(from.searchList, (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) {
@@ -402,6 +483,21 @@ class XTransferComponent extends XTransferProperty {
         this.setCheckedCount('table', source);
         this.setButtonDisabled(source);
     }
+    onInverse(source) {
+        for (let item of source.list) {
+            if (!item.disabled) {
+                item.checked = !item.checked;
+            }
+        }
+        let type = `${this.type}`;
+        if (type === 'tree' && source.direction === 'right') {
+            type = 'list';
+        }
+        this.setCheckedCount(type, source);
+        this.setCheckedAll(source);
+        this.setButtonDisabled(source);
+        this.cdr.detectChanges();
+    }
     getTableCheckColumn() {
         var _a;
         if (this.type !== 'table' || XIsEmpty(this.tableColumns))
@@ -451,14 +547,14 @@ class XTransferComponent extends XTransferProperty {
         }
         this.onChange(this.value);
     }
-    setSearchList(..._sources) {
-        // if (this.search) {
-        //   for (let source of sources) {
-        //     if (XIsEmpty(source.searchInput)) {
-        //       source.searchList = [...(source.list as XTransferNode[])];
-        //     }
-        //   }
-        // }
+    setSearchList(...sources) {
+        if (this.search) {
+            for (let source of sources) {
+                if (XIsEmpty(source.searchInput)) {
+                    source.searchList = [...source.list];
+                }
+            }
+        }
     }
     setData() {
         if (this.type === 'table') {
@@ -593,13 +689,39 @@ class XTransferComponent extends XTransferProperty {
             this.right.hiddenCheckAll = this.hiddenCheckAll[1];
         this.cdr.detectChanges();
     }
+    setFooterTpl() {
+        if (XIsUndefined(this.footerTpl))
+            return;
+        if (this.footerTpl.length > 0) {
+            this.left.footerTpl = this.footerTpl[0];
+        }
+        if (this.footerTpl.length > 1) {
+            this.right.footerTpl = this.footerTpl[1];
+        }
+    }
+    setTableHeadSearchTpl() {
+        if (XIsUndefined(this.tableHeadSearchTpl))
+            return;
+        if (this.tableHeadSearchTpl.length > 0) {
+            this.left.tableHeadSearchTpl = this.tableHeadSearchTpl[0];
+        }
+        if (this.tableHeadSearchTpl.length > 1) {
+            this.right.tableHeadSearchTpl = this.tableHeadSearchTpl[1];
+        }
+    }
 }
 /** @nocollapse */ XTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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 });
+/** @nocollapse */ XTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: XTransferComponent, selector: "x-transfer", providers: [XValueAccessor(XTransferComponent)], viewQueries: [{ propertyName: "leftTableCom", first: true, predicate: ["leftTableCom"], descendants: true }, { propertyName: "rightTableCom", first: true, predicate: ["rightTableCom"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #transfer class=\"x-transfer\" cdkDropListGroup [ngClass]=\"classMap\">\r\n  <div class=\"x-transfer-box\" [class.x-transfer-has-footer]=\"left.footerTpl\">\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          [labelTpl]=\"treeLabelTpl\"\r\n        ></x-tree>\r\n        <ng-template #treeLabelTpl let-node=\"$node\">\r\n          <span class=\"x-transfer-tree-label\" x-keyword [text]=\"left.searchInput!\">{{ node.label }}</span>\r\n        </ng-template>\r\n        <x-table\r\n          #leftTableCom\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          [headSearchTpl]=\"left.tableHeadSearchTpl\"\r\n        ></x-table>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"x-transfer-footer\" *ngIf=\"left.footerTpl\">\r\n      <ng-container *ngTemplateOutlet=\"left.footerTpl; context: { $source: left }\"></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\" [class.x-transfer-has-footer]=\"right.footerTpl\">\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        #rightTableCom\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        [headSearchTpl]=\"right.tableHeadSearchTpl\"\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 class=\"x-transfer-footer\" *ngIf=\"right.footerTpl\">\r\n      <ng-container *ngTemplateOutlet=\"right.footerTpl; context: { $source: right }\"></ng-container>\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    <div class=\"x-transfer-title-left\">\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      <x-link *ngIf=\"inverse && type === 'list'\" class=\"x-transfer-inverse\" type=\"primary\" (click)=\"onInverse(source)\">\u53CD\u9009</x-link>\r\n    </div>\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 && type !== 'table'\">\r\n    <x-input icon=\"fto-search\" [(ngModel)]=\"source.searchInput\" (ngModelChange)=\"onSearchInputChange(source)\" clearable></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 : labelTpl, 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 #labelTpl>\r\n    <span x-keyword [text]=\"source.searchInput!\">{{ node.label }}</span>\r\n  </ng-template>\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);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title-left{display:inline-flex;align-items:center}.x-transfer-inverse{margin:0 .5rem}.x-transfer-total{margin-left:.325rem}.x-transfer-box{min-width:12rem}.x-transfer-list{display:flex;flex-direction:column;height:18rem;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;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-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-transfer-search x-input{width:100%}.x-transfer-tree-label{flex:1}.x-transfer-footer{padding:.25rem .5625rem;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)}.x-transfer-has-footer .x-transfer-list{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}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.XInputComponent, selector: "x-input" }, { kind: "component", type: i10.XTreeComponent, selector: "x-tree" }, { kind: "component", type: i11.XTableComponent, selector: "x-table" }, { kind: "directive", type: i12.XKeywordDirective, selector: "[x-keyword]" }, { kind: "component", type: i13.XLinkComponent, selector: "x-link" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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    <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 }]; } });
+            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\" [class.x-transfer-has-footer]=\"left.footerTpl\">\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          [labelTpl]=\"treeLabelTpl\"\r\n        ></x-tree>\r\n        <ng-template #treeLabelTpl let-node=\"$node\">\r\n          <span class=\"x-transfer-tree-label\" x-keyword [text]=\"left.searchInput!\">{{ node.label }}</span>\r\n        </ng-template>\r\n        <x-table\r\n          #leftTableCom\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          [headSearchTpl]=\"left.tableHeadSearchTpl\"\r\n        ></x-table>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"x-transfer-footer\" *ngIf=\"left.footerTpl\">\r\n      <ng-container *ngTemplateOutlet=\"left.footerTpl; context: { $source: left }\"></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\" [class.x-transfer-has-footer]=\"right.footerTpl\">\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        #rightTableCom\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        [headSearchTpl]=\"right.tableHeadSearchTpl\"\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 class=\"x-transfer-footer\" *ngIf=\"right.footerTpl\">\r\n      <ng-container *ngTemplateOutlet=\"right.footerTpl; context: { $source: right }\"></ng-container>\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    <div class=\"x-transfer-title-left\">\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      <x-link *ngIf=\"inverse && type === 'list'\" class=\"x-transfer-inverse\" type=\"primary\" (click)=\"onInverse(source)\">\u53CD\u9009</x-link>\r\n    </div>\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 && type !== 'table'\">\r\n    <x-input icon=\"fto-search\" [(ngModel)]=\"source.searchInput\" (ngModelChange)=\"onSearchInputChange(source)\" clearable></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 : labelTpl, 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 #labelTpl>\r\n    <span x-keyword [text]=\"source.searchInput!\">{{ node.label }}</span>\r\n  </ng-template>\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);background-color:var(--x-background);color:var(--x-text-300)}.x-transfer-title-left{display:inline-flex;align-items:center}.x-transfer-inverse{margin:0 .5rem}.x-transfer-total{margin-left:.325rem}.x-transfer-box{min-width:12rem}.x-transfer-list{display:flex;flex-direction:column;height:18rem;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-top:none;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-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-transfer-search x-input{width:100%}.x-transfer-tree-label{flex:1}.x-transfer-footer{padding:.25rem .5625rem;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)}.x-transfer-has-footer .x-transfer-list{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}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 }]; }, propDecorators: { leftTableCom: [{
+                type: ViewChild,
+                args: ['leftTableCom']
+            }], rightTableCom: [{
+                type: ViewChild,
+                args: ['rightTableCom']
+            }] } });
 
 class XTransferModule {
 }
@@ -613,7 +735,9 @@ class XTransferModule {
         XInputModule,
         XBaseFormModule,
         XTreeModule,
-        XTableModule], exports: [XTransferComponent] });
+        XTableModule,
+        XKeywordModule,
+        XLinkModule], exports: [XTransferComponent] });
 /** @nocollapse */ XTransferModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTransferModule, imports: [CommonModule,
         FormsModule,
         DragDropModule,
@@ -623,7 +747,9 @@ class XTransferModule {
         XInputModule,
         XBaseFormModule,
         XTreeModule,
-        XTableModule] });
+        XTableModule,
+        XKeywordModule,
+        XLinkModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: XTransferModule, decorators: [{
             type: NgModule,
             args: [{
@@ -639,7 +765,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                         XInputModule,
                         XBaseFormModule,
                         XTreeModule,
-                        XTableModule
+                        XTableModule,
+                        XKeywordModule,
+                        XLinkModule
                     ]
                 }]
         }] });