import * as i4 from '@angular/cdk/scrolling';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, ContentChild, ViewChild, Output, NgModule } from '@angular/core';
import * as i1 from 'ng-devui/i18n';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i5 from 'ng-devui/search';
import { SearchModule } from 'ng-devui/search';
import * as i6 from 'ng-devui/checkbox';
import { CheckBoxModule } from 'ng-devui/checkbox';
import * as i7 from 'ng-devui/dragdrop';
import { DragDropModule } from 'ng-devui/dragdrop';
import * as i8 from 'ng-devui/popover';
import { PopoverModule } from 'ng-devui/popover';

var TransferDirection;
(function (TransferDirection) {
    TransferDirection[TransferDirection["SOURCE"] = 0] = "SOURCE";
    TransferDirection[TransferDirection["TARGET"] = 1] = "TARGET";
})(TransferDirection || (TransferDirection = {}));

class TransferComponent {
    constructor(i18n) {
        this.i18n = i18n;
        this.sourceOption = [];
        this.targetOption = [];
        this.titles = { source: 'source', target: 'target' };
        this.height = '320px';
        this.isSearch = false;
        this.disabled = false;
        this.isSourceDroppable = false;
        this.isTargetDroppable = false;
        this.showOptionTitle = false;
        this.virtualScroll = false;
        // 自定义
        this.customSourceCheckedLen = 0;
        this.customTargetCheckedLen = 0;
        this.transferToTarget = new EventEmitter();
        this.transferToSource = new EventEmitter();
        this.searching = new EventEmitter();
        this.transferring = new EventEmitter();
        this.afterTransfer = new EventEmitter();
        this.transferDirection = TransferDirection;
        this.sourceDisplayOption = [];
        this.sourceDisplayOptionLen = 0;
        this.sourceCheckedLen = 0;
        this.sourceHalfChecked = false;
        this.sourceAllChecked = false;
        this.sourceCanTransfer = false;
        this.targetDisplayOption = [];
        this.targetDisplayOptionLen = 0;
        this.targetCheckedLen = 0;
        this.targetHalfChecked = false;
        this.targetAllChecked = false;
        this.targetCanTransfer = false;
        this.sourceSearchText = '';
        this.targetSearchText = '';
        this.itemSize = 36;
        this.minBuffer = parseInt(this.height, 10) * 2;
        this.maxBuffer = parseInt(this.height, 10) * 3;
        this.id = TransferComponent.ID_SEED++;
    }
    ngOnInit() {
        this.setI18nText();
        this.sourceDisplayOption = this.sourceOption;
        this.sourceDisplayOptionLen = this.sourceDisplayOption.length;
        this.targetDisplayOption = this.targetOption;
        this.targetDisplayOptionLen = this.targetDisplayOption.length;
    }
    canChange() {
        let changeResult = Promise.resolve(true);
        if (this.beforeTransfer) {
            const result = this.beforeTransfer(this.sourceOption, this.targetOption);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
    setI18nText() {
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.common;
        });
    }
    ngOnChanges(changes) {
        if (changes && changes.customSourceCheckedLen) {
            this.targetCanTransfer = !!(this.customSourceCheckedLen > 0);
        }
        if (changes && changes.customTargetCheckedLen) {
            this.sourceCanTransfer = !!(this.customTargetCheckedLen > 0);
        }
        if (changes && (changes.sourceOption || changes.targetOption)) {
            this.sourceDisplayOption = this.sourceOption;
            this.sourceDisplayOptionLen = this.sourceDisplayOption ? this.sourceDisplayOption.length : 0;
            this.targetDisplayOption = this.targetOption;
            this.targetDisplayOptionLen = this.targetDisplayOption ? this.targetDisplayOption.length : 0;
        }
    }
    checkboxChange(direction, event) {
        if (direction === TransferDirection.SOURCE) {
            this.sourceDisplayOption.filter(item => item.checked).length > 0 ? this.targetCanTransfer = true : this.targetCanTransfer = false;
            this.listTotalCheck(direction);
        }
        else if (direction === TransferDirection.TARGET) {
            this.targetDisplayOption.filter(item => item.checked).length > 0 ? this.sourceCanTransfer = true : this.sourceCanTransfer = false;
            this.listTotalCheck(direction);
        }
    }
    listTotalCheck(direction) {
        if (direction === TransferDirection.SOURCE || !direction) {
            const sourceLen = this.sourceDisplayOption.filter(item => item.checked).length;
            this.sourceCheckedLen = sourceLen;
            if (sourceLen === 0) {
                this.sourceAllChecked = false;
                this.sourceHalfChecked = false;
            }
            else {
                if (sourceLen !== this.sourceDisplayOption.length) {
                    this.sourceAllChecked = false;
                    this.sourceHalfChecked = true;
                }
                else {
                    this.sourceAllChecked = true;
                    this.sourceHalfChecked = false;
                }
            }
        }
        if (direction === TransferDirection.TARGET || !direction) {
            const rightLen = this.targetDisplayOption.filter(item => item.checked).length;
            this.targetCheckedLen = rightLen;
            if (rightLen === 0) {
                this.targetAllChecked = false;
                this.targetHalfChecked = false;
            }
            else {
                if (rightLen !== this.targetDisplayOption.length) {
                    this.targetAllChecked = false;
                    this.targetHalfChecked = true;
                }
                else {
                    this.targetAllChecked = true;
                    this.targetHalfChecked = false;
                }
            }
        }
        this.sourceDisplayOptionLen = this.sourceDisplayOption.length;
        this.targetDisplayOptionLen = this.targetDisplayOption.length;
    }
    transferTo(direction) {
        this.canChange().then(val => {
            if (!val) {
                return;
            }
            if (this.transferring.observers.length) {
                this.transferring.emit(direction);
                setTimeout(() => {
                    this.transferHandle(direction);
                });
            }
            else {
                const changeData = [];
                if (direction === TransferDirection.TARGET) {
                    // 对源数据更改
                    this.sourceDisplayOption.filter(item => item.checked === true).forEach(item => {
                        const tmp = { name: item.name, value: item.value, id: item.id, checked: false };
                        this.targetOption.push(tmp);
                        changeData.push(tmp);
                        this.sourceOption.splice(this.sourceOption.indexOf(item), 1);
                    });
                }
                else if (direction === TransferDirection.SOURCE) {
                    this.targetDisplayOption.filter(item => item.checked === true).forEach(item => {
                        const tmp = { name: item.name, value: item.value, id: item.id, checked: false };
                        this.sourceOption.push(tmp);
                        changeData.push(tmp);
                        this.targetOption.splice(this.targetOption.indexOf(item), 1);
                    });
                    this.targetOption = this.targetOption.filter(item => item.checked !== true);
                }
                this.transferHandle(direction, changeData);
            }
        });
    }
    transferHandle(direction, changeData) {
        if (direction === TransferDirection.TARGET) {
            this.targetCanTransfer = false;
            if (this.sourceCustomViewTemplate) {
                this.transferToTarget.next({});
            }
            else {
                changeData === undefined
                    ? this.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption })
                    : this.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption, changeData });
            }
            if (this.isSearch && this.sourceSearchText !== '') {
                this.sourceSearchText = '';
            }
        }
        else if (direction === TransferDirection.SOURCE) {
            this.sourceCanTransfer = false;
            if (this.targetCustomViewTemplate) {
                this.transferToSource.next({});
            }
            else {
                changeData === undefined
                    ? this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption })
                    : this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption, changeData });
            }
            if (this.isSearch && this.targetSearchText !== '') {
                this.targetSearchText = '';
            }
        }
        this.targetDisplayOption = [...this.targetOption];
        this.sourceDisplayOption = [...this.sourceOption];
        this.listTotalCheck(TransferDirection.TARGET);
        this.listTotalCheck(TransferDirection.SOURCE);
        this.afterTransfer.emit(direction);
    }
    checkAll(direction, event) {
        if (direction === TransferDirection.SOURCE) {
            if (event) {
                this.sourceHalfChecked = false;
                this.sourceCheckedLen = this.sourceDisplayOption.filter(item => item.disabled !== true).length;
            }
            else {
                this.sourceCheckedLen = 0;
            }
            this.targetCanTransfer = event;
            this.sourceDisplayOption.forEach(item => {
                if (item.checked !== event && item.disabled !== true) {
                    item.checked = event;
                }
            });
        }
        else if (direction === TransferDirection.TARGET) {
            if (event) {
                this.targetHalfChecked = false;
                this.targetCheckedLen = this.targetDisplayOption.filter(item => item.disabled !== true).length;
            }
            else {
                this.targetCheckedLen = 0;
            }
            this.sourceCanTransfer = event;
            this.targetDisplayOption.forEach(item => {
                if (item.checked !== event && item.disabled !== true) {
                    item.checked = event;
                }
            });
        }
    }
    search(direction, keyword) {
        if (this.searching.observers.length) {
            this.searching.emit({ direction, keyword });
        }
        else {
            if (keyword !== '') {
                if (direction === TransferDirection.SOURCE) {
                    this.sourceDisplayOption = this.sourceOption.filter(item => item.name.includes(keyword));
                }
                else if (direction === TransferDirection.TARGET) {
                    this.targetDisplayOption = this.targetOption.filter(item => item.name.includes(keyword));
                }
            }
            else {
                if (direction === TransferDirection.SOURCE) {
                    this.sourceDisplayOption = this.sourceOption;
                }
                else if (direction === TransferDirection.TARGET) {
                    this.targetDisplayOption = this.targetOption;
                }
            }
            this.listTotalCheck(direction);
        }
    }
    onDrop(direction, e) {
        let index = e.dropIndex;
        const fromIndex = e.dragFromIndex;
        if (-1 !== index) {
            if (-1 !== fromIndex && index > fromIndex) {
                index--;
            }
            if (direction === TransferDirection.SOURCE) {
                this.sourceOption.splice(index, 0, fromIndex === -1 ? e.dragData : this.sourceOption.splice(fromIndex, 1)[0]);
                this.sourceDisplayOption = [...this.sourceOption];
                this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
            }
            else {
                this.targetOption.splice(index, 0, fromIndex === -1 ? e.dragData : this.targetOption.splice(fromIndex, 1)[0]);
                this.targetDisplayOption = [...this.targetOption];
                this.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
            }
        }
        else {
            if (direction === TransferDirection.SOURCE) {
                this.sourceOption.push(e.dragData);
                this.sourceDisplayOption = [...this.sourceOption];
                this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
            }
            else {
                this.targetOption.push(e.dragData);
                this.targetDisplayOption = [...this.targetOption];
                this.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
            }
        }
    }
    trackByFn(index, item) {
        return index;
    }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
    }
}
TransferComponent.ID_SEED = 0;
TransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TransferComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
TransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TransferComponent, selector: "d-transfer", inputs: { sourceOption: "sourceOption", targetOption: "targetOption", titles: "titles", height: "height", isSearch: "isSearch", disabled: "disabled", isSourceDroppable: "isSourceDroppable", isTargetDroppable: "isTargetDroppable", showOptionTitle: "showOptionTitle", beforeTransfer: "beforeTransfer", virtualScroll: "virtualScroll", customSourceCheckedLen: "customSourceCheckedLen", customTargetCheckedLen: "customTargetCheckedLen" }, outputs: { transferToTarget: "transferToTarget", transferToSource: "transferToSource", searching: "searching", transferring: "transferring", afterTransfer: "afterTransfer" }, queries: [{ propertyName: "sourceCustomViewTemplate", first: true, predicate: ["sourceTemplate"], descendants: true }, { propertyName: "targetCustomViewTemplate", first: true, predicate: ["targetTemplate"], descendants: true }], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-transfer-container\">\n  <div class=\"devui-transfer-source\">\n    <div class=\"devui-transfer-left\">\n      <ng-container *ngIf=\"!sourceCustomViewTemplate\">\n        <div class=\"devui-transfer-title\">\n          <d-checkbox\n            [label]=\"titles.source\"\n            [disabled]=\"disabled || sourceDisplayOptionLen === 0\"\n            [isShowTitle]=\"false\"\n            (change)=\"checkAll(transferDirection.SOURCE, $event)\"\n            [halfchecked]=\"sourceHalfChecked\"\n            [(ngModel)]=\"sourceAllChecked\"\n          >\n          </d-checkbox>\n          <span class=\"devui-transfer-num\">{{ sourceCheckedLen }}/{{ sourceDisplayOptionLen }}</span>\n        </div>\n        <div class=\"devui-transfer-line\"></div>\n        <div class=\"devui-transfer-content\" [class.disabled]=\"disabled\">\n          <div class=\"devui-transfer-search\" *ngIf=\"isSearch\">\n            <d-search\n              style=\"width: 100%\"\n              [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n              [size]=\"'sm'\"\n              [(ngModel)]=\"sourceSearchText\"\n              (searchFn)=\"search(transferDirection.SOURCE, $event)\"\n            ></d-search>\n          </div>\n          <ul\n            *ngIf=\"!virtualScroll; else sourceScrollViewTpl\"\n            [id]=\"'default-left-' + id\"\n            dDroppable\n            [dropScope]=\"'transfer-source-' + id\"\n            (dropEvent)=\"onDrop(transferDirection.SOURCE, $event)\"\n            [ngStyle]=\"{ height: height }\"\n            dSortable\n            #sourceTransfer\n          >\n            <ng-container *ngFor=\"let item of sourceDisplayOption; let index = index; trackBy: trackByFn\">\n              <ng-template [ngTemplateOutlet]=\"sourceItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"sourceCustomViewTemplate\">\n        <ng-template [ngTemplateOutlet]=\"sourceCustomViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"devui-transfer-option\">\n    <div class=\"devui-transfer-op\">\n      <svg\n        *ngIf=\"!sourceCanTransfer || disabled\"\n        width=\"36px\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        class=\"devui-transfer-default-svg\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -542.000000)\">\n            <g\n              transform=\"translate(960.000000, 560.000000) scale(-1, 1) translate(-960.000000, -560.000000) translate(942.000000, 542.000000)\"\n            >\n              <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\n              <path\n                d=\"M20,22.003961 C20,22.2801034 20.2238576,22.503961 20.5,22.503961 C20.7761424,22.503961 21,22.2801034 21,22.003961 L21,13.503961 L12.5,13.503961 C12.2238576,13.503961 12,13.7278187 12,14.003961 C12,14.2801034 12.2238576,14.503961 12.5,14.503961 L20,14.503961 L20,22.003961 Z\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n      <svg\n        *ngIf=\"sourceCanTransfer && !disabled\"\n        [class.disabled]=\"disabled\"\n        (click)=\"transferTo(transferDirection.SOURCE)\"\n        width=\"36px\"\n        height=\"36px\"\n        class=\"devui-transfer-active-svg\"\n        viewBox=\"0 0 36 36\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -1086.000000)\">\n            <g transform=\"translate(942.000000, 1086.000000)\">\n              <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\n              <path\n                d=\"M23,22.003961 C23,22.2801034 23.2238576,22.503961 23.5,22.503961 C23.7761424,22.503961 24,22.2801034 24,22.003961 L24,13.503961 L15.5,13.503961 C15.2238576,13.503961 15,13.7278187 15,14.003961 C15,14.2801034 15.2238576,14.503961 15.5,14.503961 L23,14.503961 L23,22.003961 Z\"\n                fill=\"#FFFFFF\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"devui-transfer-op\" style=\"margin-top: 12px\">\n      <svg\n        width=\"36px\"\n        *ngIf=\"!targetCanTransfer || disabled\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        class=\"devui-transfer-default-svg\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -1030.000000)\">\n            <g transform=\"translate(942.000000, 1030.000000)\">\n              <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\n              <path\n                d=\"M20,22.003961 C20,22.2801034 20.2238576,22.503961 20.5,22.503961 C20.7761424,22.503961 21,22.2801034 21,22.003961 L21,13.503961 L12.5,13.503961 C12.2238576,13.503961 12,13.7278187 12,14.003961 C12,14.2801034 12.2238576,14.503961 12.5,14.503961 L20,14.503961 L20,22.003961 Z\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n      <svg\n        width=\"36px\"\n        [class.disabled]=\"disabled\"\n        *ngIf=\"targetCanTransfer && !disabled\"\n        (click)=\"transferTo(transferDirection.TARGET)\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        version=\"1.1\"\n        class=\"devui-transfer-active-svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -486.000000)\">\n            <g\n              id=\"transfer_icon/right-activated\"\n              transform=\"translate(960.000000, 504.000000) scale(-1, 1) translate(-960.000000, -504.000000) translate(942.000000, 486.000000)\"\n            >\n              <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\n              <path\n                d=\"M23,22.003961 C23,22.2801034 23.2238576,22.503961 23.5,22.503961 C23.7761424,22.503961 24,22.2801034 24,22.003961 L24,13.503961 L15.5,13.503961 C15.2238576,13.503961 15,13.7278187 15,14.003961 C15,14.2801034 15.2238576,14.503961 15.5,14.503961 L23,14.503961 L23,22.003961 Z\"\n                fill=\"#FFFFFF\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </div>\n  <div class=\"devui-transfer-target\">\n    <div class=\"devui-transfer-right\">\n      <ng-container *ngIf=\"!targetCustomViewTemplate\">\n        <div class=\"devui-transfer-title\">\n          <d-checkbox\n            [disabled]=\"disabled || targetDisplayOptionLen === 0\"\n            [label]=\"titles.target\"\n            [isShowTitle]=\"false\"\n            (change)=\"checkAll(transferDirection.TARGET, $event)\"\n            [halfchecked]=\"targetHalfChecked\"\n            [(ngModel)]=\"targetAllChecked\"\n          >\n          </d-checkbox>\n          <span class=\"devui-transfer-num\">{{ targetCheckedLen }}/{{ targetDisplayOptionLen }}</span>\n        </div>\n        <div class=\"devui-transfer-line\"></div>\n        <div class=\"devui-transfer-content\" [class.disabled]=\"disabled\">\n          <div class=\"devui-transfer-search\" *ngIf=\"isSearch\" [class.disabled]=\"disabled\">\n            <d-search\n              style=\"width: 100%\"\n              [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n              [size]=\"'sm'\"\n              [(ngModel)]=\"targetSearchText\"\n              (searchFn)=\"search(transferDirection.TARGET, $event)\"\n            ></d-search>\n          </div>\n          <ul\n            *ngIf=\"!virtualScroll; else targetScrollViewTpl\"\n            dDroppable\n            dSortable\n            [dropScope]=\"'transfer-target-' + id\"\n            (dropEvent)=\"onDrop(transferDirection.TARGET, $event)\"\n            [ngStyle]=\"{ height: height }\"\n            #targetTransfer\n          >\n            <ng-container *ngFor=\"let item of targetDisplayOption; let index = index; trackBy: trackByFn\">\n              <ng-template [ngTemplateOutlet]=\"targetItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"targetCustomViewTemplate\">\n        <ng-template [ngTemplateOutlet]=\"targetCustomViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<!--Source Item\u6A21\u677F-->\n<ng-template #sourceItemTpl let-item=\"item\" let-index=\"index\">\n  <li\n    dDraggable\n    [dragScope]=\"'transfer-source-' + id\"\n    [dragHandle]=\"'.devui-transfer-drag-handle, .devui-transfer-drag-handle *'\"\n    [dragData]=\"item\"\n  >\n    <span class=\"devui-transfer-drag-wrap\" [ngClass]=\"{ 'devui-transfer-drag-handle': isSourceDroppable }\">\n      <svg\n        *ngIf=\"isSourceDroppable\"\n        [class.disabled]=\"disabled\"\n        class=\"devui-transfer-drag-ico\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\n            <path\n              d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <d-checkbox\n      dPopover\n      [controlled]=\"showOptionTitle\"\n      [trigger]=\"'hover'\"\n      [content]=\"item['name']\"\n      [popMaxWidth]=\"400\"\n      [label]=\"item['name']\"\n      [isShowTitle]=\"false\"\n      [(ngModel)]=\"item['checked']\"\n      [disabled]=\"item['disabled'] || disabled\"\n      (change)=\"checkboxChange(transferDirection.SOURCE, $event)\"\n    >\n    </d-checkbox>\n  </li>\n</ng-template>\n\n<!--Source\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #sourceScrollViewTpl>\n  <cdk-virtual-scroll-viewport\n    [ngStyle]=\"{\n      height: height,\n      width: '100%'\n    }\"\n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"minBuffer\"\n    [maxBufferPx]=\"maxBuffer\"\n    #sourceTransfer\n  >\n    <ng-container *cdkVirtualFor=\"let item of sourceDisplayOption; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"sourceItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<!--Target Item\u6A21\u677F-->\n<ng-template #targetItemTpl let-item=\"item\" let-index=\"index\">\n  <li\n    dDraggable\n    [dragScope]=\"'transfer-target-' + id\"\n    [dragHandle]=\"'.devui-transfer-drag-handle, .devui-transfer-drag-handle *'\"\n    [dragData]=\"item\"\n  >\n    <span class=\"devui-transfer-drag-wrap\" [ngClass]=\"{ 'devui-transfer-drag-handle': isTargetDroppable }\">\n      <svg\n        *ngIf=\"isTargetDroppable\"\n        [class.disabled]=\"disabled\"\n        class=\"devui-transfer-drag-ico\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\n            <path\n              d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <d-checkbox\n      dPopover\n      [controlled]=\"showOptionTitle\"\n      [trigger]=\"'hover'\"\n      [content]=\"item['name']\"\n      [popMaxWidth]=\"400\"\n      [label]=\"item['name']\"\n      [isShowTitle]=\"false\"\n      [(ngModel)]=\"item['checked']\"\n      [disabled]=\"item['disabled'] || disabled\"\n      (change)=\"checkboxChange(transferDirection.TARGET, $event)\"\n    >\n    </d-checkbox>\n  </li>\n</ng-template>\n\n<!--Target\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #targetScrollViewTpl>\n  <cdk-virtual-scroll-viewport\n    [ngStyle]=\"{\n      height: height,\n      width: '100%'\n    }\"\n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"minBuffer\"\n    [maxBufferPx]=\"maxBuffer\"\n    #targetTransfer\n  >\n    <ng-container *cdkVirtualFor=\"let item of targetDisplayOption; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"targetItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-transfer-container{width:100%;display:flex;flex-wrap:warp;justify-content:center;-moz-justfy-center:center;-ms-justify-center:center;-o-justfy-cneter:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center}.devui-transfer-source,.devui-transfer-target{width:calc(50% - 28px);border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.devui-transfer-option{padding:0 12px}.devui-transfer-search{margin:0 16px 8px 20px}.devui-transfer-num{flex:1;text-align:right;align-self:center;-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;-o-align-self:center;font-size:12px;font-size:var(--devui-font-size, 12px);color:#71757f;color:var(--devui-aide-text, #71757f);margin-right:12px}.disable{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}:host ::ng-deep .disabled .devui-checkbox label{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-transfer-op .devui-transfer-default-svg circle{fill:#f5f5f5;fill:var(--devui-disabled-bg, #f5f5f5);stroke:#dfe1e6;stroke:var(--devui-disabled-line, #dfe1e6)}.devui-transfer-op .devui-transfer-default-svg path{fill:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}.devui-transfer-op .devui-transfer-active-svg{cursor:pointer}.devui-transfer-op .devui-transfer-active-svg circle{fill:#252b3a;fill:var(--devui-icon-fill-active, #252b3a);stroke:devui-icon-fill-active}.devui-transfer-op .devui-transfer-active-svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-transfer-content{padding-top:8px}.devui-transfer-content ul{overflow:auto}.devui-transfer-content li{display:flex;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;height:36px;line-height:36px;margin-right:20px}.devui-transfer-content li d-checkbox{overflow:hidden}.devui-transfer-content li d-checkbox ::ng-deep .devui-checkbox label{text-overflow:ellipsis;width:100%;overflow:hidden;white-space:nowrap}.devui-transfer-content li:hover svg{opacity:1;cursor:move}.devui-transfer-content li .devui-transfer-drag-wrap{min-width:21px;height:80%;padding-right:4px;display:inline-flex;align-items:center}.devui-transfer-content li svg{opacity:0;display:inline-block}.devui-transfer-content li svg *{pointer-events:none}.devui-transfer-content li .devui-transfer-drag-ico{width:16px;height:16px}.devui-transfer-title{display:flex;height:40px;line-height:40px;align-items:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;margin-left:20px}.devui-transfer-line{height:1px;background:#f2f2f3;background:var(--devui-dividing-line, #f2f2f3)}.option-btn{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i5.SearchComponent, selector: "d-search", inputs: ["size", "placeholder", "maxLength", "isKeyupSearch", "delay", "disabled", "cssClass", "iconPosition", "noBorder", "autoFocus"], outputs: ["searchFn"], exportAs: ["search"] }, { kind: "component", type: i6.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "beforeChange"], outputs: ["change"] }, { kind: "directive", type: i7.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "directive", type: i7.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: i7.SortableDirective, selector: "[dSortable]", inputs: ["dSortable", "dSortableZMode"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TransferComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-transfer', preserveWhitespaces: false, template: "<div class=\"devui-transfer-container\">\n  <div class=\"devui-transfer-source\">\n    <div class=\"devui-transfer-left\">\n      <ng-container *ngIf=\"!sourceCustomViewTemplate\">\n        <div class=\"devui-transfer-title\">\n          <d-checkbox\n            [label]=\"titles.source\"\n            [disabled]=\"disabled || sourceDisplayOptionLen === 0\"\n            [isShowTitle]=\"false\"\n            (change)=\"checkAll(transferDirection.SOURCE, $event)\"\n            [halfchecked]=\"sourceHalfChecked\"\n            [(ngModel)]=\"sourceAllChecked\"\n          >\n          </d-checkbox>\n          <span class=\"devui-transfer-num\">{{ sourceCheckedLen }}/{{ sourceDisplayOptionLen }}</span>\n        </div>\n        <div class=\"devui-transfer-line\"></div>\n        <div class=\"devui-transfer-content\" [class.disabled]=\"disabled\">\n          <div class=\"devui-transfer-search\" *ngIf=\"isSearch\">\n            <d-search\n              style=\"width: 100%\"\n              [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n              [size]=\"'sm'\"\n              [(ngModel)]=\"sourceSearchText\"\n              (searchFn)=\"search(transferDirection.SOURCE, $event)\"\n            ></d-search>\n          </div>\n          <ul\n            *ngIf=\"!virtualScroll; else sourceScrollViewTpl\"\n            [id]=\"'default-left-' + id\"\n            dDroppable\n            [dropScope]=\"'transfer-source-' + id\"\n            (dropEvent)=\"onDrop(transferDirection.SOURCE, $event)\"\n            [ngStyle]=\"{ height: height }\"\n            dSortable\n            #sourceTransfer\n          >\n            <ng-container *ngFor=\"let item of sourceDisplayOption; let index = index; trackBy: trackByFn\">\n              <ng-template [ngTemplateOutlet]=\"sourceItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"sourceCustomViewTemplate\">\n        <ng-template [ngTemplateOutlet]=\"sourceCustomViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"devui-transfer-option\">\n    <div class=\"devui-transfer-op\">\n      <svg\n        *ngIf=\"!sourceCanTransfer || disabled\"\n        width=\"36px\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        class=\"devui-transfer-default-svg\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -542.000000)\">\n            <g\n              transform=\"translate(960.000000, 560.000000) scale(-1, 1) translate(-960.000000, -560.000000) translate(942.000000, 542.000000)\"\n            >\n              <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\n              <path\n                d=\"M20,22.003961 C20,22.2801034 20.2238576,22.503961 20.5,22.503961 C20.7761424,22.503961 21,22.2801034 21,22.003961 L21,13.503961 L12.5,13.503961 C12.2238576,13.503961 12,13.7278187 12,14.003961 C12,14.2801034 12.2238576,14.503961 12.5,14.503961 L20,14.503961 L20,22.003961 Z\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n      <svg\n        *ngIf=\"sourceCanTransfer && !disabled\"\n        [class.disabled]=\"disabled\"\n        (click)=\"transferTo(transferDirection.SOURCE)\"\n        width=\"36px\"\n        height=\"36px\"\n        class=\"devui-transfer-active-svg\"\n        viewBox=\"0 0 36 36\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -1086.000000)\">\n            <g transform=\"translate(942.000000, 1086.000000)\">\n              <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\n              <path\n                d=\"M23,22.003961 C23,22.2801034 23.2238576,22.503961 23.5,22.503961 C23.7761424,22.503961 24,22.2801034 24,22.003961 L24,13.503961 L15.5,13.503961 C15.2238576,13.503961 15,13.7278187 15,14.003961 C15,14.2801034 15.2238576,14.503961 15.5,14.503961 L23,14.503961 L23,22.003961 Z\"\n                fill=\"#FFFFFF\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"devui-transfer-op\" style=\"margin-top: 12px\">\n      <svg\n        width=\"36px\"\n        *ngIf=\"!targetCanTransfer || disabled\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        class=\"devui-transfer-default-svg\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -1030.000000)\">\n            <g transform=\"translate(942.000000, 1030.000000)\">\n              <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\n              <path\n                d=\"M20,22.003961 C20,22.2801034 20.2238576,22.503961 20.5,22.503961 C20.7761424,22.503961 21,22.2801034 21,22.003961 L21,13.503961 L12.5,13.503961 C12.2238576,13.503961 12,13.7278187 12,14.003961 C12,14.2801034 12.2238576,14.503961 12.5,14.503961 L20,14.503961 L20,22.003961 Z\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n      <svg\n        width=\"36px\"\n        [class.disabled]=\"disabled\"\n        *ngIf=\"targetCanTransfer && !disabled\"\n        (click)=\"transferTo(transferDirection.TARGET)\"\n        height=\"36px\"\n        viewBox=\"0 0 36 36\"\n        version=\"1.1\"\n        class=\"devui-transfer-active-svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g transform=\"translate(-942.000000, -486.000000)\">\n            <g\n              id=\"transfer_icon/right-activated\"\n              transform=\"translate(960.000000, 504.000000) scale(-1, 1) translate(-960.000000, -504.000000) translate(942.000000, 486.000000)\"\n            >\n              <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\n              <path\n                d=\"M23,22.003961 C23,22.2801034 23.2238576,22.503961 23.5,22.503961 C23.7761424,22.503961 24,22.2801034 24,22.003961 L24,13.503961 L15.5,13.503961 C15.2238576,13.503961 15,13.7278187 15,14.003961 C15,14.2801034 15.2238576,14.503961 15.5,14.503961 L23,14.503961 L23,22.003961 Z\"\n                fill=\"#FFFFFF\"\n                fill-rule=\"nonzero\"\n                transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\n              ></path>\n            </g>\n          </g>\n        </g>\n      </svg>\n    </div>\n  </div>\n  <div class=\"devui-transfer-target\">\n    <div class=\"devui-transfer-right\">\n      <ng-container *ngIf=\"!targetCustomViewTemplate\">\n        <div class=\"devui-transfer-title\">\n          <d-checkbox\n            [disabled]=\"disabled || targetDisplayOptionLen === 0\"\n            [label]=\"titles.target\"\n            [isShowTitle]=\"false\"\n            (change)=\"checkAll(transferDirection.TARGET, $event)\"\n            [halfchecked]=\"targetHalfChecked\"\n            [(ngModel)]=\"targetAllChecked\"\n          >\n          </d-checkbox>\n          <span class=\"devui-transfer-num\">{{ targetCheckedLen }}/{{ targetDisplayOptionLen }}</span>\n        </div>\n        <div class=\"devui-transfer-line\"></div>\n        <div class=\"devui-transfer-content\" [class.disabled]=\"disabled\">\n          <div class=\"devui-transfer-search\" *ngIf=\"isSearch\" [class.disabled]=\"disabled\">\n            <d-search\n              style=\"width: 100%\"\n              [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n              [size]=\"'sm'\"\n              [(ngModel)]=\"targetSearchText\"\n              (searchFn)=\"search(transferDirection.TARGET, $event)\"\n            ></d-search>\n          </div>\n          <ul\n            *ngIf=\"!virtualScroll; else targetScrollViewTpl\"\n            dDroppable\n            dSortable\n            [dropScope]=\"'transfer-target-' + id\"\n            (dropEvent)=\"onDrop(transferDirection.TARGET, $event)\"\n            [ngStyle]=\"{ height: height }\"\n            #targetTransfer\n          >\n            <ng-container *ngFor=\"let item of targetDisplayOption; let index = index; trackBy: trackByFn\">\n              <ng-template [ngTemplateOutlet]=\"targetItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"targetCustomViewTemplate\">\n        <ng-template [ngTemplateOutlet]=\"targetCustomViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<!--Source Item\u6A21\u677F-->\n<ng-template #sourceItemTpl let-item=\"item\" let-index=\"index\">\n  <li\n    dDraggable\n    [dragScope]=\"'transfer-source-' + id\"\n    [dragHandle]=\"'.devui-transfer-drag-handle, .devui-transfer-drag-handle *'\"\n    [dragData]=\"item\"\n  >\n    <span class=\"devui-transfer-drag-wrap\" [ngClass]=\"{ 'devui-transfer-drag-handle': isSourceDroppable }\">\n      <svg\n        *ngIf=\"isSourceDroppable\"\n        [class.disabled]=\"disabled\"\n        class=\"devui-transfer-drag-ico\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\n            <path\n              d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <d-checkbox\n      dPopover\n      [controlled]=\"showOptionTitle\"\n      [trigger]=\"'hover'\"\n      [content]=\"item['name']\"\n      [popMaxWidth]=\"400\"\n      [label]=\"item['name']\"\n      [isShowTitle]=\"false\"\n      [(ngModel)]=\"item['checked']\"\n      [disabled]=\"item['disabled'] || disabled\"\n      (change)=\"checkboxChange(transferDirection.SOURCE, $event)\"\n    >\n    </d-checkbox>\n  </li>\n</ng-template>\n\n<!--Source\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #sourceScrollViewTpl>\n  <cdk-virtual-scroll-viewport\n    [ngStyle]=\"{\n      height: height,\n      width: '100%'\n    }\"\n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"minBuffer\"\n    [maxBufferPx]=\"maxBuffer\"\n    #sourceTransfer\n  >\n    <ng-container *cdkVirtualFor=\"let item of sourceDisplayOption; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"sourceItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<!--Target Item\u6A21\u677F-->\n<ng-template #targetItemTpl let-item=\"item\" let-index=\"index\">\n  <li\n    dDraggable\n    [dragScope]=\"'transfer-target-' + id\"\n    [dragHandle]=\"'.devui-transfer-drag-handle, .devui-transfer-drag-handle *'\"\n    [dragData]=\"item\"\n  >\n    <span class=\"devui-transfer-drag-wrap\" [ngClass]=\"{ 'devui-transfer-drag-handle': isTargetDroppable }\">\n      <svg\n        *ngIf=\"isTargetDroppable\"\n        [class.disabled]=\"disabled\"\n        class=\"devui-transfer-drag-ico\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\n            <path\n              d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <d-checkbox\n      dPopover\n      [controlled]=\"showOptionTitle\"\n      [trigger]=\"'hover'\"\n      [content]=\"item['name']\"\n      [popMaxWidth]=\"400\"\n      [label]=\"item['name']\"\n      [isShowTitle]=\"false\"\n      [(ngModel)]=\"item['checked']\"\n      [disabled]=\"item['disabled'] || disabled\"\n      (change)=\"checkboxChange(transferDirection.TARGET, $event)\"\n    >\n    </d-checkbox>\n  </li>\n</ng-template>\n\n<!--Target\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #targetScrollViewTpl>\n  <cdk-virtual-scroll-viewport\n    [ngStyle]=\"{\n      height: height,\n      width: '100%'\n    }\"\n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"minBuffer\"\n    [maxBufferPx]=\"maxBuffer\"\n    #targetTransfer\n  >\n    <ng-container *cdkVirtualFor=\"let item of targetDisplayOption; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"targetItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-transfer-container{width:100%;display:flex;flex-wrap:warp;justify-content:center;-moz-justfy-center:center;-ms-justify-center:center;-o-justfy-cneter:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center}.devui-transfer-source,.devui-transfer-target{width:calc(50% - 28px);border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.devui-transfer-option{padding:0 12px}.devui-transfer-search{margin:0 16px 8px 20px}.devui-transfer-num{flex:1;text-align:right;align-self:center;-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;-o-align-self:center;font-size:12px;font-size:var(--devui-font-size, 12px);color:#71757f;color:var(--devui-aide-text, #71757f);margin-right:12px}.disable{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}:host ::ng-deep .disabled .devui-checkbox label{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-transfer-op .devui-transfer-default-svg circle{fill:#f5f5f5;fill:var(--devui-disabled-bg, #f5f5f5);stroke:#dfe1e6;stroke:var(--devui-disabled-line, #dfe1e6)}.devui-transfer-op .devui-transfer-default-svg path{fill:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}.devui-transfer-op .devui-transfer-active-svg{cursor:pointer}.devui-transfer-op .devui-transfer-active-svg circle{fill:#252b3a;fill:var(--devui-icon-fill-active, #252b3a);stroke:devui-icon-fill-active}.devui-transfer-op .devui-transfer-active-svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-transfer-content{padding-top:8px}.devui-transfer-content ul{overflow:auto}.devui-transfer-content li{display:flex;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;height:36px;line-height:36px;margin-right:20px}.devui-transfer-content li d-checkbox{overflow:hidden}.devui-transfer-content li d-checkbox ::ng-deep .devui-checkbox label{text-overflow:ellipsis;width:100%;overflow:hidden;white-space:nowrap}.devui-transfer-content li:hover svg{opacity:1;cursor:move}.devui-transfer-content li .devui-transfer-drag-wrap{min-width:21px;height:80%;padding-right:4px;display:inline-flex;align-items:center}.devui-transfer-content li svg{opacity:0;display:inline-block}.devui-transfer-content li svg *{pointer-events:none}.devui-transfer-content li .devui-transfer-drag-ico{width:16px;height:16px}.devui-transfer-title{display:flex;height:40px;line-height:40px;align-items:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;margin-left:20px}.devui-transfer-line{height:1px;background:#f2f2f3;background:var(--devui-dividing-line, #f2f2f3)}.option-btn{display:inline-block}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.I18nService }]; }, propDecorators: { sourceOption: [{
                type: Input
            }], targetOption: [{
                type: Input
            }], titles: [{
                type: Input
            }], height: [{
                type: Input
            }], isSearch: [{
                type: Input
            }], disabled: [{
                type: Input
            }], isSourceDroppable: [{
                type: Input
            }], isTargetDroppable: [{
                type: Input
            }], showOptionTitle: [{
                type: Input
            }], beforeTransfer: [{
                type: Input
            }], virtualScroll: [{
                type: Input
            }], customSourceCheckedLen: [{
                type: Input
            }], customTargetCheckedLen: [{
                type: Input
            }], sourceCustomViewTemplate: [{
                type: ContentChild,
                args: ['sourceTemplate']
            }], targetCustomViewTemplate: [{
                type: ContentChild,
                args: ['targetTemplate']
            }], virtualScrollViewport: [{
                type: ViewChild,
                args: [CdkVirtualScrollViewport]
            }], transferToTarget: [{
                type: Output
            }], transferToSource: [{
                type: Output
            }], searching: [{
                type: Output
            }], transferring: [{
                type: Output
            }], afterTransfer: [{
                type: Output
            }] } });

class TransferModule {
}
TransferModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TransferModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TransferModule, declarations: [TransferComponent], imports: [CommonModule, FormsModule, ScrollingModule, SearchModule, CheckBoxModule, DragDropModule, PopoverModule], exports: [TransferComponent] });
TransferModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TransferModule, imports: [CommonModule, FormsModule, ScrollingModule, SearchModule, CheckBoxModule, DragDropModule, PopoverModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TransferModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, FormsModule, ScrollingModule, SearchModule, CheckBoxModule, DragDropModule, PopoverModule],
                    exports: [TransferComponent],
                    declarations: [TransferComponent],
                    providers: []
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TransferComponent, TransferDirection, TransferModule };
//# sourceMappingURL=ng-devui-transfer.mjs.map
