@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,064 lines • 227 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
import { EventHandler, Property, Event, compile, KeyboardEvents, append, select } from '@syncfusion/ej2-base';
import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';
import { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';
import { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';
import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';
import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
// don't use space in classnames
export var dropDownListClasses = {
root: 'e-dropdownlist',
hover: dropDownBaseClasses.hover,
selected: dropDownBaseClasses.selected,
rtl: dropDownBaseClasses.rtl,
li: dropDownBaseClasses.li,
disable: dropDownBaseClasses.disabled,
base: dropDownBaseClasses.root,
focus: dropDownBaseClasses.focus,
content: dropDownBaseClasses.content,
input: 'e-input-group',
inputFocus: 'e-input-focus',
icon: 'e-input-group-icon e-ddl-icon',
iconAnimation: 'e-icon-anim',
value: 'e-input-value',
device: 'e-ddl-device',
backIcon: 'e-input-group-icon e-back-icon e-icons',
filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',
filterInput: 'e-input-filter',
resizeIcon: 'e-resizer-right e-icons',
filterParent: 'e-filter-parent',
mobileFilter: 'e-ddl-device-filter',
footer: 'e-ddl-footer',
header: 'e-ddl-header',
clearIcon: 'e-clear-icon',
clearIconHide: 'e-clear-icon-hide',
popupFullScreen: 'e-popup-full-page',
disableIcon: 'e-ddl-disable-icon',
hiddenElement: 'e-ddl-hidden',
virtualList: 'e-list-item e-virtual-list'
};
var inputObject = {
container: null,
buttons: []
};
/**
* The DropDownList component contains a list of predefined values from which you can
* choose a single value.
* ```html
* <input type="text" tabindex="1" id="list"> </input>
* ```
* ```typescript
* let dropDownListObj:DropDownList = new DropDownList();
* dropDownListObj.appendTo("#list");
* ```
*/
var DropDownList = /** @class */ (function (_super) {
__extends(DropDownList, _super);
/**
* * Constructor for creating the DropDownList component.
*
* @param {DropDownListModel} options - Specifies the DropDownList model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
function DropDownList(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isListSearched = false;
_this.preventChange = false;
_this.isTouched = false;
_this.isFocused = false;
_this.autoFill = false;
_this.isUpdateHeaderHeight = false;
_this.isUpdateFooterHeight = false;
_this.isReactTemplateUpdate = false;
return _this;
}
/**
* Initialize the event handler.
*
* @private
* @returns {void}
*/
DropDownList.prototype.preRender = function () {
this.valueTempElement = null;
this.element.style.opacity = '0';
this.initializeData();
_super.prototype.preRender.call(this);
this.activeIndex = this.index;
this.queryString = '';
};
DropDownList.prototype.initializeData = function () {
this.isPopupOpen = false;
this.isDocumentClick = false;
this.isInteracted = false;
this.isFilterFocus = false;
this.beforePopupOpen = false;
this.initial = true;
this.initialRemoteRender = false;
this.isNotSearchList = false;
this.isTyped = false;
this.isSelected = false;
this.preventFocus = false;
this.preventAutoFill = false;
this.isValidKey = false;
this.typedString = '';
this.isEscapeKey = false;
this.isPreventBlur = false;
this.isTabKey = false;
this.actionCompleteData = { isUpdated: false };
this.actionData = { isUpdated: false };
this.prevSelectPoints = {};
this.isSelectCustom = false;
this.isDropDownClick = false;
this.preventAltUp = false;
this.isCustomFilter = false;
this.isSecondClick = false;
this.previousValue = null;
this.keyConfigure = {
tab: 'tab',
enter: '13',
escape: '27',
end: '35',
home: '36',
down: '40',
up: '38',
pageUp: '33',
pageDown: '34',
open: 'alt+40',
close: 'shift+tab',
hide: 'alt+38',
space: '32'
};
this.viewPortInfo = {
currentPageNumber: null,
direction: null,
sentinelInfo: {},
offsets: {},
startIndex: 0,
endIndex: this.itemCount
};
};
DropDownList.prototype.setZIndex = function () {
if (this.popupObj) {
this.popupObj.setProperties({ 'zIndex': this.zIndex });
}
};
DropDownList.prototype.requiredModules = function () {
var modules = [];
if (this.enableVirtualization) {
modules.push({ args: [this], member: 'VirtualScroll' });
}
return modules;
};
DropDownList.prototype.renderList = function (e, isEmptyData) {
_super.prototype.render.call(this, e, isEmptyData);
if (!(this.dataSource instanceof DataManager)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
}
if (this.enableVirtualization && this.isFiltering() && this.getModuleName() === 'combobox') {
this.UpdateSkeleton();
this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
this.ulElement = this.list.querySelector('ul');
}
this.unWireListEvents();
this.wireListEvents();
};
DropDownList.prototype.floatLabelChange = function () {
if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
var floatElement = this.inputWrapper.container.querySelector('.e-float-text');
if (this.inputElement.value !== '' || this.isInteracted) {
classList(floatElement, ['e-label-top'], ['e-label-bottom']);
}
else {
classList(floatElement, ['e-label-bottom'], ['e-label-top']);
}
}
};
DropDownList.prototype.resetHandler = function (e) {
e.preventDefault();
this.clearAll(e);
if (this.enableVirtualization) {
this.list.scrollTop = 0;
this.virtualListInfo = null;
this.previousStartIndex = 0;
this.previousEndIndex = 0;
}
};
DropDownList.prototype.resetFocusElement = function () {
this.removeHover();
this.removeSelection();
this.removeFocus();
this.list.scrollTop = 0;
if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
var li = this.fields.disabled ? this.ulElement.querySelector('.' + dropDownListClasses.li + ':not(.e-disabled)') : this.ulElement.querySelector('.' + dropDownListClasses.li);
if (this.enableVirtualization) {
li = this.liCollections[this.skeletonCount];
}
if (li) {
li.classList.add(dropDownListClasses.focus);
}
}
};
DropDownList.prototype.clearAll = function (e, properties) {
this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&
(isNullOrUndefined(properties.dataSource) ||
(!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {
this.isActive = true;
this.resetSelection(properties);
}
var dataItem = this.getItemData();
if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) ||
(this.allowObjectBinding && this.previousValue &&
this.isObjectInArray(this.previousValue, [this.allowCustom ? this.value ? this.value : dataItem :
dataItem.value ? this.getDataByValue(dataItem.value) : dataItem]))) {
this.checkAndResetCache();
if (this.enableVirtualization && this.list) {
this.updateInitialData();
}
return;
}
this.onChangeEvent(e);
this.checkAndResetCache();
if (this.enableVirtualization) {
this.updateInitialData();
}
};
DropDownList.prototype.resetSelection = function (properties) {
if (this.list) {
if ((!isNullOrUndefined(properties) &&
(isNullOrUndefined(properties.dataSource) ||
(!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {
this.selectedLI = null;
this.actionCompleteData.isUpdated = false;
this.actionCompleteData.ulElement = null;
this.actionCompleteData.list = null;
this.resetList(properties.dataSource);
}
else {
if (this.allowFiltering && this.getModuleName() !== 'autocomplete'
&& !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) &&
this.actionCompleteData.list.length > 0) {
this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);
}
this.resetFocusElement();
}
}
if (!isNullOrUndefined(this.hiddenElement)) {
this.hiddenElement.innerHTML = '';
}
if (!isNullOrUndefined(this.inputElement)) {
this.inputElement.value = '';
}
this.value = null;
this.itemData = null;
this.text = null;
this.index = null;
this.activeIndex = null;
this.item = null;
this.queryString = '';
if (this.valueTempElement) {
detach(this.valueTempElement);
this.inputElement.style.display = 'block';
this.valueTempElement = null;
}
this.setSelection(null, null);
this.isSelectCustom = false;
this.updateIconState();
this.cloneElements();
};
DropDownList.prototype.setHTMLAttributes = function () {
if (Object.keys(this.htmlAttributes).length) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var htmlAttr = _a[_i];
if (htmlAttr === 'class') {
var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
if (updatedClassValue !== '') {
addClass([this.inputWrapper.container], updatedClassValue.split(' '));
}
}
else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
this.enabled = false;
this.setEnable();
}
else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes["" + htmlAttr])) {
this.readonly = true;
this.dataBind();
}
else if (htmlAttr === 'style') {
this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
}
else if (htmlAttr === 'aria-label') {
if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
this.inputElement.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
}
else if (this.getModuleName() === 'dropdownlist') {
this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
}
}
else {
var defaultAttr = ['title', 'id', 'placeholder',
'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
var validateAttr = ['name', 'required'];
if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
defaultAttr.push('tabindex');
}
if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
else if (defaultAttr.indexOf(htmlAttr) > -1) {
if (htmlAttr === 'placeholder') {
Input.setPlaceholder(this.htmlAttributes["" + htmlAttr], this.inputElement);
}
else {
this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
}
else {
this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
}
}
}
}
if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
this.inputWrapper.container.removeAttribute('tabindex');
}
};
DropDownList.prototype.getAriaAttributes = function () {
return {
'aria-disabled': 'false',
'role': 'combobox',
'aria-expanded': 'false',
'aria-live': 'polite',
'aria-labelledby': this.hiddenElement.id
};
};
DropDownList.prototype.setEnableRtl = function () {
if (!isNullOrUndefined(this.inputElement) && !isNullOrUndefined(this.inputElement.parentElement)) {
Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);
}
if (this.popupObj) {
this.popupObj.enableRtl = this.enableRtl;
this.popupObj.dataBind();
}
};
DropDownList.prototype.setEnable = function () {
Input.setEnabled(this.enabled, this.inputElement);
if (this.enabled) {
removeClass([this.inputWrapper.container], dropDownListClasses.disable);
this.inputElement.setAttribute('aria-disabled', 'false');
this.targetElement().setAttribute('tabindex', this.tabIndex);
if (this.inputWrapper && this.inputWrapper.container) {
this.inputWrapper.container.setAttribute('aria-disabled', 'false');
this.inputWrapper.container.removeAttribute('disabled');
}
}
else {
this.hidePopup();
addClass([this.inputWrapper.container], dropDownListClasses.disable);
this.inputElement.setAttribute('aria-disabled', 'true');
this.targetElement().tabIndex = -1;
if (this.inputWrapper && this.inputWrapper.container) {
this.inputWrapper.container.setAttribute('aria-disabled', 'true');
this.inputWrapper.container.setAttribute('disabled', '');
}
}
};
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string} Returns the persisted data of the component.
*/
DropDownList.prototype.getPersistData = function () {
return this.addOnPersist(['value']);
};
DropDownList.prototype.getLocaleName = function () {
return 'drop-down-list';
};
DropDownList.prototype.preventTabIndex = function (element) {
if (this.getModuleName() === 'dropdownlist') {
element.tabIndex = -1;
}
};
DropDownList.prototype.targetElement = function () {
return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
};
DropDownList.prototype.getNgDirective = function () {
return 'EJS-DROPDOWNLIST';
};
DropDownList.prototype.getElementByText = function (text) {
return this.getElementByValue(this.getValueByText(text));
};
DropDownList.prototype.getElementByValue = function (value) {
var item;
var listItems = this.getItems();
for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {
var liItem = listItems_1[_i];
if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {
item = liItem;
break;
}
}
return item;
};
DropDownList.prototype.initValue = function () {
this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
this.renderList();
if (this.dataSource instanceof DataManager) {
this.initialRemoteRender = true;
}
else {
this.updateValues();
}
};
/**
* Checks if the given value is disabled.
*
* @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
* @returns { boolean } A boolean indicating whether the value is disabled.
*/
DropDownList.prototype.isDisableItemValue = function (value) {
if (typeof (value) === 'object') {
var objectValue = JSON.parse(JSON.stringify(value))[this.fields.value];
return this.isDisabledItemByIndex(this.getIndexByValue(objectValue));
}
return this.isDisabledItemByIndex(this.getIndexByValue(value));
};
DropDownList.prototype.updateValues = function () {
if (this.fields.disabled) {
if (this.value != null) {
this.value = !this.isDisableItemValue(this.value) ? this.value : null;
}
if (this.text != null) {
this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
}
if (this.index != null) {
this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
this.activeIndex = this.index;
}
}
this.selectedValueInfo = this.viewPortInfo;
if (!isNullOrUndefined(this.value)) {
var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
this.setSelection(this.getElementByValue(value), null);
}
else if (this.text && isNullOrUndefined(this.value)) {
var element = this.getElementByText(this.text);
if (isNullOrUndefined(element)) {
this.setProperties({ text: null });
return;
}
else {
this.setSelection(element, null);
}
}
else {
this.setSelection(this.liCollections[this.activeIndex], null);
}
this.setHiddenValue();
Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
};
DropDownList.prototype.onBlurHandler = function (e) {
if (!this.enabled) {
return;
}
var target = e.relatedTarget;
var currentTarget = e.target;
var isPreventBlur = this.isPreventBlur;
this.isPreventBlur = false;
//IE 11 - issue
if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||
!this.isFilterLayout() && isNullOrUndefined(target))) {
if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {
this.filterInput.focus();
}
else {
this.targetElement().focus();
}
return;
}
if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)
&& document.body.contains(this.popupObj.element) &&
this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {
if (!this.beforePopupOpen) {
this.isDocumentClick = false;
}
return;
}
if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)
&& (document.activeElement !== target || (document.activeElement === target &&
currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||
(isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&
!this.inputWrapper.container.contains(target) || this.isTabKey) {
this.isDocumentClick = this.isPopupOpen ? true : false;
this.focusOutAction(e);
this.isTabKey = false;
}
if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {
this.isActive = false;
this.beforePopupOpen = false;
}
this.isFocused = false;
};
DropDownList.prototype.focusOutAction = function (e) {
this.isInteracted = false;
this.focusOut(e);
this.onFocusOut(e);
};
DropDownList.prototype.onFocusOut = function (e) {
if (!this.enabled) {
return;
}
if (this.isSelected) {
this.isSelectCustom = false;
this.onChangeEvent(e);
}
this.floatLabelChange();
this.dispatchEvent(this.hiddenElement, 'change');
if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {
this.dispatchEvent(this.inputElement, 'blur');
}
if (this.inputWrapper.clearButton) {
addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);
}
this.trigger('blur');
};
DropDownList.prototype.onFocus = function (e) {
if (!this.isInteracted) {
this.isInteracted = true;
var args = { isInteracted: e ? true : false, event: e };
this.trigger('focus', args);
}
this.updateIconState();
this.isFocused = true;
};
DropDownList.prototype.resizingWireEvent = function () {
// Mouse events
EventHandler.add(document, 'mousemove', this.resizePopup, this);
EventHandler.add(document, 'mouseup', this.stopResizing, this);
// Touch events
EventHandler.add(document, 'touchmove', this.resizePopup, this);
EventHandler.add(document, 'touchend', this.stopResizing, this);
};
DropDownList.prototype.resizingUnWireEvent = function () {
// Mouse events
EventHandler.remove(document, 'mousemove', this.resizePopup);
EventHandler.remove(document, 'mouseup', this.stopResizing);
// Touch events
EventHandler.remove(document, 'touchmove', this.resizePopup);
EventHandler.remove(document, 'touchend', this.stopResizing);
};
DropDownList.prototype.resetValueHandler = function (e) {
var formElement = closest(this.inputElement, 'form');
if (formElement && e.target === formElement) {
var val = (this.element.tagName === this.getNgDirective()) ? null : this.inputElement.getAttribute('value');
this.text = val;
}
};
DropDownList.prototype.wireEvent = function () {
EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);
EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);
EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);
EventHandler.add(window, 'resize', this.windowResize, this);
this.bindCommonEvent();
};
DropDownList.prototype.bindCommonEvent = function () {
EventHandler.add(this.targetElement(), 'blur', this.onBlurHandler, this);
var formElement = closest(this.inputElement, 'form');
if (formElement) {
EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
}
if (!Browser.isDevice) {
this.keyboardModule = new KeyboardEvents(this.targetElement(), {
keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
});
}
else {
this.keyboardModule = new KeyboardEvents(this.targetElement(), {
keyAction: this.mobileKeyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
});
}
this.bindClearEvent();
};
DropDownList.prototype.windowResize = function () {
if (this.isPopupOpen) {
this.popupObj.refreshPosition(this.inputWrapper.container);
}
};
DropDownList.prototype.bindClearEvent = function () {
if (this.showClearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
}
};
DropDownList.prototype.unBindCommonEvent = function () {
if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
}
var formElement = this.inputElement && closest(this.inputElement, 'form');
if (formElement) {
EventHandler.remove(formElement, 'reset', this.resetValueHandler);
}
if (!Browser.isDevice) {
this.keyboardModule.destroy();
}
if (this.showClearButton) {
EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);
}
};
DropDownList.prototype.updateIconState = function () {
if (this.showClearButton) {
if (this.inputElement.value !== '' && !this.readonly) {
removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);
}
else {
addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);
}
}
};
/**
* Event binding for list
*
* @returns {void}
*/
DropDownList.prototype.wireListEvents = function () {
if (!isNullOrUndefined(this.list)) {
EventHandler.add(this.list, 'click', this.onMouseClick, this);
EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
}
};
DropDownList.prototype.onSearch = function (e) {
if (e.charCode !== 32 && e.charCode !== 13) {
if (this.list === undefined) {
this.renderList();
}
this.searchKeyEvent = e;
this.onServerIncrementalSearch(e);
}
};
DropDownList.prototype.onServerIncrementalSearch = function (e) {
if (!this.isRequested && !isNullOrUndefined(this.list) &&
!isNullOrUndefined(this.list.querySelector('li')) && this.enabled && !this.readonly) {
this.incrementalSearch(e);
}
};
DropDownList.prototype.startResizing = function (event) {
this.isResizing = true;
this.trigger('resizeStart', event);
// Get initial touch or mouse coordinates
var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
// Store the initial dimensions of the popup
if (this.list && this.list.parentElement) {
this.originalWidth = this.list.parentElement.offsetWidth;
this.originalHeight = this.list.parentElement.offsetHeight;
this.originalMouseX = clientX;
this.originalMouseY = clientY;
}
// Wire up events for resizing
this.resizingWireEvent();
if (event) {
event.preventDefault(); // Prevent selection behavior if event exists
}
};
DropDownList.prototype.resizePopup = function (event) {
if (!this.isResizing) {
return;
}
this.trigger('resizing', event);
// Get the current touch or mouse position
var clientX = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
var clientY = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
// Calculate the new width and height based on drag
var dx = clientX - this.originalMouseX;
var dy = clientY - this.originalMouseY;
if (this.list && this.list.parentElement) {
// Minimum width and height (100px)
var minWidth = parseInt(window.getComputedStyle(this.list.parentElement).minWidth, 10);
var minHeight = parseInt(window.getComputedStyle(this.list.parentElement).minHeight, 10);
minWidth = minWidth || 100;
minHeight = minHeight || 120;
// Ensure the new width and height are not less than the minimum
this.resizeWidth = Math.max(this.originalWidth + dx, minWidth);
this.resizeHeight = Math.max(this.originalHeight + dy, minHeight);
this.list.parentElement.style.width = this.resizeWidth + "px";
this.list.parentElement.style.height = this.resizeHeight + "px";
this.list.parentElement.style.maxHeight = this.resizeHeight + "px";
this.list.style.maxHeight = this.resizeHeight + "px";
if (this.fixedHeaderElement && this.ulElement) {
this.fixedHeaderElement.style.width = this.ulElement.offsetWidth + "px";
}
}
if (event) {
event.preventDefault(); // Prevent selection behavior if event exists
}
};
DropDownList.prototype.stopResizing = function (event) {
if (this.isResizing) {
this.isResizing = false;
this.trigger('resizeStop', event);
// Unwire the resize event listeners
this.resizingUnWireEvent();
}
if (event) {
event.preventDefault(); // Prevent selection behavior if event exists
}
};
DropDownList.prototype.onMouseClick = function (e) {
var target = e.target;
this.keyboardEvent = null;
var li = closest(target, '.' + dropDownBaseClasses.li);
if (!this.isValidLI(li) || this.isDisabledElement(li)) {
return;
}
this.setSelection(li, e);
if (Browser.isDevice && this.isFilterLayout()) {
history.back();
}
else {
var delay = 100;
this.closePopup(delay, e);
}
};
DropDownList.prototype.onMouseOver = function (e) {
var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
this.setHover(currentLi);
};
DropDownList.prototype.setHover = function (li) {
if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
this.removeHover();
addClass([li], dropDownBaseClasses.hover);
}
};
DropDownList.prototype.onMouseLeave = function () {
this.removeHover();
};
DropDownList.prototype.removeHover = function () {
if (this.list) {
var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
if (hoveredItem && hoveredItem.length) {
removeClass(hoveredItem, dropDownBaseClasses.hover);
}
}
};
DropDownList.prototype.isValidLI = function (li) {
return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
};
DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {
this.incrementalStartIndex = startIndex;
this.incrementalEndIndex = endIndex;
};
DropDownList.prototype.incrementalSearch = function (e) {
if (this.liCollections.length > 0) {
if (this.enableVirtualization) {
var updatingincrementalindex = false;
var queryStringUpdated = false;
var activeElement = this.ulElement.getElementsByClassName('e-active')[0];
var currentValue = activeElement ? activeElement.textContent : null;
if (this.incrementalQueryString === '') {
this.incrementalQueryString = String.fromCharCode(e.charCode);
this.incrementalPreQueryString = this.incrementalQueryString;
}
else if (String.fromCharCode(e.charCode).toLocaleLowerCase() === this.incrementalPreQueryString.toLocaleLowerCase()) {
queryStringUpdated = true;
}
else {
this.incrementalQueryString = String.fromCharCode(e.charCode);
}
if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) ||
this.incrementalEndIndex === 0) {
updatingincrementalindex = true;
this.incrementalStartIndex = this.incrementalEndIndex;
if (this.incrementalEndIndex === 0) {
this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
}
else {
this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount :
this.incrementalEndIndex + 100;
}
this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
updatingincrementalindex = true;
}
if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
this.updateIncrementalView(0, this.itemCount);
}
var li = incrementalSearch(e.charCode, this.incrementalLiCollections, this.activeIndex, true, this.element.id, queryStringUpdated, currentValue, true);
while (isNullOrUndefined(li) && this.incrementalEndIndex < this.totalItemCount) {
this.updateIncrementalItemIndex(this.incrementalEndIndex, this.incrementalEndIndex + 100 > this.totalItemCount ?
this.totalItemCount : this.incrementalEndIndex + 100);
this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
updatingincrementalindex = true;
if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
this.updateIncrementalView(0, this.itemCount);
}
li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
if (!isNullOrUndefined(li)) {
break;
}
if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
break;
}
}
if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
updatingincrementalindex = true;
if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
this.updateIncrementalView(0, this.itemCount);
}
li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
}
var index = li && this.getIndexByValue(li.getAttribute('data-value'));
if (!index) {
for (var i = 0; i < this.incrementalLiCollections.length; i++) {
if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) &&
this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {
index = i;
index = this.incrementalStartIndex + index;
break;
}
}
}
else {
index = index - this.skeletonCount;
}
if (index) {
if ((!(this.viewPortInfo.startIndex >= index)) || (!(index >= this.viewPortInfo.endIndex))) {
var startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;
var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ?
this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
this.updateIncrementalView(startIndex, endIndex);
}
}
if (!isNullOrUndefined(li)) {
var index_1 = this.getIndexByValue(li.getAttribute('data-value')) - this.skeletonCount;
if (index_1 > this.itemCount / 2) {
var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ?
this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ?
this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
this.updateIncrementalView(startIndex, endIndex);
}
li = this.getElementByValue(li.getAttribute('data-value'));
this.setSelection(li, e);
this.setScrollPosition();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
if (this.enableVirtualization && !this.fields.groupBy) {
var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
this.selectedLI.offsetTop +
(this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
this.list.scrollTop = selectedLiOffsetTop -
(this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
}
this.incrementalPreQueryString = this.incrementalQueryString;
}
else {
this.updateIncrementalView(0, this.itemCount);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
this.list.scrollTop = 0;
}
}
else {
var li = void 0;
if (this.fields.disabled) {
var enableLiCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li + ':not(.e-disabled)');
li = incrementalSearch(e.charCode, enableLiCollections, this.activeIndex, true, this.element.id);
}
else {
li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
}
if (!isNullOrUndefined(li)) {
this.setSelection(li, e);
this.setScrollPosition();
}
}
}
};
/**
* Hides the spinner loader.
*
* @returns {void}
*/
DropDownList.prototype.hideSpinner = function () {
if (!isNullOrUndefined(this.spinnerElement)) {
hideSpinner(this.spinnerElement);
removeClass([this.spinnerElement], dropDownListClasses.disableIcon);
this.spinnerElement.innerHTML = '';
this.spinnerElement = null;
}
};
/**
* Shows the spinner loader.
*
* @returns {void}
*/
DropDownList.prototype.showSpinner = function () {
if (isNullOrUndefined(this.spinnerElement)) {
this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||
!isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];
addClass([this.spinnerElement], dropDownListClasses.disableIcon);
createSpinner({
target: this.spinnerElement,
width: Browser.isDevice ? '16px' : '14px'
}, this.createElement);
showSpinner(this.spinnerElement);
}
};
DropDownList.prototype.keyActionHandler = function (e) {
if (!this.enabled) {
return;
}
this.keyboardEvent = e;
if (this.isPreventKeyAction && this.enableVirtualization) {
e.preventDefault();
}
var preventAction = e.action === 'pageUp' || e.action === 'pageDown';
var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
this.isEscapeKey = e.action === 'escape';
this.isTabKey = !this.isPopupOpen && e.action === 'tab';
var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
|| e.action === 'home' || e.action === 'end');
if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {
return;
}
if (!this.readonly) {
var isTabAction = e.action === 'tab' || e.action === 'close';
if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {
this.searchKeyEvent = e;
if (!this.enableVirtualization || (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38))) {
this.renderList(e);
this.UpdateSkeleton();
this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
this.ulElement = this.list.querySelector('ul');
}
}
if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
isNavigation && this.liCollections.length === 0) || this.isRequested) {
return;
}
if ((isTabAction && this.getModuleName() !== 'autocomplete') && this.isPopupOpen
|| e.action === 'escape') {
e.preventDefault();
}
this.isSelected = e.action === 'escape' ? false : this.isSelected;
this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;
switch (e.action) {
case 'down':
case 'up':
this.updateUpDownAction(e);
break;
case 'pageUp':
this.pageUpSelection(this.activeIndex - this.getPageCount(), e);
e.preventDefault();
break;
case 'pageDown':
this.pageDownSelection(this.activeIndex + this.getPageCount(), e);
e.preventDefault();
break;
case 'home':
this.isMouseScrollAction = true;
this.updateHomeEndAction(e);
break;
case 'end':
this.isMouseScrollAction = true;
this.updateHomeEndAction(e);
break;
case 'space':
if (this.getModuleName() === 'dropdownlist') {
if (!this.beforePopupOpen) {
this.showPopup();
e.preventDefault();
}
}
break;
case 'open':
this.showPopup(e);
break;
case 'hide':
this.preventAltUp = this.isPopupOpen;
this.hidePopup(e);
this.focusDropDown(e);
break;
case 'enter':
this.selectCurrentItem(e);
break;
case 'tab':
this.selectCurrentValueOnTab(e);
break;
case 'escape':
case 'close':
if (this.isPopupOpen) {
this.hidePopup(e);
this.focusDropDown(e);
}
break;
}
}
};
DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
return;
}
if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
var value = this.getItemData().value;
if (isNullOrUndefined(value)) {
value = 'null';
}
var filterIndex = this.getIndexByValue(value);
if (!isNullOrUndefined(filterIndex)) {
this.activeIndex = filterIndex;
}
}
var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
this.setSelection(focusEle, e);
if (this.enableVirtualization) {
var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop +
(this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
if (this.fields.groupBy) {
selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex === 0 ?
this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
}
this.list.scrollTop = selectedLiOffsetTop -
(this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
}
}
else if (!isNullOrUndefined(this.liCollections)) {
var virtualIndex = this.activeIndex;
var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
index = isVirtualKeyAction ? virtualIndex : index;
var startIndex = 0;
if (this.getModuleName() === 'autocomplete') {
startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
}
var