@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
932 lines (928 loc) • 1.17 MB
JavaScript
import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, Property, ChildProperty, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, Component, classList, closest, KeyboardEvents, attributes, isUndefined, formatUnit, Animation, getUniqueID, remove, SanitizeHtmlHelper, setValue, matches as matches$1, createElement, getComponent } from '@syncfusion/ej2-base';
import { DataManager, Query, DataUtil, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';
import { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';
import { Skeleton } from '@syncfusion/ej2-notifications';
import { hideSpinner, createSpinner, showSpinner, isCollide, Popup, getZindexPartial } from '@syncfusion/ej2-popups';
import { Input, TextBox } from '@syncfusion/ej2-inputs';
import { createCheckBox, Button } from '@syncfusion/ej2-buttons';
import { TreeView } from '@syncfusion/ej2-navigations';
/**
* IncrementalSearch module file
*/
var queryString = '';
var prevString = '';
var tempQueryString = '';
var matches = [];
var activeClass = 'e-active';
var prevElementId = '';
/**
* Search and focus the list item based on key code matches with list text content.
*
* @param {number} keyCode - Specifies the key code which pressed on keyboard events.
* @param {HTMLElement[]} items - Specifies an array of HTMLElement, from which matches find has done.
* @param {number} selectedIndex - Specifies the selected item in list item, so that search will happen after selected item otherwise it will do from initial.
* @param {boolean} ignoreCase - Specifies the case consideration when search has done.
* @param {string} elementId - Specifies the list element ID.
* @param {boolean} [queryStringUpdated] - Optional parameter.
* @param {string} [currentValue] - Optional parameter.
* @param {boolean} [isVirtual] - Optional parameter.
* @param {boolean} [refresh] - Optional parameter.
* @returns {Element} Returns list item based on key code matches with list text content.
*/
function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, queryStringUpdated, currentValue, isVirtual, refresh) {
if (!queryStringUpdated || queryString === '') {
if (tempQueryString !== '') {
queryString = tempQueryString + String.fromCharCode(keyCode);
tempQueryString = '';
}
else {
queryString += String.fromCharCode(keyCode);
}
}
else if (queryString === prevString) {
tempQueryString = String.fromCharCode(keyCode);
}
if (isVirtual) {
setTimeout(function () {
tempQueryString = '';
}, 700);
setTimeout(function () {
queryString = '';
}, 3000);
}
else {
setTimeout(function () {
queryString = '';
}, 1000);
}
var index;
queryString = ignoreCase ? queryString.toLowerCase() : queryString;
if (prevElementId === elementId && prevString === queryString && !refresh) {
for (var i = 0; i < matches.length; i++) {
if (matches[i].classList.contains(activeClass)) {
index = i;
break;
}
if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
index = i;
break;
}
}
index = index + 1;
if (isVirtual) {
return matches[index] && matches.length - 1 !== index ? matches[index] : matches[matches.length];
}
return matches[index] ? matches[index] : matches[0];
}
else {
var listItems = items;
var strLength = queryString.length;
var text = void 0;
var item = void 0;
selectedIndex = selectedIndex ? selectedIndex + 1 : 0;
var i = selectedIndex;
matches = [];
do {
if (i === listItems.length) {
i = -1;
}
if (i === -1) {
index = 0;
}
else {
index = i;
}
item = listItems[index];
text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;
if (text.substr(0, strLength) === queryString) {
matches.push(listItems[index]);
}
i++;
} while (i !== selectedIndex);
prevString = queryString;
prevElementId = elementId;
if (isVirtual) {
var indexUpdated = false;
for (var i_1 = 0; i_1 < matches.length; i_1++) {
if (currentValue && matches[i_1].textContent.toLowerCase() === currentValue.toLowerCase()) {
index = i_1;
indexUpdated = true;
break;
}
}
if (currentValue && indexUpdated) {
index = index + 1;
}
return matches[index] ? matches[index] : matches[0];
}
return matches[0];
}
}
// eslint-disable-next-line valid-jsdoc
/**
* Search the list item based on given input value matches with search type.
*
* @param {string} inputVal - Specifies the given input value.
* @param {HTMLElement[]} items - Specifies the list items.
* @param {SearchType} searchType - Specifies the filter type.
* @param {boolean} [ignoreCase=true] - Specifies the case sensitive option for search operation.
* @param {(string | number | boolean | { [key: string]: Object })[]} [dataSource] - Specifies the data source.
* @param {{ text: string, value: string }} [fields] - Specifies the fields.
* @param {string} [type] - Specifies the type.
* @returns {{ item: Element | null, index: number | null }} Returns the search matched items.
*/
function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type, ignoreAccent) {
var listItems = items;
ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
var itemData = { item: null, index: null };
if (inputVal && inputVal.length && items) {
var strLength = inputVal.length;
var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
queryStr = escapeCharRegExp(queryStr);
var _loop_1 = function (i, itemsData) {
var item = itemsData[i];
var filterValue;
if (items && dataSource) {
var checkField_1 = item;
var fieldValue_1 = fields.text.split('.');
dataSource.filter(function (data) {
Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
/* eslint-disable security/detect-object-injection */
if ((type === 'object' && !data.isHeader && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && data[fields.value] != null && checkField_1.getAttribute('data-value') === data[fields.value].toString()) ||
(type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1)) {
filterValue = type === 'object' ? data[value] : data;
}
});
});
}
var text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
/* eslint-disable security/detect-non-literal-regexp */
if (ignoreAccent && text && queryStr) {
text = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
queryStr = queryStr.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, 'g').test(text))) {
itemData.item = item;
itemData.index = i;
return { value: { item: item, index: i } };
}
};
for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
var state_1 = _loop_1(i, itemsData);
if (typeof state_1 === "object")
return state_1.value;
}
return itemData;
/* eslint-enable security/detect-non-literal-regexp */
}
return itemData;
}
/**
* @param {string} value - The value to escape.
* @returns {string} Returns the escaped string.
*/
function escapeCharRegExp(value) {
return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
/**
* @param {string} elementId - The ID of the list element.
* @returns {void}
*/
function resetIncrementalSearchValues(elementId) {
if (prevElementId === elementId) {
prevElementId = '';
prevString = '';
queryString = '';
matches = [];
}
}
/**
* Function helps to find which highlightSearch is to call based on your data.
*
* @param {HTMLElement} element - Specifies an li element.
* @param {string} query - Specifies the string to be highlighted.
* @param {boolean} ignoreCase - Specifies the ignoreCase option.
* @param {HightLightType} type - Specifies the type of highlight.
* @returns {void}
*/
function highlightSearch(element, query, ignoreCase, type) {
var isHtmlElement = /<[^>]*>/g.test(element.innerText);
if (isHtmlElement) {
element.innerText = element.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
}
if (query === '') {
return;
}
else {
var ignoreRegex = ignoreCase ? 'gim' : 'gm';
// eslint-disable-next-line
query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?
'(' + query + ')$' : '(' + query + ')';
// eslint-disable-next-line security/detect-non-literal-regexp
findTextNode(element, new RegExp(replaceQuery, ignoreRegex));
}
}
/* eslint-enable jsdoc/require-param, valid-jsdoc */
/**
*
* @param {HTMLElement} element - Specifies the element.
* @param {RegExp} pattern - Specifies the regex to match the searched text.
* @returns {void}
*/
function findTextNode(element, pattern) {
for (var index = 0; element.childNodes && (index < element.childNodes.length); index++) {
if (element.childNodes[index].nodeType === 3 && element.childNodes[index].textContent.trim() !== '') {
var value = element.childNodes[index].nodeValue.trim().replace(pattern, '<span class="e-highlight">$1</span>');
element.childNodes[index].nodeValue = '';
element.innerHTML = element.innerHTML.trim() + value;
break;
}
else {
findTextNode(element.childNodes[index], pattern);
}
}
}
/**
* Function helps to remove highlighted element based on your data.
*
* @param {HTMLElement} content - Specifies an content element.
* @returns {void}
*/
function revertHighlightSearch(content) {
var contentElement = content.querySelectorAll('.e-highlight');
for (var i = contentElement.length - 1; i >= 0; i--) {
var parent_1 = contentElement[i].parentNode;
var text = document.createTextNode(contentElement[i].textContent);
parent_1.replaceChild(text, contentElement[i]);
}
}
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var VirtualScroll = /** @__PURE__ @class */ (function () {
function VirtualScroll(parent) {
var _this = this;
this.sentinelInfo = {
'up': {
check: function (rect, info) {
var top = rect.top - _this.containerElementRect.top;
info.entered = top >= 0;
return top + (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2) >= 0;
},
axis: 'Y'
},
'down': {
check: function (rect, info) {
var top = rect.bottom;
info.entered = rect.bottom <= _this.containerElementRect.bottom;
return top - (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2)
<= _this.parent.listItemHeight * _this.parent.virtualItemCount / 2;
}, axis: 'Y'
}
};
this.parent = parent;
this.removeEventListener();
this.addEventListener();
}
VirtualScroll.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.on('observe', this.observe, this);
this.parent.on('setGeneratedData', this.setGeneratedData, this);
this.parent.on('dataProcessAsync', this.dataProcessAsync, this);
this.parent.on('setCurrentViewDataAsync', this.setCurrentViewDataAsync, this);
this.parent.on('bindScrollEvent', this.bindScrollEvent, this);
};
VirtualScroll.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off('observe', this.observe);
this.parent.off('setGeneratedData', this.setGeneratedData);
this.parent.off('dataProcessAsync', this.dataProcessAsync);
this.parent.off('setCurrentViewDataAsync', this.setCurrentViewDataAsync);
this.parent.off('bindScrollEvent', this.bindScrollEvent);
};
VirtualScroll.prototype.bindScrollEvent = function (component) {
var _this = this;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.component = component.component;
this.observe(function (scrollArgs) { return _this.scrollListener(scrollArgs); });
};
VirtualScroll.prototype.observe = function (callback) {
this.containerElementRect = this.parent.popupContentElement.getBoundingClientRect();
EventHandler.add(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler, this);
this.touchModule = new Touch(this.parent.popupContentElement, {
scroll: this.popupScrollHandler.bind(this)
});
EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);
};
VirtualScroll.prototype.getModuleName = function () {
return 'VirtualScroll';
};
VirtualScroll.prototype.popupScrollHandler = function () {
this.parent.isMouseScrollAction = true;
this.parent.isPreventScrollAction = false;
};
VirtualScroll.prototype.getPageQuery = function (query, virtualStartIndex, virtualEndIndex) {
if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
query = query.skip(virtualStartIndex);
}
return query;
};
VirtualScroll.prototype.setGeneratedData = function (qStartIndex, recentlyGeneratedData) {
var loopIteration = 0;
var endIndex = this.parent.listData.length + this.parent.virtualItemStartIndex;
for (var i = this.parent.virtualItemStartIndex; i < endIndex; i++) {
var alreadyAddedData = this.parent.generatedDataObject[i];
if (!alreadyAddedData) {
if (recentlyGeneratedData !== null && this.parent.listData.slice(loopIteration, loopIteration + 1).length > 0) {
var slicedData = this.parent.listData.slice(loopIteration, loopIteration + 1);
if (slicedData.length > 0) {
// Safely assign slicedData to this.parent.generatedDataObject[i]
this.parent.generatedDataObject[i] = slicedData;
}
}
}
loopIteration++;
}
};
VirtualScroll.prototype.generateAndExecuteQueryAsync = function (query, virtualItemStartIndex, virtualItemEndIndex, isQueryGenerated) {
if (virtualItemStartIndex === void 0) { virtualItemStartIndex = 0; }
if (virtualItemEndIndex === void 0) { virtualItemEndIndex = 0; }
if (isQueryGenerated === void 0) { isQueryGenerated = false; }
var dataSource = this.parent.dataSource;
if (!isQueryGenerated) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (!isNullOrUndefined(this.parent.query)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
}
else {
query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
}
}
var tempCustomFilter = this.parent.isCustomFilter;
if (this.component === 'combobox') {
var totalData = 0;
if (this.parent.dataSource instanceof DataManager) {
totalData = this.parent.remoteDataCount;
}
else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
totalData = this.parent.dataSource.length;
}
if (totalData > 0) {
this.parent.isCustomFilter = (totalData === this.parent.totalItemCount &&
this.parent.queryString !== this.parent.typedString) ? true : this.parent.isCustomFilter;
}
}
this.parent.resetList(dataSource, this.parent.fields, query);
this.parent.isCustomFilter = tempCustomFilter;
};
VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {
query.queries = query.queries.filter(function (event) {
return event.fn !== 'onSkip' && event.fn !== 'onTake';
});
return query;
};
VirtualScroll.prototype.setCurrentViewDataAsync = function (component) {
// eslint-disable-next-line
var currentData = [];
var isResetListCalled = false;
var isListUpdated = true;
if (isNullOrUndefined(this.component)) {
this.component = component.component;
}
var endIndex = this.parent.viewPortInfo.endIndex;
if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder && this.parent.targetElement().trim() === '') {
if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
if (this.parent.viewPortInfo.startIndex === 0) {
var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
if (oldUlElement) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
}
this.parent.updateVirtualReOrderList(true);
if (this.parent.value.length < this.parent.itemCount && this.parent.value.length !== this.parent.totalItemCount) {
var oldUlElement_1 = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
if (oldUlElement_1) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement_1);
}
var query = this.parent.getForQuery(this.parent.value).clone();
query = query.skip(0)
.take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
this.parent.appendUncheckList = true;
this.parent.setCurrentView = false;
this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
isListUpdated = false;
this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ?
this.parent.appendUncheckList : false;
isListUpdated = false;
}
else {
var oldUlElement_2 = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
if (oldUlElement_2) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement_2);
}
}
isListUpdated = false;
}
else if (this.parent.viewPortInfo.startIndex !== 0) {
this.parent.updateVirtualReOrderList(true);
var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
if (oldUlElement) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
}
isListUpdated = false;
}
if (this.parent.viewPortInfo.startIndex !== 0 &&
this.parent.viewPortInfo.startIndex - this.parent.value.length !== this.parent.itemCount &&
(this.parent.viewPortInfo.startIndex + this.parent.itemCount > this.parent.value.length)) {
var query = this.parent.getForQuery(this.parent.value).clone();
query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
this.parent.appendUncheckList = true;
this.parent.setCurrentView = false;
var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
if (oldUlElement) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
}
this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
isListUpdated = false;
this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
}
}
else {
var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
}
var query = this.parent.getForQuery(this.parent.value).clone(); // Assuming query is of type any
var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0
? this.parent.viewPortInfo.startIndex - this.parent.value.length
: 0;
query = query.skip(skipvalue);
this.parent.setCurrentView = false;
this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
isListUpdated = false;
}
this.parent.totalItemsCount();
}
if (isListUpdated) {
for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
var index = i;
if (this.component === 'multiselect' && this.parent.mode === 'CheckBox') {
var oldUlElement = this.parent.list.querySelector('.e-list-parent' + '.e-reorder');
if (oldUlElement) {
this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var alreadyAddedData = this.parent.generatedDataObject[index];
if (this.component === 'multiselect' && this.parent.hideSelectedItem) {
if (alreadyAddedData) {
var value = getValue(this.parent.fields.value, alreadyAddedData[0]);
if (this.parent.value &&
value !== null &&
Array.isArray(this.parent.value) &&
this.parent.value.length > 0 &&
this.parent.value.indexOf(value) < 0) {
var query = this.parent.getForQuery(this.parent.value).clone();
if (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount + this.parent.value.length &&
this.parent.hideSelectedItem) {
query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
}
else {
query = query.skip(this.parent.viewPortInfo.startIndex);
}
this.parent.setCurrentView = false;
this.parent.isPreventScrollAction = true;
this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
isResetListCalled = true;
break;
}
else if (this.parent.value === null || (this.parent.value && this.parent.value.length === 0)) {
currentData.push(alreadyAddedData[0]);
}
}
if (index === endIndex - 1) {
if (currentData.length !== this.parent.itemCount) {
if (this.parent.hideSelectedItem) {
var query = this.parent.value && this.parent.value.length > 0 ?
this.parent.getForQuery(this.parent.value).clone() : new Query;
if (this.parent.value && (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount +
this.parent.value.length) && this.parent.hideSelectedItem) {
query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
}
else {
query = query.skip(this.parent.viewPortInfo.startIndex);
}
this.parent.setCurrentView = false;
this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
isResetListCalled = true;
}
}
}
}
else {
if (alreadyAddedData) {
currentData.push(alreadyAddedData[0]);
}
}
this.parent.setCurrentView = false;
}
}
if (!isResetListCalled && isListUpdated) {
if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex === 0 && this.parent.virtualCustomData) {
currentData.splice(0, 0, this.parent.virtualCustomData);
}
var totalData = [];
if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex === this.parent.totalItemCount) {
if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {
totalData = currentData.concat(this.parent.virtualCustomSelectData);
currentData = totalData;
}
}
this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
this.parent.updateSelectionList();
}
if (this.component === 'multiselect') {
this.parent.updatevirtualizationList();
this.parent.checkMaxSelection();
}
this.parent.getSkeletonCount();
this.parent.skeletonCount = this.parent.totalItemCount !== 0 && this.parent.totalItemCount < this.parent.itemCount * 2 &&
((!(this.parent.dataSource instanceof DataManager)) || ((this.parent.dataSource instanceof DataManager) &&
(this.parent.totalItemCount <= this.parent.itemCount))) ? 0 : this.parent.skeletonCount;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
var preventAction = this.component !== 'multiselect' || (this.component === 'multiselect' && ((!(this.parent.dataSource instanceof DataManager))) || (this.parent.dataSource instanceof DataManager && !isResetListCalled));
if (virtualTrackElement && preventAction) {
virtualTrackElement.style = this.parent.GetVirtualTrackHeight();
}
else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
var virualElement = this.parent.createElement('div', {
id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()
});
this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
}
if (this.component !== 'multiselect' || (this.component === 'multiselect' && ((!(this.parent.dataSource instanceof DataManager))) || (this.parent.dataSource instanceof DataManager && (!isResetListCalled || this.parent.viewPortInfo.startIndex === 0)))) {
this.parent.UpdateSkeleton();
}
this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0];
if (virtualContentElement && preventAction) {
(virtualContentElement).style = this.parent.getTransformValues();
}
if (this.parent.fields.groupBy) {
this.parent.scrollStop();
}
if (this.parent.keyCode === 40 &&
this.parent.isScrollChanged &&
this.parent.hideSelectedItem &&
!isNullOrUndefined(this.parent.currentFocuedListElement)) {
var currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));
this.parent.addListFocus(currentSelectElem);
this.parent.isScrollChanged = false;
}
};
VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
var isStartIndexInitialised = false;
var queryStartIndex = 0;
var queryEndIndex = 0;
var vEndIndex = this.parent.viewPortInfo.endIndex;
if (!isPopupOpen && vEndIndex !== 0) {
for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
if (!(i in this.parent.generatedDataObject)) {
if (!isStartIndexInitialised) {
isStartIndexInitialised = true;
queryStartIndex = queryEndIndex = i;
}
else {
queryEndIndex = i === vEndIndex ? i : i + 1;
}
}
}
}
if (isStartIndexInitialised &&
!(this.parent.totalItemCount === queryStartIndex &&
this.parent.totalItemCount === queryEndIndex)) {
this.parent.virtualItemStartIndex = queryStartIndex;
this.parent.virtualItemEndIndex = queryEndIndex;
this.parent.setCurrentView = true;
this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
if (this.component === 'multiselect' &&
this.parent.hideSelectedItem &&
this.parent.value &&
Array.isArray(this.parent.value) &&
this.parent.value.length > 0) {
this.parent.totalItemsCount();
}
if (this.component === 'multiselect' &&
this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {
this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
}
}
if (!(this.parent.dataSource instanceof DataManager) ||
(this.parent.dataSource instanceof DataManager &&
!this.parent.isRequesting)) {
this.setCurrentViewDataAsync();
}
};
VirtualScroll.prototype.dataProcessAsync = function (isOpenPopup) {
this.parent.selectedValueInfo = null;
this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
this.generateQueryAndSetQueryIndexAsync(new Query(), isOpenPopup);
};
VirtualScroll.prototype.virtualScrollRefreshAsync = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.parent.isCustomFilter = (!(this.parent.isTyped || (this.component === 'combobox' && this.parent.allowFiltering && this.parent.queryString !== this.parent.typedString) || (!isNullOrUndefined(this.parent.filterInput) && !isNullOrUndefined(this.parent.filterInput.value) && this.parent.filterInput.value !== '') && this.component !== 'combobox') && !(this.component === 'autocomplete' && this.parent.value != null)) || this.parent.isCustomFilter;
if (this.parent.allowFiltering || this.component === 'autocomplete') {
if (!isNullOrUndefined(this.parent.typedString) && !(this.component === 'combobox' && !isNullOrUndefined(this.parent.typedString) && this.parent.allowFiltering)) {
if (this.parent.viewPortInfo.endIndex >= this.parent.dataCount) {
this.parent.viewPortInfo.endIndex = this.parent.dataCount;
}
if (this.parent.viewPortInfo.startIndex >= this.parent.dataCount) {
this.parent.viewPortInfo.startIndex = this.parent.dataCount - this.parent.itemCount;
}
}
else {
this.parent.getSkeletonCount(true);
if (this.component === 'combobox') {
this.parent.skeletonCount = this.parent.totalItemCount !== 0 &&
this.parent.totalItemCount < (this.parent.itemCount * 2) && ((!(this.parent.dataSource instanceof DataManager)) ||
((this.parent.dataSource instanceof DataManager) && (this.parent.totalItemCount <= this.parent.itemCount))) ?
0 : this.parent.skeletonCount;
}
}
}
return [4 /*yield*/, this.dataProcessAsync()];
case 1:
_a.sent();
if (this.parent.keyboardEvent != null &&
(!(this.parent.dataSource instanceof DataManager) ||
(this.parent.dataSource instanceof DataManager &&
!this.parent.isRequesting))) {
this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
}
if (!this.parent.customFilterQuery) {
this.parent.isCustomFilter = false;
}
return [2 /*return*/];
}
});
});
};
VirtualScroll.prototype.scrollListener = function (scrollArgs) {
var _this = this;
if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
this.parent.preventSetCurrentData = false;
var info = scrollArgs.sentinel;
var pStartIndex = this.parent.previousStartIndex;
this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
this.parent.isUpwardScrolling = false;
if (this.parent.previousStartIndex !== pStartIndex && !this.parent.isKeyBoardAction) {
this.parent.isScrollActionTriggered = false;
this.parent.currentPageNumber = this.parent.viewPortInfo.currentPageNumber;
this.parent.virtualListInfo = __assign({}, this.parent.viewPortInfo);
this.parent.isPreventKeyAction = true;
this.parent.isVirtualScrolling = true;
setTimeout(function () {
_this.parent.pageCount = _this.parent.getPageCount();
_this.parent.isRequesting = false;
_this.virtualScrollRefreshAsync().then(function () {
if (_this.parent.popupObj) {
_this.parent.list = _this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');
_this.parent.updateSelectionList();
_this.parent.liCollections = _this.parent.getItems();
}
_this.parent.isKeyBoardAction = false;
_this.parent.isVirtualScrolling = false;
_this.parent.isPreventKeyAction = false;
});
}, 5);
}
else if (this.parent.isScrollActionTriggered) {
this.parent.isPreventKeyAction = false;
this.parent.isScrollActionTriggered = false;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.parent.getTransformValues();
}
this.parent.previousInfo = this.parent.viewPortInfo;
}
};
VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {
var infoType = {
direction: direction, sentinelInfo: info, offsets: e,
startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
};
var vHeight = this.parent.popupContentElement ?
this.parent.popupContentElement.getBoundingClientRect().height : 0;
//Row Start and End Index calculation
var rowHeight = this.parent.listItemHeight;
var exactTopIndex = e.top / rowHeight;
var infoViewIndices = vHeight / rowHeight;
var exactEndIndex = exactTopIndex + infoViewIndices;
var pageSizeBy4 = this.parent.virtualItemCount / 4;
var totalItemCount = this.parent.totalItemCount;
if (infoType.direction === 'down') {
var sIndex = Math.round(exactEndIndex) - Math.round((pageSizeBy4));
if (isNullOrUndefined(infoType.startIndex) || (exactEndIndex >
(infoType.startIndex + Math.round((this.parent.virtualItemCount / 2 + pageSizeBy4)))
&& infoType.endIndex !== totalItemCount)) {
infoType.startIndex = sIndex >= 0 ? Math.round(sIndex) : 0;
infoType.startIndex = infoType.startIndex > exactTopIndex ? Math.floor(exactTopIndex) : infoType.startIndex;
var eIndex = infoType.startIndex + this.parent.virtualItemCount;
infoType.startIndex = eIndex < exactEndIndex ? (Math.ceil(exactEndIndex) - this.parent.virtualItemCount)
: infoType.startIndex;
infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
infoType.startIndex = eIndex >= totalItemCount
? (infoType.endIndex - this.parent.virtualItemCount > 0
? infoType.endIndex - this.parent.virtualItemCount
: 0)
: infoType.startIndex;
infoType.currentPageNumber = Math.ceil(infoType.endIndex / this.parent.virtualItemCount);
}
}
else if (infoType.direction === 'up') {
if ((infoType.startIndex && infoType.endIndex) || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {
var loadAtIndex = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);
if (exactTopIndex < loadAtIndex || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {
var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
(infoViewIndices + infoViewIndices / 4);
var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
infoType.endIndex = (eIndex < totalItemCount) ? eIndex : totalItemCount;
var sIndex = infoType.endIndex - this.parent.virtualItemCount;
infoType.startIndex = sIndex > 0 ? sIndex : 0;
infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
infoType.currentPageNumber = Math.ceil(infoType.startIndex / this.parent.virtualItemCount);
}
}
}
if (!isscrollAction) {
this.parent.previousStartIndex = infoType.startIndex;
this.parent.startIndex = infoType.startIndex;
this.parent.previousEndIndex = infoType.endIndex;
}
else {
this.parent.scrollPreStartIndex = infoType.startIndex;
}
return infoType;
};
VirtualScroll.prototype.virtualScrollHandler = function (callback) {
var _this = this;
var delay = Browser.info.name === 'chrome' ? 200 : 100;
var prevTop = 0;
var debounced100 = debounce(callback, delay);
var debounced50 = debounce(callback, 50);
return function (e) {
var top = e.target.scrollTop;
var left = e.target.scrollLeft;
var direction = prevTop < top && !_this.parent.isUpwardScrolling ? 'down' : 'up';
prevTop = top;
var current = _this.sentinelInfo[direction];
var pstartIndex = _this.parent.scrollPreStartIndex;
var scrollOffsetargs = {
top: top,
left: left
};
if (_this.parent.list && _this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
_this.getInfoFromView(direction, current, scrollOffsetargs, true);
if (_this.parent.scrollPreStartIndex !== pstartIndex && !_this.parent.isPreventScrollAction) {
_this.parent.isScrollActionTriggered = true;
var virtualPoup = (_this.parent.list.querySelector('.e-virtual-ddl-content'));
virtualPoup.style.transform = 'translate(0px,' + top + 'px)';
}
}
var debounceFunction = debounced100;
if (current.axis === 'X') {
debounceFunction = debounced50;
}
debounceFunction({ direction: direction, sentinel: current, offset: { top: top, left: left },
focusElement: document.activeElement });
};
};
VirtualScroll.prototype.destroy = function () {
this.removeEventListener();
};
return VirtualScroll;
}());
var __extends = (undefined && undefined.__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 = (undefined && undefined.__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;
};
var FieldSettings = /** @__PURE__ @class */ (function (_super) {
__extends(FieldSettings, _super);
function FieldSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], FieldSettings.prototype, "text", void 0);
__decorate([
Property()
], FieldSettings.prototype, "value", void 0);
__decorate([
Property()
], FieldSettings.prototype, "iconCss", void 0);
__decorate([
Property()
], FieldSettings.prototype, "groupBy", void 0);
__decorate([
Property()
], FieldSettings.prototype, "htmlAttributes", void 0);
__decorate([
Property()
], FieldSettings.prototype, "disabled", void 0);
return FieldSettings;
}(ChildProperty));
var dropDownBaseClasses = {
root: 'e-dropdownbase',
rtl: 'e-rtl',
content: 'e-content',
selected: 'e-active',
hover: 'e-hover',
noData: 'e-nodata',
fixedHead: 'e-fixed-head',
focus: 'e-item-focus',
li: 'e-list-item',
group: 'e-list-group-item',
disabled: 'e-disabled',
grouping: 'e-dd-group',
virtualList: 'e-list-item e-virtual-list'
};
var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
var SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
var VALUETEMPLATE_PROPERTY = 'ValueTemplate';
var GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
var FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';
var NORECORDSTEMPLATE_P