ngx-tree-select
Version:
Angular component for select with tree items.
1,145 lines (1,132 loc) • 40.8 kB
JavaScript
import { Component, Directive, Inject, Injectable, Input, NgModule, PLATFORM_ID, Pipe, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { CommonModule, isPlatformBrowser } from '@angular/common';
var ExpandMode = /** @class */ (function () {
function ExpandMode() {
}
ExpandMode.None = 'None';
ExpandMode.Selection = 'Selection';
ExpandMode.All = 'All';
return ExpandMode;
}());
var TreeSelectDefaultOptions = /** @class */ (function () {
function TreeSelectDefaultOptions() {
this.expandMode = ExpandMode.None;
}
TreeSelectDefaultOptions.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
TreeSelectDefaultOptions.ctorParameters = function () { return []; };
return TreeSelectDefaultOptions;
}());
var SelectableItem = /** @class */ (function () {
/**
* @param {?} id
* @param {?} text
* @param {?} data
* @param {?} svc
*/
function SelectableItem(id, text, data, svc) {
this.id = id;
this.text = text;
this.data = data;
this.svc = svc;
this._selected = false;
this.isOpen = false;
this.matchFilter = true;
this.isVisible = false;
}
Object.defineProperty(SelectableItem.prototype, "hasChild", {
/**
* @return {?}
*/
get: function () {
return this.children && this.children.length > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SelectableItem.prototype, "checked", {
/**
* @return {?}
*/
get: function () {
if (this.hasChild && this.svc.Configuration.allowMultiple) {
if (this.children.every(function (child) { return child.selected; })) {
return true;
}
else if (this.children.every(function (child) { return child.selected === false; })) {
return this._selected;
}
return null;
}
return this._selected;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SelectableItem.prototype, "selected", {
/**
* @return {?}
*/
get: function () {
if (this.hasChild && this.svc.Configuration.allowMultiple) {
if (this.children.some(function (child) { return child.selected; })) {
if (this.svc.Configuration.allowParentSelection) {
this._selected = false;
}
return true;
}
else if (this.children.every(function (child) { return child.selected === false; })) {
if (this.svc.Configuration.allowParentSelection) {
return this._selected;
}
else {
return this._selected = false;
}
}
return false;
}
else if (this.hasChild && this._selected === true) {
for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
var itm = _a[_i];
itm.selected = false;
}
}
return this._selected;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (this.hasChild && !this.svc.Configuration.allowParentSelection) {
if (value !== null) {
this.children.forEach(function (child) { return child.selected = value; });
}
}
else {
this._selected = value;
}
},
enumerable: true,
configurable: true
});
return SelectableItem;
}());
var SelectOption = /** @class */ (function () {
function SelectOption() {
this.idProperty = 'id';
this.textProperty = 'text';
this.childProperty = null;
this.allowMultiple = false;
this.closeOnSelection = true;
this.items = [];
this.isOpen = false;
this.filter = '';
this.filterCaseSensitive = false;
this.allowParentSelection = false;
this.restructureWhenChildSameName = false;
this.expandMode = ExpandMode.None;
}
/**
* @return {?}
*/
SelectOption.prototype.isHierarchy = function () {
return this.childProperty && this.childProperty.trim().length > 0;
};
Object.defineProperty(SelectOption.prototype, "filterExpandMode", {
/**
* @return {?}
*/
get: function () {
if (this.filter !== '') {
return ExpandMode.All;
}
else {
return this.expandMode;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SelectOption.prototype.displayCheckbox = function () {
return this.allowMultiple && this.isHierarchy();
};
/**
* @return {?}
*/
SelectOption.prototype.isValid = function () {
// Check id property value
return this.idProperty && this.idProperty.trim().length > 0 &&
// Check text property value
this.textProperty && this.textProperty.trim().length > 0 &&
// Check items value
this.items && Array.isArray(this.items) && this.items.length > 0;
};
return SelectOption;
}());
var SelectService = /** @class */ (function () {
function SelectService() {
this.modelChanged$ = new Subject();
this._options = new SelectOption();
}
/**
* @return {?}
*/
SelectService.prototype.close = function () {
if (this.Configuration.isOpen) {
this.setConfiguration(function (opt) { return opt.isOpen = false; }, false);
}
};
/**
* @return {?}
*/
SelectService.prototype.open = function () {
if (!this.Configuration.isOpen) {
this.setConfiguration(function (opt) { return opt.isOpen = true; }, false);
}
};
/**
* @return {?}
*/
SelectService.prototype.toggleOpen = function () {
this.setConfiguration(function (opt) { return opt.isOpen = !opt.isOpen; }, false);
};
/**
* @param {?} value
* @return {?}
*/
SelectService.prototype.setItems = function (value) {
this.setConfiguration(function (opt) { return opt.items = value; }, true);
this.setExpand();
};
/**
* @return {?}
*/
SelectService.prototype.getInternalItems = function () {
return this._items;
};
/**
* @param {?} values
* @return {?}
*/
SelectService.prototype.setSelection = function (values) {
this.setConfiguration(function (opt) { return opt.model = values; }, true);
this.setExpand();
};
/**
* @param {?} items
* @param {?} destination
* @return {?}
*/
SelectService.prototype.setSelectedItemOrChild = function (items, destination) {
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var itm = items_1[_i];
if (itm.hasChild) {
if (itm.id === destination) {
itm.selected = true;
}
this.setSelectedItemOrChild(itm.children, destination);
}
else if (itm.id === destination) {
itm.selected = true;
}
}
};
/**
* @return {?}
*/
SelectService.prototype.getSelection = function () {
if (this.Configuration.allowMultiple) {
return this.getInternalSelection().map(function (v) { return v.data; });
}
else {
var /** @type {?} */ result = this.getInternalSelection();
if (result && result.length > 0) {
return result[0].data;
}
}
return null;
};
/**
* @return {?}
*/
SelectService.prototype.getInternalSelection = function () {
var /** @type {?} */ selectedItems = this.getSelectedItems(this._items);
if (selectedItems && selectedItems.length > 0) {
var /** @type {?} */ i = 0;
var /** @type {?} */ max = this._options.maxVisibleItemCount ? this._options.maxVisibleItemCount : 0;
for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
var item = selectedItems_1[_i];
item.isVisible =
// Max not reached or not max value
(i < max || max === 0) &&
// all my children are unselected
(!item.hasChild || item.children.every(function (child) { return child.selected === false; }));
if (item.isVisible && max > 0) {
i++;
}
}
}
return selectedItems;
};
/**
* @param {?} item
* @return {?}
*/
SelectService.prototype.toggleItemSelection = function (item) {
var _this = this;
if (!this.Configuration.allowMultiple) {
this.setAllUnselected(this._items);
}
item.selected = !item.selected;
this.setConfiguration(function (opt) { return opt.model = _this.getSelection(); }, false);
if (this.Configuration.closeOnSelection) {
this.setConfiguration(function (opt) { return opt.isOpen = false; }, false);
}
};
/**
* @param {?} items
* @return {?}
*/
SelectService.prototype.setAllUnselected = function (items) {
for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
var itm = items_2[_i];
if (itm.hasChild) {
itm.selected = false;
this.setAllUnselected(itm.children);
}
else {
itm.selected = false;
}
}
};
/**
* @param {?} delegate
* @param {?} processItems
* @return {?}
*/
SelectService.prototype.setConfiguration = function (delegate, processItems) {
var /** @type {?} */ modelBck = this._options.model;
delegate(this._options);
if (this._options.isValid()) {
this.reconfigure(processItems);
}
// if model changed, raise event
if (!processItems &&
((modelBck && this._options.model !== modelBck) ||
(!modelBck && this._options.model))) {
this.modelChanged$.next(this._options.model);
}
};
Object.defineProperty(SelectService.prototype, "Configuration", {
/**
* @return {?}
*/
get: function () {
return this._options;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SelectService.prototype.setExpand = function () {
this.setExpandForList(this._items);
};
/**
* @param {?} items
* @return {?}
*/
SelectService.prototype.setExpandForList = function (items) {
if (!items) {
return;
}
for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
var item = items_3[_i];
this.setExpandForList(item.children);
item.isOpen = (this._options.filterExpandMode === ExpandMode.All);
if (this._options.filterExpandMode === ExpandMode.Selection) {
if (item.children) {
item.isOpen = item.children.some(function (itm) { return itm.isOpen || itm.selected; });
}
}
}
};
/**
* @param {?} sources
* @return {?}
*/
SelectService.prototype.toSelectableItems = function (sources) {
var _this = this;
if (sources && Array.isArray(sources)) {
var /** @type {?} */ i_1 = 1;
return sources.map(function (srcItem) {
var /** @type {?} */ item;
if (srcItem[_this._options.idProperty] &&
srcItem[_this._options.idProperty] !== '' &&
srcItem[_this._options.textProperty]) {
item = new SelectableItem((srcItem[_this._options.idProperty] || '').toString(), /** @type {?} */ (srcItem[_this._options.textProperty]), srcItem, _this);
}
else {
item = new SelectableItem(i_1.toString(), /** @type {?} */ (srcItem), srcItem, _this);
i_1++;
}
if (_this._options.isHierarchy()) {
item.children = _this.toSelectableItems(srcItem[_this._options.childProperty]);
}
return item;
});
}
return [];
};
/**
* @param {?} array
* @return {?}
*/
SelectService.prototype.getSelectedItems = function (array) {
if (this.Configuration.isValid()) {
var /** @type {?} */ res = [];
for (var _i = 0, array_1 = array; _i < array_1.length; _i++) {
var v = array_1[_i];
if (v.hasChild && v.selected === true) {
if (v.children.every(function (child) { return child.selected === false; })) {
res = res.concat([v]);
}
else {
res = res.concat(this.getSelectedItems(v.children));
}
}
else if (v.hasChild) {
res = res.concat(this.getSelectedItems(v.children));
}
else if (v.selected === true) {
res = res.concat([v]);
}
}
return res;
}
else {
return [];
}
};
/**
* @param {?} processItems
* @return {?}
*/
SelectService.prototype.reconfigure = function (processItems) {
var _this = this;
if (this.Configuration.isValid()) {
this.checkConfig();
if (processItems) {
this._items = this.toSelectableItems(this.Configuration.items);
}
var /** @type {?} */ model = this.getModel();
var /** @type {?} */ select_1 = [];
model.forEach(function (v) {
select_1 = select_1.concat(_this.getItemForModel(v, _this._items));
});
select_1.forEach(function (v) { return v._selected = true; });
}
};
/**
* @return {?}
*/
SelectService.prototype.checkConfig = function () {
if (this.Configuration.allowMultiple && this.Configuration.closeOnSelection) {
this.Configuration.closeOnSelection = false;
}
else if (!this.Configuration.allowMultiple && !this.Configuration.closeOnSelection) {
this.Configuration.closeOnSelection = true;
}
};
/**
* @return {?}
*/
SelectService.prototype.getModel = function () {
if (!this.Configuration.model) {
return [];
}
else if (!Array.isArray(this.Configuration.model)) {
return [this.Configuration.model];
}
else {
return this.Configuration.model;
}
};
/**
* @param {?} value
* @param {?} array
* @return {?}
*/
SelectService.prototype.getItemForModel = function (value, array) {
var /** @type {?} */ result = [];
for (var _i = 0, array_2 = array; _i < array_2.length; _i++) {
var v = array_2[_i];
if (value) {
if (typeof value !== 'object') {
if (v.data === value) {
result.push(v);
}
}
else {
if (value[this.Configuration.idProperty]) {
if (v.id === (value[this.Configuration.idProperty] || '').toString()) {
result.push(v);
}
}
if (this.Configuration.isHierarchy() && v.children && v.children.length > 0) {
result = result.concat(this.getItemForModel(value, v.children));
}
}
}
}
return result;
};
SelectService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
SelectService.ctorParameters = function () { return []; };
return SelectService;
}());
// tslint:disable-next-line:no-empty
var noop = function () { };
var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
// tslint:disable-next-line:no-forward-ref
useExisting: forwardRef(function () { return TreeSelectComponent; }),
multi: true
};
var TreeSelectComponent = /** @class */ (function () {
/**
* @param {?} svc
* @param {?} defaultOpts
*/
function TreeSelectComponent(svc, defaultOpts) {
var _this = this;
this.svc = svc;
this.defaultOpts = defaultOpts;
this.onTouchedCallback = noop;
this.showMoreLink = false;
this.moreLoaded = false;
this.disabled = false;
this.placeholder = '';
this.filterPlaceholder = 'Type here for filtering items...';
this.allowFilter = true;
this._isOpen = false;
this.onChangeCallback = noop;
this.haveFocus = false;
this.inputFocus = false;
this.clickedOutside = this.clickedOutside.bind(this);
this.svc.modelChanged$.subscribe(function (result) {
_this.onChangeCallback(result);
});
this.maxVisibleItemCount = (defaultOpts.maxVisibleItemCount || 0);
this.allowParentSelection = ((defaultOpts.allowParentSelection === undefined ||
defaultOpts.allowParentSelection === null) ?
true :
defaultOpts.allowParentSelection);
this.allowFilter = ((defaultOpts.allowFilter === undefined || defaultOpts.allowFilter === null) ?
true :
defaultOpts.allowFilter);
this.filterCaseSensitive = ((defaultOpts.filterCaseSensitive === undefined || defaultOpts.filterCaseSensitive === null) ?
false :
defaultOpts.filterCaseSensitive);
this.filterPlaceholder = (defaultOpts.filterPlaceholder || 'Type here for filtering items...');
this.idField = (defaultOpts.idField || 'id');
this.textField = (defaultOpts.textField || 'id');
this.childrenField = (defaultOpts.childrenField || '');
this.expandMode = (defaultOpts.expandMode || ExpandMode.None);
}
Object.defineProperty(TreeSelectComponent.prototype, "items", {
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setItems(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "idField", {
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.idProperty = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "textField", {
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.textProperty = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "allowParentSelection", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.allowParentSelection;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.allowParentSelection = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "restructureWhenChildSameName", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.restructureWhenChildSameName;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.restructureWhenChildSameName = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "childrenField", {
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.childProperty = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "multiple", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.allowMultiple;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.allowMultiple = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "filterCaseSensitive", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.filterCaseSensitive;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.filterCaseSensitive = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "expandMode", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.expandMode;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.expandMode = value; }, true);
this.svc.setExpand();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "maxVisibleItemCount", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.maxVisibleItemCount;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.maxVisibleItemCount = value; }, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "internalItems", {
/**
* @return {?}
*/
get: function () {
return this.svc.getInternalItems() || [];
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "selection", {
/**
* @return {?}
*/
get: function () {
this.showMoreLink = (this.maxVisibleItemCount > 0 &&
((this.svc.getInternalSelection().length - this.maxVisibleItemCount) > 0));
return this.svc.getInternalSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectComponent.prototype, "filter", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.filter;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.svc.setConfiguration(function (opt) { return opt.filter = value; }, false);
for (var _i = 0, _a = this.internalItems; _i < _a.length; _i++) {
var item = _a[_i];
this.ProcessMatchFilterTreeItem(item, this.svc.Configuration.filter);
}
this.svc.setExpand();
},
enumerable: true,
configurable: true
});
/**
* @param {?} $event
* @return {?}
*/
TreeSelectComponent.prototype.keyUp = function ($event) { };
/**
* @param {?} $event
* @return {?}
*/
TreeSelectComponent.prototype.toggle = function ($event) {
$event.preventDefault();
this.haveFocus = true;
this.svc.toggleOpen();
};
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
TreeSelectComponent.prototype.removeItem = function ($event, item) {
$event.stopPropagation();
this.svc.toggleItemSelection(item);
};
Object.defineProperty(TreeSelectComponent.prototype, "isOpen", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.isOpen;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TreeSelectComponent.prototype.clickedOutside = function () {
if (!this.inputFocus) {
if (!this.haveFocus && this.isOpen || this.haveFocus && !this.isOpen) {
this.onTouched();
}
this.haveFocus = false;
}
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.onTouched = function () {
this.svc.close();
this.onTouchedCallback();
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.setInputFocus = function () {
this.inputFocus = true;
};
/**
* @return {?}
*/
TreeSelectComponent.prototype.setInputFocusOut = function () {
this.inputFocus = false;
};
/**
* Write a new value to the element.
*
* \@memberof TreeSelectComponent
* @param {?} value
* @return {?}
*/
TreeSelectComponent.prototype.writeValue = function (value) {
this.svc.setSelection(value);
};
/**
* Set the function to be called when the control receives a change event.
*
* \@memberof TreeSelectComponent
* @param {?} fn
* @return {?}
*/
TreeSelectComponent.prototype.registerOnChange = function (fn) {
this.onChangeCallback = fn;
};
/**
* Set the function to be called when the control receives a touch event.
*
* \@memberof TreeSelectComponent
* @param {?} fn
* @return {?}
*/
TreeSelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouchedCallback = fn;
};
/**
* This function is called when the control status changes to or from "DISABLED".
* Depending on the value, it will enable or disable the appropriate DOM element.
*
* \@memberof TreeSelectComponent
* @param {?} isDisabled
* @return {?}
*/
TreeSelectComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
/**
* This finction is called when user click on show more link.
*
* \@memberof TreeSelectComponent
* @param {?} $event
* @return {?}
*/
TreeSelectComponent.prototype.loadMore = function ($event) {
$event.stopPropagation();
this.moreLoaded = !this.moreLoaded;
};
/**
* @param {?} tree
* @param {?} filter
* @return {?}
*/
TreeSelectComponent.prototype.ProcessMatchFilterTreeItem = function (tree, filter) {
var /** @type {?} */ result = false;
if (tree && tree.children && tree.children.length > 0) {
for (var _i = 0, _a = tree.children; _i < _a.length; _i++) {
var child = _a[_i];
result = this.ProcessMatchFilterTreeItem(child, filter) || result;
}
}
tree.matchFilter = this.filterCaseSensitive ?
(tree.id.indexOf(filter) > -1 ||
tree.text.indexOf(filter) > -1 ||
result) :
(tree.id.toLowerCase().indexOf(filter.toLowerCase()) > -1 ||
tree.text.toLowerCase().indexOf(filter.toLowerCase()) > -1 ||
result);
return tree.matchFilter;
};
TreeSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'tree-select',
template: "<div tabindex=\"0\" class=\"dropdown open show\" [off-click]=\"clickedOutside\"> <!-- Control display --> <div [class.disabled]=\"disabled\"> <span tabindex=\"-1\" class=\"btn btn-default btn-secondary form-control\" [class.selected-container-text]=\"!multiple\" [class.selected-container-item]=\"multiple\" (click)=\"toggle($event)\"> <span *ngIf=\"selection.length <= 0\" class=\"ui-select-placeholder text-muted\">{{placeholder}}</span> <span *ngFor=\"let itm of selection; let idx=index\"> <span *ngIf=\"moreLoaded || maxVisibleItemCount == 0 || idx<maxVisibleItemCount\" class=\"pull-left\" [class.selected-item-text]=\"!multiple\" [class.selected-item-item]=\"multiple\" [class.btn]=\"multiple\" [class.btn-default]=\"multiple\" [class.btn-xs]=\"multiple\"> {{itm.text}} <a *ngIf=\"multiple && !disabled\" class=\"close\" (click)=\"removeItem($event, itm)\">x</a> </span> </span> </span> </div> <div class=\"enabled\"> <span class=\"pull-right more-items-icon\" (click)=\"loadMore($event)\" *ngIf=\"showMoreLink\">(...)</span> <i class=\"caret pull-right\" (click)=\"toggle($event)\"></i> </div> <!-- options template --> <ul *ngIf=\"!disabled && isOpen && internalItems && internalItems.length > 0\" class=\"dropdown-menu\" role=\"menu\"> <input name=\"filterText\" *ngIf=\"allowFilter\" type=\"text\" [(ngModel)]=\"filter\" (click)=\"setInputFocus()\" (blur)=\"setInputFocusOut()\" class=\"form-control\" placeholder=\"{{filterPlaceholder}}\" [ngModelOptions]=\"{standalone: true}\" autocomplete=\"off\" /> <li *ngFor=\"let o of internalItems | itemPipe:filter\" role=\"menuitem\"> <tree-select-item [item]=\"o\" [onTouchedCallBack]=\"onTouchedCallback\"></tree-select-item> </li> </ul> </div> ",
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, SelectService],
styles: [":host.ng-invalid:not(.ng-pristine) span.form-control, :host.ng-invalid:not(.ng-untouched) span.form-control { border-color: #a94442; } .input-group > .dropdown { position: static; } .disabled > span { background-color: #eceeef; cursor: not-allowed; } .disabled .btn { border-color: #ccc; } .enabled > span { cursor: context-menu; } ul { height: auto; list-style-type: none; margin-top: 0; max-height: 200px; overflow-x: hidden; width: 100%; } .selected-container-text { padding-left: 7px; } .selected-container-item { padding-left: 2px; } .selected-item-text { font-size: 14px; margin: 3px; } .selected-item-item { font-size: 14px; margin: 2px; outline: 0; } .more-items-icon { bottom: 23px; height: 10px; opacity: .5; position: absolute; right: 20px; z-index: 100; } .close { font-size: 18px; line-height: .75; margin-left: 5px; padding-top: 3px; position: absolute; z-index: 50; } .caret { height: 10px; margin-top: -2px; position: absolute; right: 10px; top: 50%; } .btn { display: table; padding-right: 20px; } "]
},] },
];
/**
* @nocollapse
*/
TreeSelectComponent.ctorParameters = function () { return [
{ type: SelectService, },
{ type: TreeSelectDefaultOptions, },
]; };
TreeSelectComponent.propDecorators = {
'disabled': [{ type: Input },],
'placeholder': [{ type: Input },],
'filterPlaceholder': [{ type: Input },],
'allowFilter': [{ type: Input },],
'items': [{ type: Input },],
'idField': [{ type: Input },],
'textField': [{ type: Input },],
'allowParentSelection': [{ type: Input },],
'restructureWhenChildSameName': [{ type: Input },],
'childrenField': [{ type: Input },],
'multiple': [{ type: Input },],
'filterCaseSensitive': [{ type: Input },],
'expandMode': [{ type: Input },],
'maxVisibleItemCount': [{ type: Input },],
};
return TreeSelectComponent;
}());
var ItemPipe = /** @class */ (function () {
function ItemPipe() {
}
/**
* @param {?} value
* @return {?}
*/
ItemPipe.prototype.transform = function (value) {
// ES6 array destructuring
return value.filter(function (item) { return item.matchFilter; });
};
ItemPipe.decorators = [
{ type: Pipe, args: [{ name: 'itemPipe' },] },
];
/**
* @nocollapse
*/
ItemPipe.ctorParameters = function () { return []; };
return ItemPipe;
}());
var OffClickDirective = /** @class */ (function () {
/**
* @param {?} platformId
*/
function OffClickDirective(platformId) {
this.platformId = platformId;
}
/**
* @return {?}
*/
OffClickDirective.prototype.ngOnInit = function () {
var _this = this;
if (isPlatformBrowser(this.platformId)) {
setTimeout(function () { document.addEventListener('click', _this.offClickHandler); }, 0);
}
};
/**
* @return {?}
*/
OffClickDirective.prototype.ngOnDestroy = function () {
if (isPlatformBrowser(this.platformId)) {
document.removeEventListener('click', this.offClickHandler);
}
};
OffClickDirective.decorators = [
{ type: Directive, args: [{
selector: '[off-click]'
},] },
];
/**
* @nocollapse
*/
OffClickDirective.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] },] },
]; };
OffClickDirective.propDecorators = {
'offClickHandler': [{ type: Input, args: ['off-click',] },],
};
return OffClickDirective;
}());
var TreeSelectItemComponent = /** @class */ (function () {
/**
* @param {?} svc
*/
function TreeSelectItemComponent(svc) {
this.svc = svc;
}
Object.defineProperty(TreeSelectItemComponent.prototype, "isOpen", {
/**
* @return {?}
*/
get: function () {
return this.item.isOpen;
},
enumerable: true,
configurable: true
});
/**
* @param {?} $event
* @return {?}
*/
TreeSelectItemComponent.prototype.toggleOpen = function ($event) {
$event.stopPropagation();
if (this.haveChildren) {
this.item.isOpen = !this.item.isOpen;
}
else {
this.select($event);
}
};
Object.defineProperty(TreeSelectItemComponent.prototype, "allowParentSelection", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.allowParentSelection;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectItemComponent.prototype, "restructureWhenChildSameName", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.restructureWhenChildSameName;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectItemComponent.prototype, "needCheckBox", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.isHierarchy() && this.svc.Configuration.allowMultiple;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeSelectItemComponent.prototype, "haveChildren", {
/**
* @return {?}
*/
get: function () {
if (this.restructureWhenChildSameName && this.item && this.item.children
&& this.item.children.length === 1 && this.item.text === this.item.children[0].text) {
this.item = this.item.children[0];
}
return this.item && this.item.children && this.item.children.length > 0;
},
enumerable: true,
configurable: true
});
/**
* @param {?} $event
* @return {?}
*/
TreeSelectItemComponent.prototype.select = function ($event) {
$event.stopPropagation();
if (this.svc.Configuration.allowMultiple ||
!this.haveChildren ||
this.svc.Configuration.allowParentSelection) {
this.svc.toggleItemSelection(this.item);
}
this.onTouchedCallBack();
};
Object.defineProperty(TreeSelectItemComponent.prototype, "filter", {
/**
* @return {?}
*/
get: function () {
return this.svc.Configuration.filter;
},
enumerable: true,
configurable: true
});
TreeSelectItemComponent.decorators = [
{ type: Component, args: [{
selector: 'tree-select-item',
template: "<div class='item' (click)=\"select($event)\"> <div class=\"item\" [class.active]=\"item.selected && !needCheckBox\"> <a href=\"javascript:void(0)\" (click)=\"toggleOpen($event)\"> <span> <i class=\"fa\" [class.fa-plus-square-o]=\"haveChildren && !isOpen\" [class.fa-minus-square-o]=\"haveChildren && isOpen\"></i> </span> <i class=\"fa\" *ngIf=\"needCheckBox\" [class.fa-check-square-o]=\"item.checked === true\" [class.fa-square-o]=\"item.checked === false\" [class.fa-square]=\"item.checked === null\" (click)=\"select($event)\"></i> <span *ngIf=\"allowParentSelection\" (click)=\"select($event)\"> {{item.text}}</span> <span *ngIf=\"!allowParentSelection\"> {{item.text}}</span> </a> </div> <ul *ngIf=\"haveChildren && isOpen\" class=\"ui-select-choices\" role=\"menu\"> <li *ngFor=\"let o of item.children | itemPipe:filter\" role=\"menuitem\"> <tree-select-item [item]=\"o\" [onTouchedCallBack]=\"onTouchedCallBack\"></tree-select-item> </li> </ul> </div> ",
styles: [".item { color: #333; } .item ul { list-style-type: none; } .item > a { clear: both; color: inherit; display: block; font-weight: 400; line-height: 1.42857143; padding: 3px 20px; padding-left: 10px; text-decoration: none; white-space: nowrap; } .item > a:hover { background-color: #357ebd; color: #fff; outline: 0; text-decoration: none; } .item.active { background-color: #428bca; color: #fff; outline: 0; text-decoration: none; } "]
},] },
];
/**
* @nocollapse
*/
TreeSelectItemComponent.ctorParameters = function () { return [
{ type: SelectService, },
]; };
TreeSelectItemComponent.propDecorators = {
'onTouchedCallBack': [{ type: Input },],
'item': [{ type: Input },],
};
return TreeSelectItemComponent;
}());
var NgxTreeSelectModule = /** @class */ (function () {
function NgxTreeSelectModule() {
}
/**
* @param {?} options
* @return {?}
*/
NgxTreeSelectModule.forRoot = function (options) {
return {
ngModule: NgxTreeSelectModule,
providers: [
{ provide: TreeSelectDefaultOptions, useValue: options }
]
};
};
NgxTreeSelectModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [
TreeSelectComponent,
TreeSelectItemComponent,
OffClickDirective,
ItemPipe
],
exports: [
TreeSelectComponent
]
},] },
];
/**
* @nocollapse
*/
NgxTreeSelectModule.ctorParameters = function () { return []; };
return NgxTreeSelectModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TreeSelectDefaultOptions, TreeSelectComponent, ItemPipe, NgxTreeSelectModule, ExpandMode, TreeSelectItemComponent as ɵc, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR as ɵa, OffClickDirective as ɵd, SelectService as ɵb };
//# sourceMappingURL=ngx-tree-select.es5.js.map