@hazyflame/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,172 lines • 135 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, isBlazor } from '@syncfusion/ej2-base';
import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { incrementalSearch } 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,
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',
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'
};
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.previousValue = null;
_this.isListSearched = false;
_this.preventChange = false;
_this.isAngular = false;
return _this;
}
/**
* Initialize the event handler.
*
* @private
* @returns {void}
*/
DropDownList.prototype.preRender = function () {
var checkBlazor = isBlazor() && this.isServerRendered;
this.isServerBlazor = (checkBlazor) ? true : false;
this.valueTempElement = null;
if (this.isServerBlazor) {
this.initializeData();
}
else {
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.initRemoteRender = 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.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'
};
};
DropDownList.prototype.setZIndex = function () {
if (this.popupObj) {
this.popupObj.setProperties({ 'zIndex': this.zIndex });
}
};
DropDownList.prototype.renderList = function (isEmptyData) {
if (!this.isServerBlazor) {
_super.prototype.render.call(this, isEmptyData);
this.unWireListEvents();
this.wireListEvents();
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, false);
}
};
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);
};
DropDownList.prototype.resetFocusElement = function () {
this.removeHover();
this.removeSelection();
this.removeFocus();
this.list.scrollTop = 0;
if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
var li = this.ulElement.querySelector('.' + dropDownListClasses.li);
if (li) {
li.classList.add(dropDownListClasses.focus);
}
}
};
DropDownList.prototype.clearAll = function (e, properties) {
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.previousValue === dataItem.value) {
return;
}
this.onChangeEvent(e);
};
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.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);
}
this.resetFocusElement();
}
}
if (!this.isServerBlazor) {
this.hiddenElement.innerHTML = '';
}
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 {
var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
'role', 'autocorrect', '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',
'aria-owns': this.element.id + '_options',
'role': 'listbox',
'aria-haspopup': 'true',
'aria-expanded': 'false',
'aria-activedescendant': 'null',
'aria-live': 'polite',
'aria-labelledby': this.hiddenElement.id
};
};
DropDownList.prototype.setEnableRtl = function () {
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);
}
else {
this.hidePopup();
addClass([this.inputWrapper.container], dropDownListClasses.disable);
this.inputElement.setAttribute('aria-disabled', 'true');
this.targetElement().tabIndex = -1;
}
};
/**
* 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 this.inputWrapper.container;
};
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.renderList();
if (this.dataSource instanceof DataManager) {
this.initRemoteRender = true;
}
else {
this.updateValues();
}
};
DropDownList.prototype.updateValues = function () {
if (!isNullOrUndefined(this.value)) {
this.setSelection(this.getElementByValue(this.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.onBlur = 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;
}
};
DropDownList.prototype.focusOutAction = function (e) {
this.isInteracted = false;
this.focusOut(e);
this.onFocusOut();
};
DropDownList.prototype.onFocusOut = function () {
if (!this.enabled) {
return;
}
if (this.isSelected) {
this.isSelectCustom = false;
this.onChangeEvent(null);
}
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();
};
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);
this.bindCommonEvent();
};
DropDownList.prototype.bindCommonEvent = function () {
EventHandler.add(this.targetElement(), 'blur', this.onBlur, 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.bindClearEvent = function () {
if (this.showClearButton) {
EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
}
};
DropDownList.prototype.unBindCommonEvent = function () {
if (this.targetElement()) {
EventHandler.remove(this.targetElement(), 'blur', this.onBlur);
}
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 () {
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) {
if (!this.isServerBlazor) {
this.renderList();
}
else {
this.isServerIncrementalSearch = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);
}
}
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.onMouseClick = function (e) {
var target = e.target;
var li = closest(target, '.' + dropDownBaseClasses.li);
if (!this.isValidLI(li)) {
return;
}
this.setSelection(li, e);
if (Browser.isDevice && this.isFilterLayout()) {
history.back();
}
else {
var delay = 100;
this.closePopup(delay);
}
};
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.isServerBlazor && this.popupObj && this.popupObj.element) ?
this.popupObj.element.querySelectorAll('.' + dropDownBaseClasses.hover) :
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.incrementalSearch = function (e) {
if (this.liCollections.length > 0) {
var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id, this.isServerBlazor);
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;
}
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 isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';
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 (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
this.searchKeyEvent = e;
this.renderList();
}
if (!(this.isServerBlazor && (e.action === 'open' || e.action === 'space')) && isNullOrUndefined(this.list) ||
(!isNullOrUndefined(this.liCollections) && isNavigation && this.liCollections.length === 0) || this.isRequested) {
if (!(this.isServerBlazor && isNavAction)) {
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.updateHomeEndAction(e);
break;
case 'end':
this.updateHomeEndAction(e);
break;
case 'space':
if (this.getModuleName() === 'dropdownlist') {
if (!this.beforePopupOpen) {
this.showPopup();
}
}
break;
case 'open':
this.showPopup();
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) {
if (this.isServerBlazor && isNullOrUndefined(this.list)) {
this.isServerNavigation = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);
}
else {
this.isServerNavigation = false;
var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
if (this.isSelectFocusItem(focusEle)) {
this.setSelection(focusEle, e);
}
else {
var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
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 nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
if (!isNullOrUndefined(nextItem)) {
this.setSelection(nextItem, e);
}
}
e.preventDefault();
}
};
DropDownList.prototype.updateHomeEndAction = function (e) {
if (this.getModuleName() === 'dropdownlist') {
if (this.isServerBlazor && isNullOrUndefined(this.list)) {
this.isServerNavigation = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);
}
else {
this.isServerNavigation = false;
var findLi = 0;
if (e.action === 'home') {
findLi = 0;
}
else {
findLi = this.getItems().length - 1;
}
e.preventDefault();
if (this.activeIndex === findLi) {
return;
}
this.setSelection(this.liCollections[findLi], e);
}
}
};
DropDownList.prototype.selectCurrentValueOnTab = function (e) {
if (this.getModuleName() === 'autocomplete') {
this.selectCurrentItem(e);
}
else {
if (this.isPopupOpen) {
this.hidePopup(e);
this.focusDropDown(e);
}
}
};
DropDownList.prototype.mobileKeyActionHandler = function (e) {
if (!this.enabled) {
return;
}
if ((this.isEditTextBox()) && !this.isPopupOpen) {
return;
}
if (!this.readonly) {
if (this.list === undefined && !this.isRequested) {
this.searchKeyEvent = e;
this.renderList();
}
if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
this.liCollections.length === 0) || this.isRequested) {
return;
}
if (e.action === 'enter') {
this.selectCurrentItem(e);
}
}
};
DropDownList.prototype.selectCurrentItem = function (e) {
if (this.isPopupOpen) {
var li = this.list.querySelector('.' + dropDownListClasses.focus);
if (li) {
this.setSelection(li, e);
this.isTyped = false;
}
if (this.isSelected) {
this.isSelectCustom = false;
this.onChangeEvent(e);
}
this.hidePopup();
this.focusDropDown(e);
}
else {
this.showPopup();
}
};
DropDownList.prototype.isSelectFocusItem = function (element) {
return !isNullOrUndefined(element);
};
DropDownList.prototype.getPageCount = function () {
var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
};
DropDownList.prototype.pageUpSelection = function (steps, event) {
var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
this.setSelection(previousItem, event);
};
DropDownList.prototype.pageDownSelection = function (steps, event) {
var list = this.getItems();
var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
this.setSelection(previousItem, event);
};
DropDownList.prototype.unWireEvent = function () {
EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
this.unBindCommonEvent();
};
/**
* Event un binding for list items.
*
* @returns {void}
*/
DropDownList.prototype.unWireListEvents = function () {
EventHandler.remove(this.list, 'click', this.onMouseClick);
EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
};
DropDownList.prototype.checkSelector = function (id) {
return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
};
DropDownList.prototype.onDocumentClick = function (e) {
var target = e.target;
if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
!this.inputWrapper.container.contains(e.target)) {
if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
this.isDocumentClick = true;
var isActive = this.isRequested;
this.isInteracted = false;
this.hidePopup(e);
if (!isActive) {
this.onFocusOut();
this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);
}
}
}
else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)
&& !(this.getModuleName() === 'combobox' &&
!this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {
this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||
document.activeElement === this.filterInput);
e.preventDefault();
}
};
DropDownList.prototype.activeStateChange = function () {
if (this.isDocumentClick) {
this.hidePopup();
this.onFocusOut();
this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);
}
};
DropDownList.prototype.focusDropDown = function (e) {
if (!this.initial && this.isFilterLayout()) {
this.focusIn(e);
}
};
DropDownList.prototype.dropDownClick = function (e) {
if (e.which === 3 || e.button === 2) {
return;
}
if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {
return;
}
var target = e.target;
if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {
e.preventDefault();
}
if (!this.readonly) {
if (this.isPopupOpen) {
this.hidePopup();
if (this.isFilterLayout()) {
this.focusDropDown(e);
}
}
else {
this.focusIn(e);
this.floatLabelChange();
this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
this.isDropDownClick = true;
this.showPopup();
}
// eslint-disable-next-line @typescript-eslint/no-this-alias
var proxy_1 = this;
// eslint-disable-next-line max-len
var duration = (isBlazor()) ? 1000 : (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
if (!this.isSecondClick) {
setTimeout(function () {
proxy_1.cloneElements();
proxy_1.isSecondClick = true;
}, duration);
}
}
else {
this.focusIn(e);
}
};
DropDownList.prototype.cloneElements = function () {
if (this.list) {
var ulElement = this.list.querySelector('ul');
if (ulElement) {
ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
this.actionCompleteData.ulElement = ulElement;
}
}
};
DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
var _this = this;
this.removeSelection();
li.classList.add(dropDownBaseClasses.selected);
this.removeHover();
var value = this.getFormattedValue(li.getAttribute('data-value'));
var selectedData = this.getDataByValue(value);
if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {
var items = this.detachChanges(selectedData);
this.isSelected = true;
var eventArgs = {
e: e,
item: li,
itemData: items,
isInteracted: e ? true : false,
cancel: false
};
this.trigger('select', eventArgs, function (eventArgs) {
if (eventArgs.cancel) {
li.classList.remove(dropDownBaseClasses.selected);
}
else {
_this.selectEventCallback(li, e, preventSelect, selectedData, value);
if (_this.isServerBlazor) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.interopAdaptor.invokeMethodAsync('OnServerItemData', _this.itemData);
}
if (isSelection) {
_this.setSelectOptions(li, e);
}
}
});
}
else {
this.selectEventCallback(li, e, preventSelect, selectedData, value);
if (this.isServerBlazor) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerItemData', this.itemData);
}
if (isSelection) {
this.setSelectOptions(li, e);
}
}
};
DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
this.item = li;
this.itemData = selectedData;
var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
if (focusedItem) {
removeClass([focusedItem], dropDownBaseClasses.focus);
}
li.setAttribute('aria-selected', 'true');
this.activeIndex = this.getIndexByValue(value);
};
DropDownList.prototype.activeItem = function (li) {
if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
this.removeSelection();
li.classList.add(dropDownBaseClasses.selected);
this.removeHover();
li.setAttribute('aria-selected', 'true');
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
DropDownList.prototype.setValue = function (e) {
var dataItem = this.getItemData();
if (dataItem.value === null) {
if (isBlazor() && dataItem.text !== null || dataItem.text !== '') {
Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);
}
else {
Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);
}
}
else {
Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);
}
if (this.isServerBlazor) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.interopAdaptor.invokeMethodAsync('OnServerValueTemplate', dataItem);
}
if (this.valueTemplate && this.itemData !== null && !this.isServerBlazor) {
this.DropDownBaseresetBlazorTemplates(false, false, false, false, true);
this.setValueTemplate();
}
else if (this.inputElement.previousSibling === this.valueTempElement) {
detach(this.valueTempElement);
this.inputElement.style.display = 'block';
}
if (this.previousValue === dataItem.value) {
this.isSelected = false;
return true;
}
else {
this.isSelected = !this.initial ? true : false;
this.isSelectCustom = false;
if (this.getModuleName() === 'dropdownlist') {
this.updateIconState();
}
return false;
}
};
DropDownList.prototype.setSelection = function (li, e) {
if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
&& li.classList.contains(dropDownBaseClasses.selected)))) {
this.updateSelectedItem(li, e, false, true);
}
else {
this.setSelectOptions(li, e);
}
};
DropDownList.prototype.setSelectOptions = function (li, e) {
if (this.list) {
this.removeHover();
}
this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;
this.selectedLI = li;
if (this.setValue(e)) {
return;
}
if (this.isPopupOpen) {
attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
if (this.isFilterLayout() && this.filterInput) {
attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
}
}
if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&
(e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {
this.isSelectCustom = false;
this.onChangeEvent(e);
}
if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {
this.setScrollPosition(e);
}
if (Browser.info.name !== 'mozilla') {
attributes(this.inputElement, { 'aria-label': this.inputElement.value });
attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });
this.targetElement().removeAttribute('aria-live');
}
};
DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {
var checkTemplate = false;
if (dropdownTemplate) {
try {
checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;
}
catch (exception) {
checkTemplate = false;
}
}
return checkTemplate;
};
DropDownList.prototype.setValueTemplate = function () {
var compiledString;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (this.isReact) {
this.clearTemplate(['valueTemplate']);
}
if (!this.valueTempElement) {
this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });
this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);
this.inputElement.style.display = 'none';
}
this.valueTempElement.innerHTML = '';
var templateData = (isBlazor()) ? JSON.parse(JSON.stringify(this.itemData)) : this.itemData;
var valuecheck = this.dropdownCompiler(this.valueTemplate);
if (valuecheck) {
compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());
}
else {
compiledString = compile(this.valueTemplate);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var valueCompTemp = compiledString(templateData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, this.valueTempElement);
if (valueCompTemp && valueCompTemp.length > 0) {
for (var i = 0; i < valueCompTemp.length; i++) {
this.valueTempElement.appendChild(valueCompTemp[i]);
}
}
this.renderReactTemplates();
this.DropDownBaseupdateBlazorTemplates(false, false, false, false, true, true, true);
};
DropDownList.prototype.removeSelection = function () {
if (this.list) {
var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);
if (selectedItems.length) {
removeClass(selectedItems, dropDownBaseClasses.selected);
selectedItems[0].removeAttribute('aria-selected');
}
}
};
DropDownList.prototype.getItemData = function () {
var fields = this.fields;
var dataItem = null;
dataItem = this.itemData;
var dataValue;
var dataText;
if (!isNullOrUndefined(dataItem)) {
dataValue = getValue(fields.value, dataItem);
dataText = getValue(fields.text, dataItem);
}
var value = (!isNullOrUndefined(dataItem) &&
!isUndefined(dataValue) ? dataValue : dataItem);
var text = (!isNullOrUndefined(dataItem) &&
!isUndefined(dataValue) ? dataText : dataItem);
return { value: value, text: text };
};
/**
* To trigger the change event for list.
*
* @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
* @returns {void}
*/
DropDownList.prototype.onChangeEvent = function (eve) {
var dataItem = this.getItemData();
var index = this.isSelectCustom ? null : this.activeIndex;
this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);
this.detachChangeEvent(eve);
};
DropDownList.prototype.detachChanges = function (value) {
var items;
if (typeof value === 'string' ||
typeof value === 'boolean' ||
typeof value === 'number') {
items = Object.defineProperties({}