@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,130 lines • 119 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 { Input } from '@syncfusion/ej2-inputs';
import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, L10n, setValue } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, getComponent, Event, extend, detach, attributes } from '@syncfusion/ej2-base';
import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
import { prepend, append } from '@syncfusion/ej2-base';
import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';
import { Button } from '@syncfusion/ej2-buttons';
import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';
import { DataManager, Query } from '@syncfusion/ej2-data';
/**
* Defines the Selection settings of List Box.
*/
var SelectionSettings = /** @class */ (function (_super) {
__extends(SelectionSettings, _super);
function SelectionSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Multiple')
], SelectionSettings.prototype, "mode", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "showCheckbox", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "showSelectAll", void 0);
__decorate([
Property('Left')
], SelectionSettings.prototype, "checkboxPosition", void 0);
return SelectionSettings;
}(ChildProperty));
export { SelectionSettings };
/**
* Defines the toolbar settings of List Box.
*/
var ToolbarSettings = /** @class */ (function (_super) {
__extends(ToolbarSettings, _super);
function ToolbarSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property([])
], ToolbarSettings.prototype, "items", void 0);
__decorate([
Property('Right')
], ToolbarSettings.prototype, "position", void 0);
return ToolbarSettings;
}(ChildProperty));
export { ToolbarSettings };
/**
* The ListBox is a graphical user interface component used to display a list of items.
* Users can select one or more items in the list using a checkbox or by keyboard selection.
* It supports sorting, grouping, reordering and drag and drop of items.
* ```html
* <select id="listbox">
* <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 listObj = new ListBox();
* listObj.appendTo("#listbox");
* </script>
* ```
*/
var ListBox = /** @class */ (function (_super) {
__extends(ListBox, _super);
/**
* Constructor for creating the ListBox component.
*
* @param {ListBoxModel} options - Specifies ListBox model
* @param {string | HTMLElement} element - Specifies the element.
*/
function ListBox(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isValidKey = false;
_this.isBackSpace = false;
_this.isDataSourceUpdate = false;
_this.keyDownStatus = false;
return _this;
}
ListBox_1 = ListBox;
/**
* Adds a new item to the popup list. By default, new item appends to the list as the last item,
* but you can insert based on the index parameter.
*
* @param { Object[] } items - Specifies an array of JSON data or a JSON data.
* @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
* @returns {void}.
* @private
*/
ListBox.prototype.addItem = function (items, itemIndex) {
_super.prototype.addItem.call(this, items, itemIndex);
if (this.allowFiltering && this.filterInput.value !== '') {
this.filteringAction(this.jsonData, new Query(), this.fields);
}
};
/**
* Build and render the component.
*
* @private
* @returns {void}
*/
ListBox.prototype.render = function () {
if (this.isAngular && this.allowFiltering) {
var originalElement = this.element;
var clonedElement = originalElement.cloneNode(true);
originalElement.parentNode.replaceChild(clonedElement, originalElement);
this.element = clonedElement;
setValue('ej2_instances', [this], this.element);
}
this.inputString = '';
this.initLoad = true;
this.isCustomFiltering = false;
this.initialSelectedOptions = this.value;
this.inputFormName = this.element.getAttribute('name');
_super.prototype.render.call(this);
this.setEnabled();
this.renderComplete();
};
ListBox.prototype.initWrapper = function () {
var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
hiddenSelect.style.visibility = 'hidden';
this.list.classList.add('e-listbox-wrapper');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
var groupHdrs = this.list.querySelectorAll('.e-list-group-item');
for (var i = 0; i < groupHdrs.length; i++) {
groupHdrs[i].removeAttribute('tabindex');
groupHdrs[i].setAttribute('role', 'option');
}
if (this.itemTemplate) {
this.list.classList.add('e-list-template');
}
this.list.classList.add('e-wrapper');
this.list.classList.add('e-lib');
if (this.element.tagName === 'EJS-LISTBOX') {
this.element.setAttribute('tabindex', '0');
if (this.initLoad) {
this.element.appendChild(this.list);
}
}
else {
if (this.initLoad && this.element.parentElement) {
this.element.parentElement.insertBefore(this.list, this.element);
}
this.list.insertBefore(this.element, this.list.firstChild);
this.element.style.display = 'none';
}
this.list.insertBefore(hiddenSelect, this.list.firstChild);
if (this.list.getElementsByClassName('e-list-item')[0]) {
this.list.getElementsByClassName('e-list-item')[0].classList.remove(dropDownBaseClasses.focus);
}
if (this.itemTemplate) {
this.renderReactTemplates();
}
removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);
this.validationAttribute(this.element, hiddenSelect);
this.list.setAttribute('role', 'listbox');
attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
this.updateSelectionSettings();
};
ListBox.prototype.updateSelectionSettings = function () {
if (this.selectionSettings.showCheckbox && this.selectionSettings.showSelectAll && this.liCollections.length) {
var l10nSelect = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
this.showSelectAll = true;
this.selectAllText = l10nSelect.getConstant('selectAllText');
this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
this.popupWrapper = this.list;
this.checkBoxSelectionModule.checkAllParent = null;
this.notify('selectAll', {});
}
};
ListBox.prototype.initDraggable = function () {
var _this = this;
if (this.ulElement) {
this.ulElement.id = this.element.id + '_parent';
}
if (this.allowDragAndDrop) {
new Sortable(this.ulElement, {
scope: this.scope,
itemClass: 'e-list-item',
beforeDragStart: this.triggerDragStart.bind(this),
drag: this.triggerDrag.bind(this),
beforeDrop: this.beforeDragEnd.bind(this),
drop: this.dragEnd.bind(this),
placeHolder: function () { return _this.createElement('span', { className: 'e-placeholder' }); },
helper: function (e) {
var wrapper = _this.list.cloneNode();
var ele = e.sender.cloneNode(true);
wrapper.appendChild(ele);
var refEle = _this.getItems()[0];
wrapper.style.width = refEle.offsetWidth + 'px';
wrapper.style.height = refEle.offsetHeight + 'px';
if ((_this.value && _this.value.length) > 1 && _this.isSelected(ele)) {
ele.appendChild(_this.createElement('span', {
className: 'e-list-badge', innerHTML: _this.value.length + ''
}));
}
wrapper.style.zIndex = getZindexPartial(_this.element) + '';
return wrapper;
}
});
}
};
ListBox.prototype.updateActionCompleteData = function (li, item, index) {
this.jsonData.splice(index === null ? this.jsonData.length : index, 0, item);
};
ListBox.prototype.initToolbar = function () {
var pos = this.toolbarSettings.position;
var prevScope = this.element.getAttribute('data-value');
this.toolbarSettings.items = isNullOrUndefined(this.toolbarSettings.items) ? [] : this.toolbarSettings.items;
if (this.toolbarSettings.items.length) {
var toolElem = this.createElement('div', { className: 'e-listbox-tool', attrs: { 'role': 'toolbar' } });
var wrapper = this.createElement('div', {
className: 'e-listboxtool-wrapper e-lib e-' + pos.toLowerCase()
});
this.list.parentElement.insertBefore(wrapper, this.list);
wrapper.appendChild(pos === 'Right' ? this.list : toolElem);
wrapper.appendChild(pos === 'Right' ? toolElem : this.list);
this.createButtons(toolElem);
if (!this.element.id) {
this.element.id = getUniqueID('e-' + this.getModuleName());
}
if (this.scope) {
document.querySelector(this.scope).setAttribute('data-value', this.element.id);
}
else {
this.updateToolBarState();
}
}
var scope = this.element.getAttribute('data-value');
if (prevScope && scope && (prevScope !== scope)) {
this.tBListBox = getComponent(document.getElementById(prevScope), this.getModuleName());
this.tBListBox.updateToolBarState();
}
else if (scope) {
this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());
this.tBListBox.updateToolBarState();
}
};
ListBox.prototype.createButtons = function (toolElem) {
var _this = this;
var btn;
var ele;
var title;
var l10n = new L10n(this.getModuleName(), {
moveUp: 'Move Up', moveDown: 'Move Down', moveTo: 'Move To',
moveFrom: 'Move From', moveAllTo: 'Move All To', moveAllFrom: 'Move All From'
}, this.locale);
this.toolbarSettings.items.forEach(function (value) {
title = l10n.getConstant(value);
ele = _this.createElement('button', {
attrs: {
'type': 'button',
'data-value': value,
'title': title,
'aria-label': title
}
});
toolElem.appendChild(ele);
btn = new Button({ iconCss: 'e-icons e-' + value.toLowerCase() }, ele);
btn.createElement = _this.createElement;
});
};
ListBox.prototype.validationAttribute = function (input, hiddenSelect) {
if (this.inputFormName) {
input.setAttribute('name', this.inputFormName);
}
_super.prototype.validationAttribute.call(this, input, hiddenSelect);
hiddenSelect.required = input.required;
input.required = false;
};
ListBox.prototype.setHeight = function () {
var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
ele.style.height = formatUnit(this.height);
if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
addClass([this.list], 'e-filter-list');
}
else {
removeClass([this.list], 'e-filter-list');
}
};
ListBox.prototype.setCssClass = function () {
var wrap = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
if (this.cssClass) {
addClass([wrap], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
if (this.enableRtl) {
addClass([this.list], 'e-rtl');
}
};
ListBox.prototype.setEnable = function () {
var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
if (this.enabled) {
removeClass([ele], cssClass.disabled);
}
else {
addClass([ele], cssClass.disabled);
}
};
ListBox.prototype.showSpinner = function () {
if (!this.spinner) {
this.spinner = this.createElement('div', { className: 'e-listbox-wrapper' });
}
this.spinner.style.height = formatUnit(this.height);
if (this.element.parentElement) {
this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
}
createSpinner({ target: this.spinner }, this.createElement);
showSpinner(this.spinner);
};
ListBox.prototype.hideSpinner = function () {
if (this.spinner.querySelector('.e-spinner-pane')) {
hideSpinner(this.spinner);
}
if (this.spinner.parentElement) {
detach(this.spinner);
}
};
ListBox.prototype.onInput = function () {
this.isDataSourceUpdate = false;
if (this.keyDownStatus) {
this.isValidKey = true;
}
else {
this.isValidKey = false;
}
this.keyDownStatus = false;
this.refreshClearIcon();
};
ListBox.prototype.clearText = function () {
this.filterInput.value = '';
this.refreshClearIcon();
var event = document.createEvent('KeyboardEvent');
this.isValidKey = true;
this.KeyUp(event);
};
ListBox.prototype.refreshClearIcon = function () {
if (this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon)) {
var clearElement = this.filterInput.parentElement.querySelector('.' + listBoxClasses.clearIcon);
clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';
}
};
ListBox.prototype.onActionComplete = function (ulElement, list, e) {
var _this = this;
var searchEle;
var filterElem;
var txtLength;
if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {
searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true);
}
if (list.length === 0) {
var noRecElem = ulElement.childNodes[0];
if (noRecElem) {
ulElement.removeChild(noRecElem);
}
}
if (this.allowFiltering) {
filterElem = this.list.getElementsByClassName('e-input-filter')[0];
if (filterElem) {
txtLength = filterElem.selectionStart;
}
}
_super.prototype.onActionComplete.call(this, ulElement, list, e);
if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
this.list.insertBefore(searchEle, this.list.firstElementChild);
this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
this.filterWireEvents(searchEle);
var inputSearch = searchEle.querySelector('.e-input-filter');
if (inputSearch) {
inputSearch.addEventListener('focus', function () {
if (!searchEle.childNodes[0].classList.contains('e-input-focus')) {
searchEle.childNodes[0].classList.add('e-input-focus');
}
});
inputSearch.addEventListener('blur', function () {
if (searchEle.childNodes[0].classList.contains('e-input-focus')) {
searchEle.childNodes[0].classList.remove('e-input-focus');
}
});
}
}
this.initWrapper();
this.setSelection(this.value, true, false, !this.isRendered);
this.initDraggable();
this.mainList = this.ulElement;
if (this.initLoad) {
this.jsonData = [];
extend(this.jsonData, list, []);
this.initToolbarAndStyles();
this.wireEvents();
if (this.showCheckbox) {
this.setCheckboxPosition();
}
if (this.allowFiltering) {
this.setFiltering();
}
}
else {
if (this.isDataSourceUpdate) {
this.jsonData = [];
extend(this.jsonData, list, []);
this.isDataSourceUpdate = false;
}
if (this.allowFiltering) {
filterElem = this.list.getElementsByClassName('e-input-filter')[0];
if (isNullOrUndefined(filterElem)) {
return;
}
filterElem.selectionStart = txtLength;
filterElem.selectionEnd = txtLength;
if (filterElem.value !== '' || (filterElem.value === '' && this.isBackSpace)) {
filterElem.focus();
setTimeout(function () { _this.isBackSpace = false; });
}
}
}
if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {
var scope = this.scope.replace('#', '');
var scopedLB = getComponent(document.getElementById(scope), this.getModuleName());
scopedLB.initToolbar();
}
this.initLoad = false;
};
ListBox.prototype.initToolbarAndStyles = function () {
this.initToolbar();
this.setCssClass();
this.setEnable();
this.setHeight();
};
ListBox.prototype.triggerDragStart = function (args) {
var _this = this;
var badge;
var extendedArgs = extend(this.getDragArgs(args), { dragSelected: true }, { cancel: false });
if (Browser.isIos) {
this.list.style.overflow = 'hidden';
}
this.trigger('dragStart', extendedArgs, function (dragEventArgs) {
_this.allowDragAll = dragEventArgs.dragSelected;
if (!_this.allowDragAll) {
badge = _this.ulElement.getElementsByClassName('e-list-badge')[0];
if (badge) {
detach(badge);
}
}
if (dragEventArgs.cancel) {
args.cancel = true;
}
});
};
ListBox.prototype.triggerDrag = function (args) {
var _this = this;
var scrollParent;
var boundRect;
var scrollMoved = 36;
var scrollHeight = 10;
if (this.itemTemplate && args.target) {
if (args.target && args.target.closest('.e-list-item')) {
scrollHeight = args.target.closest('.e-list-item').scrollHeight;
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var listItem = args.element.querySelector('.e-list-item');
if (listItem) {
scrollHeight = listItem.scrollHeight;
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var event = args.event;
var wrapper;
this.stopTimer();
if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
|| args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
|| args.target.closest('.e-list-item'))) {
if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
|| args.target.classList.contains('e-input-group')
|| args.target.closest('.e-list-item')) {
wrapper = args.target.closest('.e-listbox-wrapper');
}
else {
wrapper = args.target;
}
if (this.allowFiltering) {
scrollParent = wrapper.querySelector('.e-list-parent');
}
else {
scrollParent = wrapper;
}
if (scrollParent) {
boundRect = scrollParent.getBoundingClientRect();
if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
}
else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
}
}
}
if (args.target === null) {
return;
}
this.trigger('drag', this.getDragArgs(args));
};
ListBox.prototype.setScrollDown = function (scrollElem, scrollPixel, isScrollDown) {
if (isScrollDown) {
scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;
}
else {
scrollElem.scrollTop = scrollElem.scrollTop - scrollPixel;
}
};
ListBox.prototype.stopTimer = function () {
window.clearInterval(this.timer);
};
ListBox.prototype.beforeDragEnd = function (args) {
this.stopTimer();
var items = [];
this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
if (this.value.indexOf(this.dragValue) > -1) {
args.items = this.getDataByValues(this.value);
}
else {
args.items = this.getDataByValues([this.dragValue]);
}
extend(items, args.items);
this.trigger('beforeDrop', args);
if (JSON.stringify(args.items) !== JSON.stringify(items)) {
this.customDraggedItem = args.items;
}
};
ListBox.prototype.dragEnd = function (args) {
var _this = this;
var listData;
var liColl;
var jsonData;
var droppedData;
var selectedOptions;
var sortedData;
var dropValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
var listObj = this.getComponent(args.droppedElement);
var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
var sourceArgs = { previousData: this.dataSource };
var destArgs = { previousData: listObj.dataSource };
var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
previousIndex: args.previousIndex, currentIndex: args.currentIndex });
if (listObj !== this) {
var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
}
if (Browser.isIos) {
this.list.style.overflow = '';
}
var targetListObj = this.getComponent(args.target);
if (targetListObj && targetListObj.listData.length === 0) {
var noRecElem = targetListObj.ulElement.childNodes[0];
if (noRecElem) {
targetListObj.ulElement.removeChild(noRecElem);
}
}
if (listObj === this) {
var ul_1 = this.ulElement;
listData = [].slice.call(this.listData);
liColl = [].slice.call(this.liCollections);
jsonData = [].slice.call(this.jsonData);
sortedData = [].slice.call(this.sortedData);
var toSortIdx_1 = args.currentIndex;
var toIdx_1 = args.currentIndex = this.getCurIdx(this, args.currentIndex);
var rIdx = listData.indexOf(this.getDataByValue(dropValue));
var jsonIdx = jsonData.indexOf(this.getDataByValue(dropValue));
var sIdx = sortedData.indexOf(this.getDataByValue(dropValue));
listData.splice(toIdx_1, 0, listData.splice(rIdx, 1)[0]);
sortedData.splice(toSortIdx_1, 0, sortedData.splice(sIdx, 1)[0]);
jsonData.splice(toIdx_1, 0, jsonData.splice(jsonIdx, 1)[0]);
liColl.splice(toIdx_1, 0, liColl.splice(rIdx, 1)[0]);
if (this.allowDragAll) {
selectedOptions = this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 ? this.value : [dropValue];
if (!isNullOrUndefined(this.customDraggedItem)) {
selectedOptions = [];
this.customDraggedItem.forEach(function (item) {
selectedOptions.push(getValue(_this.fields.value, item));
});
}
selectedOptions.forEach(function (value) {
if (value !== dropValue) {
var idx = listData.indexOf(_this.getDataByValue(value));
var jsonIdx_1 = jsonData.indexOf(_this.getDataByValue(value));
var sIdx_1 = sortedData.indexOf(_this.getDataByValue(value));
if (idx > toIdx_1) {
toIdx_1++;
}
jsonData.splice(toIdx_1, 0, jsonData.splice(jsonIdx_1, 1)[0]);
listData.splice(toIdx_1, 0, listData.splice(idx, 1)[0]);
sortedData.splice(toSortIdx_1, 0, sortedData.splice(sIdx_1, 1)[0]);
liColl.splice(toIdx_1, 0, liColl.splice(idx, 1)[0]);
ul_1.insertBefore(_this.getItems()[_this.getIndexByValue(value)], ul_1.getElementsByClassName('e-placeholder')[0]);
}
});
}
this.listData = listData;
this.jsonData = jsonData;
this.sortedData = sortedData;
this.liCollections = liColl;
}
else {
var li_1;
var fLiColl_1 = [].slice.call(this.liCollections);
var currIdx_1 = args.currentIndex = this.getCurIdx(listObj, args.currentIndex);
var ul_2 = listObj.ulElement;
listData = [].slice.call(listObj.listData);
liColl = [].slice.call(listObj.liCollections);
jsonData = [].slice.call(listObj.jsonData);
sortedData = [].slice.call(listObj.sortedData);
selectedOptions = (this.value && Array.prototype.indexOf.call(this.value, dropValue) > -1 && this.allowDragAll)
? this.value : [dropValue];
if (!isNullOrUndefined(this.customDraggedItem)) {
selectedOptions = [];
this.customDraggedItem.forEach(function (item) {
selectedOptions.push(getValue(_this.fields.value, item));
});
}
var fListData_1 = [].slice.call(this.listData);
var fSortData_1 = [].slice.call(this.sortedData);
selectedOptions.forEach(function (value) {
droppedData = _this.getDataByValue(value);
var srcIdx = _this.listData.indexOf(droppedData);
var jsonSrcIdx = _this.jsonData.indexOf(droppedData);
var sortIdx = _this.sortedData.indexOf(droppedData);
fListData_1.splice(srcIdx, 1);
_this.jsonData.splice(jsonSrcIdx, 1);
fSortData_1.splice(sortIdx, 1);
_this.listData = fListData_1;
_this.sortedData = fSortData_1;
var destIdx = value === dropValue ? args.currentIndex : currIdx_1;
listData.splice(destIdx, 0, droppedData);
jsonData.splice(destIdx, 0, droppedData);
sortedData.splice(destIdx, 0, droppedData);
liColl.splice(destIdx, 0, fLiColl_1.splice(srcIdx, 1)[0]);
if (!value) {
var liCollElem_1 = _this.getItems();
for (var i = 0; i < liCollElem_1.length; i++) {
if (liCollElem_1[i].getAttribute('data-value') === null && liCollElem_1[i].classList.contains('e-list-item')) {
li_1 = liCollElem_1[i];
break;
}
}
}
else {
li_1 = _this.getItems()[_this.getIndexByValue(value)];
}
if (!li_1) {
li_1 = args.helper;
}
_this.removeSelected(_this, value === dropValue ? [args.droppedElement] : [li_1]);
ul_2.insertBefore(li_1, ul_2.getElementsByClassName('e-placeholder')[0]);
currIdx_1++;
});
if (this.fields.groupBy) {
var sourceElem = this.renderItems(this.listData, this.fields);
this.updateListItems(sourceElem, this.ulElement);
this.setSelection();
}
if (listObj.sortOrder !== 'None' || this.selectionSettings.showCheckbox
!== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy || listObj.itemTemplate || this.itemTemplate) {
var sortable = getComponent(ul_2, 'sortable');
var sourceElem = listObj.renderItems(listData, listObj.fields);
listObj.updateListItems(sourceElem, ul_2);
this.setSelection();
if (sortable.placeHolderElement) {
ul_2.appendChild(sortable.placeHolderElement);
}
ul_2.appendChild(args.helper);
listObj.setSelection();
}
this.liCollections = fLiColl_1;
listObj.liCollections = liColl;
listObj.jsonData = extend([], [], jsonData, false);
listObj.listData = extend([], [], listData, false);
if (listObj.sortOrder === 'None') {
listObj.sortedData = extend([], [], sortedData, false);
}
if (this.listData.length === 0) {
this.l10nUpdate();
}
}
if (this === listObj) {
var sourceArgs1 = extend(sourceArgs, { currentData: listData });
dragArgs = extend(dragArgs, { source: sourceArgs1 });
}
else {
var dragArgs1 = extend(destArgs, { currentData: listData });
dragArgs = extend(dragArgs, { destination: dragArgs1 });
}
if (!isNullOrUndefined(this.customDraggedItem)) {
dragArgs.items = this.customDraggedItem;
}
this.trigger('drop', dragArgs);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var liCollElem = dragArgs.elements;
if (liCollElem.length) {
for (var i = 0; i < liCollElem.length; i++) {
liCollElem[i].classList.remove('e-grabbed');
}
}
if (this.toolbarSettings.items.length > 0) {
this.updateToolBarState();
}
else if (this.tBListBox && this.tBListBox.toolbarSettings.items.length > 0) {
this.tBListBox.updateToolBarState();
}
};
ListBox.prototype.updateListItems = function (sourceElem, destElem) {
destElem.innerHTML = '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
destElem.append.apply(destElem, sourceElem.childNodes);
};
ListBox.prototype.removeSelected = function (listObj, elems) {
if (listObj.selectionSettings.showCheckbox) {
elems.forEach(function (ele) { ele.getElementsByClassName('e-frame')[0].classList.remove('e-check'); });
}
else {
removeClass(elems, cssClass.selected);
}
};
ListBox.prototype.getCurIdx = function (listObj, idx) {
if (listObj.fields.groupBy) {
idx -= [].slice.call(listObj.ulElement.children).slice(0, idx)
.filter(function (ele) { return ele.classList.contains(cssClass.group); }).length;
}
return idx;
};
ListBox.prototype.getComponent = function (li) {
var listObj;
var ele = (this.element.tagName === 'EJS-LISTBOX' ? closest(li, '.e-listbox')
: closest(li, '.e-listbox-wrapper') && closest(li, '.e-listbox-wrapper').querySelector('.e-listbox'));
if (ele) {
listObj = getComponent(ele, this.getModuleName());
}
return listObj;
};
/**
* Sets the enabled state to DropDownBase.
*
* @returns {void}
*/
ListBox.prototype.setEnabled = function () {
this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
};
ListBox.prototype.listOption = function (dataSource, fields) {
this.listCurrentOptions = _super.prototype.listOption.call(this, dataSource, fields);
this.listCurrentOptions = extend({}, this.listCurrentOptions, { itemCreated: this.triggerBeforeItemRender.bind(this) }, true);
this.notify('listoption', { module: 'CheckBoxSelection' });
return this.listCurrentOptions;
};
ListBox.prototype.triggerBeforeItemRender = function (e) {
e.item.setAttribute('tabindex', '-1');
this.trigger('beforeItemRender', { element: e.item, item: e.curData });
};
ListBox.prototype.requiredModules = function () {
var modules = [];
if (this.selectionSettings.showCheckbox) {
modules.push({
member: 'CheckBoxSelection',
args: [this]
});
}
return modules;
};
/**
* This method is used to enable or disable the items in the ListBox based on the items and enable argument.
*
* @param {string[]} items - Text items that needs to be enabled/disabled.
* @param {boolean} enable - Set `true`/`false` to enable/disable the list items.
* @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.
* @returns {void}
*/
ListBox.prototype.enableItems = function (items, enable, isValue) {
var _this = this;
if (enable === void 0) { enable = true; }
var li;
items.forEach(function (item) {
var text = item;
li = _this.findListElement(_this.list, 'li', 'data-value', isValue ? text : _this.getValueByText(text));
if (!li) {
return;
}
if (enable) {
removeClass([li], cssClass.disabled);
li.removeAttribute('aria-disabled');
}
else {
addClass([li], cssClass.disabled);
li.setAttribute('aria-disabled', 'true');
}
});
if (this.allowFiltering && this.filterInput && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
var canDisable_1 = false;
this.ulElement.childNodes.forEach(function (li) { if (!li.classList.contains('e-disabled')) {
canDisable_1 = true;
} });
if (!canDisable_1) {
var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
var btn = wrap.querySelector('[data-value="moveAllTo"]');
btn.disabled = true;
}
}
};
/**
* Based on the state parameter, specified list item will be selected/deselected.
*
* @param {string[]} items - Array of text value of the item.
* @param {boolean} state - Set `true`/`false` to select/un select the list items.
* @param {boolean} isValue - Set `true` if `items` parameter is a array of unique values.
* @returns {void}
*/
ListBox.prototype.selectItems = function (items, state, isValue) {
if (state === void 0) { state = true; }
if (state && !this.selectionSettings.showCheckbox && this.selectionSettings.mode === 'Single') {
this.getSelectedItems().forEach(function (li) {
li.classList.remove('e-active');
li.removeAttribute('aria-selected');
removeClass([li], cssClass.selected);
});
}
this.setSelection(items, state, !isValue);
this.updateSelectedOptions();
var selElems = [];
for (var i = 0; i < items.length; i++) {
var liColl = this.list.querySelectorAll('[aria-selected="true"]');
for (var j = 0; j < liColl.length; j++) {
if (items[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
selElems.push(liColl[j]);
}
}
}
this.triggerChange(selElems, null);
};
/**
* Based on the state parameter, entire list item will be selected/deselected.
*
* @param {boolean} state - Set `true`/`false` to select/un select the entire list items.
* @returns {void}
*/
ListBox.prototype.selectAll = function (state) {
if (state === void 0) { state = true; }
this.selectAllItems(state);
};
/**
* Adds a new item to the list. By default, new item appends to the list as the last item,
* but you can insert based on the index parameter.
*
* @param { Object[] } items - Specifies an array of JSON data or a JSON data.
* @param { number } itemIndex - Specifies the index to place the newly added item in the list.
* @returns {void}.
*/
ListBox.prototype.addItems = function (items, itemIndex) {
_super.prototype.addItem.call(this, items, itemIndex);
if (this.allowFiltering && this.filterInput.value !== '') {
this.filteringAction(this.jsonData, new Query(), this.fields);
}
};
/**
* Removes a item from the list. By default, removed the last item in the list,
* but you can remove based on the index parameter.
*
* @param { Object[] } items - Specifies an array of JSON data or a JSON data.
* @param { number } itemIndex - Specifies the index to remove the item from the list.
* @returns {void}.
*/
ListBox.prototype.removeItems = function (items, itemIndex) {
this.removeItem(items, itemIndex);
};
/**
* Removes a item from the list. By default, removed the last item in the list,
* but you can remove based on the index parameter.
*
* @param { Object[] } items - Specifies an array of JSON data or a JSON data.
* @param { number } itemIndex - Specifies the index to remove the item from the list.
* @returns {void}.
*/
ListBox.prototype.removeItem = function (items, itemIndex) {
var _this = this;
var liCollections = [];
var liElement = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
if (items) {
items = (items instanceof Array ? items : [items]);
var fields = this.fields;
var dataValue = void 0;
var objValue = {};
var dupData = [];
extend(dupData, [], this.jsonData);
var removeIdxes = [];
var removeLiIdxes = [];
for (var i = 0; i < dupData.length; i++) {
var value = (dupData[i] instanceof Object) ? dupData[i][fields.value] :
dupData[i].toString();
objValue[value] = i;
}
for (var j = 0; j < items.length; j++) {
dataValue = (items[j] instanceof Object) ? items[j][fields.value] :
items[j].toString();
if (Object.prototype.hasOwnProperty.call(objValue, dataValue)) {
var idx = objValue[dataValue];
liCollections.push(liElement[idx]);
removeIdxes.push(idx);
removeLiIdxes.push(idx);
}
}
var validRemoveIdxes = removeIdxes.sort(function (a, b) { return b - a; });
validRemoveIdxes.forEach(function (idx) {
_this.listData.splice(idx, 1);
_this.jsonData.splice(idx, 1);
});
for (var k = removeLiIdxes.length - 1; k >= 0; k--) {
this.updateLiCollection(removeLiIdxes[k]);
}
}
else {
itemIndex = itemIndex ? itemIndex : 0;
liCollections.push(liElement[itemIndex]);
this.listData.splice(itemIndex, 1);
this.jsonData.splice(itemIndex, 1);
this.updateLiCollection(itemIndex);
}
for (var i = 0; i < liCollections.length; i++) {
this.ulElement.removeChild(liCollections[i]);
}
if (this.listData.length === 0) {
this.l10nUpdate();
}
if (this.listData.length !== this.sortedData.length) {
this.sortedData = this.listData;
}
this.value = [];
this.updateToolBarState();
};
/**
* Gets the array of data Object that matches the given array of values.
*
* @param { string[] | number[] | boolean[] } value - Specifies the array value of the list item.
* @returns {object[]}.
*/
ListBox.prototype.getDataByValues = function (value) {
var data = [];
for (var i = 0; i < value.length; i++) {
data.push(this.getDataByValue(value[i]));
}
return data;
};
/**
* Moves the given value(s) / selected value(s) upwards.
*
* @param { string[] | number[] | boolean[] } value - Specifies the value(s).
* @returns {void}
*/
ListBox.prototype.moveUp = function (value) {
var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();
this.moveUpDown(true, false, elem);
};
/**
* Moves the given value(s) / selected value(s) downwards.
*
* @param { string[] | number[] | boolean[] } value - Specifies the value(s).
* @returns {void}
*/
ListBox.prototype.moveDown = function (value) {
var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();
this.moveUpDown(false, false, elem);
};
/**
* Moves the given value(s) / selected value(s) in Top of the list.
*
* @param { string[] | number[] | boolean[] } value - Specifies the value(s).
* @returns {void}
*/
ListBox.prototype.moveTop = function (value) {
var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();
this.moveUpDown(null, false, elem, true);
};
/**
* Moves the given value(s) / selected value(s) in bottom of the list.
*
* @param { string[] | number[] | boolean[] } value - Specifies the value(s).
* @returns {void}
*/
ListBox.prototype.moveBottom = function (value) {
var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();
this.moveUpDown(true, false, elem, false, true);
};
/**
* Moves the given value(s) / selected value(s) to the given / default scoped ListBox.
*
* @param { string[] | number[] | boolean[] } value - Specifies the value or array value of the list item.
* @param {number} index - Specifies the index.
* @param {string} targetId - Specifies the target id.
* @returns {void}
*/
ListBox.prototype.moveTo = function (value, index, targetId) {
var elem = (value) ? this.getElemByValue(value) : this.getSelectedItems();
var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();
this.moveData(this, tlistbox, false, elem, index);
};
/**
* Moves all the values from one ListBox to the scoped ListBox.
*
* @param { string } targetId - Specifies the scoped ListBox ID.
* @param { string } index - Specifies the index to where the items moved.
* @returns {void}
*/
ListBox.prototype.moveAllTo = function (targetId, index) {
this.toolbarAction = 'moveAllTo';
if (this.listData.length > 0) {
var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();
this.moveAllData(this, tlistbox, false, index);
}
};
/* eslint-disable */
/**
* Gets the updated dataSource in ListBox.
*
* @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Updated DataSource.
*/
/* eslint-enable */
ListBox.prototype.getDataList = function () {
return this.jsonData;
};
/* eslint-disable */
/**
* Returns the sorted Data in ListBox.
*
* @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Sorted data
*/
/* eslint-enable */
ListBox.prototype.getSortedList = function () {
var sortData;
var tempData;
sortData = tempData = this.sortedData;
if (this.fields.groupBy) {
sortData = [];
for (var i = 0; i < tempData.length; i++) {
if (tempData[i].isHeader) {
continue;
}
sortData.push(tempData[i]);
}
}
return sortData;
};
ListBox.prototype.getElemByValue = function (value) {
var elem = [];
for (var i = 0; i < value.length; i++) {
elem.push(this.ulElement.querySelector('[data-value ="' + value[i] + '"]'));
}
return elem;
};
ListBox.prototype.updateLiCollection = function (index) {
var tempLi = [].slice.call(this.liCollections);
tempLi.splice(index, 1);
this.liCollections = tempLi;
};
ListBox.prototype.selectAllItems = function (state, event) {
var _this = this;
[].slice.call(this.getItems()).forEach(function (li) {
if (!li.classList.contains(cssClass.disabled)) {
if (_this.selectionSettings.showCheckbox) {
var ele = li.getElementsByClassName('e-check')[0];
if ((!ele && state) || (ele && !state)) {
_this.notify('updatelist', { li: li, module: 'listbox' });
if (_this.maximumSelectionLength >= _this.list.querySelectorAll('.e-list-item span.e-check').length) {
_this.checkMaxSelection();
}
}
}
else {
if (state) {
li.classList.add(cssClass.selected);
}
else {
li.classList.remove(cssClass.selected);
}
}
}
});
this.updateSelectedOptions();
if (this.allowFiltering && this.selectionSettings.showCheckbox) {
var liEle = this.list.getElementsByTagName('li');
var index = 0;
if (state) {
var _loop_1 = function () {
var dataValue1 = this_1.getFormattedValue(liEle[index].getAttribute('data-value'));
if (!this_1.value.some(function (e) { return e === dataValue1; })) {
this_1.value.push(this_1.getFormattedValue(liEle[index].getAttribute('data-value')));
}
};
var this_1 = this;
for (index = 0; index < liEle.length; index++) {
_loop_1();
}
}
else {
var _loop_2 = function () {
var dataValue2 = this_2.getFormattedValue(liEle[index].getAttribute('data-value'));
this_2.val