<nb-transfer (searchValue)="searchByKeyWord($event)" (onTransAll)="transAll($event)" (onExtendData)="extendData()" [ngClass]="'customClass-' + customClass" [allSelectLink]="allSelectLink" [allDeleteLink]="allDeleteLink" [candidateSearch]="candidateSearch" [selectedSearch]="selectedSearch" [candidateTitle]="candidateTitle" [selectedTitle]="selectedTitle" [addLink]="addLink" [disabled]="disabled"><nb-transfer-candidate><div class="origin-table-fixhead"><table nb-table theme="small"><thead nb-thead><tr nb-row><th *ngFor="let head of tableConfig.headData" width="{{head.width}}" field=""><span class="field-title">{{ head.name }}</span></th></tr></thead></table></div><div class="origin-table-body"><table nb-table #nbTable theme="small" [datasource]="candidateData"><colgroup><ng-container *ngFor="let col of tableConfig.colWidth"><col [ngStyle]="{'width': col + 'px'}"></ng-container><col></colgroup><tbody nb-tbody *ngIf="candidateData.length"><ng-container *ngFor="let data of candidateData"><ng-container *ngIf="!data.children"><tr nb-row [class.nb-table-row-selected]="data.selected" [class.nb-table-row-disabled]="data.disabled || disabled" (click)="onSelect(data)"><ng-template [ngTemplateOutlet]="leftBodyTpl" [ngTemplateOutletContext]="{$implicit: data}"></ng-template></tr></ng-container><ng-container *ngIf="data.children"><tr nb-row class="nb-table-row-parent" [class.nb-table-row-selected]="data.selected" [class.nb-table-row-disabled]="data.disabled || disabled" (click)="onToggle(data)"><td nb-td [colSpan]="tableConfig.headData.length + 1"><div #toggleDivs class="icon-wrapper"><i class="iconfont" [class.icon-right]="data.shrink" [class.icon-down]="!data.shrink"></i> {{ data.name }}</div></td></tr><ng-container *ngIf="!data.shrink"><tr *ngFor="let item of data.children" nb-row [class.nb-table-row-selected]="item.selected" [class.nb-table-row-disabled]="item.disabled || disabled" (click)="onSelectChildNode(data.name, item)"><ng-template [ngTemplateOutlet]="leftBodyTpl" [ngTemplateOutletContext]="{$implicit: item}"></ng-template></tr></ng-container></ng-container></ng-container></tbody><tbody nb-tbody *ngIf="!candidateData.length"><tr nb-row class="nb-table-row-empty"><td nb-td colspan="3"><ng-container *ngIf="emptyTpl else defaultEmpty"><ng-container *ngTemplateOutlet="emptyTpl;context: {$implicit: emptyMessage}"></ng-container></ng-container><ng-template #defaultEmpty>{{ emptyMessage }}</ng-template></td></tr></tbody></table></div></nb-transfer-candidate><nb-transfer-selected><div *ngIf="selectedDatasource.length" class="selected-list-content"><ng-container *ngFor="let item of selectedDatasource"><ng-container *ngIf="!item.children"><div class="selected-item clearfix" (click)="onRemove(item)" [class.nb-table-row-disabled]="disabled"><ng-template [ngTemplateOutlet]="rightBodyTpl" [ngTemplateOutletContext]="{$implicit: item}"></ng-template></div></ng-container><ng-container *ngIf="item.children"><div class="selected-item clearfix" (click)="onToggle(item)"><div #toggleDivs class="icon-wrapper"><i class="iconfont" [class.icon-right]="item.shrink" [class.icon-down]="!item.shrink"></i> {{ item.name }}</div></div><ng-container *ngIf="!item.shrink"><ng-container *ngFor="let child of item.children"><div class="selected-item clearfix" (click)="onRemoveChildNode(item.name, child)" [class.nb-table-row-disabled]="disabled"><div class="selected-children-item"><ng-template [ngTemplateOutlet]="rightBodyTpl" [ngTemplateOutletContext]="{$implicit: child}"></ng-template></div></div></ng-container></ng-container></ng-container></ng-container></div><div *ngIf="!selectedDatasource.length" class="nb-transfer-no-data">{{ rightNotice }}</div></nb-transfer-selected></nb-transfer><ng-template #leftBodyTpl let-row><ng-container *ngFor="let key of objectKeys(row)"><td *ngIf="!tableConfig.hideCol.includes(key) && key!=='selected'" nb-td><div *ngIf="key!=='name'" class="nb-td-{{key}}">{{ row[key] }}</div><div *ngIf="key==='name' && row.description && !optionTplLeft" class="nb-td-{{key}}" nbTooltip="{{row.description}}" nbTooltipClass="customize-classname" placement="bottom-left" hasArrow>{{ row[key] }}</div><div *ngIf="key==='name' && row.description && optionTplLeft" class="nb-td-{{key}}" nbTooltip="{{row.description}}" nbTooltipClass="customize-classname" placement="bottom-left" hasArrow><ng-container *ngTemplateOutlet="optionTplLeft;context: {$implicit: row}"></ng-container></div><div *ngIf="key==='name' && !row.description && !optionTplLeft" class="nb-td-{{key}}">{{ row[key] }}</div><div *ngIf="key==='name' && !row.description && optionTplLeft" class="nb-td-{{key}}"><ng-container *ngTemplateOutlet="optionTplLeft;context: {$implicit: row}"></ng-container></div></td></ng-container><td nb-td><i class="iconfont icon-arrow-right"></i> <i class="iconfont icon-check"></i></td></ng-template><ng-template #rightBodyTpl let-item><div *ngIf="!optionTplRight" class="group-name">{{ item.name }}</div><div *ngIf="optionTplRight"><ng-container *ngTemplateOutlet="optionTplRight;context: {$implicit: item}"></ng-container></div><i class="iconfont icon-close"></i></ng-template>