ng-devui
Version:
DevUI components based on Angular
321 lines • 125 kB
JavaScript
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { I18nService } from 'ng-devui/i18n';
import { TransferDirection } from './transfer.types';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/i18n";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/cdk/scrolling";
import * as i5 from "ng-devui/search";
import * as i6 from "ng-devui/checkbox";
import * as i7 from "ng-devui/dragdrop";
import * as i8 from "ng-devui/popover";
export class TransferComponent {
static { this.ID_SEED = 0; }
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();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransferComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", noResultTemplate: "noResultTemplate" }, 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 [labelTemplate]=\"sourceLabel\"\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 <ng-template #sourceLabel>\n <span [style.font-weight]=\"600\">{{ titles.source }}</span>\n </ng-template>\n <span class=\"devui-transfer-num\">{{ sourceCheckedLen }}/{{ sourceDisplayOptionLen }}</span>\n </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 [styleType]=\"'gray'\"\n [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n [iconPosition]=\"'left'\"\n [(ngModel)]=\"sourceSearchText\"\n (searchFn)=\"search(transferDirection.SOURCE, $event)\"\n ></d-search>\n </div>\n <ng-container *ngIf=\"sourceDisplayOptionLen === 0\">\n <ng-template\n [ngTemplateOutlet]=\"noResultTemplate || noResultDefaultTemplate\"\n [ngTemplateOutletContext]=\"{ position: 'source', sourceKeyword: sourceSearchText, targetKeyword: targetSearchText }\"\n ></ng-template>\n </ng-container>\n <ul\n class=\"devui-scrollbar\"\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 [labelTemplate]=\"targetLabel\"\n [isShowTitle]=\"false\"\n (change)=\"checkAll(transferDirection.TARGET, $event)\"\n [halfchecked]=\"targetHalfChecked\"\n [(ngModel)]=\"targetAllChecked\"\n >\n </d-checkbox>\n <ng-template #targetLabel>\n <span [style.font-weight]=\"600\">{{ titles.target }}</span>\n </ng-template>\n <span class=\"devui-transfer-num\">{{ targetCheckedLen }}/{{ targetDisplayOptionLen }}</span>\n </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 [styleType]=\"'gray'\"\n [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n [iconPosition]=\"'left'\"\n [(ngModel)]=\"targetSearchText\"\n (searchFn)=\"search(transferDirection.TARGET, $event)\"\n ></d-search>\n </div>\n <ng-container *ngIf=\"targetDisplayOptionLen === 0\">\n <ng-template\n [ngTemplateOutlet]=\"noResultTemplate || noResultDefaultTemplate\"\n [ngTemplateOutletContext]=\"{ position: 'target', sourceKeyword: sourceSearchText, targetKeyword: targetSearchText }\"\n ></ng-template>\n </ng-container>\n <ul\n class=\"devui-scrollbar\"\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 class=\"devui-scrollbar\"\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\n<ng-template #noResultDefaultTemplate let-position=\"position\" let-sourceKeyword=\"sourceKeyword\" let-targetKeyword=\"targetKeyword\">\n <div class=\"devui-no-data-tip\">\n {{\n (position === 'source' && sourceKeyword) || (position === 'target' && targetKeyword)\n ? i18nCommonText?.noRecordsFound\n : i18nCommonText?.noData\n }}\n </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 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 var(--devui-line, #dbdbdb);border-radius:var(--devui-border-radius-card, 6px)}.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:var(--devui-font-size, 12px);color:var(--devui-aide-text, #595959);margin-right:12px}.disable{background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}:host ::ng-deep .disabled .devui-checkbox label{color:var(--devui-disabled-text, #c2c2c2)}.devui-transfer-op .devui-transfer-default-svg{cursor:not-allowed}.devui-transfer-op .devui-transfer-default-svg circle{fill:var(--devui-disabled-bg, #f3f3f3);stroke:var(--devui-disabled-line, #e6e6e6)}.devui-transfer-op .devui-transfer-default-svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-transfer-op .devui-transfer-active-svg{cursor:pointer}.devui-transfer-op .devui-transfer-active-svg circle{fill:var(--devui-brand, #0a59f7)}.devui-transfer-op .devui-transfer-active-svg path{fill:var(--devui-light-text, #ffffff)}.devui-transfer-content{padding-top:8px;position:relative}.devui-transfer-content .devui-no-data-tip{cursor:not-allowed;color:var(--devui-disabled-text, #c2c2c2);font-size:var(--devui-font-size, 12px);background:var(--devui-base-bg, #ffffff);width:100%;line-height:22px;padding:0;text-align:center;-webkit-user-select:none;user-select:none;position:absolute;top:50%;transform:translateY(-50%)}.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 ::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:44px;line-height:44px;align-items:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;padding-left:20px;background:var(--devui-area, #f3f3f3);border-radius:var(--devui-border-radius-card, 6px) var(--devui-border-radius-card, 6px) 0 0}.devui-transfer-line{height:1px;background:var(--devui-dividing-line, #f0f0f0)}.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", "styleType", "showGlowStyle"], outputs: ["searchFn"], exportAs: ["search"] }, { kind: "component", type: i6.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "showGlowStyle", "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", "autoHideCoefficient", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 [labelTemplate]=\"sourceLabel\"\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 <ng-template #sourceLabel>\n <span [style.font-weight]=\"600\">{{ titles.source }}</span>\n </ng-template>\n <span class=\"devui-transfer-num\">{{ sourceCheckedLen }}/{{ sourceDisplayOptionLen }}</span>\n </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 [styleType]=\"'gray'\"\n [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n [iconPosition]=\"'left'\"\n [(ngModel)]=\"sourceSearchText\"\n (searchFn)=\"search(transferDirection.SOURCE, $event)\"\n ></d-search>\n </div>\n <ng-container *ngIf=\"sourceDisplayOptionLen === 0\">\n <ng-template\n [ngTemplateOutlet]=\"noResultTemplate || noResultDefaultTemplate\"\n [ngTemplateOutletContext]=\"{ position: 'source', sourceKeyword: sourceSearchText, targetKeyword: targetSearchText }\"\n ></ng-template>\n </ng-container>\n <ul\n class=\"devui-scrollbar\"\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 [labelTemplate]=\"targetLabel\"\n [isShowTitle]=\"false\"\n (change)=\"checkAll(transferDirection.TARGET, $event)\"\n [halfchecked]=\"targetHalfChecked\"\n [(ngModel)]=\"targetAllChecked\"\n