@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
976 lines • 101 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;
};
import { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';
import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';
import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
import { ListBase } from '@syncfusion/ej2-lists';
import { select, selectAll } from '@syncfusion/ej2-base';
import { Skeleton } from '@syncfusion/ej2-notifications';
var FieldSettings = /** @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));
export { FieldSettings };
export 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_PROPERTY = 'NoRecordsTemplate';
var ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';
var HIDE_GROUPLIST = 'e-hide-group-header';
/**
* DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
*/
var DropDownBase = /** @class */ (function (_super) {
__extends(DropDownBase, _super);
/**
* * Constructor for DropDownBase class
*
* @param {DropDownBaseModel} options - Specifies the DropDownBase model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
function DropDownBase(options, element) {
var _this = _super.call(this, options, element) || this;
_this.preventChange = false;
_this.isPreventChange = false;
_this.isDynamicDataChange = false;
_this.addedNewItem = false;
_this.isAddNewItemTemplate = false;
_this.isRequesting = false;
_this.isVirtualizationEnabled = false;
_this.isCustomDataUpdated = false;
_this.isAllowFiltering = false;
_this.virtualizedItemsCount = 0;
_this.isCheckBoxSelection = false;
_this.totalItemCount = 0;
_this.dataCount = 0;
_this.remoteDataCount = -1;
_this.isRemoteDataUpdated = false;
_this.isIncrementalRequest = false;
_this.itemCount = 30;
_this.virtualListHeight = 0;
_this.isVirtualScrolling = false;
_this.isPreventScrollAction = false;
_this.scrollPreStartIndex = 0;
_this.isScrollActionTriggered = false;
_this.previousStartIndex = 0;
_this.isMouseScrollAction = false;
_this.isKeyBoardAction = false;
_this.isScrollChanged = false;
_this.isUpwardScrolling = false;
_this.startIndex = 0;
_this.currentPageNumber = 0;
_this.pageCount = 0;
_this.isPreventKeyAction = false;
_this.generatedDataObject = {};
_this.skeletonCount = 32;
_this.isVirtualTrackHeight = false;
_this.virtualSelectAll = false;
_this.isVirtualReorder = false;
_this.incrementalQueryString = '';
_this.incrementalEndIndex = 0;
_this.incrementalStartIndex = 0;
_this.incrementalPreQueryString = '';
_this.isObjectCustomValue = false;
_this.appendUncheckList = false;
_this.getInitialData = false;
_this.preventPopupOpen = true;
_this.virtualSelectAllState = false;
_this.CurrentEvent = null;
_this.isDynamicData = false;
_this.isPrimitiveData = false;
_this.isCustomFiltering = false;
_this.virtualListInfo = {
currentPageNumber: null,
direction: null,
sentinelInfo: {},
offsets: {},
startIndex: 0,
endIndex: 0
};
_this.viewPortInfo = {
currentPageNumber: null,
direction: null,
sentinelInfo: {},
offsets: {},
startIndex: 0,
endIndex: 0
};
_this.selectedValueInfo = {
currentPageNumber: null,
direction: null,
sentinelInfo: {},
offsets: {},
startIndex: 0,
endIndex: 0
};
return _this;
}
DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
var newProperty = new Object();
var oldProperty = new Object();
var propName = function (prop) {
return prop;
};
newProperty[propName(prop)] = newProp[propName(prop)];
oldProperty[propName(prop)] = oldProp[propName(prop)];
var data = new Object();
data.newProperty = newProperty;
data.oldProperty = oldProperty;
return data;
};
DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {
var value = null;
if (!isNullOrUndefined(this.listData)) {
if (ignoreCase) {
value = this.checkValueCase(text, true, ignoreAccent);
}
else {
value = this.checkValueCase(text, false, ignoreAccent);
}
}
return value;
};
DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {
var _this = this;
var value = null;
if (isTextByValue) {
value = text;
}
if (!isNullOrUndefined(this.listData)) {
var dataSource = this.listData;
var fields_1 = this.fields;
var type = this.typeOfData(dataSource).typeof;
if (type === 'string' || type === 'number' || type === 'boolean') {
for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {
var item = dataSource_1[_i];
if (!isNullOrUndefined(item)) {
if (ignoreAccent) {
value = this.checkingAccent(String(item), text, ignoreCase);
}
else {
if (ignoreCase) {
if (this.checkIgnoreCase(String(item), text)) {
value = this.getItemValue(String(item), text, ignoreCase);
}
}
else {
if (this.checkNonIgnoreCase(String(item), text)) {
value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);
}
}
}
}
}
}
else {
if (ignoreCase) {
dataSource.filter(function (item) {
var itemValue = getValue(fields_1.value, item);
if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields_1.text, item).toString(), text)) {
value = getValue(fields_1.value, item);
}
});
}
else {
if (isTextByValue) {
var compareValue_1 = null;
compareValue_1 = value;
dataSource.filter(function (item) {
var itemValue = getValue(fields_1.value, item);
if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) &&
itemValue.toString() === compareValue_1.toString()) {
value = getValue(fields_1.text, item);
}
});
}
else {
dataSource.filter(function (item) {
if (_this.checkNonIgnoreCase(getValue(fields_1.text, item), text)) {
value = getValue(fields_1.value, item);
}
});
}
}
}
}
return value;
};
DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {
var dataItem = DataUtil.ignoreDiacritics(String(item));
var textItem = DataUtil.ignoreDiacritics(text.toString());
var value = null;
if (ignoreCase) {
if (this.checkIgnoreCase(dataItem, textItem)) {
value = this.getItemValue(String(item), text, ignoreCase);
}
}
else {
if (this.checkNonIgnoreCase(String(item), text)) {
value = this.getItemValue(String(item), text, ignoreCase);
}
}
return value;
};
DropDownBase.prototype.checkIgnoreCase = function (item, text) {
return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;
};
DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {
return String(item) === text.toString() ? true : false;
};
DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {
var value = null;
var dataSource = this.listData;
var type = this.typeOfData(dataSource).typeof;
if (isTextByValue) {
value = dataItem.toString();
}
else {
if (ignoreCase) {
value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));
}
else {
value = type === 'string' ? typedText : this.getFormattedValue(typedText);
}
}
return value;
};
DropDownBase.prototype.templateCompiler = function (baseTemplate) {
var checkTemplate = false;
if (typeof baseTemplate !== 'function' && baseTemplate) {
try {
checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;
}
catch (exception) {
checkTemplate = false;
}
}
return checkTemplate;
};
DropDownBase.prototype.l10nUpdate = function (actionFailure) {
var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {
var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
var compiledString = void 0;
var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
ele.innerHTML = '';
var tempaltecheck = this.templateCompiler(template);
if (typeof template !== 'function' && tempaltecheck) {
compiledString = compile(select(template, document).innerHTML.trim());
}
else {
compiledString = compile(template);
}
var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var noDataElement = void 0;
if ((this.isReact) && typeof template === 'function') {
noDataElement = compiledString({}, this, templateName, templateId, this.isStringTemplate, null);
}
else {
noDataElement = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);
}
if (noDataElement && noDataElement.length > 0) {
for (var i = 0; i < noDataElement.length; i++) {
if (this.getModuleName() === 'listbox' && templateName === 'noRecordsTemplate') {
if (noDataElement[i].nodeName === '#text') {
var liElem = this.createElement('li');
liElem.textContent = noDataElement[i].textContent;
liElem.classList.add('e-list-nrt');
liElem.setAttribute('role', 'option');
ele.appendChild(liElem);
}
else {
noDataElement[i].classList.add('e-list-nr-template');
ele.appendChild(noDataElement[i]);
}
}
else {
if (noDataElement[i] instanceof HTMLElement || ((noDataElement[i] instanceof Text) && (noDataElement[i]).textContent !== '')) {
ele.appendChild(noDataElement[i]);
}
}
}
}
this.renderReactTemplates();
}
else {
var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };
var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);
if (componentLocale.getConstant('actionFailureTemplate') !== '' || componentLocale.getConstant('noRecordsTemplate') !== '') {
this.l10n = componentLocale;
}
else {
this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' :
this.getModuleName() === 'mention' ? 'mention' : 'dropdowns', l10nLocale, this.locale);
}
var content = actionFailure ?
this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
if (this.getModuleName() === 'listbox') {
var liElem = this.createElement('li');
liElem.textContent = content;
ele.appendChild(liElem);
liElem.classList.add('e-list-nrt');
liElem.setAttribute('role', 'option');
}
else {
if (!isNullOrUndefined(ele)) {
ele.innerHTML = content;
}
}
}
};
DropDownBase.prototype.checkAndResetCache = function () {
if (this.isVirtualizationEnabled) {
this.generatedDataObject = {};
this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
this.viewPortInfo = {
currentPageNumber: null,
direction: null,
sentinelInfo: {},
offsets: {},
startIndex: 0,
endIndex: this.itemCount
};
this.selectedValueInfo = null;
}
};
DropDownBase.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
this.viewPortInfo.startIndex = startIndex;
this.viewPortInfo.endIndex = endIndex;
this.updateVirtualItemIndex();
this.isIncrementalRequest = true;
this.resetList(this.dataSource, this.fields, this.query);
this.isIncrementalRequest = false;
};
DropDownBase.prototype.updateIncrementalView = function (startIndex, endIndex) {
this.viewPortInfo.startIndex = startIndex;
this.viewPortInfo.endIndex = endIndex;
this.updateVirtualItemIndex();
this.resetList(this.dataSource, this.fields, this.query);
this.UpdateSkeleton();
this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
this.ulElement = this.list.querySelector('ul');
};
DropDownBase.prototype.updateVirtualItemIndex = function () {
this.virtualItemStartIndex = this.viewPortInfo.startIndex;
this.virtualItemEndIndex = this.viewPortInfo.endIndex;
this.virtualListInfo = this.viewPortInfo;
};
DropDownBase.prototype.getFilteringSkeletonCount = function () {
var currentSkeletonCount = this.skeletonCount;
this.getSkeletonCount(true);
this.skeletonCount = this.dataCount < this.itemCount * 2 && ((!(this.dataSource instanceof DataManager)) ||
((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
var skeletonUpdated = true;
if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2)) && ((!(this.dataSource instanceof DataManager)) || ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount)))) {
this.skeletonCount = 0;
skeletonUpdated = false;
}
if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
}
else {
this.UpdateSkeleton();
}
this.liCollections = this.list.querySelectorAll('.e-list-item');
if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
}
else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0 && this.list.querySelector('.e-dropdownbase')) {
var virualElement = this.createElement('div', {
id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
});
this.list.querySelector('.e-dropdownbase').appendChild(virualElement);
}
if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
}
}
};
DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {
this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
var actualCount = this.virtualListHeight > 0 && this.listItemHeight > 0 ?
Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
this.skeletonCount = actualCount * 4 < this.itemCount ? this.itemCount : actualCount * 4;
this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
this.virtualItemCount = this.itemCount;
this.skeletonCount = Math.floor(this.skeletonCount / 2);
};
DropDownBase.prototype.GetVirtualTrackHeight = function () {
var height = this.totalItemCount === this.viewPortInfo.endIndex ?
this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
height = this.isVirtualTrackHeight ? 0 : height;
var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {
return 'height: 0px;';
}
return heightDimension;
};
DropDownBase.prototype.getTransformValues = function () {
var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
translateY = translateY - (this.skeletonCount * this.listItemHeight);
translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
this.skeletonCount === 0) ? 0 : translateY;
var styleText = "transform: translate(0px, " + translateY + "px);";
return styleText;
};
DropDownBase.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
var isContainVirtualList = this.list.querySelector('.e-virtual-list');
if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
for (var i = 0; i < totalSkeletonCount; i++) {
var liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });
if (this.isVirtualizationEnabled && this.itemTemplate) {
liElement.style.height = (this.listItemHeight - parseInt(window.getComputedStyle(this.getItems()[1]).marginBottom, 10)) + 'px';
}
var skeleton = new Skeleton({
shape: 'Text',
height: '10px',
width: '95%',
cssClass: 'e-skeleton-text'
});
skeleton.appendTo(this.createElement('div'));
liElement.appendChild(skeleton.element);
if (isContainSkeleton.firstChild) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
}
}
}
};
DropDownBase.prototype.getLocaleName = function () {
return 'drop-down-base';
};
DropDownBase.prototype.getTextByValue = function (value) {
var text = this.checkValueCase(value, false, false, true);
return text;
};
DropDownBase.prototype.getFormattedValue = function (value) {
if (this.listData && this.listData.length) {
var item = void 0;
if (this.properties.allowCustomValue &&
this.properties.value &&
this.properties.value instanceof Array &&
this.properties.value.length > 0) {
item = this.typeOfData(this.properties.value);
}
else {
item = this.typeOfData(this.listData);
}
if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number' ||
item.typeof === 'number') {
return parseFloat(value);
}
if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean' ||
item.typeof === 'boolean') {
return ((value === 'true') || ('' + value === 'true'));
}
}
return value;
};
/**
* Sets RTL to dropdownbase wrapper
*
* @returns {void}
*/
DropDownBase.prototype.setEnableRtl = function () {
if (!isNullOrUndefined(this.enableRtlElements)) {
if (this.list) {
this.enableRtlElements.push(this.list);
}
if (this.enableRtl) {
addClass(this.enableRtlElements, dropDownBaseClasses.rtl);
}
else {
removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);
}
}
};
/**
* Initialize the Component.
*
* @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - The event object.
* @returns {void}
*/
DropDownBase.prototype.initialize = function (e) {
this.bindEvent = true;
this.preventPopupOpen = true;
this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
if (this.element.tagName === 'UL') {
var jsonElement = ListBase.createJsonFromElement(this.element);
this.setProperties({ fields: { text: 'text', value: 'text' } }, true);
this.resetList(jsonElement, this.fields);
}
else if (this.element.tagName === 'SELECT') {
var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)
: !isNullOrUndefined(this.dataSource) ? true : false;
if (!dataSource) {
this.renderItemsBySelect();
}
else if (this.isDynamicDataChange) {
this.setListData(this.dataSource, this.fields, this.query);
}
}
else {
this.setListData(this.dataSource, this.fields, this.query, e);
}
};
/**
* Get the properties to be maintained in persisted state.
*
* @returns {string} Returns the persisted data of the component.
*/
DropDownBase.prototype.getPersistData = function () {
return this.addOnPersist([]);
};
/**
* Sets the enabled state to DropDownBase.
*
* @param {string} value - Specifies the attribute values to add on the input element.
* @returns {void}
*/
DropDownBase.prototype.updateDataAttribute = function (value) {
var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
var attr = {};
for (var a = 0; a < this.element.attributes.length; a++) {
if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
!(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {
attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);
}
}
extend(attr, value, attr);
this.setProperties({ htmlAttributes: attr }, true);
};
DropDownBase.prototype.renderItemsBySelect = function () {
var element = this.element;
var group = element.querySelectorAll('select>optgroup');
var fields;
var isSelectGroupCheck = this.getModuleName() === 'multiselect' && this.isGroupChecking && group.length > 0;
fields = isSelectGroupCheck ? { value: 'value', text: 'text', groupBy: 'categeory' } : fields = { value: 'value', text: 'text' };
var jsonElement = [];
var option = element.querySelectorAll('select>option');
this.getJSONfromOption(jsonElement, option, fields);
if (group.length) {
for (var i = 0; i < group.length; i++) {
var item = group[i];
var optionGroup = {};
optionGroup[fields.text] = item.label;
optionGroup.isHeader = true;
var child = item.querySelectorAll('option');
if (isSelectGroupCheck) {
this.getJSONfromOption(jsonElement, child, fields, item.label);
}
else {
jsonElement.push(optionGroup);
this.getJSONfromOption(jsonElement, child, fields);
}
}
element.querySelectorAll('select>option');
}
this.updateFields(fields.text, fields.value, isSelectGroupCheck ? fields.groupBy : this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
this.resetList(jsonElement, fields);
};
DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {
var field = {
'fields': {
text: text,
value: value,
groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,
htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,
iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss,
disabled: !isNullOrUndefined(disabled) ? disabled : this.fields && this.fields.disabled
}
};
this.setProperties(field, true);
};
DropDownBase.prototype.getJSONfromOption = function (items, options, fields, category) {
if (category === void 0) { category = null; }
for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
var option = options_1[_i];
var json = {};
json[fields.text] = option.innerText;
json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?
option.getAttribute(fields.value) : option.innerText;
if (!isNullOrUndefined(category)) {
json[fields.groupBy] = category;
}
items.push(json);
}
};
/**
* Execute before render the list items
*
* @private
* @returns {void}
*/
DropDownBase.prototype.preRender = function () {
// there is no event handler
this.scrollTimer = -1;
this.enableRtlElements = [];
this.isRequested = false;
this.isDataFetched = false;
this.itemTemplateId = "" + this.element.id + ITEMTEMPLATE_PROPERTY;
this.displayTemplateId = "" + this.element.id + DISPLAYTEMPLATE_PROPERTY;
this.spinnerTemplateId = "" + this.element.id + SPINNERTEMPLATE_PROPERTY;
this.valueTemplateId = "" + this.element.id + VALUETEMPLATE_PROPERTY;
this.groupTemplateId = "" + this.element.id + GROUPTEMPLATE_PROPERTY;
this.headerTemplateId = "" + this.element.id + HEADERTEMPLATE_PROPERTY;
this.footerTemplateId = "" + this.element.id + FOOTERTEMPLATE_PROPERTY;
this.noRecordsTemplateId = "" + this.element.id + NORECORDSTEMPLATE_PROPERTY;
};
/**
* Creates the list items of DropDownBase component.
*
* @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.
* @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
* @param {Query} query - Accepts the external Query that execute along with data processing.
* @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.
* @returns {void}
*/
DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
var _this = this;
fields = fields ? fields : this.fields;
var ulElement;
this.isActive = true;
var eventArgs = { cancel: false, data: dataSource, query: query };
this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
if (!this.isRequesting) {
this.trigger('actionBegin', eventArgs, function (eventArgs) {
if (!eventArgs.cancel) {
_this.isRequesting = true;
_this.showSpinner();
if (dataSource instanceof DataManager) {
_this.isRequested = true;
var isWhereExist_1 = false;
if (_this.isDataFetched) {
_this.emptyDataRequest(fields);
return;
}
eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
_this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
var isReOrder = true;
if (!_this.virtualSelectAll) {
var newQuery = _this.getQuery(eventArgs.query);
for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
if (newQuery.queries[queryElements].fn === 'onWhere') {
isWhereExist_1 = true;
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (_this.isVirtualizationEnabled && (e.count !== 0 && e.count < (_this.itemCount * 2))) {
if (newQuery) {
for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
if (newQuery.queries[queryElements].fn === 'onTake') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
newQuery.queries[queryElements].e.nos = e.count;
}
if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !_this.isCustomFiltering) {
isReOrder = false;
}
}
}
}
else {
_this.isVirtualTrackHeight = false;
if (newQuery) {
for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
isReOrder = false;
}
}
}
}
}
if (isReOrder) {
// eslint-disable @typescript-eslint/no-explicit-any
_this.dataCount = _this.totalItemCount = e.count;
}
_this.trigger('actionComplete', e, function (e) {
if (!e.cancel) {
_this.isRequesting = false;
_this.isCustomFiltering = false;
var listItems = e.result;
if (_this.isIncrementalRequest) {
ulElement = _this.renderItems(listItems, fields);
return;
}
if ((!_this.isVirtualizationEnabled && listItems.length === 0) ||
(_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {
_this.isDataFetched = true;
}
if (!isWhereExist_1) {
_this.remoteDataCount = e.count;
}
_this.dataCount = !_this.virtualSelectAll ? e.count : _this.dataCount;
_this.totalItemCount = !_this.virtualSelectAll ? e.count : _this.totalItemCount;
ulElement = _this.renderItems(listItems, fields);
_this.appendUncheckList = false;
_this.onActionComplete(ulElement, listItems, e);
if (_this.groupTemplate) {
_this.renderGroupTemplate(ulElement);
}
_this.isRequested = false;
_this.bindChildItems(listItems, ulElement, fields, e);
if (_this.getInitialData) {
_this.getInitialData = false;
_this.preventPopupOpen = false;
return;
}
if (_this.isVirtualizationEnabled && _this.setCurrentView) {
_this.notify('setCurrentViewDataAsync', {
module: 'VirtualScroll'
});
}
if (_this.keyboardEvent != null) {
_this.handleVirtualKeyboardActions(_this.keyboardEvent, _this.pageCount);
}
if (_this.isVirtualizationEnabled) {
_this.getFilteringSkeletonCount();
_this.updatePopupPosition();
}
if (_this.virtualSelectAll && _this.virtualSelectAllData) {
_this.virtualSelectionAll(_this.virtualSelectAllState, _this.liCollections, _this.CurrentEvent);
_this.virtualSelectAllState = false;
_this.CurrentEvent = null;
_this.virtualSelectAll = false;
}
}
});
}).catch(function (e) {
_this.isRequested = false;
_this.isRequesting = false;
_this.onActionFailure(e);
_this.hideSpinner();
});
}
else {
_this.isRequesting = false;
var isReOrder = true;
var listItems = void 0;
if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {
var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
_this.virtualGroupDataSource = data.records;
}
var dataManager = _this.isVirtualizationEnabled &&
_this.virtualGroupDataSource
&& !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) :
new DataManager(eventArgs.data);
listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
if (!_this.virtualSelectAll) {
var newQuery = _this.getQuery(eventArgs.query);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (_this.isVirtualizationEnabled && (listItems.count !== 0 &&
listItems.count < (_this.itemCount * 2)) && !_this.appendUncheckList) {
if (newQuery) {
for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
if (newQuery.queries[queryElements].fn === 'onTake') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
newQuery.queries[queryElements].e.nos = listItems.count;
listItems = (newQuery).executeLocal(dataManager);
}
if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !_this.isCustomFiltering) {
isReOrder = false;
}
}
if (isReOrder) {
listItems = (newQuery).executeLocal(dataManager);
_this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) &&
!_this.isCustomDataUpdated) ? true : false;
}
}
}
else {
_this.isVirtualTrackHeight = false;
if (newQuery) {
for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
isReOrder = false;
}
}
}
}
}
if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) &&
!_this.virtualSelectAll) {
// eslint-disable @typescript-eslint/no-explicit-any
_this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length :
listItems.count;
}
listItems = _this.isVirtualizationEnabled ? listItems.result : listItems;
// eslint-enable @typescript-eslint/no-explicit-any
var localDataArgs = { cancel: false, result: listItems };
_this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
_this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
_this.isCustomFiltering = false;
if (_this.isIncrementalRequest) {
ulElement = _this.renderItems(localDataArgs.result, fields);
return;
}
if (!localDataArgs.cancel) {
ulElement = _this.renderItems(localDataArgs.result, fields);
_this.onActionComplete(ulElement, localDataArgs.result, event);
if (_this.groupTemplate) {
_this.renderGroupTemplate(ulElement);
}
_this.bindChildItems(localDataArgs.result, ulElement, fields);
if (_this.getInitialData) {
_this.getInitialData = false;
_this.preventPopupOpen = false;
return;
}
setTimeout(function () {
if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
_this.updateDataList();
}
});
}
});
}
}
});
}
};
DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
// Used this method in component side.
};
DropDownBase.prototype.updatePopupState = function () {
// Used this method in component side.
};
DropDownBase.prototype.updatePopupPosition = function () {
// Used this method in component side.
};
DropDownBase.prototype.virtualSelectionAll = function (state, li, event) {
// Used this method in component side.
};
DropDownBase.prototype.updateRemoteData = function () {
this.setListData(this.dataSource, this.fields, this.query);
};
DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {
var _this = this;
if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
setTimeout(function () {
var childNode = _this.remainingItems(_this.sortedData, fields);
append(childNode, ulElement);
_this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);
_this.updateListValues();
_this.raiseDataBound(listItems, e);
}, 0);
}
else {
this.raiseDataBound(listItems, e);
}
};
DropDownBase.prototype.isObjectInArray = function (objectToFind, array) {
return array.some(function (item) {
return Object.keys(objectToFind).every(function (key) {
return Object.prototype.hasOwnProperty.call(item, key) && item[key] === objectToFind[key];
});
});
};
DropDownBase.prototype.updateListValues = function () {
// Used this method in component side.
};
DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {
var liElement = null;
if (list) {
var listArr = [].slice.call(list.querySelectorAll(findNode));
for (var index = 0; index < listArr.length; index++) {
if (listArr[index].getAttribute(attribute) === (value + '')) {
liElement = listArr[index];
break;
}
}
}
return liElement;
};
DropDownBase.prototype.raiseDataBound = function (listItems, e) {
this.hideSpinner();
var dataBoundEventArgs = {
items: listItems,
e: e
};
this.trigger('dataBound', dataBoundEventArgs);
};
DropDownBase.prototype.remainingItems = function (dataSource, fields) {
var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));
if (this.itemTemplate) {
var listElements = this.templateListItem(spliceData, fields);
return [].slice.call(listElements.childNodes);
}
var type = this.typeOfData(spliceData).typeof;
if (type === 'string' || type === 'number' || type === 'boolean') {
return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);
}
return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);
};
DropDownBase.prototype.emptyDataRequest = function (fields) {
var listItems = [];
this.onActionComplete(this.renderItems(listItems, fields), listItems);
this.isRequested = false;
this.isRequesting = false;
this.hideSpinner();
};
DropDow