@hazyflame/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,116 lines • 180 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 { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
import { FieldSettings } from '../drop-down-base/drop-down-base';
import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
import { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';
import { Animation, Browser, prepend, isBlazor, Complex } from '@syncfusion/ej2-base';
import { Search } from '../common/incremental-search';
import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';
import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur } from './float-label';
var FOCUS = 'e-input-focus';
var DISABLED = 'e-disabled';
var OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';
var ELEMENT_WRAPPER = 'e-multi-select-wrapper';
var ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';
var HIDE_LIST = 'e-hide-listitem';
var DELIMITER_VIEW = 'e-delim-view';
var CHIP_WRAPPER = 'e-chips-collection';
var CHIP = 'e-chips';
var CHIP_CONTENT = 'e-chipcontent';
var CHIP_CLOSE = 'e-chips-close';
var CHIP_SELECTED = 'e-chip-selected';
var SEARCHBOX_WRAPPER = 'e-searcher';
var DELIMITER_VIEW_WRAPPER = 'e-delimiter';
var ZERO_SIZE = 'e-zero-size';
var REMAIN_WRAPPER = 'e-remain';
var CLOSEICON_CLASS = 'e-chips-close e-close-hooker';
var DELIMITER_WRAPPER = 'e-delim-values';
var POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';
var INPUT_ELEMENT = 'e-dropdownbase';
var RTL_CLASS = 'e-rtl';
var CLOSE_ICON_HIDE = 'e-close-icon-hide';
var MOBILE_CHIP = 'e-mob-chip';
var FOOTER = 'e-ddl-footer';
var HEADER = 'e-ddl-header';
var DISABLE_ICON = 'e-ddl-disable-icon';
var SPINNER_CLASS = 'e-ms-spinner-icon';
var HIDDEN_ELEMENT = 'e-multi-hidden';
var destroy = 'destroy';
var dropdownIcon = 'e-input-group-icon e-ddl-icon';
var iconAnimation = 'e-icon-anim';
var TOTAL_COUNT_WRAPPER = 'e-delim-total';
var BOX_ELEMENT = 'e-multiselect-box';
var FILTERPARENT = 'e-filter-parent';
var CUSTOM_WIDTH = 'e-search-custom-width';
/**
* The Multiselect allows the user to pick a more than one value from list of predefined values.
* ```html
* <select id="list">
* <option value='1'>Badminton</option>
* <option value='2'>Basketball</option>
* <option value='3'>Cricket</option>
* <option value='4'>Football</option>
* <option value='5'>Tennis</option>
* </select>
* ```
* ```typescript
* <script>
* var multiselectObj = new Multiselect();
* multiselectObj.appendTo("#list");
* </script>
* ```
*/
var MultiSelect = /** @class */ (function (_super) {
__extends(MultiSelect, _super);
/**
* Constructor for creating the DropDownList widget.
*
* @param {MultiSelectModel} option - Specifies the MultiSelect model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
function MultiSelect(option, element) {
var _this = _super.call(this, option, element) || this;
_this.clearIconWidth = 0;
_this.isValidKey = false;
_this.selectAllEventData = [];
_this.selectAllEventEle = [];
_this.isDynamicDataChange = false;
_this.scrollFocusStatus = false;
_this.keyDownStatus = false;
return _this;
}
MultiSelect.prototype.enableRTL = function (state) {
if (state) {
this.overAllWrapper.classList.add(RTL_CLASS);
}
else {
this.overAllWrapper.classList.remove(RTL_CLASS);
}
if (this.popupObj) {
this.popupObj.enableRtl = state;
this.popupObj.dataBind();
}
};
MultiSelect.prototype.requiredModules = function () {
var modules = [];
if (this.mode === 'CheckBox') {
this.isGroupChecking = this.enableGroupCheckBox;
if (this.enableGroupCheckBox) {
var prevOnChange = this.isProtectedOnChange;
this.isProtectedOnChange = true;
this.enableSelectionOrder = false;
this.isProtectedOnChange = prevOnChange;
}
this.allowCustomValue = false;
this.hideSelectedItem = false;
this.closePopupOnSelect = false;
modules.push({
member: 'CheckBoxSelection',
args: [this]
});
}
return modules;
};
MultiSelect.prototype.updateHTMLAttribute = function () {
if (Object.keys(this.htmlAttributes).length) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var htmlAttr = _a[_i];
switch (htmlAttr) {
case 'class': {
var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
if (updatedClassValue !== '') {
addClass([this.overAllWrapper], updatedClassValue.split(' '));
addClass([this.popupWrapper], updatedClassValue.split(' '));
}
break;
}
case 'disabled':
this.enable(false);
break;
case 'placeholder':
if (!this.placeholder) {
this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
this.setProperties({ placeholder: this.inputElement.placeholder }, true);
this.refreshPlaceHolder();
}
break;
default: {
var defaultAttr = ['id'];
var validateAttr = ['name', 'required', 'aria-required', 'form'];
var containerAttr = ['title', 'role', 'style', 'class'];
if (defaultAttr.indexOf(htmlAttr) > -1) {
this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
}
else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
}
else if (containerAttr.indexOf(htmlAttr) > -1) {
this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
}
else {
this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
}
break;
}
}
}
}
};
MultiSelect.prototype.updateReadonly = function (state) {
if (state || this.mode === 'CheckBox') {
this.inputElement.setAttribute('readonly', 'true');
}
else {
this.inputElement.removeAttribute('readonly');
}
};
MultiSelect.prototype.updateClearButton = function (state) {
if (state) {
if (this.overAllClear.parentNode) {
this.overAllClear.style.display = '';
}
else {
this.componentWrapper.appendChild(this.overAllClear);
}
this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);
}
else {
this.overAllClear.style.display = 'none';
this.componentWrapper.classList.add(CLOSE_ICON_HIDE);
}
};
MultiSelect.prototype.updateCssClass = function () {
if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
var updatedCssClassValues = this.cssClass;
updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
if (updatedCssClassValues !== '') {
addClass([this.overAllWrapper], updatedCssClassValues.split(' '));
addClass([this.popupWrapper], updatedCssClassValues.split(' '));
}
}
};
MultiSelect.prototype.updateOldPropCssClass = function (oldClass) {
if (!isNullOrUndefined(oldClass) && oldClass !== '') {
oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
if (oldClass !== '') {
removeClass([this.overAllWrapper], oldClass.split(' '));
removeClass([this.popupWrapper], oldClass.split(' '));
}
}
};
MultiSelect.prototype.onPopupShown = function () {
var _this = this;
if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
var proxy_1 = this;
window.onpopstate = function () {
proxy_1.hidePopup();
proxy_1.inputElement.focus();
};
history.pushState({}, '');
}
var animModel = { name: 'FadeIn', duration: 100 };
var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
this.trigger('open', eventArgs, function (eventArgs) {
if (!eventArgs.cancel) {
_this.focusAtFirstListItem();
document.body.appendChild(_this.popupObj.element);
if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {
_this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));
}
if (_this.mode === 'CheckBox' || _this.showDropDownIcon) {
addClass([_this.overAllWrapper], [iconAnimation]);
}
_this.refreshPopup();
_this.renderReactTemplates();
_this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
attributes(_this.inputElement, { 'aria-expanded': 'true' });
if (_this.isFirstClick) {
_this.loadTemplate();
}
}
});
};
MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {
for (var i = 0; i < listItems.length; i++) {
this.findGroupStart(listItems[i]);
this.findGroupStart(mainListItems[i]);
}
this.deselectHeader();
};
MultiSelect.prototype.loadTemplate = function () {
var _this = this;
if (this.mode === 'CheckBox' && this.itemTemplate && (isBlazor() && this.isServerRendered) &&
this.mainData && this.mainData.length > 0) {
setTimeout(function () {
_this.refreshListItems(null);
if (_this.mode === 'CheckBox') {
_this.removeFocus();
}
_this.notify('reOrder', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', e: _this });
}, this.mainData.length < 100 ? 100 : this.mainData.length);
}
else {
this.refreshListItems(null);
if (this.mode === 'CheckBox') {
this.removeFocus();
}
this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });
}
};
MultiSelect.prototype.setScrollPosition = function () {
if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
(!isNullOrUndefined(this.value) && (this.value.length > 0))) {
var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);
if (!isNullOrUndefined(valueEle)) {
this.scrollBottom(valueEle);
}
}
};
MultiSelect.prototype.focusAtFirstListItem = function () {
if (this.ulElement && this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li)) {
var element = void 0;
if (this.mode === 'CheckBox') {
this.removeFocus();
return;
}
else {
element = this.ulElement.querySelector('li.'
+ dropDownBaseClasses.li + ':not(.'
+ HIDE_LIST + ')');
}
if (element !== null) {
this.removeFocus();
this.addListFocus(element);
}
}
};
MultiSelect.prototype.focusAtLastListItem = function (data) {
var activeElement;
if (data) {
activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);
}
else {
if (this.value && this.value.length) {
Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);
}
else {
activeElement = null;
}
}
if (activeElement && activeElement.item !== null) {
this.addListFocus(activeElement.item);
this.scrollBottom(activeElement.item, activeElement.index);
}
};
MultiSelect.prototype.getAriaAttributes = function () {
var ariaAttributes = {
'aria-disabled': 'false',
'aria-owns': this.element.id + '_options',
'role': 'listbox',
'aria-multiselectable': 'true',
'aria-activedescendant': 'null',
'aria-haspopup': 'true',
'aria-expanded': 'false'
};
return ariaAttributes;
};
MultiSelect.prototype.updateListARIA = function () {
attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
var disableStatus = (this.inputElement.disabled) ? true : false;
attributes(this.inputElement, this.getAriaAttributes());
if (disableStatus) {
attributes(this.inputElement, { 'aria-disabled': 'true' });
}
this.ensureAriaDisabled((disableStatus) ? 'true' : 'false');
};
MultiSelect.prototype.ensureAriaDisabled = function (status) {
if (this.htmlAttributes && this.htmlAttributes['aria-disabled']) {
var attr = this.htmlAttributes;
extend(attr, { 'aria-disabled': status }, attr);
this.setProperties({ htmlAttributes: attr }, true);
}
};
MultiSelect.prototype.removelastSelection = function (e) {
var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);
var value = elements[elements.length - 1].getAttribute('data-value');
if (!isNullOrUndefined(this.value)) {
this.tempValues = this.value.slice();
}
var customValue = this.getFormattedValue(value);
if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
customValue.toString() === 'NaN'))) {
customValue = value;
}
this.removeValue(customValue, e);
this.removeChipSelection();
this.updateDelimeter(this.delimiterChar, e);
this.makeTextBoxEmpty();
if (this.mainList && this.listData) {
this.refreshSelection();
}
this.checkPlaceholderSize();
};
MultiSelect.prototype.onActionFailure = function (e) {
_super.prototype.onActionFailure.call(this, e);
this.renderPopup();
this.onPopupShown();
};
MultiSelect.prototype.targetElement = function () {
this.targetInputElement = this.inputElement;
if (this.mode === 'CheckBox' && this.allowFiltering) {
this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
}
return this.targetInputElement.value;
};
MultiSelect.prototype.getForQuery = function (valuecheck) {
var predicate;
var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
for (var i = 0; i < valuecheck.length; i++) {
if (i === 0) {
predicate = new Predicate(field, 'equal', valuecheck[i]);
}
else {
predicate = predicate.or(field, 'equal', valuecheck[i]);
}
}
return this.getQuery(this.query).where(predicate);
};
/* eslint-disable @typescript-eslint/no-unused-vars */
MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
/* eslint-enable @typescript-eslint/no-unused-vars */
_super.prototype.onActionComplete.call(this, ulElement, list, e);
this.updateSelectElementData(this.allowFiltering);
// eslint-disable-next-line @typescript-eslint/no-this-alias
var proxy = this;
if (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value !== null && this.value.length > 0) {
var items = [];
for (var k = 0; k < this.value.length; k++) {
var itemsData = this.getDataByValue(this.value[k]);
if (itemsData) {
// eslint-disable-next-line
items.push(itemsData[this.fields.value]); // remove the condition for hybrid
}
}
if (items.length === 0) {
this.setProperties({ 'value': null });
}
}
if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
for (var i = 0; i < this.value.length; i++) {
var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
if (!checkEle) {
this.value.splice(i, 1);
i -= 1;
}
}
}
this.updateActionList(ulElement, list, e);
if (isBlazor() && this.isServerRendered && this.allowFiltering && this.mode === 'CheckBox') {
this.removeFocus();
}
if (isBlazor() && this.isServerRendered && this.isDynamicDataChange && this.value && this.value.length > 0) {
this.updateVal(this.value, null, 'value');
this.addValidInputClass();
this.isDynamicDataChange = false;
}
if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering &&
!(isBlazor() && this.isServerRendered)) {
this.removeFocus();
}
};
/* eslint-disable @typescript-eslint/no-unused-vars */
MultiSelect.prototype.updateActionList = function (ulElement, list, e, isUpdated) {
/* eslint-enable @typescript-eslint/no-unused-vars */
if (this.mode === 'CheckBox' && this.showSelectAll) {
this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
}
if (!this.mainList && !this.mainData) {
this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
this.mainData = list;
this.mainListCollection = this.liCollections;
}
else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
this.mainData = list;
}
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
this.inputElement.value && this.inputElement.value !== '') {
this.checkForCustomValue(this.tempQuery, this.fields);
return;
}
if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||
this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
this.refreshSelection();
}
this.updateListARIA();
this.unwireListEvents();
this.wireListEvents();
if (!isNullOrUndefined(this.setInitialValue)) {
this.setInitialValue();
}
if (!isNullOrUndefined(this.selectAllAction)) {
this.selectAllAction();
}
if (this.setDynValue) {
if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
this.initialTextUpdate();
}
this.initialValueUpdate();
this.initialUpdate();
this.refreshPlaceHolder();
if (this.mode !== 'CheckBox' && this.changeOnBlur) {
this.updateValueState(null, this.value, null);
}
}
this.renderPopup();
if (this.beforePopupOpen) {
this.beforePopupOpen = false;
this.onPopupShown();
}
};
MultiSelect.prototype.refreshSelection = function () {
var value;
var element;
var className = this.hideSelectedItem ?
HIDE_LIST :
dropDownBaseClasses.selected;
if (!isNullOrUndefined(this.value)) {
for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
value = this.value[index];
element = this.findListElement(this.list, 'li', 'data-value', value);
if (element) {
addClass([element], className);
if (this.hideSelectedItem && element.previousSibling
&& element.previousElementSibling.classList.contains(dropDownBaseClasses.group)
&& (!element.nextElementSibling ||
element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {
addClass([element.previousElementSibling], className);
}
if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {
this.hideGroupItem(value);
}
if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {
removeClass([element], dropDownBaseClasses.focus);
var listEle = element.parentElement.querySelectorAll('.' +
dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
if (listEle.length > 0) {
addClass([listEle[0]], dropDownBaseClasses.focus);
}
else {
this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
this.l10nUpdate();
addClass([this.list], dropDownBaseClasses.noData);
}
}
element.setAttribute('aria-selected', 'true');
if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
var ariaValue = element.firstElementChild.getAttribute('aria-checked');
if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
var args = {
module: 'CheckBoxSelection',
enable: this.mode === 'CheckBox',
li: element,
e: null
};
this.notify('updatelist', args);
}
}
}
}
}
this.checkSelectAll();
this.checkMaxSelection();
};
MultiSelect.prototype.hideGroupItem = function (value) {
var element;
var element1;
var className = this.hideSelectedItem ?
HIDE_LIST :
dropDownBaseClasses.selected;
element1 = element = this.findListElement(this.ulElement, 'li', 'data-value', value);
var i = 0;
var j = 0;
var temp = true;
var temp1 = true;
do {
if (element && element.previousElementSibling
&& (!element.previousElementSibling.classList.contains(HIDE_LIST) &&
element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {
temp = false;
}
if (!temp || !element || (element.previousElementSibling
&& element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {
i = 10;
}
else {
element = element.previousElementSibling;
}
if (element1 && element1.nextElementSibling
&& (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&
element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {
temp1 = false;
}
if (!temp1 || !element1 || (element1.nextElementSibling
&& element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {
j = 10;
}
else {
element1 = element1.nextElementSibling;
}
} while (i < 10 || j < 10);
if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {
addClass([element.previousElementSibling], className);
}
else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {
removeClass([element.previousElementSibling], className);
}
};
MultiSelect.prototype.getValidLi = function () {
var liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);
};
MultiSelect.prototype.checkSelectAll = function () {
var groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;
var listItem = this.list.querySelectorAll('li.e-list-item');
var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;
if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
searchActiveCount = searchActiveCount - groupItemLength;
}
if ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
&& (this.mode === 'CheckBox' && this.showSelectAll)) {
this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
}
else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {
this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
}
if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {
for (var i = 0; i < listItem.length; i++) {
this.findGroupStart(listItem[i]);
}
this.deselectHeader();
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MultiSelect.prototype.openClick = function (e) {
if (!this.openOnClick && this.mode !== 'CheckBox') {
if (this.targetElement() !== '') {
this.showPopup();
}
else {
this.hidePopup();
}
}
else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {
this.showPopup();
}
};
MultiSelect.prototype.keyUp = function (e) {
if (this.mode === 'CheckBox' && !this.openOnClick) {
var char = String.fromCharCode(e.keyCode);
var isWordCharacter = char.match(/\w/);
if (!isNullOrUndefined(isWordCharacter)) {
this.isValidKey = true;
}
}
this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;
this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;
if (this.isValidKey) {
this.isValidKey = false;
this.expandTextbox();
this.showOverAllClear();
switch (e.keyCode) {
default:
// For filtering works in mobile firefox
this.search(e);
}
}
};
/**
* To filter the multiselect data from given data source by using query
*
* @param {Object[] | DataManager } dataSource - Set the data source to filter.
* @param {Query} query - Specify the query to filter the data.
* @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
* @returns {void}
*/
MultiSelect.prototype.filter = function (dataSource, query, fields) {
this.isFiltered = true;
this.remoteFilterAction = true;
this.dataUpdater(dataSource, query, fields);
};
MultiSelect.prototype.getQuery = function (query) {
var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
if (this.filterAction) {
if (this.targetElement() !== null) {
var dataType = this.typeOfData(this.dataSource).typeof;
if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
}
else {
var fields = this.fields;
filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
}
}
return filterQuery;
}
else {
return query ? query : this.query ? this.query : new Query();
}
};
MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {
this.isDataFetched = false;
if (this.targetElement().trim() === '') {
var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
if (this.backCommand) {
this.remoteCustomValue = false;
this.onActionComplete(list, this.mainData);
if (this.value && this.value.length) {
this.refreshSelection();
}
if (this.keyCode !== 8) {
this.focusAtFirstListItem();
}
this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });
}
}
else {
this.resetList(dataSource, fields, query);
if (this.allowCustomValue) {
if (!(dataSource instanceof DataManager)) {
this.checkForCustomValue(query, fields);
}
else {
this.remoteCustomValue = true;
this.tempQuery = query;
}
}
}
this.refreshPopup();
if (this.mode === 'CheckBox') {
this.removeFocus();
}
};
MultiSelect.prototype.checkForCustomValue = function (query, fields) {
var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
if (this.allowCustomValue && dataChecks) {
var value = this.inputElement.value;
var field = fields ? fields : this.fields;
var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
this.mainData[0] : this.mainData;
if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
var dataItem = {};
setValue(field.text, value, dataItem);
if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
=== 'number') {
setValue(field.value, Math.random(), dataItem);
}
else {
setValue(field.value, value, dataItem);
}
var tempData = JSON.parse(JSON.stringify(this.listData));
tempData.splice(0, 0, dataItem);
this.resetList(tempData, field, query);
}
else {
var tempData = [this.inputElement.value];
tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
parseFloat(tempData[0]) : tempData[0];
tempData[0] = (typeof customData === 'boolean') ?
(tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];
this.resetList(tempData, field);
}
}
if (this.value && this.value.length) {
this.refreshSelection();
}
};
MultiSelect.prototype.getNgDirective = function () {
return 'EJS-MULTISELECT';
};
MultiSelect.prototype.wrapperClick = function (e) {
this.setDynValue = false;
if (!this.enabled) {
return;
}
if (e.target === this.overAllClear) {
e.preventDefault();
return;
}
if (!this.inputFocus) {
this.inputElement.focus();
}
if (!this.readonly) {
if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE) !== -1) {
if (this.isPopupOpen()) {
this.refreshPopup();
}
return;
}
if (!this.isPopupOpen() &&
(this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
this.showPopup();
}
else {
this.hidePopup();
if (this.mode === 'CheckBox') {
this.showOverAllClear();
this.inputFocus = true;
if (!this.overAllWrapper.classList.contains(FOCUS)) {
this.overAllWrapper.classList.add(FOCUS);
}
}
}
}
if (!(this.targetElement() && this.targetElement() !== '')) {
e.preventDefault();
}
};
MultiSelect.prototype.enable = function (state) {
if (state) {
this.overAllWrapper.classList.remove(DISABLED);
this.inputElement.removeAttribute('disabled');
attributes(this.inputElement, { 'aria-disabled': 'false' });
this.ensureAriaDisabled('false');
}
else {
this.overAllWrapper.classList.add(DISABLED);
this.inputElement.setAttribute('disabled', 'true');
attributes(this.inputElement, { 'aria-disabled': 'true' });
this.ensureAriaDisabled('true');
}
if (this.enabled !== state) {
this.enabled = state;
}
this.hidePopup();
};
MultiSelect.prototype.onBlur = function (eve, isDocClickFromCheck) {
var target;
if (!isNullOrUndefined(eve)) {
target = eve.relatedTarget;
}
if (this.popupObj && document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {
if (this.mode !== 'CheckBox') {
this.inputElement.focus();
}
else if ((this.floatLabelType === 'Auto' &&
((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {
addClass([this.overAllWrapper], 'e-valid-input');
}
return;
}
if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&
((isNullOrUndefined(this.value)) || this.value.length === 0)) {
removeClass([this.overAllWrapper], 'e-valid-input');
}
if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {
this.inputFocus = false;
this.overAllWrapper.classList.remove(FOCUS);
return;
}
if (this.scrollFocusStatus) {
if (!isNullOrUndefined(eve)) {
eve.preventDefault();
}
this.inputElement.focus();
this.scrollFocusStatus = false;
return;
}
this.inputFocus = false;
this.overAllWrapper.classList.remove(FOCUS);
this.refreshListItems(null);
if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
this.updateDelimView();
}
if (this.changeOnBlur) {
this.updateValueState(eve, this.value, this.tempValues);
this.dispatchEvent(this.hiddenElement, 'change');
}
this.overAllClear.style.display = 'none';
if (this.isPopupOpen()) {
this.DropDownBaseresetBlazorTemplates(false, false, true, true, false, true, true);
this.hidePopup();
}
this.makeTextBoxEmpty();
this.trigger('blur');
this.focused = true;
if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {
this.removeChipFocus();
}
this.removeChipSelection();
this.refreshInputHight();
floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);
this.refreshPlaceHolder();
if ((this.allowFiltering || (this.enableSelectionOrder === true && this.mode === 'CheckBox'))
&& !isNullOrUndefined(this.mainList)) {
this.ulElement = this.mainList;
}
this.checkPlaceholderSize();
};
MultiSelect.prototype.checkPlaceholderSize = function () {
if (this.showDropDownIcon) {
var downIconWidth = this.dropIcon.offsetWidth +
parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);
this.setPlaceholderSize(downIconWidth);
}
else {
if (!isNullOrUndefined(this.dropIcon)) {
this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);
}
}
};
MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
if (isNullOrUndefined(this.value) || this.value.length === 0) {
if (this.dropIcon.offsetWidth !== 0) {
this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';
}
else {
addClass([this.searchWrapper], CUSTOM_WIDTH);
}
}
else if (!isNullOrUndefined(this.value)) {
this.searchWrapper.removeAttribute('style');
removeClass([this.searchWrapper], CUSTOM_WIDTH);
}
};
MultiSelect.prototype.refreshInputHight = function () {
if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
this.searchWrapper.classList.remove(ZERO_SIZE);
}
else {
this.searchWrapper.classList.add(ZERO_SIZE);
}
};
MultiSelect.prototype.validateValues = function (newValue, oldValue) {
return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());
};
MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {
var newValue = newVal ? newVal : [];
var oldValue = oldVal ? oldVal : [];
if (this.initStatus && this.validateValues(newValue, oldValue)) {
var eventArgs = {
e: event,
oldValue: oldVal,
value: newVal,
isInteracted: event ? true : false,
element: this.element
};
if (this.isAngular && this.preventChange) {
this.preventChange = false;
}
else {
this.trigger('change', eventArgs);
}
this.updateTempValue();
if (!this.changeOnBlur) {
this.dispatchEvent(this.hiddenElement, 'change');
}
}
};
MultiSelect.prototype.updateTempValue = function () {
if (!this.value) {
this.tempValues = this.value;
}
else {
this.tempValues = this.value.slice();
}
};
MultiSelect.prototype.getPagingCount = function () {
var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
return Math.round(this.list.offsetHeight / parseInt(height, 10));
};
MultiSelect.prototype.pageUpSelection = function (steps) {
var collection = this.list.querySelectorAll('li.'
+ dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
this.addListFocus(previousItem);
this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
};
MultiSelect.prototype.pageDownSelection = function (steps) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var list = this.getItems();
var collection = this.list.querySelectorAll('li.'
+ dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
this.addListFocus(previousItem);
this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
};
MultiSelect.prototype.getItems = function () {
if (!this.list) {
_super.prototype.render.call(this);
}
return this.ulElement && this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li).length > 0 ?
this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li
+ ':not(.' + HIDE_LIST + ')') : [];
};
MultiSelect.prototype.focusInHandler = function (e) {
if (this.enabled) {
this.showOverAllClear();
this.inputFocus = true;
if (this.value && this.value.length) {
if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {
this.chipCollectionWrapper.style.display = '';
}
else {
this.showDelimWrapper();
}
if (this.mode !== 'CheckBox') {
this.viewWrapper.style.display = 'none';
}
}
if (this.mode !== 'CheckBox') {
this.searchWrapper.classList.remove(ZERO_SIZE);
}
this.checkPlaceholderSize();
if (this.focused) {
var args = { isInteracted: e ? true : false, event: e };
this.trigger('focus', args);
this.focused = false;
}
if (!this.overAllWrapper.classList.contains(FOCUS)) {
this.overAllWrapper.classList.add(FOCUS);
}
floatLabelFocus(this.overAllWrapper, this.componentWrapper);
if (this.isPopupOpen()) {
this.refreshPopup();
}
return true;
}
else {
return false;
}
};
MultiSelect.prototype.showDelimWrapper = function () {
if (this.mode === 'CheckBox') {
this.viewWrapper.style.display = '';
}
else {
this.delimiterWrapper.style.display = '';
}
this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);
};
MultiSelect.prototype.hideDelimWrapper = function () {
this.delimiterWrapper.style.display = 'none';
this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);
};
MultiSelect.prototype.expandTextbox = function () {
var size = 5;
if (this.placeholder) {
size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;
}
if (this.inputElement.value.length > size) {
this.inputElement.size = this.inputElement.value.length;
}
else {
this.inputElement.size = size;
}
};
MultiSelect.prototype.isPopupOpen = function () {
return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));
};
MultiSelect.prototype.refreshPopup = function () {
if (this.popupObj && this.mobFilter) {
this.popupObj.setProperties({ width: this.calcPopupWidth() });
this.popupObj.refreshPosition(this.overAllWrapper);
this.popupObj.resolveCollision();
}
};
MultiSelect.prototype.checkTextLength = function () {
return this.targetElement().length < 1;
};
MultiSelect.prototype.popupKeyActions = function (e) {
switch (e.keyCode) {
case 38:
this.hidePopup();
if (this.mode === 'CheckBox') {
this.inputElement.focus();
}
e.preventDefault();
break;
case 40:
if (!this.isPopupOpen()) {
this.showPopup();
e.preventDefault();
}
break;
}
};
MultiSelect.prototype.updateAriaAttribute = function () {
var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
if (!isNullOrUndefined(focusedItem)) {
this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
}
};
MultiSelect.prototype.homeNavigation = function (isHome) {
this.removeFocus();
var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li
+ ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
if (scrollEle.length > 0) {
var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
element.classList.add(dropDownBaseClasses.focus);
this.scrollBottom(element);
}
};
MultiSelect.prototype.onKeyDown = function (e) {
if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {
return;
}
this.keyCode = e.keyCode;
this.keyDownStatus = true;
if (e.keyCode > 111 && e.keyCode < 124) {
return;
}
if (e.altKey) {
this.popupKeyActions(e);
return;
}
else if (this.isPopupOpen()) {
var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
var activeIndex = void 0;
switch (e.keyCode) {
case 36:
case 35:
this.homeNavigation((e.keyCode === 36) ? true : false);
break;
case 33:
e.preventDefault();
if (focusedItem) {
this.getIndexByValue(focusedItem.getAttribute('data-value'));
this.pageUpSelection(activeIndex - this.getPagingCount());
this.updateAriaAttribute();
}
return;
case 34:
e.preventDefault();
if (focusedItem) {
this.getIndexByValue(focusedItem.getAttribute('data-value'));
this.pageDownSelection(activeIndex + this.getPagingCount());
thi