@progress/kendo-angular-dropdowns
Version:
Dropdowns Package for Angular 2
852 lines (851 loc) • 37.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:max-line-length */
var util_1 = require("./util");
var searchbar_component_1 = require("./searchbar.component");
var core_1 = require("@angular/core");
var Subscription_1 = require("rxjs/Subscription");
var forms_1 = require("@angular/forms");
var selection_service_1 = require("./selection.service");
var navigation_service_1 = require("./navigation.service");
var navigation_action_1 = require("./navigation-action");
var keys_1 = require("./common/keys");
var item_template_directive_1 = require("./templates/item-template.directive");
var header_template_directive_1 = require("./templates/header-template.directive");
var footer_template_directive_1 = require("./templates/footer-template.directive");
var tag_template_directive_1 = require("./templates/tag-template.directive");
var no_data_template_directive_1 = require("./templates/no-data-template.directive");
var error_messages_1 = require("./error-messages");
var preventable_event_1 = require("./common/preventable-event");
var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
var MULTISELECT_VALUE_ACCESSOR = {
multi: true,
provide: forms_1.NG_VALUE_ACCESSOR,
// tslint:disable-next-line:no-use-before-declare
useExisting: core_1.forwardRef(function () { return MultiSelectComponent; })
};
/**
* Represents the Kendo UI MultiSelect component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-multiselect [data]="listItems">
* </kendo-multiselect>
* `
* })
* class AppComponent {
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
* }
* ```
*/
var MultiSelectComponent = (function () {
function MultiSelectComponent(rtl, popupService, selectionService, navigationService, cdr, differs) {
this.popupService = popupService;
this.selectionService = selectionService;
this.navigationService = navigationService;
this.cdr = cdr;
this.differs = differs;
this.activeId = util_1.guid();
this.listBoxId = util_1.guid();
this.focusedTagIndex = undefined;
/**
* Controls whether to close the suggestion list of the MultiSelect after the selection of an item.
* @default true
*/
this.autoClose = true;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
this.tabIndex = 0;
/**
* Sets the disabled state of the component.
*/
this.disabled = false;
/**
* Enables the [filtering]({% slug filtering_multiselect_kendouiforangular %}) functionality of the MultiSelect.
*/
this.filterable = false;
/**
* If set to `true`, renders a button on hovering over the component. Clicking this button resets the value of the component to an empty array and triggers the `change` event.
*/
this.clearButton = true;
/**
* Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
*/
this.filterChange = new core_1.EventEmitter();
/**
* Fires each time the value is changed.
*
* For more details, refer to the example on [events]({% slug overview_multiselect_kendouiforangular %}#toc-events).
*/
this.valueChange = new core_1.EventEmitter();
/**
* Fires each time the popup is about to open.
* This event is preventable. If you cancel it, the popup will remain closed.
*/
this.open = new core_1.EventEmitter();
/**
* Fires each time the popup is about to close.
* This event is preventable. If you cancel it, the popup will remain open.
*/
this.close = new core_1.EventEmitter();
/**
* Fires each time the user focuses the MultiSelect.
*/
this.onFocus = new core_1.EventEmitter(); //tslint:disable-line:no-output-rename
/**
* Fires each time the MultiSelect gets blurred.
*/
this.onBlur = new core_1.EventEmitter(); //tslint:disable-line:no-output-rename
this.onChangeCallback = function (_) { };
this.onTouchedCallback = function (_) { };
this._data = [];
this._placeholder = '';
this._open = false;
this._value = [];
this.selectedDataItems = [];
this._popupSettings = { height: 200, animate: true };
this.observableSubscriptions = new Subscription_1.Subscription();
this.changeSubscription = new Subscription_1.Subscription();
this.isFocused = false;
this.wrapperBlurred = new core_1.EventEmitter();
this.popupMouseDownHandler = this.onMouseDown.bind(this);
this.direction = rtl ? 'rtl' : 'ltr';
this.subscribeEvents();
}
Object.defineProperty(MultiSelectComponent.prototype, "popupOpen", {
get: function () {
return this._open;
},
set: function (open) {
if (this.disabled || this.popupOpen === open) {
return;
}
var eventArgs = new preventable_event_1.PreventableEvent();
if (open) {
this.open.emit(eventArgs);
}
else {
this.close.emit(eventArgs);
}
if (eventArgs.isDefaultPrevented()) {
return;
}
this._toggle(open);
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
MultiSelectComponent.prototype.focusComponent = function () {
if (!this.isFocused) {
this.isFocused = true;
this.onFocus.emit();
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.blurComponent = function () {
if (this.isFocused) {
this.closePopup();
this.isFocused = false;
this.onBlur.emit();
this.onTouchedCallback();
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.wrapperMousedown = function (event) {
event.preventDefault();
this.searchbar.focus();
this.popupOpen = !this.popupOpen;
};
/**
* @hidden
*/
MultiSelectComponent.prototype.onResize = function () {
if (this._open) {
var popupWrapper = this.popupRef.popupElement;
var _a = this.width, min = _a.min, max = _a.max;
popupWrapper.style.minWidth = min;
popupWrapper.style.width = max;
}
};
Object.defineProperty(MultiSelectComponent.prototype, "appendTo", {
get: function () {
var appendTo = this.popupSettings.appendTo;
if (!appendTo || appendTo === 'root') {
return undefined;
}
return appendTo === 'component' ? this.container : appendTo;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "data", {
get: function () {
return this._data;
},
/**
* Sets the data of the MultiSelect.
*
* > The data has to be provided in an array-like list of items.
*/
set: function (data) {
this._data = data || [];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "value", {
get: function () {
return this._value;
},
/**
* Sets the value of the MultiSelect. It can either be of the primitive (string, numbers) or of the complex (objects) type. To define the type, use the `valuePrimitive` option.
*
* > All selected values which are not present in the source are ignored.
*/
set: function (values) {
this._value = values ? values : [];
if (!this.differ && this.value) {
this.differ = this.differs.find(this.value).create();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "placeholder", {
get: function () {
return this.selectedDataItems.length ? '' : this._placeholder;
},
/**
* The hint displayed when the component is empty. When the values are selected, it disappears.
*/
set: function (text) {
this._placeholder = text || '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "popupSettings", {
get: function () {
return this._popupSettings;
},
/**
* Configures the popup of the MultiSelect.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
* - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
set: function (settings) {
this._popupSettings = Object.assign({ height: 200, animate: true }, settings);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "widgetClasses", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "dir", {
get: function () {
return this.direction;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "focusedClass", {
get: function () {
return this.isFocused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "disabledClass", {
get: function () {
return this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "listContainerClasses", {
get: function () {
var containerClasses = ['k-list-container', 'k-reset'];
if (this.popupSettings.popupClass) {
containerClasses.push(this.popupSettings.popupClass);
}
return containerClasses;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MultiSelectComponent.prototype, "width", {
get: function () {
var wrapperOffsetWidth = 0;
if (util_1.isDocumentAvailable()) {
wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
}
var width = this.popupSettings.width || wrapperOffsetWidth;
var minWidth = isNaN(wrapperOffsetWidth) ? wrapperOffsetWidth : wrapperOffsetWidth + "px";
var maxWidth = isNaN(width) ? width : width + "px";
return { min: minWidth, max: maxWidth };
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
MultiSelectComponent.prototype.popupOpened = function () {
this.popupWidth = this.width.max;
this.popupMinWidth = this.width.min;
};
/**
* @hidden
*/
MultiSelectComponent.prototype.onMouseDown = function (event) {
var tagName = event.target.tagName.toLowerCase();
if (tagName !== "input") {
event.preventDefault();
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.verifySettings = function () {
var valueOrText = !util_1.isPresent(this.valueField) !== !util_1.isPresent(this.textField);
if (!core_1.isDevMode() || this.value.length === 0) {
return;
}
if (!util_1.isArray(this.value)) {
throw new Error(error_messages_1.MultiselectMessages.array);
}
if (this.valuePrimitive === true && util_1.isObjectArray(this.value)) {
throw new Error(error_messages_1.MultiselectMessages.primitive);
}
if (this.valuePrimitive === false && !util_1.isObjectArray(this.value)) {
throw new Error(error_messages_1.MultiselectMessages.object);
}
if (valueOrText) {
throw new Error("Expected textField and valueField options to be set. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/#toc-bind-to-arrays-of-complex-data");
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.change = function (event) {
var _this = this;
if (util_1.isPresent(event.added)) {
var dataItem = this.data[event.added];
var newItem = (this.valuePrimitive && util_1.isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] :
dataItem;
this.value = this.value.concat([newItem]);
this.cdr.markForCheck();
}
if (util_1.isPresent(event.removed)) {
var dataItem_1 = this.data[event.removed];
if (this.valuePrimitive) {
var index = this.value.indexOf(util_1.isPresent(dataItem_1[this.valueField]) ? dataItem_1[this.valueField] : dataItem_1);
this.value.splice(index, 1);
}
else {
this.value = this.value.filter(function (item) { return item[_this.valueField] !== dataItem_1[_this.valueField]; });
}
this.cdr.markForCheck();
}
this.emitValueChange();
};
/**
* @hidden
*/
MultiSelectComponent.prototype.setState = function (value) {
var objectArray = util_1.isObjectArray(value);
var selection = util_1.selectedIndices(this.value, this.data, this.valueField);
this.selectionService.resetSelection(selection);
if (this.popupOpen && this.selectionService.focused === undefined && this.data.length) {
this.selectionService.focused = 0;
}
if (this.selectedDataItems.length <= 0) {
if (this.valuePrimitive && !this.valueField) {
this.selectedDataItems = value.slice();
}
if (objectArray || this.valuePrimitive && this.valueField) {
this.selectedDataItems = util_1.resolveAllValues(value, this.data, this.valueField);
}
}
this.tags = this.selectedDataItems;
this.cdr.markForCheck();
};
/**
* @hidden
*/
MultiSelectComponent.prototype.handleBlur = function () {
this.wrapperBlurred.emit();
// this.closePopup();
};
/**
* @hidden
*/
MultiSelectComponent.prototype.handleFilter = function (text) {
this.text = text;
this.searchbar.resizeInput(this.text.length);
if (this.filterable) {
this.filterChange.emit(text);
}
else {
this.search(text);
}
this.openPopup();
};
/**
* @hidden
*/
MultiSelectComponent.prototype.handleNavigate = function (event) {
var navigateInput = this.text && event.keyCode !== keys_1.Keys.down && event.keyCode !== keys_1.Keys.up;
var selectValue = this.text && event.keyCode === keys_1.Keys.enter || event.keyCode === keys_1.Keys.esc;
var deleteTag = !this.text && event.keyCode === keys_1.Keys.backspace && this.tags.length > 0;
if (deleteTag) {
this.handleBackspace();
return;
}
if (this.disabled || navigateInput && !selectValue) {
return;
}
var eventData = event;
var focused = isNaN(this.selectionService.focused) ? -1 : this.selectionService.focused;
var action = this.navigationService.process({
current: focused,
max: this.data.length - 1,
min: 0,
open: this.popupOpen,
originalEvent: eventData
});
if (action !== navigation_action_1.NavigationAction.Undefined &&
((action === navigation_action_1.NavigationAction.Enter && this.popupOpen) || action !== navigation_action_1.NavigationAction.Enter)) {
event.preventDefault();
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.removeTag = function (dataItem) {
var _this = this;
var index = util_1.selectedIndices([dataItem], this.data, this.valueField)[0];
if (util_1.isNumber(index)) {
this.selectionService.unselect(index);
this.popupOpen = false;
}
else {
var filter = function (item) { return util_1.getter(item, _this.valueField) !== util_1.getter(dataItem, _this.valueField); };
this.value = this.value.filter(filter);
this.tags = this.selectedDataItems = this.selectedDataItems.filter(filter);
this.cdr.markForCheck();
this.emitValueChange();
}
};
/**
* @hidden
*/
MultiSelectComponent.prototype.clearAll = function (event) {
event.stopImmediatePropagation();
if (this.filterable) {
this.filterChange.emit("");
}
this.text = "";
this.value = [];
this.selectedDataItems = [];
this.cdr.markForCheck();
this.emitValueChange();
this.setState([]);
};
MultiSelectComponent.prototype.ngAfterContentChecked = function () {
this.verifySettings();
};
MultiSelectComponent.prototype.ngDoCheck = function () {
if (this.differ) {
var valueChanges = this.differ.diff(this.value);
if (valueChanges) {
this.tags = this.selectedDataItems = this.getSelectedDataItems(valueChanges);
}
}
};
MultiSelectComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (this.valuePrimitive === undefined) {
this.valuePrimitive = !this.valueField;
}
if (changes.value && this.selectedDataItems.length > 0) {
//peristed selected data items when list is filtered
this.selectedDataItems = this.selectedDataItems.concat(this.data).filter(function (curr) {
return changes.value.currentValue.find(function (item) { return item[_this.valueField] === curr; });
}).filter(function (dataItem) { return !!dataItem; }); //filter undefined values
}
var STATE_PROPS = /(data|value|textField|valueField|valuePrimitive)/g;
if (STATE_PROPS.test(Object.keys(changes).join())) {
this.setState(this.value);
}
};
MultiSelectComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.searchbar.resizeInput(Math.max(1, this.placeholder.length));
this.observableSubscriptions.add(this.searchbar.onFocus.subscribe(function (event) {
if (!_this.isFocused) {
_this.isFocused = true;
_this.onFocus.emit(event);
}
}));
this.observableSubscriptions.add(this.searchbar.onBlur.subscribe(function (event) {
if (_this.isFocused) {
_this.isFocused = false;
_this.onBlur.emit(event);
_this.onTouchedCallback();
}
}));
};
MultiSelectComponent.prototype.ngOnDestroy = function () {
this._toggle(false);
this.unsubscribeEvents();
};
/**
* Focuses the MultiSelect.
*/
MultiSelectComponent.prototype.focus = function () {
if (!this.disabled) {
this.searchbar.focus();
}
};
/**
* Blurs the MultiSelect.
*/
MultiSelectComponent.prototype.blur = function () {
if (!this.disabled) {
this.searchbar.blur();
}
};
/**
* Toggles the visibility of the popup. If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
*
* @param open - The state of the popup.
*/
MultiSelectComponent.prototype.toggle = function (open) {
var _this = this;
Promise.resolve(null).then(function () {
_this._toggle((open === undefined) ? !_this._open : open);
_this.cdr.markForCheck();
});
};
Object.defineProperty(MultiSelectComponent.prototype, "isOpen", {
/**
* Returns the current open state of the popup.
*/
get: function () {
return this.popupOpen;
},
enumerable: true,
configurable: true
});
/**
* Resets the value of the MultiSelect.
*/
MultiSelectComponent.prototype.reset = function () {
this.value = [];
this.selectedDataItems = [];
this.setState([]);
this.cdr.markForCheck();
};
// NG MODEL BINDINGS
/**
* @hidden
*/
MultiSelectComponent.prototype.writeValue = function (value) {
this.value = value || [];
this.selectedDataItems = [];
this.setState(this.value);
this.verifySettings();
};
/**
* @hidden
*/
MultiSelectComponent.prototype.registerOnChange = function (fn) {
this.onChangeCallback = fn;
};
/**
* @hidden
*/
MultiSelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouchedCallback = fn;
};
/**
* @hidden
*/
MultiSelectComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
MultiSelectComponent.prototype.subscribeEvents = function () {
var _this = this;
if (!util_1.isDocumentAvailable()) {
return;
}
this.observableSubscriptions = this.changeSubscription = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
var isOpen = function () { return _this.popupOpen; };
var isClosed = function () { return !_this.popupOpen; };
var isTagFocused = function () { return !_this.popupOpen && _this.focusedTagIndex !== undefined; };
[
this.navigationService.esc.subscribe(this.closePopup.bind(this)),
this.navigationService.enter.filter(isOpen).subscribe(this.handleEnter.bind(this)),
this.navigationService.open.subscribe(this.openPopup.bind(this)),
this.navigationService.close.subscribe(this.handleClose.bind(this)),
this.navigationService.up.filter(isOpen).subscribe(function (event) { return _this.handleUp(event.index); }),
this.navigationService.home.filter(isClosed).subscribe(this.handleHome.bind(this)),
this.navigationService.end.filter(isClosed).subscribe(this.handleEnd.bind(this)),
this.navigationService.backspace.filter(isTagFocused).subscribe(this.handleBackspace.bind(this)),
this.navigationService.delete.filter(isTagFocused).subscribe(this.handleDelete.bind(this)),
this.navigationService.left.subscribe(this.handleLeftKey.bind(this)),
this.navigationService.right.subscribe(this.handleRightKey.bind(this)),
this.navigationService.down.subscribe(function (event) { return _this.handleDownKey(event.index); })
].forEach(function (s) { return _this.observableSubscriptions.add(s); });
};
MultiSelectComponent.prototype.unsubscribeEvents = function () {
if (!util_1.isDocumentAvailable()) {
return;
}
this.observableSubscriptions.unsubscribe();
};
MultiSelectComponent.prototype.handleItemChange = function (event) {
if (util_1.isPresent(event.added)) {
this.handleFilter('');
}
this.change(event);
if (this.autoClose) {
this.popupOpen = false;
}
};
MultiSelectComponent.prototype.handleEnter = function (event) {
var focusedIndex = this.selectionService.focused;
if (this.popupOpen) {
event.originalEvent.preventDefault();
}
if (focusedIndex === -1) {
return;
}
if (this.selectionService.isSelected(focusedIndex)) {
this.selectionService.unselect(focusedIndex);
}
else {
this.selectionService.add(focusedIndex);
}
this.handleFilter('');
if (this.autoClose) {
this.popupOpen = false;
}
};
MultiSelectComponent.prototype.handleClose = function () {
this.closePopup();
this.searchbar.focus();
};
MultiSelectComponent.prototype.handleEnd = function () {
this.focusedTagIndex = this.tags.length - 1;
};
MultiSelectComponent.prototype.handleHome = function () {
this.focusedTagIndex = 0;
};
MultiSelectComponent.prototype.handleUp = function (index) {
this.selectionService.focused = index;
};
MultiSelectComponent.prototype.handleBackspace = function () {
if (this.focusedTagIndex !== undefined) {
this.handleDelete();
return;
}
this.focusedTagIndex = this.tags.length - 1;
var dataItem = this.tags[this.focusedTagIndex];
var tagIndex = util_1.selectedIndices([dataItem], this.data, this.valueField)[0];
this.selectionService.unselect(tagIndex);
this.focusedTagIndex = undefined;
this.searchbar.focus();
};
MultiSelectComponent.prototype.handleDelete = function () {
var dataItem = this.tags[this.focusedTagIndex];
var tagIndex = util_1.selectedIndices([dataItem], this.data, this.valueField)[0];
this.selectionService.unselect(tagIndex);
if (this.focusedTagIndex === this.tags.length) {
this.focusedTagIndex = undefined;
}
};
MultiSelectComponent.prototype.handleLeftKey = function () {
if (this.direction === 'rtl' && this.focusedTagIndex === 0) {
this.focusedTagIndex = undefined;
return;
}
if (this.direction === 'rtl' && this.focusedTagIndex === undefined) {
return;
}
if (this.focusedTagIndex === undefined || this.focusedTagIndex < 0) {
this.focusedTagIndex = this.tags.length - 1;
}
else if (this.focusedTagIndex !== 0) {
this.focusedTagIndex--;
}
};
MultiSelectComponent.prototype.handleDownKey = function (index) {
if (this.popupOpen) {
this.selectionService.focused = index || 0;
}
else {
this.openPopup();
}
};
MultiSelectComponent.prototype.handleRightKey = function () {
var last = this.tags.length - 1;
if (this.direction === 'rtl' && this.focusedTagIndex === undefined) {
this.focusedTagIndex = 0;
return;
}
if (this.direction === 'rtl' && this.focusedTagIndex === last) {
return;
}
if (this.focusedTagIndex === last) {
this.focusedTagIndex = undefined;
}
else if (this.focusedTagIndex < last) {
this.focusedTagIndex++;
}
};
MultiSelectComponent.prototype.search = function (text) {
var _this = this;
var index = this.data.findIndex(function (item) {
var itemText = util_1.getter(item, _this.textField);
itemText = itemText === undefined ? "" : itemText.toString().toLowerCase();
return itemText.startsWith(text.toLowerCase());
});
this.selectionService.focused = index;
};
MultiSelectComponent.prototype.closePopup = function () {
this.popupOpen = false;
this.focusedTagIndex = undefined;
};
MultiSelectComponent.prototype.openPopup = function () {
this.popupOpen = true;
this.focusedTagIndex = undefined;
};
MultiSelectComponent.prototype.emitValueChange = function () {
this.onChangeCallback(this.value);
this.valueChange.emit(this.value);
};
MultiSelectComponent.prototype._toggle = function (open) {
var _this = this;
this._open = open;
if (this.popupRef) {
this.popupRef.popupElement
.removeEventListener('mousedown', this.popupMouseDownHandler);
this.popupRef.close();
this.popupRef = null;
}
if (this._open) {
this.popupRef = this.popupService.open({
anchor: this.wrapper,
animate: this.popupSettings.animate,
appendTo: this.appendTo,
content: this.popupTemplate,
popupClass: this.listContainerClasses,
positionMode: 'absolute'
});
var popupWrapper = this.popupRef.popupElement;
var _a = this.width, min = _a.min, max = _a.max;
popupWrapper.addEventListener('mousedown', this.popupMouseDownHandler);
popupWrapper.style.minWidth = min;
popupWrapper.style.width = max;
popupWrapper.setAttribute("dir", this.direction);
this.popupRef.popupOpen.subscribe(this.popupOpened.bind(this));
this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.popupOpen = false; });
}
};
MultiSelectComponent.prototype.getSelectedDataItems = function (valueChanges) {
var _this = this;
var selectedDataItems = [];
valueChanges.forEachItem(function (value) {
var currentValue = value.currentValue;
var isBoundToComplexData = util_1.isObjectArray(_this.data);
var index = _this.data.findIndex(function (item) {
var value = _this.valuePrimitive ? currentValue : util_1.getter(currentValue, _this.valueField);
return util_1.getter(item, _this.valueField) === value;
});
if (index !== -1) {
_this.selectionService.select(index);
selectedDataItems.push(_this.data[index]);
}
else if (util_1.isPresent(value) && !(isBoundToComplexData && _this.valuePrimitive)) {
selectedDataItems.push(currentValue);
}
});
return selectedDataItems;
};
return MultiSelectComponent;
}());
MultiSelectComponent.decorators = [
{ type: core_1.Component, args: [{
exportAs: 'kendoMultiSelect',
providers: [MULTISELECT_VALUE_ACCESSOR, selection_service_1.SelectionService, navigation_service_1.NavigationService],
selector: 'kendo-multiselect',
template: "\n <div class=\"k-multiselect-wrap k-floatwrap\"\n #wrapper\n (mousedown)=\"wrapperMousedown($event)\"\n >\n <kendo-taglist\n [tags]=\"tags\"\n [textField]=\"textField\"\n [focused]=\"focusedTagIndex\"\n [disabled]=\"disabled\"\n [template]=\"tagTemplate\"\n [activeId]=\"activeId\"\n (removeTag)=\"removeTag($event)\"\n >\n </kendo-taglist>\n <kendo-searchbar\n #searchbar\n [role]=\"'listbox'\"\n [id]=\"listBoxId\"\n [activeDescendant]=\"activeId\"\n [userInput]=\"text\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"popupOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"handleFilter($event)\"\n (onBlur)=\"blurComponent()\"\n (onFocus)=\"focusComponent()\"\n >\n </kendo-searchbar>\n <span *ngIf=\"!loading && clearButton && (tags?.length || text?.length)\" class=\"k-icon k-clear-value k-i-close\" title=\"clear\" role=\"button\" tabindex=\"-1\" (click)=\"clearAll($event)\"></span>\n <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n </div>\n <ng-template #popupTemplate>\n <!--header template-->\n <ng-template *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate.templateRef\n }\">\n </ng-template>\n <!--list-->\n <kendo-list\n [id]=\"listBoxId\"\n [data]=\"data\"\n [textField]=\"textField\"\n [valueField]=\"valueField\"\n [height]=\"popupSettings?.height\"\n [template]=\"template\"\n [show]=\"popupOpen\"\n [multipleSelection]=\"true\"\n >\n </kendo-list>\n <!--no data template-->\n <div class=\"k-nodata\" *ngIf=\"data.length === 0\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>NO DATA FOUND.</div>\n </ng-template>\n </div>\n <!--footer template-->\n <ng-template *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\">\n </ng-template>\n </ng-template>\n <ng-template [ngIf]=\"popupOpen\">\n <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n </ng-template>\n <ng-container #container></ng-container>\n "
},] },
];
/** @nocollapse */
MultiSelectComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: [kendo_angular_l10n_1.RTL,] },] },
{ type: kendo_angular_popup_1.PopupService, },
{ type: selection_service_1.SelectionService, },
{ type: navigation_service_1.NavigationService, },
{ type: core_1.ChangeDetectorRef, },
{ type: core_1.KeyValueDiffers, },
]; };
MultiSelectComponent.propDecorators = {
'autoClose': [{ type: core_1.Input },],
'loading': [{ type: core_1.Input },],
'data': [{ type: core_1.Input },],
'value': [{ type: core_1.Input },],
'valueField': [{ type: core_1.Input },],
'textField': [{ type: core_1.Input },],
'tabIndex': [{ type: core_1.Input },],
'placeholder': [{ type: core_1.Input },],
'disabled': [{ type: core_1.Input },],
'filterable': [{ type: core_1.Input },],
'popupSettings': [{ type: core_1.Input },],
'valuePrimitive': [{ type: core_1.Input },],
'clearButton': [{ type: core_1.Input },],
'filterChange': [{ type: core_1.Output },],
'valueChange': [{ type: core_1.Output },],
'open': [{ type: core_1.Output },],
'close': [{ type: core_1.Output },],
'onFocus': [{ type: core_1.Output, args: ['focus',] },],
'onBlur': [{ type: core_1.Output, args: ['blur',] },],
'container': [{ type: core_1.ViewChild, args: ['container', { read: core_1.ViewContainerRef },] },],
'searchbar': [{ type: core_1.ViewChild, args: [searchbar_component_1.SearchBarComponent,] },],
'popupTemplate': [{ type: core_1.ViewChild, args: ['popupTemplate',] },],
'wrapper': [{ type: core_1.ViewChild, args: ['wrapper',] },],
'template': [{ type: core_1.ContentChild, args: [item_template_directive_1.ItemTemplateDirective,] },],
'headerTemplate': [{ type: core_1.ContentChild, args: [header_template_directive_1.HeaderTemplateDirective,] },],
'footerTemplate': [{ type: core_1.ContentChild, args: [footer_template_directive_1.FooterTemplateDirective,] },],
'tagTemplate': [{ type: core_1.ContentChild, args: [tag_template_directive_1.TagTemplateDirective,] },],
'noDataTemplate': [{ type: core_1.ContentChild, args: [no_data_template_directive_1.NoDataTemplateDirective,] },],
'widgetClasses': [{ type: core_1.HostBinding, args: ['class.k-widget',] }, { type: core_1.HostBinding, args: ['class.k-multiselect',] }, { type: core_1.HostBinding, args: ['class.k-header',] },],
'dir': [{ type: core_1.HostBinding, args: ['attr.dir',] },],
'focusedClass': [{ type: core_1.HostBinding, args: ['class.k-state-focused',] },],
'disabledClass': [{ type: core_1.HostBinding, args: ['class.k-state-disabled',] },],
};
exports.MultiSelectComponent = MultiSelectComponent;