@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,096 lines (1,065 loc) • 49.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('ng-devui/tree'), require('rxjs/operators'), require('ng-devui/i18n'), require('@angular/common'), require('ng-devui/checkbox'), require('ng-devui/loading'), require('ng-devui/utils')) :
typeof define === 'function' && define.amd ? define('ng-devui/tree-select', ['exports', '@angular/core', '@angular/forms', 'ng-devui/tree', 'rxjs/operators', 'ng-devui/i18n', '@angular/common', 'ng-devui/checkbox', 'ng-devui/loading', 'ng-devui/utils'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui']['tree-select'] = {}), global.ng.core, global.ng.forms, global['ng-devui'].tree, global.rxjs.operators, global['ng-devui'].i18n, global.ng.common, global['ng-devui'].checkbox, global['ng-devui'].loading, global['ng-devui'].utils));
}(this, (function (exports, core, forms, tree, operators, i18n, common, checkbox, loading, utils) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __exportStar(m, exports) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
/**
* @fileoverview added by tsickle
* Generated from: tree-default-icons.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DefaultIcons = {
iconParentClose: "\n <span style=\"width: 14px; display: inline-block; content: '';\">\n <svg\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 <path\n d=\"M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n 13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M7,7 L4,7 L4,9 L7,9 L7,12 L9,12 L9,9 L12,9 L12,7 L9,7 L9,4 L7,4 L7,7 Z\"\n fill=\"#5E6678\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n ",
iconParentOpen: "\n <span style=\"width: 14px; display: inline-block; content: '';\">\n <svg\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 <path\n d=\"M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n 13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M12,7 L4,7 L4,9 L12,9 L12,7 Z\"\n fill=\"#5E6678\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n ",
iconLeaf: "\n <span style=\"width: 14px; display: inline-block; content: '';\"></span>\n "
};
var DefaultIcons$1 = __assign({}, DefaultIcons);
/**
* @fileoverview added by tsickle
* Generated from: tree-select.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TreeSelectComponent = /** @class */ (function () {
function TreeSelectComponent(renderer, changeDetectorRef, i18n) {
this.renderer = renderer;
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.placeholder = '';
this.disabled = false;
this.expandTree = false;
this.multiple = false;
this.treeNodeIdKey = 'id';
this.treeNodeChildrenKey = 'children';
this.disabledKey = 'disabled';
this.leafOnly = false;
this.delimiter = ', ';
this.iconParentOpen = DefaultIcons$1.iconParentOpen;
this.iconParentClose = DefaultIcons$1.iconParentClose;
this.iconLeaf = DefaultIcons$1.iconLeaf;
this.closeOnNodeSelected = true;
this.width = null;
this.searchable = false;
this.appendTo = 'body';
this.treeNodeTitleKey = 'title';
this.allowUnselect = true;
this.valueChanged = new core.EventEmitter();
this._treeData = [];
this.searchString = null;
this.noRecord = false;
this._isOpen = false;
this._sourceTree = [];
this.readyEvent = (/**
* @param {?} treeSelect
* @return {?}
*/
function (treeSelect) {
});
this.onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { return null; });
this.onTouch = (/**
* @return {?}
*/
function () { return null; });
}
Object.defineProperty(TreeSelectComponent.prototype, "allowClear", {
get: /**
* @return {?}
*/
function () {
return !this.disabled && !this.multiple && this.allowUnselect && this._allowClear && !!this.selectedValue;
},
set: /**
* @param {?} allowClear
* @return {?}
*/
function (allowClear) {
this._allowClear = allowClear;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "treeData", {
get: /**
* @return {?}
*/
function () {
return this._treeData;
},
set: /**
* @param {?} treeData
* @return {?}
*/
function (treeData) {
this._sourceTree = treeData;
this.refreshTree(treeData);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "isOpen", {
get: /**
* @return {?}
*/
function () {
return this._isOpen;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._isOpen !== value) {
this._isOpen = value;
this.changeDetectorRef.detectChanges();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TreeSelectComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.changeDetectorRef.detectChanges();
this.readyEvent(this);
if (this.searchable) {
this.registerSearchListener();
}
};
/**
* @param {?} changes
* @return {?}
*/
TreeSelectComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setI18nText();
};
/**
* @param {?} fn
* @return {?}
*/
TreeSelectComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
TreeSelectComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouch = fn;
};
/**
* @param {?} isDisabled
* @return {?}
*/
TreeSelectComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @param {?} value
* @return {?}
*/
TreeSelectComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = this.multiple ? Object.assign([], value) : value;
this.refreshTree(this.treeData);
// Trigger visualization after tree data is fulfilled.
this.changeDetectorRef.detectChanges();
this.visualizeSelectedItems();
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.toggle = /**
* @return {?}
*/
function () {
var _this = this;
if (this.timer) {
clearTimeout(this.timer);
}
/** @type {?} */
var applyNow = !this.timer;
this.timer = setTimeout((/**
* @return {?}
*/
function () { _this.timer = null; }), 200);
if (applyNow) {
this.isOpen = !this.isOpen;
}
};
/**
* @private
* @return {?}
*/
TreeSelectComponent.prototype.setI18nText = /**
* @private
* @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;
}));
};
/**
* @private
* @param {?} treeNode
* @return {?}
*/
TreeSelectComponent.prototype.expandAllNodes = /**
* @private
* @param {?} treeNode
* @return {?}
*/
function (treeNode) {
var _this = this;
if (Array.isArray(treeNode)) {
return treeNode.map((/**
* @param {?} node
* @return {?}
*/
function (node) { return _this.expandAllNodes(node); }));
}
else if (treeNode instanceof Object) {
if (treeNode.hasOwnProperty(this.treeNodeChildrenKey)) {
treeNode.open = true;
treeNode[this.treeNodeChildrenKey] = this.expandAllNodes(treeNode[this.treeNodeChildrenKey]);
}
return treeNode;
}
};
/**
* @private
* @param {?} treeNode
* @param {?=} expandTree
* @return {?}
*/
TreeSelectComponent.prototype.prepareTree = /**
* @private
* @param {?} treeNode
* @param {?=} expandTree
* @return {?}
*/
function (treeNode, expandTree) {
var _a;
var _this = this;
if (expandTree === void 0) { expandTree = false; }
if (Array.isArray(treeNode)) {
return treeNode.map((/**
* @param {?} node
* @return {?}
*/
function (node) { return _this.prepareTree(node, expandTree); }));
}
else if (treeNode) {
/** @type {?} */
var parentCheckedByChildren = false;
if (treeNode.hasOwnProperty(this.treeNodeChildrenKey)) {
treeNode.open = expandTree ? true : treeNode.open;
treeNode[this.treeNodeChildrenKey] = this.prepareTree(treeNode[this.treeNodeChildrenKey], expandTree);
if (this.multiple) {
_a = __read(this.resolveParentNode(treeNode[this.treeNodeChildrenKey]), 2), parentCheckedByChildren = _a[0], treeNode.halfChecked = _a[1];
}
}
if (treeNode.hasOwnProperty(this.treeNodeIdKey)) {
/** @type {?} */
var nodeId = treeNode[this.treeNodeIdKey];
if (this.multiple) {
/** @type {?} */
var selectedByValue = this.nodeSelected(nodeId);
treeNode.isActive = false;
treeNode.isChecked = selectedByValue || parentCheckedByChildren;
if (!this.leafOnly && !selectedByValue && parentCheckedByChildren) {
/** @type {?} */
var insertObject = {};
insertObject[this.treeNodeIdKey] = treeNode[this.treeNodeIdKey];
insertObject[this.treeNodeTitleKey] = treeNode[this.treeNodeTitleKey];
((/** @type {?} */ (this.value))).push(insertObject);
}
}
else {
treeNode.isChecked = false;
treeNode.isActive = this.nodeSelected(nodeId);
if (treeNode.isActive) {
this.currentActiveNode = treeNode;
}
}
}
return treeNode;
}
};
/**
* @private
* @param {?} treeNodeId
* @return {?}
*/
TreeSelectComponent.prototype.nodeSelected = /**
* @private
* @param {?} treeNodeId
* @return {?}
*/
function (treeNodeId) {
var _this = this;
if (!this.value) {
return false;
}
if (this.multiple && Array.isArray(this.value)) {
// polyfill Array.prototype.includes()
return this.value.map((/**
* @param {?} _
* @return {?}
*/
function (_) { return _[_this.treeNodeIdKey]; })).indexOf(treeNodeId) > -1;
}
else {
return this.value[this.treeNodeIdKey] && treeNodeId === this.value[this.treeNodeIdKey];
}
};
/**
* @private
* @param {?} treeNodes
* @return {?}
*/
TreeSelectComponent.prototype.resolveParentNode = /**
* @private
* @param {?} treeNodes
* @return {?}
*/
function (treeNodes) {
/** @type {?} */
var childrenFullCheckedCount = treeNodes.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.isChecked; })).length;
/** @type {?} */
var childrenCheckedCount = treeNodes.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.isChecked || _.halfChecked; })).length;
return [
childrenFullCheckedCount > 0 && treeNodes.length === childrenFullCheckedCount,
childrenCheckedCount > 0 && treeNodes.length > childrenFullCheckedCount
];
};
/**
* @private
* @param {?} treeData
* @return {?}
*/
TreeSelectComponent.prototype.refreshTree = /**
* @private
* @param {?} treeData
* @return {?}
*/
function (treeData) {
this._treeData = Object.assign([], this.prepareTree(treeData, this.expandTree));
};
/**
* @param {?} selectedNodes
* @return {?}
*/
TreeSelectComponent.prototype.onOperableNodeChecked = /**
* @param {?} selectedNodes
* @return {?}
*/
function (selectedNodes) {
var _this = this;
/** @type {?} */
var selectedValueExtractor = (/**
* @param {?} _selectedNodes
* @return {?}
*/
function (_selectedNodes) {
return _this.leafOnly ?
_selectedNodes.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return !_.data.isParent; })).map((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.data.originItem; })) :
_selectedNodes.map((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.data.originItem; }));
});
if (this.multiple) {
this.value = selectedValueExtractor(selectedNodes);
this.emitEvents();
}
};
/**
* @param {?} selectedNode
* @return {?}
*/
TreeSelectComponent.prototype.onOperableNodeSelected = /**
* @param {?} selectedNode
* @return {?}
*/
function (selectedNode) {
if (!this.multiple) {
if (this.leafOnly && selectedNode.data.isParent) {
return;
}
if (selectedNode.data.isActive) {
this.currentActiveNode = selectedNode.data.originItem;
this.value = selectedNode.data.originItem;
// Configurable close on node selected
if (this.closeOnNodeSelected) {
this.isOpen = false;
}
}
else {
if (this.allowUnselect) {
this.currentActiveNode = null;
this.value = null;
}
else {
selectedNode.data.isActive = true;
if (this.closeOnNodeSelected) {
this.isOpen = false;
}
}
}
this.emitEvents();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.emitEvents = /**
* @return {?}
*/
function () {
this.visualizeSelectedItems();
this.onChange(this.value);
this.valueChanged.emit(this.selectedValue());
this.onTouch();
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.visualizeSelectedItems = /**
* @return {?}
*/
function () {
if (this.multiple) {
this.visualizeMultipleValue();
}
else {
this.visualizeSingleValue();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.visualizeMultipleValue = /**
* @return {?}
*/
function () {
var _this = this;
if (this.tree && this.tree.treeFactory) {
/** @type {?} */
var selectedNodes = (/** @type {?} */ (this.selectedValue()));
/** @type {?} */
var valueText = selectedNodes.map((/**
* @param {?} _
* @return {?}
*/
function (_) { return _[_this.treeNodeTitleKey]; })).join(this.delimiter);
this.renderer.setAttribute(this.selectHost.nativeElement, 'value', valueText);
}
else {
this.emptyInput();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.visualizeSingleValue = /**
* @return {?}
*/
function () {
if (this.value && this.value[this.treeNodeTitleKey]) {
/** @type {?} */
var valueText = this.value[this.treeNodeTitleKey];
this.renderer.setAttribute(this.selectHost.nativeElement, 'value', valueText);
}
else {
this.emptyInput();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.emptyInput = /**
* @return {?}
*/
function () {
this.renderer.setAttribute(this.selectHost.nativeElement, 'value', '');
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.selectedValue = /**
* @return {?}
*/
function () {
return this.value;
};
/**
* @param {?} popperState
* @return {?}
*/
TreeSelectComponent.prototype.responsePopperChange = /**
* @param {?} popperState
* @return {?}
*/
function (popperState) {
if (popperState && this.searchable) {
this.focusSearchInput();
}
};
/**
* @private
* @return {?}
*/
TreeSelectComponent.prototype.focusSearchInput = /**
* @private
* @return {?}
*/
function () {
if (this.searchInput.nativeElement) {
this.searchInput.nativeElement.focus();
}
};
/**
* @param {?} searchString
* @return {?}
*/
TreeSelectComponent.prototype.search = /**
* @param {?} searchString
* @return {?}
*/
function (searchString) {
/** @type {?} */
var searchRes = this.tree.treeFactory.searchTree(searchString, true);
if (typeof searchRes === 'boolean') {
this.noRecord = searchRes;
}
else if (Array.isArray(searchRes)) {
this.noRecord = searchRes.every((/**
* @param {?} res
* @return {?}
*/
function (res) { return !res; }));
}
this.popper.update();
};
/**
* @private
* @return {?}
*/
TreeSelectComponent.prototype.registerSearchListener = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.searchInputModel.valueChanges.pipe(operators.debounceTime(500), operators.distinctUntilChanged()).subscribe((/**
* @param {?} searchString
* @return {?}
*/
function (searchString) {
_this.search(searchString);
}));
};
/**
* @private
* @return {?}
*/
TreeSelectComponent.prototype.scrollToSelected = /**
* @private
* @return {?}
*/
function () {
if (this.multiple) {
return;
}
/** @type {?} */
var selectedNode = this.optionsContainer.nativeElement.querySelector('.tree-node.operable-tree-node.selected');
/** @type {?} */
var scrollableContainer = this.optionsContainer.nativeElement.parentNode;
if (!selectedNode || !scrollableContainer) {
return;
}
/** @type {?} */
var scrollOffset = selectedNode.offsetTop;
scrollableContainer.scrollTo({ top: (scrollOffset - scrollableContainer.scrollTop) });
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.clearValue = /**
* @return {?}
*/
function () {
if (this.treeData && this.treeData.length > 0 && !this.disabled && !this.multiple && !!this.selectedValue) {
this.tree.treeFactory.deactivateAllNodes();
this.currentActiveNode = null;
this.value = null;
this.emitEvents();
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.onNodeToggled = /**
* @return {?}
*/
function () {
if (this.popper) {
this.popper.update();
}
};
TreeSelectComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-tree-select',
template: "<div class=\"devui-tree-select\">\r\n <popper-component [(open)]=\"isOpen\" [fluidPopper]=\"!width\" (openChange)=\"responsePopperChange($event)\" [appendTo]=\"appendTo\" #popper>\r\n <input\r\n #selectHost\r\n class=\"devui-select-input devui-input devui-form-control devui-tree-select-input\"\r\n (click)=\"toggle()\"\r\n [placeholder]=\"placeholder\"\r\n autocomplete=\"off\"\r\n [disabled]=\"disabled\"\r\n readonly\r\n popper-activator\r\n />\r\n <div popper-prepend class=\"devui-tree-select devui-search-container\" *ngIf=\"searchable\">\r\n <input class=\"devui-input\" [(ngModel)]=\"searchString\" #searchInputModel=\"ngModel\" #searchInput />\r\n </div>\r\n <div class=\"devui-tree-select devui-options-container\" #optionsContainer popper-container [ngStyle]=\"{ width: width }\">\r\n <d-operable-tree\r\n #tree\r\n [style.display]=\"treeData && treeData.length > 0 && !noRecord ? 'block' : 'none'\"\r\n [tree]=\"treeData\"\r\n [treeNodeIdKey]=\"treeNodeIdKey\"\r\n [treeNodeChildrenKey]=\"treeNodeChildrenKey\"\r\n [checkboxDisabledKey]=\"disabledKey\"\r\n [checkboxInput]=\"checkboxInput\"\r\n [checkable]=\"multiple\"\r\n [canActivateNode]=\"!multiple\"\r\n [canActivateParentNode]=\"!leafOnly\"\r\n (nodeChecked)=\"onOperableNodeChecked($event)\"\r\n (nodeSelected)=\"onOperableNodeSelected($event)\"\r\n (nodeToggled)=\"onNodeToggled()\"\r\n [iconParentOpen]=\"iconParentOpen\"\r\n [iconParentClose]=\"iconParentClose\"\r\n [iconLeaf]=\"iconLeaf\"\r\n [treeNodeTitleKey]=\"treeNodeTitleKey\"\r\n [iconTemplatePosition]=\"iconTemplatePosition\"\r\n class=\"devui-tree\"\r\n >\r\n <ng-template *ngIf=\"iconTemplateInput || iconTemplatePassThrough\" #iconTemplate let-node=\"node\">\r\n <ng-template [ngTemplateOutlet]=\"iconTemplateInput || iconTemplatePassThrough\" [ngTemplateOutletContext]=\"{ node: node }\">\r\n </ng-template>\r\n </ng-template>\r\n </d-operable-tree>\r\n <div *ngIf=\"!treeData || treeData.length <= 0\" class=\"devui-no-data-tip\">\r\n {{ i18nCommonText?.noData }}\r\n </div>\r\n <div *ngIf=\"noRecord\" class=\"devui-no-data-tip\">\r\n {{ i18nCommonText?.noRecordsFound }}\r\n </div>\r\n </div>\r\n </popper-component>\r\n <div\r\n [ngClass]=\"{ disabled: disabled, clear: allowClear }\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault(); clearValue()\"\r\n ></div>\r\n <span class=\"devui-select-chevron-icon\" [class.open]=\"isOpen\" [ngClass]=\"{ disabled: disabled, clear: allowClear }\">\r\n <svg width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon id=\"chevron_down\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n",
exportAs: 'select',
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return TreeSelectComponent; })),
multi: true
}
],
styles: [".devui-tree-select{position:relative;width:100%}.devui-tree-select input.devui-select-input{cursor:pointer;display:inline-block;width:100%;color:#252b3a;text-overflow:ellipsis}.devui-tree-select input.devui-select-input.devui-tree-select-input{padding:5px 2em 5px 10px}.devui-tree-select:hover .clear{position:absolute;height:14px;width:14px;right:12px;top:calc((100% - 14px)/ 2);cursor:pointer}.devui-tree-select:hover .clear::after,.devui-tree-select:hover .clear::before{position:absolute;content:'';height:14px;width:1px;background-color:#252b3a;left:50%}.devui-tree-select:hover .clear::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.devui-tree-select:hover .clear::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.devui-tree-select:hover .clear:hover::after,.devui-tree-select:hover .clear:hover::before{background-color:#252b3a}.devui-tree-select .devui-select-chevron-icon{right:12px;top:calc((100% - 14px)/ 2);position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.devui-tree-select .devui-select-chevron-icon svg{-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-tree-select .devui-select-chevron-icon.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.devui-tree-select .devui-select-chevron-icon.clear{opacity:0}.devui-tree-select .devui-select-chevron-icon.disabled{opacity:.3}.devui-tree-select .devui-select-chevron-icon ::ng-deep g{fill:#252b3a}.devui-tree-select:not(:hover) .devui-select-chevron-icon:not(.disabled){opacity:1;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.devui-tree-select.devui-options-container{width:100%;color:#252b3a;padding:5px 0}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .devui-tree-node__content{margin-left:10px}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .active{background-color:transparent}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected{position:relative;-webkit-width:-webkit-fit-content;-moz-width:-moz-fit-content;width:fit-content;min-width:calc(100% - 1.2em)}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f2f5fc;z-index:-1}.devui-tree-select.devui-options-container .devui-no-data-tip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:not-allowed;padding:5px 12px;opacity:.3}.devui-tree-select.devui-search-container{padding:5px}:host{display:inline-block;width:100%}"]
}] }
];
/** @nocollapse */
TreeSelectComponent.ctorParameters = function () { return [
{ type: core.Renderer2 },
{ type: core.ChangeDetectorRef },
{ type: i18n.I18nService }
]; };
TreeSelectComponent.propDecorators = {
allowClear: [{ type: core.Input }],
treeData: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
disabled: [{ type: core.Input }],
expandTree: [{ type: core.Input }],
multiple: [{ type: core.Input }],
treeNodeIdKey: [{ type: core.Input }],
treeNodeChildrenKey: [{ type: core.Input }],
disabledKey: [{ type: core.Input }],
leafOnly: [{ type: core.Input }],
delimiter: [{ type: core.Input }],
iconParentOpen: [{ type: core.Input }],
iconParentClose: [{ type: core.Input }],
iconLeaf: [{ type: core.Input }],
closeOnNodeSelected: [{ type: core.Input }],
width: [{ type: core.Input }],
searchable: [{ type: core.Input }],
appendTo: [{ type: core.Input }],
treeNodeTitleKey: [{ type: core.Input }],
allowUnselect: [{ type: core.Input }],
iconTemplatePosition: [{ type: core.Input }],
iconTemplateInput: [{ type: core.Input }],
selectHost: [{ type: core.ViewChild, args: ['selectHost', { static: true },] }],
optionsContainer: [{ type: core.ViewChild, args: ['optionsContainer', { static: true },] }],
tree: [{ type: core.ViewChild, args: ['tree', { static: true },] }],
searchInput: [{ type: core.ViewChild, args: ['searchInput', { static: false },] }],
searchInputModel: [{ type: core.ViewChild, args: ['searchInputModel', { static: false },] }],
popper: [{ type: core.ViewChild, args: ['popper', { static: true },] }],
iconTemplatePassThrough: [{ type: core.ContentChild, args: ['iconTemplate', { static: false },] }],
valueChanged: [{ type: core.Output }],
readyEvent: [{ type: core.Input }]
};
return TreeSelectComponent;
}());
if (false) {
/** @type {?} */
TreeSelectComponent.prototype.placeholder;
/** @type {?} */
TreeSelectComponent.prototype.disabled;
/** @type {?} */
TreeSelectComponent.prototype.expandTree;
/** @type {?} */
TreeSelectComponent.prototype.multiple;
/** @type {?} */
TreeSelectComponent.prototype.treeNodeIdKey;
/** @type {?} */
TreeSelectComponent.prototype.treeNodeChildrenKey;
/** @type {?} */
TreeSelectComponent.prototype.disabledKey;
/** @type {?} */
TreeSelectComponent.prototype.leafOnly;
/** @type {?} */
TreeSelectComponent.prototype.delimiter;
/** @type {?} */
TreeSelectComponent.prototype.iconParentOpen;
/** @type {?} */
TreeSelectComponent.prototype.iconParentClose;
/** @type {?} */
TreeSelectComponent.prototype.iconLeaf;
/** @type {?} */
TreeSelectComponent.prototype.closeOnNodeSelected;
/** @type {?} */
TreeSelectComponent.prototype.width;
/** @type {?} */
TreeSelectComponent.prototype.searchable;
/** @type {?} */
TreeSelectComponent.prototype.appendTo;
/** @type {?} */
TreeSelectComponent.prototype.treeNodeTitleKey;
/** @type {?} */
TreeSelectComponent.prototype.allowUnselect;
/** @type {?} */
TreeSelectComponent.prototype.iconTemplatePosition;
/** @type {?} */
TreeSelectComponent.prototype.iconTemplateInput;
/** @type {?} */
TreeSelectComponent.prototype.selectHost;
/** @type {?} */
TreeSelectComponent.prototype.optionsContainer;
/** @type {?} */
TreeSelectComponent.prototype.tree;
/** @type {?} */
TreeSelectComponent.prototype.searchInput;
/** @type {?} */
TreeSelectComponent.prototype.searchInputModel;
/** @type {?} */
TreeSelectComponent.prototype.popper;
/** @type {?} */
TreeSelectComponent.prototype.iconTemplatePassThrough;
/** @type {?} */
TreeSelectComponent.prototype.valueChanged;
/** @type {?} */
TreeSelectComponent.prototype.checkboxInput;
/** @type {?} */
TreeSelectComponent.prototype._treeData;
/** @type {?} */
TreeSelectComponent.prototype.value;
/** @type {?} */
TreeSelectComponent.prototype.currentActiveNode;
/** @type {?} */
TreeSelectComponent.prototype.searchString;
/** @type {?} */
TreeSelectComponent.prototype.i18nCommonText;
/** @type {?} */
TreeSelectComponent.prototype.i18nSubscription;
/** @type {?} */
TreeSelectComponent.prototype.noRecord;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype._isOpen;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype._sourceTree;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype._allowClear;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype.timer;
/** @type {?} */
TreeSelectComponent.prototype.readyEvent;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype.onTouch;
/**
* @type {?}
* @protected
*/
TreeSelectComponent.prototype.renderer;
/**
* @type {?}
* @protected
*/
TreeSelectComponent.prototype.changeDetectorRef;
/**
* @type {?}
* @private
*/
TreeSelectComponent.prototype.i18n;
}
/**
* @fileoverview added by tsickle
* Generated from: tree-select.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TreeSelectModule = /** @class */ (function () {
function TreeSelectModule() {
}
TreeSelectModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
checkbox.CheckBoxModule,
loading.LoadingModule,
tree.TreeModule,
utils.PopperModule
],
exports: [TreeSelectComponent],
declarations: [
TreeSelectComponent,
],
providers: []
},] }
];
return TreeSelectModule;
}());
exports.DefaultIcons = DefaultIcons;
exports.TreeSelectComponent = TreeSelectComponent;
exports.TreeSelectModule = TreeSelectModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-tree-select.umd.js.map