@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
557 lines (550 loc) • 40.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('ng-devui/i18n'), require('/common'), require('@angular/forms'), require('ng-devui/checkbox'), require('ng-devui/search'), require('ng-devui/dragdrop')) :
typeof define === 'function' && define.amd ? define('ng-devui/transfer', ['exports', '@angular/core', 'ng-devui/i18n', '@angular/common', '@angular/forms', 'ng-devui/checkbox', 'ng-devui/search', 'ng-devui/dragdrop'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].transfer = {}), global.ng.core, global['ng-devui'].i18n, global.ng.common, global.ng.forms, global['ng-devui'].checkbox, global['ng-devui'].search, global['ng-devui'].dragdrop));
}(this, (function (exports, core, i18n, common, forms, checkbox, search, dragdrop) { 'use strict';
/**
* added by tsickle
* Generated from: transfer.types.ts
* {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var TransferDirection = {
SOURCE: 0, TARGET: 1,
};
TransferDirection[TransferDirection.SOURCE] = 'SOURCE';
TransferDirection[TransferDirection.TARGET] = 'TARGET';
/**
* @record
*/
function TransferDataFormat() { }
if (false) {
/** @type {?} */
TransferDataFormat.prototype.name;
/** @type {?} */
TransferDataFormat.prototype.value;
/** @type {?|undefined} */
TransferDataFormat.prototype.id;
/** @type {?|undefined} */
TransferDataFormat.prototype.checked;
/** @type {?|undefined} */
TransferDataFormat.prototype.disabled;
}
/**
* @fileoverview added by tsickle
* Generated from: transfer.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TransferComponent = /** @class */ (function () {
function TransferComponent(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.customSourceCheckedLen = 0;
this.customTargetCheckedLen = 0;
this.transferToTarget = new core.EventEmitter();
this.transferToSource = new core.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.id = TransferComponent.ID_SEED++;
this.setI18nText();
}
/**
* @return {?}
*/
TransferComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.sourceDisplayOption = this.sourceOption;
this.sourceDisplayOptionLen = this.sourceDisplayOption.length;
this.targetDisplayOption = this.targetOption;
this.targetDisplayOptionLen = this.targetDisplayOption.length;
};
/**
* @return {?}
*/
TransferComponent.prototype.setI18nText = /**
* @return {?}
*/
function () {
var _this = this;
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.i18nCommonText = data.common;
}));
};
/**
* @param {?} changes
* @return {?}
*/
TransferComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes && (changes.customSourceCheckedLen || changes.customTargetCheckedLen)) {
this.targetCanTransfer = this.targetCanTransfer
|| (changes.customSourceCheckedLen && changes.customSourceCheckedLen.currentValue > 0);
this.sourceCanTransfer = this.sourceCanTransfer
|| (changes.customTargetCheckedLen && changes.customTargetCheckedLen.currentValue > 0);
}
};
/**
* @param {?} direction
* @param {?} event
* @return {?}
*/
TransferComponent.prototype.checkboxChange = /**
* @param {?} direction
* @param {?} event
* @return {?}
*/
function (direction, event) {
if (direction === TransferDirection.SOURCE) {
this.sourceDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked; })).length > 0 ? this.targetCanTransfer = true : this.targetCanTransfer = false;
this.listTotalCheck(direction);
}
else if (direction === TransferDirection.TARGET) {
this.targetDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked; })).length > 0 ? this.sourceCanTransfer = true : this.sourceCanTransfer = false;
this.listTotalCheck(direction);
}
};
/**
* @param {?} direction
* @return {?}
*/
TransferComponent.prototype.listTotalCheck = /**
* @param {?} direction
* @return {?}
*/
function (direction) {
if (direction === TransferDirection.SOURCE) {
/** @type {?} */
var sourceLen = this.sourceDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return 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;
}
}
}
else if (direction === TransferDirection.TARGET) {
/** @type {?} */
var rightLen = this.targetDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return 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;
};
/**
* @param {?} direction
* @return {?}
*/
TransferComponent.prototype.transferTo = /**
* @param {?} direction
* @return {?}
*/
function (direction) {
var _this = this;
if (direction === TransferDirection.TARGET) {
// 对源数据更改
this.sourceDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked === true; })).forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var tmp = { name: item.name, value: item.value, id: item.id, checked: false };
_this.targetOption.push(tmp);
}));
this.sourceOption = this.sourceOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked !== true; }));
this.targetCanTransfer = false;
if (this.sourceCustomViewTemplate) {
this.transferToTarget.next();
}
else {
this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
}
if (this.isSearch && this.sourceSearchText !== '') {
this.sourceSearchText = '';
}
}
else if (direction === TransferDirection.SOURCE) {
this.targetDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked === true; })).forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var tmp = { name: item.name, value: item.value, id: item.id, checked: false };
_this.sourceOption.push(tmp);
}));
this.targetOption = this.targetOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.checked !== true; }));
this.sourceCanTransfer = false;
if (this.targetCustomViewTemplate) {
this.transferToSource.next();
}
else {
this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
}
if (this.isSearch && this.targetSearchText !== '') {
this.targetSearchText = '';
}
}
this.targetDisplayOption = this.targetOption;
this.sourceDisplayOption = this.sourceOption;
this.listTotalCheck(TransferDirection.TARGET);
this.listTotalCheck(TransferDirection.SOURCE);
};
/**
* @param {?} direction
* @param {?} event
* @return {?}
*/
TransferComponent.prototype.checkAll = /**
* @param {?} direction
* @param {?} event
* @return {?}
*/
function (direction, event) {
if (direction === TransferDirection.SOURCE) {
if (event) {
this.sourceHalfChecked = false;
this.sourceCheckedLen = this.sourceDisplayOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.disabled !== true; })).length;
}
else {
this.sourceCheckedLen = 0;
}
this.targetCanTransfer = event;
this.sourceDisplayOption.forEach((/**
* @param {?} item
* @return {?}
*/
function (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((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.disabled !== true; })).length;
}
else {
this.targetCheckedLen = 0;
}
this.sourceCanTransfer = event;
this.targetDisplayOption.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.checked !== event && item.disabled !== true) {
item.checked = event;
}
}));
}
};
/**
* @param {?} direction
* @param {?} keyword
* @return {?}
*/
TransferComponent.prototype.search = /**
* @param {?} direction
* @param {?} keyword
* @return {?}
*/
function (direction, keyword) {
if (keyword !== '') {
if (direction === TransferDirection.SOURCE) {
this.sourceDisplayOption = this.sourceOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.name.match(keyword) !== null; }));
}
else if (direction === TransferDirection.TARGET) {
this.targetDisplayOption = this.targetOption.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.name.match(keyword) !== null; }));
}
}
else {
if (direction === TransferDirection.SOURCE) {
this.sourceDisplayOption = this.sourceOption;
}
else if (direction === TransferDirection.TARGET) {
this.targetDisplayOption = this.targetOption;
}
}
this.listTotalCheck(direction);
};
/**
* @param {?} direction
* @param {?} e
* @return {?}
*/
TransferComponent.prototype.onDrop = /**
* @param {?} direction
* @param {?} e
* @return {?}
*/
function (direction, e) {
/** @type {?} */
var index = e.dropIndex;
/** @type {?} */
var 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.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.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
}
}
else {
if (direction === TransferDirection.SOURCE) {
this.sourceOption.push(e.dragData);
this.transferToSource.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
}
else {
this.targetOption.push(e.dragData);
this.transferToTarget.next({ sourceOption: this.sourceOption, targetOption: this.targetOption });
}
}
};
/**
* @return {?}
*/
TransferComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
};
TransferComponent.ID_SEED = 0;
TransferComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-transfer',
template: "<div class=\"container\">\r\n <div class=\"source\">\r\n <div class=\"left\">\r\n <ng-container *ngIf=\"!sourceCustomViewTemplate\">\r\n <div class=\"title\">\r\n <d-checkbox\r\n [label]=\"titles.source\"\r\n [disabled]=\"disabled || sourceDisplayOptionLen === 0\"\r\n [isShowTitle]=\"false\"\r\n (change)=\"checkAll(transferDirection.SOURCE, $event)\"\r\n [halfchecked]=\"sourceHalfChecked\"\r\n [(ngModel)]=\"sourceAllChecked\"\r\n >\r\n </d-checkbox>\r\n <span class=\"num\">{{ sourceCheckedLen }}/{{ sourceDisplayOptionLen }}</span>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"content\" [class.disabled]=\"disabled\">\r\n <div class=\"search\" *ngIf=\"isSearch\">\r\n <d-search\r\n style=\"width:100%\"\r\n [placeholder]=\"i18nCommonText?.searchPlaceholder\"\r\n [size]=\"'sm'\"\r\n [(ngModel)]=\"sourceSearchText\"\r\n (searchFn)=\"search(transferDirection.SOURCE, $event)\"\r\n ></d-search>\r\n </div>\r\n <ul\r\n [id]=\"'default-left-' + id\"\r\n dDroppable\r\n [placeholderTag]=\"'li'\"\r\n [dropScope]=\"'transfer-source-' + id\"\r\n (onDrop)=\"onDrop(transferDirection.SOURCE, $event)\"\r\n [ngStyle]=\"{ height: height }\"\r\n dSortable\r\n >\r\n <li\r\n dDraggable\r\n [enableDragFollow]=\"true\"\r\n [dragScope]=\"'transfer-source-' + id\"\r\n [dragHandle]=\"'.drag-handle'\"\r\n [dragData]=\"item\"\r\n [dragHandleClass]=\"'drag-handle'\"\r\n *ngFor=\"let item of sourceDisplayOption; let i = index\"\r\n >\r\n <span class=\"drag-ico\">\r\n <svg\r\n *ngIf=\"isSourceDroppable\"\r\n [class.disabled]=\"disabled\"\r\n class=\"drag-handle\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"draggable-big-left\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\r\n <path\r\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\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <d-checkbox\r\n [label]=\"item['name']\"\r\n [isShowTitle]=\"false\"\r\n [(ngModel)]=\"item['checked']\"\r\n [disabled]=\"item['disabled'] || disabled\"\r\n (change)=\"checkboxChange(transferDirection.SOURCE, $event)\"\r\n >\r\n </d-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"sourceCustomViewTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"sourceCustomViewTemplate\" [ngTemplateOutletContext]=\"{$implicit: this}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"option\">\r\n <div class=\"transfer-op\">\r\n <svg\r\n *ngIf=\"!sourceCanTransfer\"\r\n width=\"36px\"\r\n height=\"36px\"\r\n viewBox=\"0 0 36 36\"\r\n class=\"default-svg\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"transfer\" transform=\"translate(-942.000000, -542.000000)\">\r\n <g\r\n id=\"transfer_icon/left-default\"\r\n transform=\"translate(960.000000, 560.000000) scale(-1, 1) translate(-960.000000, -560.000000) translate(942.000000, 542.000000)\"\r\n >\r\n <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\r\n <path\r\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\"\r\n fill=\"#CACFD8\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"sourceCanTransfer\"\r\n [class.disabled]=\"disabled\"\r\n (click)=\"transferTo(transferDirection.SOURCE)\"\r\n width=\"36px\"\r\n height=\"36px\"\r\n class=\"active-svg\"\r\n viewBox=\"0 0 36 36\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"transfer-right\" transform=\"translate(-942.000000, -1086.000000)\">\r\n <g id=\"transfer_icon/left-activated\" transform=\"translate(942.000000, 1086.000000)\">\r\n <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\r\n <path\r\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\"\r\n fill=\"#FFFFFF\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </div>\r\n <div class=\"transfer-op\" style=\"margin-top:10px;\">\r\n <svg\r\n width=\"36px\"\r\n *ngIf=\"!targetCanTransfer\"\r\n height=\"36px\"\r\n viewBox=\"0 0 36 36\"\r\n class=\"default-svg\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"transfer-left\" transform=\"translate(-942.000000, -1030.000000)\">\r\n <g id=\"transfer_icon/right-default\" transform=\"translate(942.000000, 1030.000000)\">\r\n <circle stroke=\"\" fill=\"\" cx=\"18\" cy=\"18\" r=\"17.5\"></circle>\r\n <path\r\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\"\r\n fill=\"#CACFD8\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(16.500000, 18.003961) rotate(-315.000000) translate(-16.500000, -18.003961) \"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n <svg\r\n width=\"36px\"\r\n [class.disabled]=\"disabled\"\r\n *ngIf=\"targetCanTransfer\"\r\n (click)=\"transferTo(transferDirection.TARGET)\"\r\n height=\"36px\"\r\n viewBox=\"0 0 36 36\"\r\n version=\"1.1\"\r\n class=\"active-svg\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"transfer\" transform=\"translate(-942.000000, -486.000000)\">\r\n <g\r\n id=\"transfer_icon/right-activated\"\r\n transform=\"translate(960.000000, 504.000000) scale(-1, 1) translate(-960.000000, -504.000000) translate(942.000000, 486.000000)\"\r\n >\r\n <circle fill=\"#5170FF\" cx=\"18\" cy=\"18\" r=\"18\"></circle>\r\n <path\r\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\"\r\n fill=\"#FFFFFF\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(19.500000, 18.003961) scale(-1, 1) rotate(-315.000000) translate(-19.500000, -18.003961) \"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"target\">\r\n <div class=\"right\">\r\n <ng-container *ngIf=\"!targetCustomViewTemplate\">\r\n <div class=\"title\">\r\n <d-checkbox\r\n [disabled]=\"disabled || targetDisplayOptionLen === 0\"\r\n [label]=\"titles.target\"\r\n [isShowTitle]=\"false\"\r\n (change)=\"checkAll(transferDirection.TARGET, $event)\"\r\n [halfchecked]=\"targetHalfChecked\"\r\n [(ngModel)]=\"targetAllChecked\"\r\n >\r\n </d-checkbox>\r\n <span class=\"num\">{{ targetCheckedLen }}/{{ targetDisplayOptionLen }}</span>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"content\" [class.disabled]=\"disabled\">\r\n <div class=\"search\" *ngIf=\"isSearch\" [class.disabled]=\"disabled\">\r\n <d-search\r\n style=\"width:100%\"\r\n [placeholder]=\"i18nCommonText?.searchPlaceholder\"\r\n [size]=\"'sm'\"\r\n [(ngModel)]=\"targetSearchText\"\r\n (searchFn)=\"search(transferDirection.TARGET, $event)\"\r\n ></d-search>\r\n </div>\r\n <ul\r\n dDroppable\r\n dSortable\r\n [placeholderTag]=\"'li'\"\r\n [dropScope]=\"'transfer-target-' + id\"\r\n (onDrop)=\"onDrop(transferDirection.TARGET, $event)\"\r\n [ngStyle]=\"{ height: height }\"\r\n >\r\n <li\r\n dDraggable\r\n [enableDragFollow]=\"true\"\r\n [dragScope]=\"'transfer-target-' + id\"\r\n [dragHandle]=\"'.drag-handle'\"\r\n [dragData]=\"item\"\r\n [dragHandleClass]=\"'drag-handle'\"\r\n *ngFor=\"let item of targetDisplayOption; let i = index\"\r\n >\r\n <span class=\"drag-ico\">\r\n <svg\r\n *ngIf=\"isTargetDroppable\"\r\n [class.disabled]=\"disabled\"\r\n class=\"drag-handle\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"draggable-big-right\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#CACFD8\" fill-rule=\"nonzero\">\r\n <path\r\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\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <d-checkbox\r\n [label]=\"item['name']\"\r\n [isShowTitle]=\"false\"\r\n [(ngModel)]=\"item['checked']\"\r\n [disabled]=\"item['disabled'] || disabled\"\r\n (change)=\"checkboxChange(transferDirection.TARGET, $event)\"\r\n >\r\n </d-checkbox>\r\n </li>\r\n </ul>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"targetCustomViewTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"targetCustomViewTemplate\" [ngTemplateOutletContext]=\"{$implicit: this}\"></ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n",
styles: [".container{width:100%;display:-webkit-box;display:flex;flex-wrap:warp;-webkit-box-pack:center;justify-content:center;-moz-justfy-center:center;-ms-justify-center:center;-o-justfy-cneter:center;-webkit-box-align:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center}.source,.target{width:48%;border:1px solid #adb0b8}.option{padding:0 10px}.search{margin:0 15px 10px 20px}.num{-webkit-box-flex:1;flex:1;text-align:right;-ms-grid-row-align:center;align-self:center;-webkit-align-self:center;-moz-align-self:center;-ms-align-self:center;-o-align-self:center;font-size:12px;color:#575d6c;margin-right:10px}.disabled{opacity:.3;cursor:not-allowed}.transfer-op .default-svg circle{fill:#fff;stroke:#e3e5e9}.transfer-op .active-svg circle{fill:#5e7ce0}.content ul{overflow:auto}.content li{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;height:36px;line-height:36px}.content li:hover svg{display:inline-block;cursor:move}.content li .drag-ico{display:inline-block;width:16px;height:16px;line-height:16px;margin-right:5px}.content li svg{display:none}.content li .drag-handle{width:16px;height:16px}.title{display:-webkit-box;display:flex;height:40px;line-height:40px;-webkit-box-align:center;align-items:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;margin-left:20px}.line{height:1px;background:#dfe1e6;margin-bottom:10px}.option-btn{display:inline-block}"]
}] }
];
/** @nocollapse */
TransferComponent.ctorParameters = function () { return [
{ type: i18n.I18nService }
]; };
TransferComponent.propDecorators = {
sourceOption: [{ type: core.Input }],
targetOption: [{ type: core.Input }],
titles: [{ type: core.Input }],
height: [{ type: core.Input }],
isSearch: [{ type: core.Input }],
disabled: [{ type: core.Input }],
isSourceDroppable: [{ type: core.Input }],
isTargetDroppable: [{ type: core.Input }],
customSourceCheckedLen: [{ type: core.Input }],
customTargetCheckedLen: [{ type: core.Input }],
sourceCustomViewTemplate: [{ type: core.ContentChild, args: ['sourceTemplate', { static: false },] }],
targetCustomViewTemplate: [{ type: core.ContentChild, args: ['targetTemplate', { static: false },] }],
transferToTarget: [{ type: core.Output }],
transferToSource: [{ type: core.Output }]
};
return TransferComponent;
}());
if (false) {
/** @type {?} */
TransferComponent.ID_SEED;
/** @type {?} */
TransferComponent.prototype.id;
/** @type {?} */
TransferComponent.prototype.sourceOption;
/** @type {?} */
TransferComponent.prototype.targetOption;
/** @type {?} */
TransferComponent.prototype.titles;
/** @type {?} */
TransferComponent.prototype.height;
/** @type {?} */
TransferComponent.prototype.isSearch;
/** @type {?} */
TransferComponent.prototype.disabled;
/** @type {?} */
TransferComponent.prototype.isSourceDroppable;
/** @type {?} */
TransferComponent.prototype.isTargetDroppable;
/** @type {?} */
TransferComponent.prototype.customSourceCheckedLen;
/** @type {?} */
TransferComponent.prototype.customTargetCheckedLen;
/** @type {?} */
TransferComponent.prototype.sourceCustomViewTemplate;
/** @type {?} */
TransferComponent.prototype.targetCustomViewTemplate;
/** @type {?} */
TransferComponent.prototype.transferToTarget;
/** @type {?} */
TransferComponent.prototype.transferToSource;
/** @type {?} */
TransferComponent.prototype.transferDirection;
/** @type {?} */
TransferComponent.prototype.sourceDisplayOption;
/** @type {?} */
TransferComponent.prototype.sourceDisplayOptionLen;
/** @type {?} */
TransferComponent.prototype.sourceCheckedLen;
/** @type {?} */
TransferComponent.prototype.sourceHalfChecked;
/** @type {?} */
TransferComponent.prototype.sourceAllChecked;
/** @type {?} */
TransferComponent.prototype.sourceCanTransfer;
/** @type {?} */
TransferComponent.prototype.targetDisplayOption;
/** @type {?} */
TransferComponent.prototype.targetDisplayOptionLen;
/** @type {?} */
TransferComponent.prototype.targetCheckedLen;
/** @type {?} */
TransferComponent.prototype.targetHalfChecked;
/** @type {?} */
TransferComponent.prototype.targetAllChecked;
/** @type {?} */
TransferComponent.prototype.targetCanTransfer;
/** @type {?} */
TransferComponent.prototype.sourceSearchText;
/** @type {?} */
TransferComponent.prototype.targetSearchText;
/** @type {?} */
TransferComponent.prototype.i18nCommonText;
/** @type {?} */
TransferComponent.prototype.i18nSubscription;
/**
* @type {?}
* @private
*/
TransferComponent.prototype.i18n;
}
/**
* @fileoverview added by tsickle
* Generated from: transfer.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TransferModule = /** @class */ (function () {
function TransferModule() {
}
TransferModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, forms.FormsModule, search.SearchModule, checkbox.CheckBoxModule, dragdrop.DragDropModule],
exports: [TransferComponent],
declarations: [TransferComponent],
providers: []
},] }
];
return TransferModule;
}());
exports.TransferComponent = TransferComponent;
exports.TransferDirection = TransferDirection;
exports.TransferModule = TransferModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-transfer.umd.js.map