@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
995 lines (994 loc) • 323 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
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);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (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;
};
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
import { FieldSettings } from '../drop-down-base/drop-down-base';
import { isCollide, Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { attributes, setValue, getValue } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
import { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';
import { Animation, Browser, prepend, Complex } from '@syncfusion/ej2-base';
import { Search } from '../common/incremental-search';
import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';
import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
import { DataManager, Query, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';
import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
var FOCUS = 'e-input-focus';
var DISABLED = 'e-disabled';
var OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';
var ELEMENT_WRAPPER = 'e-multi-select-wrapper';
var ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';
var HIDE_LIST = 'e-hide-listitem';
var DELIMITER_VIEW = 'e-delim-view';
var CHIP_WRAPPER = 'e-chips-collection';
var CHIP = 'e-chips';
var CHIP_CONTENT = 'e-chipcontent';
var CHIP_CLOSE = 'e-chips-close';
var CHIP_SELECTED = 'e-chip-selected';
var SEARCHBOX_WRAPPER = 'e-searcher';
var DELIMITER_VIEW_WRAPPER = 'e-delimiter';
var ZERO_SIZE = 'e-zero-size';
var REMAIN_WRAPPER = 'e-remain';
var CLOSEICON_CLASS = 'e-chips-close e-close-hooker';
var DELIMITER_WRAPPER = 'e-delim-values';
var POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';
var INPUT_ELEMENT = 'e-dropdownbase';
var RTL_CLASS = 'e-rtl';
var CLOSE_ICON_HIDE = 'e-close-icon-hide';
var MOBILE_CHIP = 'e-mob-chip';
var FOOTER = 'e-ddl-footer';
var HEADER = 'e-ddl-header';
var DISABLE_ICON = 'e-ddl-disable-icon';
var SPINNER_CLASS = 'e-ms-spinner-icon';
var HIDDEN_ELEMENT = 'e-multi-hidden';
var destroy = 'destroy';
var dropdownIcon = 'e-input-group-icon e-ddl-icon';
var iconAnimation = 'e-icon-anim';
var TOTAL_COUNT_WRAPPER = 'e-delim-total';
var BOX_ELEMENT = 'e-multiselect-box';
var FILTERPARENT = 'e-filter-parent';
var CUSTOM_WIDTH = 'e-search-custom-width';
var FILTERINPUT = 'e-input-filter';
var RESIZE_ICON = 'e-resizer-right e-icons';
/**
* The Multiselect allows the user to pick a more than one value from list of predefined values.
* ```html
* <select id="list">
* <option value='1'>Badminton</option>
* <option value='2'>Basketball</option>
* <option value='3'>Cricket</option>
* <option value='4'>Football</option>
* <option value='5'>Tennis</option>
* </select>
* ```
* ```typescript
* <script>
* var multiselectObj = new Multiselect();
* multiselectObj.appendTo("#list");
* </script>
* ```
*/
var MultiSelect = /** @class */ (function (_super) {
__extends(MultiSelect, _super);
/**
* Constructor for creating the DropDownList widget.
*
* @param {MultiSelectModel} option - Specifies the MultiSelect model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
function MultiSelect(option, element) {
var _this = _super.call(this, option, element) || this;
_this.clearIconWidth = 0;
_this.previousFilterText = '';
_this.storedSelectAllHeight = 0;
_this.isUpdateHeaderHeight = false;
_this.isUpdateFooterHeight = false;
_this.isBlurDispatching = false;
_this.isFilterPrevented = false;
_this.isFilteringAction = false;
_this.isValidKey = false;
_this.selectAllEventData = [];
_this.selectAllEventEle = [];
_this.preventSetCurrentData = false;
_this.isSelectAllLoop = false;
_this.scrollFocusStatus = false;
_this.keyDownStatus = false;
return _this;
}
MultiSelect.prototype.enableRTL = function (state) {
if (state) {
this.overAllWrapper.classList.add(RTL_CLASS);
}
else {
this.overAllWrapper.classList.remove(RTL_CLASS);
}
if (this.popupObj) {
this.popupObj.enableRtl = state;
this.popupObj.dataBind();
}
};
MultiSelect.prototype.requiredModules = function () {
var modules = [];
if (this.enableVirtualization) {
modules.push({ args: [this], member: 'VirtualScroll' });
}
if (this.mode === 'CheckBox') {
this.isGroupChecking = this.enableGroupCheckBox;
if (this.enableGroupCheckBox) {
var prevOnChange = this.isProtectedOnChange;
this.isProtectedOnChange = true;
this.enableSelectionOrder = false;
this.isProtectedOnChange = prevOnChange;
}
this.allowCustomValue = false;
this.hideSelectedItem = false;
this.closePopupOnSelect = false;
modules.push({
member: 'CheckBoxSelection',
args: [this]
});
}
return modules;
};
MultiSelect.prototype.updateHTMLAttribute = function () {
if (Object.keys(this.htmlAttributes).length) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var htmlAttr = _a[_i];
switch (htmlAttr) {
case 'class': {
var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
if (updatedClassValue !== '') {
addClass([this.overAllWrapper], updatedClassValue.split(' '));
addClass([this.popupWrapper], updatedClassValue.split(' '));
}
break;
}
case 'disabled':
this.enable(false);
break;
case 'placeholder':
if (!this.placeholder) {
this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
this.setProperties({ placeholder: this.inputElement.placeholder }, true);
this.refreshPlaceHolder();
}
break;
default: {
var defaultAttr = ['id'];
var validateAttr = ['name', 'required', 'aria-required', 'form'];
var containerAttr = ['title', 'role', 'style', 'class'];
if (defaultAttr.indexOf(htmlAttr) > -1) {
this.element.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
else if (containerAttr.indexOf(htmlAttr) > -1) {
this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {
this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
break;
}
}
}
}
};
MultiSelect.prototype.updateReadonly = function (state) {
if (!isNullOrUndefined(this.inputElement)) {
if (state || this.mode === 'CheckBox') {
this.inputElement.setAttribute('readonly', 'true');
}
else {
this.inputElement.removeAttribute('readonly');
}
}
};
MultiSelect.prototype.updateClearButton = function (state) {
if (state) {
if (this.overAllClear.parentNode) {
this.overAllClear.style.display = '';
}
else {
this.componentWrapper.appendChild(this.overAllClear);
}
this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);
}
else {
this.overAllClear.style.display = 'none';
this.componentWrapper.classList.add(CLOSE_ICON_HIDE);
}
};
MultiSelect.prototype.updateCssClass = function () {
if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
var updatedCssClassValues = this.cssClass;
updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
if (updatedCssClassValues !== '') {
addClass([this.overAllWrapper], updatedCssClassValues.split(' '));
addClass([this.popupWrapper], updatedCssClassValues.split(' '));
}
}
};
MultiSelect.prototype.updateOldPropCssClass = function (oldClass) {
if (!isNullOrUndefined(oldClass) && oldClass !== '') {
oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
if (oldClass !== '') {
removeClass([this.overAllWrapper], oldClass.split(' '));
removeClass([this.popupWrapper], oldClass.split(' '));
}
}
};
MultiSelect.prototype.onPopupShown = function (e) {
var _this = this;
if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
var proxy_1 = this;
window.onpopstate = function () {
proxy_1.hidePopup();
proxy_1.inputElement.focus();
};
history.pushState({}, '');
}
var animModel = { name: 'FadeIn', duration: 100 };
var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
this.trigger('open', eventArgs, function (eventArgs) {
if (!eventArgs.cancel) {
_this.focusAtFirstListItem(true);
if (_this.popupObj) {
document.body.appendChild(_this.popupObj.element);
}
if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {
_this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));
}
if (_this.mode === 'CheckBox' || _this.showDropDownIcon) {
addClass([_this.overAllWrapper], [iconAnimation]);
}
_this.refreshPopup();
_this.renderReactTemplates();
if (_this.popupObj) {
_this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
}
if (_this.isReact) {
setTimeout(function () {
if (_this.popupHeight && _this.list && _this.popupHeight !== 'auto') {
var popupHeightValue = typeof _this.popupHeight === 'string' ? parseInt(_this.popupHeight, 10) : _this.popupHeight;
if (!_this.isUpdateHeaderHeight && _this.headerTemplate && _this.header) {
var listHeight = _this.list.style.maxHeight === '' ? popupHeightValue : parseInt(_this.list.style.maxHeight, 10);
_this.list.style.maxHeight = (listHeight - _this.header.offsetHeight).toString() + 'px';
_this.isUpdateHeaderHeight = true;
}
if (!_this.isUpdateFooterHeight && _this.footerTemplate && _this.footer) {
var listHeight = _this.list.style.maxHeight === '' ? popupHeightValue : parseInt(_this.list.style.maxHeight, 10);
_this.list.style.maxHeight = (listHeight - _this.footer.offsetHeight).toString() + 'px';
_this.isUpdateFooterHeight = true;
}
}
}, 15);
}
attributes(_this.inputElement, {
'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id
});
_this.updateAriaActiveDescendant();
if (_this.isFirstClick) {
if (!_this.enableVirtualization) {
_this.loadTemplate();
}
}
if (_this.mode === 'CheckBox' && _this.showSelectAll) {
EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
}
}
});
};
MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {
var query = this.getForQuery(this.value, true).clone();
this.isVirtualReorder = true;
if (this.enableVirtualization && this.dataSource instanceof DataManager) {
this.resetList(this.selectedListData, this.fields, query);
}
else {
this.resetList(this.dataSource, this.fields, query);
}
this.isVirtualReorder = false;
this.UpdateSkeleton();
this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
this.virtualItemCount = this.itemCount;
if (this.mode !== 'CheckBox') {
this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
}
if (!this.list.querySelector('.e-virtual-ddl')) {
var virualElement = this.createElement('div', {
id: this.element.id + '_popup',
className: 'e-virtual-ddl'
});
virualElement.style.cssText = this.GetVirtualTrackHeight();
this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
}
if (this.list.querySelector('.e-virtual-ddl-content')) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
}
if (isCheckBoxUpdate) {
this.loadTemplate();
}
};
MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {
for (var i = 0; i < listItems.length; i++) {
this.findGroupStart(listItems[i]);
this.findGroupStart(mainListItems[i]);
}
this.deselectHeader();
};
MultiSelect.prototype.loadTemplate = function () {
this.refreshListItems(null);
if (this.enableVirtualization && this.list && this.mode === 'CheckBox') {
var reOrderList = this.list.querySelectorAll('.e-reorder')[0];
if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
}
}
if (this.mode === 'CheckBox') {
this.removeFocus();
}
this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });
this.isPreventScrollAction = true;
};
MultiSelect.prototype.setScrollPosition = function () {
if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
(!isNullOrUndefined(this.value) && (this.value.length > 0))) {
var value = this.allowObjectBinding
? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])
: this.value[this.value.length - 1];
var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
if (!isNullOrUndefined(valueEle)) {
this.scrollBottom(valueEle, undefined, false, null, true);
}
}
if (this.enableVirtualization) {
var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
this.isKeyBoardAction = false;
this.scrollBottom(focusedItem, undefined, false, null, true);
}
};
MultiSelect.prototype.focusAtFirstListItem = function (isOpen) {
if (this.ulElement && this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li)) {
var element = void 0;
if (this.mode === 'CheckBox') {
this.removeFocus();
return;
}
else {
if (this.enableVirtualization) {
if (this.fields.disabled) {
element = this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED + ')');
if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
element = elements && elements.length > 0 ? elements[2] : element;
}
}
else {
element = this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
if (isOpen && this.viewPortInfo && this.viewPortInfo.startIndex !== 0) {
var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
element = elements && elements.length > 0 ? elements[2] : element;
}
}
}
else {
if (this.fields.disabled) {
element = this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li + ':not(.'
+ HIDE_LIST + ')' + ':not(.' + DISABLED + ')');
}
else {
element = this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li + ':not(.'
+ HIDE_LIST + ')');
}
}
}
if (element !== null) {
this.removeFocus();
this.addListFocus(element);
}
}
};
MultiSelect.prototype.focusAtLastListItem = function (data) {
var activeElement;
if (data) {
activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);
}
else {
if (this.value && this.value.length) {
var value = this.allowObjectBinding
? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])
: this.value[this.value.length - 1];
Search(value, this.liCollections, 'StartsWith', this.ignoreCase);
}
else {
activeElement = null;
}
}
if (activeElement && activeElement.item !== null) {
this.addListFocus(activeElement.item);
if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() &&
this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {
this.scrollBottom(activeElement.item, activeElement.index);
}
}
};
MultiSelect.prototype.getAriaAttributes = function () {
var ariaAttributes = {
'aria-disabled': 'false',
'role': 'combobox',
'aria-expanded': 'false'
};
return ariaAttributes;
};
MultiSelect.prototype.updateListARIA = function () {
if (!isNullOrUndefined(this.ulElement)) {
attributes(this.ulElement, {
'id': this.element.id + '_options',
'role': 'listbox',
'aria-hidden': 'false',
'aria-label': 'list'
});
}
var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
attributes(this.inputElement, this.getAriaAttributes());
}
if (disableStatus) {
attributes(this.inputElement, { 'aria-disabled': 'true' });
}
this.ensureAriaDisabled((disableStatus) ? 'true' : 'false');
};
MultiSelect.prototype.ensureAriaDisabled = function (status) {
if (this.htmlAttributes && this.htmlAttributes['aria-disabled']) {
var attr = this.htmlAttributes;
extend(attr, { 'aria-disabled': status }, attr);
this.setProperties({ htmlAttributes: attr }, true);
}
};
MultiSelect.prototype.removelastSelection = function (e) {
var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);
if (selectedElem !== null) {
this.removeSelectedChip(e);
return;
}
var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);
var value = elements[elements.length - 1].getAttribute('data-value');
if (!isNullOrUndefined(this.value)) {
this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
}
var customValue = this.allowObjectBinding ?
this.getDataByValue(this.getFormattedValue(value)) : this.getFormattedValue(value);
if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
customValue.toString() === 'NaN'))) {
customValue = value;
}
this.removeValue(customValue, e);
this.removeChipSelection();
this.updateDelimeter(this.delimiterChar, e);
this.makeTextBoxEmpty();
if (this.mainList && this.listData) {
this.refreshSelection();
}
this.checkPlaceholderSize();
};
MultiSelect.prototype.onActionFailure = function (e) {
_super.prototype.onActionFailure.call(this, e);
this.renderPopup();
this.onPopupShown();
};
MultiSelect.prototype.targetElement = function () {
this.targetInputElement = this.inputElement;
if (this.mode === 'CheckBox' && this.allowFiltering) {
this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
}
return this.targetInputElement.value;
};
MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
var predicate;
var field = this.isPrimitiveData ? '' : this.fields.value;
if (this.enableVirtualization && valuecheck) {
if (isCheckbox) {
var startindex = this.viewPortInfo.startIndex;
var endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
valuecheck[(startindex + this.viewPortInfo.endIndex)]) ? (startindex + this.viewPortInfo.endIndex)
: (valuecheck.length);
for (var i = startindex; i < endindex; i++) {
var value = this.allowObjectBinding ? getValue((this.fields.value) ?
this.fields.value : '', valuecheck[i]) : valuecheck[i];
if (i === startindex) {
predicate = new Predicate(field, 'equal', (value));
}
else {
predicate = predicate.or(field, 'equal', (value));
}
}
return new Query().where(predicate);
}
else {
for (var i = 0; i < valuecheck.length; i++) {
var value = this.allowObjectBinding ? getValue((this.fields.value) ?
this.fields.value : '', valuecheck[i]) : valuecheck[i];
if (this.isaddNonPresentItems) {
predicate = i === 0 ? new Predicate(field, 'equal', valuecheck[i])
: predicate.or(field, 'equal', valuecheck[i]);
}
else {
predicate = i === 0 ? predicate = new Predicate(field, 'notequal', (value))
: predicate.and(field, 'notequal', (value));
}
}
return new Query().where(predicate);
}
}
else {
for (var i = 0; i < valuecheck.length; i++) {
if (i === 0) {
predicate = new Predicate(field, 'equal', valuecheck[i]);
}
else {
predicate = predicate.or(field, 'equal', valuecheck[i]);
}
}
}
if (this.dataSource instanceof DataManager && this.dataSource.adaptor instanceof JsonAdaptor) {
return new Query().where(predicate);
}
else {
return this.getQuery(this.query).clone().where(predicate);
}
};
/* eslint-disable @typescript-eslint/no-unused-vars */
MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
var _this = this;
if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.totalItemCount = e.count;
}
if (this.value && list && list.length > 0 && this.allowFiltering && this.mode !== 'CheckBox' && !this.enableVirtualization && !this.isFilterPrevented && !this.allowCustomValue && this.isFilteringAction) {
var allItemsInValue = list.every(function (item) {
var itemValue = getValue((_this.fields.value) ? _this.fields.value : '', item);
return _this.value.some(function (val) {
var value = _this.allowObjectBinding ? getValue((_this.fields.value) ? _this.fields.value : '', val) : val;
return itemValue === value;
});
});
if (allItemsInValue) {
ulElement.innerHTML = '';
list = [];
}
}
/* eslint-enable @typescript-eslint/no-unused-vars */
_super.prototype.onActionComplete.call(this, ulElement, list, e);
this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
((!(this.dataSource instanceof DataManager)) ||
((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
this.updateSelectElementData(this.allowFiltering);
// eslint-disable-next-line @typescript-eslint/no-this-alias
var proxy = this;
if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization &&
this.listData && this.listData.length > 0) {
for (var i = 0; i < this.value.length; i++) {
var value = this.allowObjectBinding ? getValue((this.fields.value) ?
this.fields.value : '', proxy.value[i]) : proxy.value[i];
var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
if (!checkEle && !(this.dataSource instanceof DataManager)) {
this.value.splice(i, 1);
i -= 1;
}
}
}
var valuecheck = [];
if (!isNullOrUndefined(this.value)) {
valuecheck = this.presentItemValue(this.ulElement);
}
if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
&& this.listData != null) {
this.isaddNonPresentItems = true;
this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
this.isaddNonPresentItems = false;
}
else {
this.updateActionList(ulElement, list, e);
}
if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered &&
this.inputElement.value && this.inputElement.value !== '') {
var query = new Query();
query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
this.checkForCustomValue(query, this.fields);
this.isCustomRendered = true;
this.remoteCustomValue = this.enableVirtualization ? false : this.remoteCustomValue;
}
if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy) && !isNullOrUndefined(this.fields.disabled)) {
this.disableGroupHeader();
}
if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
this.removeFocus();
}
};
/* eslint-disable @typescript-eslint/no-unused-vars */
MultiSelect.prototype.updateActionList = function (ulElement, list, e, isUpdated) {
/* eslint-enable @typescript-eslint/no-unused-vars */
if (this.mode === 'CheckBox' && this.showSelectAll) {
this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
}
if (!this.mainList && !this.mainData) {
this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
this.mainData = list;
this.mainListCollection = this.liCollections;
}
else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
this.mainData = list;
}
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
this.inputElement.value && this.inputElement.value !== '') {
this.checkForCustomValue(this.tempQuery, this.fields);
if (this.isCustomRendered) {
return;
}
}
if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) &&
this.inputElement.value.trim() !== '') ||
this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
this.refreshSelection();
}
this.updateListARIA();
this.unwireListEvents();
this.wireListEvents();
if (!isNullOrUndefined(this.setInitialValue)) {
this.setInitialValue();
}
if (!isNullOrUndefined(this.selectAllAction)) {
this.selectAllAction();
}
if (this.setDynValue) {
if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
this.initialTextUpdate();
}
if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
this.initialValueUpdate();
}
else if (!this.isRemoveSelection) {
this.initialValueUpdate(this.listData, true);
}
this.initialUpdate();
this.refreshPlaceHolder();
if (this.mode !== 'CheckBox' && this.changeOnBlur) {
this.updateValueState(null, this.value, null);
}
}
this.renderPopup();
if (this.beforePopupOpen) {
this.beforePopupOpen = false;
this.onPopupShown(e);
}
};
MultiSelect.prototype.refreshSelection = function () {
var value;
var element;
var className = this.hideSelectedItem ?
HIDE_LIST :
dropDownBaseClasses.selected;
if (!isNullOrUndefined(this.value)) {
for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) :
this.value[index];
element = this.findListElement(this.list, 'li', 'data-value', value);
if (element) {
addClass([element], className);
if (this.hideSelectedItem && element.previousSibling
&& element.previousElementSibling.classList.contains(dropDownBaseClasses.group)
&& (!element.nextElementSibling ||
element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {
addClass([element.previousElementSibling], className);
}
if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {
this.hideGroupItem(value);
}
if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {
removeClass([element], dropDownBaseClasses.focus);
var listEle = element.parentElement.querySelectorAll('.' +
dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.' + DISABLED + ')');
if (listEle.length > 0) {
addClass([listEle[0]], dropDownBaseClasses.focus);
this.updateAriaActiveDescendant();
}
else {
//EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {
this.l10nUpdate();
addClass([this.list], dropDownBaseClasses.noData);
}
}
}
element.setAttribute('aria-selected', 'true');
if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
var ariaValue = element.getElementsByClassName('e-check').length;
if (ariaValue === 0) {
var args = {
module: 'CheckBoxSelection',
enable: this.mode === 'CheckBox',
li: element,
e: null
};
this.notify('updatelist', args);
}
}
}
}
}
this.checkSelectAll();
this.checkMaxSelection();
};
MultiSelect.prototype.hideGroupItem = function (value) {
var element;
var element1;
var className = this.hideSelectedItem ?
HIDE_LIST :
dropDownBaseClasses.selected;
element1 = element = this.findListElement(this.ulElement, 'li', 'data-value', value);
var i = 0;
var j = 0;
var temp = true;
var temp1 = true;
do {
if (element && element.previousElementSibling
&& (!element.previousElementSibling.classList.contains(HIDE_LIST) &&
element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {
temp = false;
}
if (!temp || !element || (element.previousElementSibling
&& element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {
i = 10;
}
else {
element = element.previousElementSibling;
}
if (element1 && element1.nextElementSibling
&& (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&
element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {
temp1 = false;
}
if (!temp1 || !element1 || (element1.nextElementSibling
&& element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {
j = 10;
}
else {
element1 = element1.nextElementSibling;
}
} while (i < 10 || j < 10);
if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {
addClass([element.previousElementSibling], className);
}
else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {
removeClass([element.previousElementSibling], className);
}
};
MultiSelect.prototype.getValidLi = function () {
var liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);
};
MultiSelect.prototype.checkSelectAll = function () {
var groupItemLength = !isNullOrUndefined(this.fields.disabled) ? this.list.querySelectorAll('li.e-list-group-item.e-active:not(.e-disabled)').length : this.list.querySelectorAll('li.e-list-group-item.e-active').length;
var listItem = this.list.querySelectorAll('li.e-list-item');
var searchCount = this.enableVirtualization ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)').length : !isNullOrUndefined(this.fields.disabled) ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-disabled)').length : this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;
if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
searchActiveCount = searchActiveCount - groupItemLength;
}
if ((!this.enableVirtualization && ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
&& (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' &&
this.showSelectAll && this.value && this.value.length === this.totalItemCount)) {
this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
}
else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {
this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
}
if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {
for (var i = 0; i < listItem.length; i++) {
this.findGroupStart(listItem[i]);
}
this.deselectHeader();
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MultiSelect.prototype.openClick = function (e) {
if (!this.openOnClick && this.mode !== 'CheckBox' && !this.isPopupOpen()) {
if (this.targetElement() !== '') {
this.showPopup();
}
else {
this.hidePopup(e);
}
}
else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {
this.showPopup();
}
};
MultiSelect.prototype.keyUp = function (e) {
if (this.mode === 'CheckBox' && !this.openOnClick) {
var char = String.fromCharCode(e.keyCode);
var isWordCharacter = char.match(/\w/);
if (!isNullOrUndefined(isWordCharacter)) {
this.isValidKey = true;
}
}
this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;
this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;
if (this.isValidKey && this.inputElement) {
this.isValidKey = false;
this.expandTextbox();
this.showOverAllClear();
switch (e.keyCode) {
default:
// For filtering works in mobile firefox
this.search(e);
}
}
};
/**
* To filter the multiselect data from given data source by using query
*
* @param {Object[] | DataManager } dataSource - Set the data source to filter.
* @param {Query} query - Specify the query to filter the data.
* @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
* @returns {void}
*/
MultiSelect.prototype.filter = function (dataSource, query, fields) {
this.isFiltered = true;
this.remoteFilterAction = true;
this.dataUpdater(dataSource, query, fields);
};
MultiSelect.prototype.getQuery = function (query) {
var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
if (this.isFiltered) {
if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {
filterQuery = this.customFilterQuery.clone();
return this.virtualFilterQuery(filterQuery);
}
else if (!this.enableVirtualization) {
return filterQuery;
}
}
if (this.filterAction) {
if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&
this.targetElement() !== null && this.targetElement().trim() !== '')) {
var dataType = this.typeOfData(this.dataSource).typeof;
if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
}
else if ((this.enableVirtualization && this.targetElement() !== '' && !this.isClearAllAction) || !this.enableVirtualization) {
var fields = this.fields;
filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
}
}
if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
return this.virtualFilterQuery(filterQuery);
}
if (this.virtualSelectAll) {
return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?
this.query.take(this.maximumSelectionLength).requiresCount() :
new Query().take(this.maximumSelectionLength).requiresCount();
}
return filterQuery;
}
else {
if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
return this.virtualFilterQuery(filterQuery);
}
if (this.virtualSelectAll) {
return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?
this.query.take(this.maximumSelectionLength).requiresCount() :
new Query().take(this.maximumSelectionLength).requiresCount();
}
return query ? query : this.query ? this.query : new Query();
}
};
MultiSelect.prototype.virtualFilterQuery = function (filterQuery) {
var takeValue = this.getTakeValue();
var isReOrder = true;
var isSkip = true;
var isTake = true;
for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e &&
filterQuery.queries[queryElements].e.condition === 'or') || (filterQuery.queries[queryElements].e &&
filterQuery.queries[queryElements].e.operator === 'equal'))) {
isReOrder = false;
}
if (filterQuery.queries[queryElements].fn === 'onSkip') {
isSkip = false;
}
if (filterQuery.queries[queryElements].fn === 'onTake') {
isTake = false;
}
}
var queryTakeValue = 0;
if (filterQuery && filterQuery.queries.length > 0) {
for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
if (filterQuery.queries[queryElements].fn === 'onTake') {
queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ?
filterQuery.queries[queryElements].e.nos : takeValue;
}
}
}
if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
if (this.query.queries[queryElements].fn === 'onTake') {
queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ?
this.query.queries[queryElements].e.nos : takeValue;
}
}
}
if (filterQuery && filterQuery.queries.length > 0) {
for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
if (filterQuery.queries[queryElements].fn === 'onTake') {
queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ?
queryTakeValue : filterQuery.queries[queryElements].e.nos;
filterQuery.queries.splice(queryElements, 1);
--queryElements;
}
}
}
if (((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) && !this.isVirtualReorder) {
if (!isReOrder) {
filterQuery.skip(this.viewPortInfo.startIndex);
}
else {
filterQuery.skip(this.virtualItemStartIndex);
}
}
if (this.isIncrementalRequest) {
filterQuery.take(this.incrementalEndIndex);
}
else if (queryTakeValue > 0) {
filterQuery.take(queryTakeValue);
}
else {
filterQuery.take(takeValue);
}
filterQuery.requiresCount();
this.customFilterQuery = null;
return filterQuery;
};
MultiSelect.prototype.getTakeValue = function () {
return this.allowFiltering && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
};
MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {
this.isDataFetched = false;
var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
if (this.targetElement().trim() === '') {
var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ?
this.mainList.cloneNode(true) : this.mainList;