@hazyflame/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,125 lines • 106 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 @typescript-eslint/ban-types */
// 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 } 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, isBlazor, resetBlazorTemplate } 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';
var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
/**
* 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.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);
};
/**
* Build and render the component.
*
* @private
* @returns {void}
*/
ListBox.prototype.render = function () {
this.inputString = '';
this.initLoad = true;
this.isCustomFiltering = false;
this.initialSelectedOptions = this.value;
if (isBlazor() && this.isServerRendered) {
this.list = this.element.parentElement;
this.liCollections = this.list.querySelectorAll('.' + cssClass.li);
this.mainList = this.ulElement = this.list.querySelector('ul');
this.setSelection(this.value);
if (this.allowFiltering) {
this.setFiltering();
}
this.initToolbarAndStyles();
this.updateSelectionSettings();
this.wireEvents();
this.initDraggable();
this.initLoad = false;
}
else {
_super.prototype.render.call(this);
}
this.renderComplete();
};
ListBox.prototype.updateBlazorListData = function (data, isDataSource, select) {
if (isDataSource) {
this.liCollections = this.list.querySelectorAll('.' + cssClass.li);
this.mainList = this.ulElement = this.list.querySelector('ul');
if (this.allowDragAndDrop && !this.ulElement.classList.contains('e-sortable')) {
this.initDraggable();
}
if (select) {
this.selectItems(this.listData, false);
}
}
if (!isNullOrUndefined(data)) {
this.sortedData = this.jsonData = this.listData = data;
}
};
ListBox.prototype.initWrapper = function () {
var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
this.list.classList.add('e-listbox-wrapper');
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.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-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',
dragStart: 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) {
this.jsonData.push(item);
};
ListBox.prototype.initToolbar = function () {
var pos = this.toolbarSettings.position;
var prevScope = this.element.getAttribute('data-value');
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) {
_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.split(' '));
}
if (this.enableRtl) {
addClass([wrap], '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);
if (isBlazor() && this.isServerRendered && this.toolbarSettings.items.length) {
removeClass([this.list], 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);
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 searchEle;
if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {
if (isBlazor() && this.isServerRendered) {
searchEle = this.list.getElementsByClassName('e-filter-parent')[0];
}
else {
searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true);
}
}
if (list.length === 0) {
var noRecElem = ulElement.getElementsByClassName('e-list-nrt')[0];
if (noRecElem) {
ulElement.removeChild(noRecElem);
}
}
_super.prototype.onActionComplete.call(this, ulElement, list, e);
if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
this.list.insertBefore(searchEle, this.list.firstElementChild);
if (!isBlazor() && !this.isServerRendered) {
this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
this.filterWireEvents(searchEle);
}
}
this.initWrapper();
this.setSelection();
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) {
var filterElem = this.list.getElementsByClassName('e-input-filter')[0];
var txtLength = this.filterInput.value.length;
filterElem.selectionStart = txtLength;
filterElem.selectionEnd = txtLength;
filterElem.focus();
}
}
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;
args = extend(this.getDragArgs(args), { dragSelected: true });
if (Browser.isIos) {
this.list.style.overflow = 'hidden';
}
this.trigger('dragStart', args, function (dragEventArgs) {
_this.allowDragAll = dragEventArgs.dragSelected;
if (!_this.allowDragAll) {
badge = _this.ulElement.getElementsByClassName('e-list-badge')[0];
if (badge) {
detach(badge);
}
}
if (isBlazor()) {
args.bindEvents(args.dragElement);
}
});
};
ListBox.prototype.triggerDrag = function (args) {
this.trigger('drag', this.getDragArgs(args));
var listObj = this.getComponent(args.target);
if (listObj && listObj.listData.length === 0) {
var noRecElem = listObj.ulElement.getElementsByClassName('e-list-nrt')[0];
if (noRecElem) {
listObj.ulElement.removeChild(noRecElem);
}
}
};
ListBox.prototype.beforeDragEnd = function (args) {
var dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
if (this.value.indexOf(dragValue) > -1) {
args.items = this.getDataByValues(this.value);
}
else {
args.items = this.getDataByValues([dragValue]);
}
this.trigger('beforeDrop', args);
};
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 = '';
}
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]);
if (!isBlazor()) {
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];
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]);
if (!isBlazor()) {
liColl.splice(toIdx_1, 0, liColl.splice(idx, 1)[0]);
ul_1.insertBefore(_this.getItems()[_this.getIndexByValue(value)], ul_1.getElementsByClassName('e-placeholder')[0]);
}
}
else if (isBlazor()) {
var lists = [].slice.call(_this.ulElement.getElementsByClassName(cssClass.li));
var refChild = _this.ulElement.removeChild(lists[args.currentIndex]);
lists.splice(args.currentIndex, 1);
_this.ulElement.insertBefore(refChild, lists[args.previousIndex]);
}
});
}
this.listData = listData;
this.jsonData = jsonData;
this.sortedData = sortedData;
this.liCollections = liColl;
if (isBlazor()) {
var value_1 = this.value;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('UpdateListData', this.listData).then(function () {
_this.updateBlazorListData(null, true);
_this.selectItems(_this.listData, false);
_this.selectItems(value_1);
});
}
}
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];
var fListData_1 = [].slice.call(this.listData);
var fSortData_1 = [].slice.call(this.sortedData);
selectedOptions.forEach(function (value, index) {
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);
if (!isBlazor()) {
liColl.splice(destIdx, 0, fLiColl_1.splice(srcIdx, 1)[0]);
}
if (!value) {
var liCollElem = _this.getItems();
for (var i = 0; i < liCollElem.length; i++) {
if (liCollElem[i].getAttribute('data-value') === null && liCollElem[i].classList.contains('e-list-item')) {
li_1 = liCollElem[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]);
if (isBlazor()) {
if (index === 0) {
_this.ulElement.insertBefore(ul_2.getElementsByClassName(cssClass.li)[args.currentIndex], _this.ulElement.getElementsByClassName(cssClass.li)[args.previousIndex]);
}
}
else {
ul_2.insertBefore(li_1, ul_2.getElementsByClassName('e-placeholder')[0]);
}
currIdx_1++;
});
if (isBlazor()) {
/* eslint-disable */
this.interopAdaptor.invokeMethodAsync('UpdateListData', this.listData).then(function () {
_this.updateSelectedOptions();
if (_this.fields.groupBy) {
_this.setSelection();
}
_this.updateBlazorListData(null, true, _this.value == null || !_this.value.length);
});
listObj.interopAdaptor.invokeMethodAsync('UpdateListData', listData).then(function () {
if (listObj.sortOrder !== 'None' || _this.selectionSettings.showCheckbox
!== listObj.selectionSettings.showCheckbox || listObj.fields.groupBy) {
listObj.setSelection();
}
listObj.updateBlazorListData(null, true, listObj.value == null || !listObj.value.length);
});
/* eslint-enable */
}
else {
if (this.fields.groupBy) {
this.ulElement.innerHTML = this.renderItems(this.listData, this.fields).innerHTML;
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');
ul_2.innerHTML = listObj.renderItems(listData, listObj.fields).innerHTML;
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);
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 });
}
this.trigger('drop', dragArgs);
};
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;
};
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;
if (isBlazor() && typeof (item) === 'object') {
text = getValue(isValue ? _this.fields.value : _this.fields.text, item);
if (isNullOrUndefined(text)) {
return;
}
}
else {
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');
}
});
};
/**
* 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; }
this.setSelection(items, state, !isValue);
this.updateSelectedOptions();
};
/**
* 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);
};
/**
* 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 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 = void 0;
var dupData = [];
var itemIdx = void 0;
extend(dupData, [], this.listData);
var removeIdxes = [];
var removeLiIdxes = [];
for (var j = 0; j < items.length; j++) {
if (items[j] instanceof Object) {
dataValue = getValue(fields.value, items[j]);
}
else {
dataValue = items[j].toString();
}
for (var i = 0, len = dupData.length; i < len; i++) {
if (dupData[i] instanceof Object) {
objValue = getValue(fields.value, dupData[i]);
}
else {
objValue = dupData[i].toString();
}
if (objValue === dataValue) {
itemIdx = this.getIndexByValue(dataValue);
liCollections.push(liElement[itemIdx]);
removeIdxes.push(i);
removeLiIdxes.push(itemIdx);
}
}
}
for (var k = removeIdxes.length - 1; k >= 0; k--) {
this.listData.splice(removeIdxes[k], 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.updateLiCollection(itemIndex);
}
for (var i = 0; i < liCollections.length; i++) {
this.ulElement.removeChild(liCollections[i]);
}
if (this.listData.length === 0) {
this.l10nUpdate();
}
};
/**
* 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) 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) {
if (this.listData.length > 0) {
var tlistbox = (targetId) ? getComponent(targetId, ListBox_1) : this.getScopedListBox();
this.moveAllData(this, tlistbox, false, index);
}
};
// eslint-disable-next-line valid-jsdoc
/**
* Gets the updated dataSource in ListBox.
*
* @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Updated DataSource.
*/
ListBox.prototype.getDataList = function () {
return this.jsonData;
};
// eslint-disable-next-line valid-jsdoc
/**
* Returns the sorted Data in ListBox.
*
* @returns {{ [key: string]: Object }[] | string[] | boolean[] | number[]} - Sorted data
*/
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.value = this_2.value.filter(function (e) { return e !== dataValue2; });
};
var this_2 = this;
for (index = 0; index < liEle.length; index++) {
_loop_2();
}
}
if (document.querySelectorAll('ul').length < 2) {
this.updateMainList();
}
}
this.triggerChange(this.getSelectedItems(), event);
};
ListBox.prototype.updateMainList = function () {
var mainList = this.mainList.querySelectorAll('.e-list-item');
var ulList = this.ulElement.querySelectorAll('.e-list-item');
var mainCount = mainList.length;
var ulEleCount = ulList.length;
if (this.selectionSettings.showCheckbox || (document.querySelectorAll('ul').length > 1 || mainCount !== ulEleCount)) {
var listindex = 0;
var valueindex = 0;
var count = 0;
for (listindex; listindex < mainCount;) {
if (this.value) {
for (valueindex; valueindex < this.value.length; valueindex++) {
if (mainList[listindex].getAttribute('data-value') === this.value[valueindex]) {
count++;
}
}
}
if (!count && this.selectionSettings.showCheckbox) {
mainList[listindex].getElementsByClassName('e-frame')[0].classList.remove('e-check');
}
if (document.querySelectorAll('ul').length > 1 && count && mainCount !== ulEleCount) {
this.mainList.removeChild(this.mainList.getElementsByTagName('li')[listindex]);
listindex = 0;
}
else {
listindex++;
}
count = 0;
valueindex = 0;
}
}
};
ListBox.prototype.wireEvents = function () {
var form = closest(this.element, 'form');
var wrapper = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;
EventHandler.add(this.list, 'click', this.clickHandler, this);
EventHandler.add(wrapper, 'keydown', this.keyDownHandler, this);
EventHandler.add(wrapper, 'focusout', this.focusOutHandler, this);
this.wireToolbarEvent();
if (this.selectionSettings.showCheckbox) {
EventHandler.remove(document, 'mousedown', this.checkBoxSelectionModule.onDocumentClick);
}
if (this.fields.groupBy || this.element.querySelector('select>optgroup')) {
EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
}
if (form) {
EventHandler.add(form, 'reset', this.formResetHandler, this);
}
};
ListBox.prototype.wireToolbarEvent = function () {
if (this.toolbarSettings.items.length) {
EventHandler.add(this.getToolElem(), 'click', this.toolbarClickHandler, this);
}
};
ListBox.prototype.unwireEvents = function () {
var form = closest(this.element, 'form');
var wrapper = this.element.tagName === 'EJS-LISTBOX' ? this.element : this.list;
EventHandler.remove(this.list, 'click', this.clickHandler);
EventHandler.remove(wrapper, 'keydown', this.keyDownHandler);
EventHandler.remove(wrapper, 'focusout', this.focusOutHandler);
if (this.allowFiltering && this.clearFilterIconElem) {
EventHandler.remove(this.clearFilterIconElem, 'click', this.clearText);
}
if (this.toolbarSettings.items.length) {
EventHandler.remove(this.getToolElem(), 'click', this.toolbarClickHandler);
}
if (form) {
EventHandler.remove(form, 'reset', this.formResetHandler);
}
};
ListBox.prototype.clickHandler = function (e) {
this.selectHandler(e);
};
ListBox.prototype.checkSelectAll = function () {
var searchCount = 0;
var liItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);
for (var i = 0; i < liItems.length; i++) {
if (!liItems[i].classList.contains('e-disabled')) {
searchCount++;
}
}
var len = this.getSelectedItems().length;
if (this.showSelectAll && searchCount) {
this.notify('checkSelectAll', { module: 'CheckBoxSelection',
value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });
}
};
ListBox.prototype.getQuery = function (query) {
var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
if (this.allowFiltering) {
var filterType = this.inputString === '' ? 'contains' : this.filterType;
var dataType = this.typeOfData(this.dataSource).typeof;
if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
}
else {
var fields = (this.fields.text) ? this.fields.text : '';
filterQuery.where(fields, filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
}
}
else {
filterQuery = query ? query : this.query ? this.query : new Query();
}
return filterQuery;
};
ListBox.prototype.setFiltering = function () {
var filterI