@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,186 lines (1,185 loc) • 150 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 @typescript-eslint/no-explicit-any */
import { Input, TextBox } from '@syncfusion/ej2-inputs';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { NotifyPropertyChanges, Property, Event, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';
import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';
import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents } from '@syncfusion/ej2-base';
import { DataManager, DataUtil } from '@syncfusion/ej2-data';
import { Popup } from '@syncfusion/ej2-popups';
import { TreeView } from '@syncfusion/ej2-navigations';
var RTL = 'e-rtl';
var DROPDOWNTREE = 'e-ddt';
var HIDDENELEMENT = 'e-ddt-hidden';
var DROPDOWNICON = 'e-input-group-icon e-ddt-icon e-icons';
var SHOW_CHIP = 'e-show-chip';
var SHOW_CLEAR = 'e-show-clear';
var SHOW_DD_ICON = 'e-show-dd-icon';
var CHIP_INPUT = 'e-chip-input';
var INPUTFOCUS = 'e-input-focus';
var INPUTGROUP = 'e-input-group';
var ICONANIMATION = 'e-icon-anim';
var CLOSEICON_CLASS = 'e-clear-icon e-icons';
var CHIP_WRAPPER = 'e-chips-wrapper';
var CHIP_COLLECTION = 'e-chips-collection';
var CHIP = 'e-chips';
var CHIP_CONTENT = 'e-chipcontent';
var CHIP_CLOSE = 'e-chips-close';
var HIDEICON = 'e-icon-hide';
var DDTHIDEICON = 'e-ddt-icon-hide';
var POPUP_CLASS = 'e-ddt e-popup';
var PARENTITEM = 'e-list-parent';
var CONTENT = 'e-popup-content';
var DROPDOWN = 'e-dropdown';
var DISABLED = 'e-disabled';
var ICONS = 'e-icons';
var CHECKALLPARENT = 'e-selectall-parent';
var CHECKALLHIDE = 'e-hide-selectall';
var BIGGER = 'e-bigger';
var SMALL = 'e-small';
var ALLTEXT = 'e-all-text';
var CHECKBOXFRAME = 'e-frame';
var CHECK = 'e-check';
var CHECKBOXWRAP = 'e-checkbox-wrapper';
var FILTERWRAP = 'e-filter-wrap';
var DDTICON = 'e-ddt-icon';
var FOOTER = 'e-ddt-footer';
var HEADER = 'e-ddt-header';
var NODATACONTAINER = 'e-ddt-nodata';
var NODATA = 'e-no-data';
var HEADERTEMPLATE = 'HeaderTemplate';
var FOOTERTEMPLATE = 'FooterTemplate';
var NORECORDSTEMPLATE = 'NoRecordsTemplate';
var ACTIONFAILURETEMPLATE = 'ActionFailureTemplate';
var CUSTOMTEMPLATE = 'CustomTemplate';
var REMAIN_WRAPPER = 'e-remain';
var OVERFLOW_VIEW = 'e-overflow';
var SHOW_TEXT = 'e-show-text';
var TOTAL_COUNT_WRAPPER = 'e-total-count';
var REMAIN_COUNT = 'e-wrap-count';
var Fields = /** @class */ (function (_super) {
__extends(Fields, _super);
function Fields() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('child')
], Fields.prototype, "child", void 0);
__decorate([
Property([])
], Fields.prototype, "dataSource", void 0);
__decorate([
Property('expanded')
], Fields.prototype, "expanded", void 0);
__decorate([
Property('hasChildren')
], Fields.prototype, "hasChildren", void 0);
__decorate([
Property('htmlAttributes')
], Fields.prototype, "htmlAttributes", void 0);
__decorate([
Property('iconCss')
], Fields.prototype, "iconCss", void 0);
__decorate([
Property('imageUrl')
], Fields.prototype, "imageUrl", void 0);
__decorate([
Property('parentValue')
], Fields.prototype, "parentValue", void 0);
__decorate([
Property(null)
], Fields.prototype, "query", void 0);
__decorate([
Property('selectable')
], Fields.prototype, "selectable", void 0);
__decorate([
Property('selected')
], Fields.prototype, "selected", void 0);
__decorate([
Property(null)
], Fields.prototype, "tableName", void 0);
__decorate([
Property('text')
], Fields.prototype, "text", void 0);
__decorate([
Property('tooltip')
], Fields.prototype, "tooltip", void 0);
__decorate([
Property('value')
], Fields.prototype, "value", void 0);
return Fields;
}(ChildProperty));
export { Fields };
var TreeSettings = /** @class */ (function (_super) {
__extends(TreeSettings, _super);
function TreeSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], TreeSettings.prototype, "autoCheck", void 0);
__decorate([
Property(true)
], TreeSettings.prototype, "checkDisabledChildren", void 0);
__decorate([
Property('Auto')
], TreeSettings.prototype, "expandOn", void 0);
__decorate([
Property(false)
], TreeSettings.prototype, "loadOnDemand", void 0);
return TreeSettings;
}(ChildProperty));
export { TreeSettings };
/**
* The Dropdown Tree control allows you to select single or multiple values from hierarchical data in a tree-like structure.
* It has several out-of-the-box features, such as data binding, check boxes, templates, filter,
* UI customization, accessibility, and preselected values.
* ```html
* <input type="text" id="tree"></input>
* ```
* ```typescript
* let ddtObj: DropDownTree = new DropDownTree();
* ddtObj.appendTo("#tree");
* ```
*/
var DropDownTree = /** @class */ (function (_super) {
__extends(DropDownTree, _super);
function DropDownTree(options, element) {
var _this = _super.call(this, options, element) || this;
_this.filterTimer = null;
_this.isFilteredData = false;
_this.isFilterRestore = false;
_this.selectedData = [];
_this.filterDelayTime = 300;
_this.isClicked = false;
_this.documentClickContext = _this.onDocumentClick.bind(_this);
// Specifies if the checkAll method has been called
_this.isCheckAllCalled = false;
_this.isFromFilterChange = false;
return _this;
}
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string}
* @hidden
*/
DropDownTree.prototype.getPersistData = function () {
var keyEntity = ['value'];
return this.addOnPersist(keyEntity);
};
DropDownTree.prototype.getLocaleName = function () {
return 'drop-down-tree';
};
/**
* Initialize the event handler.
*
* @returns {void}
* @private
*/
DropDownTree.prototype.preRender = function () {
this.inputFocus = false;
this.isPopupOpen = false;
this.isFirstRender = true;
this.isInitialized = false;
this.currentText = null;
this.currentValue = null;
this.oldValue = null;
this.removeValue = false;
this.selectedText = [];
this.treeItems = [];
this.dataValue = null;
this.isNodeSelected = false;
this.isDynamicChange = false;
this.clearIconWidth = 0;
this.headerTemplateId = "" + this.element.id + HEADERTEMPLATE;
this.footerTemplateId = "" + this.element.id + FOOTERTEMPLATE;
this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE;
this.noRecordsTemplateId = "" + this.element.id + NORECORDSTEMPLATE;
this.customTemplateId = "" + this.element.id + CUSTOMTEMPLATE;
this.keyConfigs = {
escape: 'escape',
altUp: 'alt+uparrow',
altDown: 'alt+downarrow',
tab: 'tab',
shiftTab: 'shift+tab',
end: 'end',
enter: 'enter',
home: 'home',
moveDown: 'downarrow',
moveLeft: 'leftarrow',
moveRight: 'rightarrow',
moveUp: 'uparrow',
ctrlDown: 'ctrl+downarrow',
ctrlUp: 'ctrl+uparrow',
ctrlEnter: 'ctrl+enter',
ctrlHome: 'ctrl+home',
ctrlEnd: 'ctrl+end',
shiftDown: 'shift+downarrow',
shiftUp: 'shift+uparrow',
shiftEnter: 'shift+enter',
shiftHome: 'shift+home',
shiftEnd: 'shift+end',
csDown: 'ctrl+shift+downarrow',
csUp: 'ctrl+shift+uparrow',
csEnter: 'ctrl+shift+enter',
csHome: 'ctrl+shift+home',
csEnd: 'ctrl+shift+end',
space: 'space',
ctrlA: 'ctrl+A'
};
};
/**
* To Initialize the control rendering
*
* @private
* @returns {void}
*/
DropDownTree.prototype.render = function () {
var isTree = select('#' + this.element.id + '_tree', document);
if (isTree) {
var popupDiv = select('#' + this.element.id + '_options', document);
detach(popupDiv ? popupDiv : isTree.parentElement);
}
if (this.element.tagName === 'INPUT') {
this.inputEle = this.element;
if (isNOU(this.inputEle.getAttribute('role'))) {
this.inputEle.setAttribute('aria-expanded', 'false');
this.inputEle.setAttribute('role', 'combobox');
this.inputEle.setAttribute('aria-haspopup', 'tree');
this.inputEle.setAttribute('aria-controls', this.element.id + '_options');
}
if (isNOU(this.inputEle.getAttribute('type'))) {
this.inputEle.setAttribute('type', 'text');
}
}
else {
if (!isNOU(this.element.id)) {
this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text', id: this.element.id + '_textbox' } });
}
else {
this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
}
this.element.parentElement.insertBefore(this.inputEle, this.element);
}
this.inputObj = Input.createInput({
element: this.inputEle,
floatLabelType: this.floatLabelType,
buttons: this.showDropDownIcon ? [DROPDOWNICON] : null,
properties: {
readonly: true,
placeholder: this.placeholder,
enabled: this.enabled,
cssClass: this.cssClass,
enableRtl: this.enableRtl
}
}, this.createElement);
this.inputWrapper = this.inputObj.container;
if (!this.inputWrapper.classList.contains(INPUTGROUP)) {
this.inputWrapper.classList.add(INPUTGROUP);
}
if (this.showDropDownIcon) {
this.inputWrapper.classList.add(SHOW_DD_ICON);
}
if (this.element.tagName === this.getDirective()) {
this.element.appendChild(this.inputWrapper);
}
this.createHiddenElement();
this.createClearIcon();
this.inputWrapper.classList.add(DROPDOWNTREE);
this.setElementWidth(this.width);
this.updateDataAttribute();
this.setHTMLAttributes();
this.setAttributes();
this.popupDiv = this.createElement('div', { className: CONTENT });
this.popupDiv.classList.add(DROPDOWN);
this.tree = this.createElement('div', { id: this.element.id + '_tree' });
this.popupDiv.appendChild(this.tree);
if (!this.destroyPopupOnHide) {
document.body.appendChild(this.popupDiv);
}
this.wireTreeEvents();
addClass([this.popupDiv], DDTHIDEICON);
this.renderTree();
this.isRemoteData = this.fields.dataSource instanceof DataManager;
if (this.allowMultiSelection || this.showCheckBox) {
if (this.mode !== 'Delimiter') {
this.createChip();
}
if (!this.wrapText && this.mode !== 'Custom') {
this.overFlowWrapper = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + HIDEICON });
this.inputWrapper.insertBefore(this.overFlowWrapper, this.hiddenElement);
if (this.mode !== 'Box') {
addClass([this.overFlowWrapper], SHOW_TEXT);
}
}
}
if (!this.isRemoteData) {
this.setTreeValue();
this.setTreeText();
this.updateHiddenValue();
this.setSelectedValue();
if (!this.wrapText) {
this.updateView();
}
}
this.wireEvents();
var firstUl = select('.' + PARENTITEM, this.treeObj.element);
if (firstUl && firstUl.getAttribute('aria-multiselectable')) {
firstUl.removeAttribute('aria-multiselectable');
}
this.setOldValue();
if (!this.isRemoteData) {
this.isInitialized = true;
}
this.hasTemplate = this.itemTemplate || this.headerTemplate || this.footerTemplate || this.actionFailureTemplate
|| this.noRecordsTemplate || this.customTemplate || this.valueTemplate;
this.renderComplete();
};
DropDownTree.prototype.hideCheckAll = function (flag) {
var checkAllEle = !isNOU(this.popupEle) ? this.popupEle.querySelector('.' + CHECKALLPARENT) : null;
if (!isNOU(checkAllEle)) {
if (flag && !checkAllEle.classList.contains(CHECKALLHIDE)) {
addClass([checkAllEle], CHECKALLHIDE);
}
else if (!flag && checkAllEle.classList.contains(CHECKALLHIDE)) {
removeClass([checkAllEle], CHECKALLHIDE);
}
}
};
DropDownTree.prototype.renderFilter = function () {
this.filterContainer = this.createElement('div', {
id: this.element.id + '_filter_wrap',
className: FILTERWRAP
});
var filterInput = this.createElement('input', {
id: this.element.id + '_filter',
attrs: { autocomplete: 'off', 'aria-label': this.filterBarPlaceholder }
});
this.filterContainer.appendChild(filterInput);
prepend([this.filterContainer], this.popupEle);
this.filterObj = new TextBox({
value: '',
showClearButton: true,
placeholder: this.filterBarPlaceholder,
input: this.filterChangeHandler.bind(this)
});
this.filterObj.appendTo('#' + this.element.id + '_filter');
this.keyboardModule = new KeyboardEvents(this.filterObj.element, {
keyAction: this.filterKeyAction.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
};
DropDownTree.prototype.filterKeyAction = function (e) {
var _this = this;
var eventArgs = {
cancel: false,
event: e
};
var focusedElement;
this.trigger('keyPress', eventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
switch (e.action) {
case 'altUp':
if (_this.isPopupOpen) {
_this.hidePopup();
}
break;
case 'shiftTab':
addClass([_this.inputWrapper], [INPUTFOCUS]);
break;
case 'moveDown':
e.preventDefault();
_this.filterObj.element.blur();
focusedElement = _this.treeObj.element.querySelector('li');
if (focusedElement) {
focusedElement.focus();
}
break;
}
}
});
};
DropDownTree.prototype.filterChangeHandler = function (args) {
var _this = this;
if (!isNOU(args.value)) {
window.clearTimeout(this.filterTimer);
this.filterTimer = window.setTimeout(function () { _this.filterHandler(args.value, args.event); }, this.filterDelayTime);
}
};
DropDownTree.prototype.isChildObject = function () {
if (typeof this.treeObj.fields.child === 'object') {
return true;
}
else {
return false;
}
};
DropDownTree.prototype.filterHandler = function (value, event) {
var _this = this;
this.isFromFilterChange = true;
if (!this.isFilteredData) {
if (this.isRemoteData) {
this.treeObj.expandedNodes = [];
}
this.treeData = this.treeObj.getTreeData();
}
var filterFields = this.cloneFields(this.fields);
var args = {
cancel: false,
preventDefaultAction: false,
event: event,
text: value.trim(),
fields: filterFields
};
this.trigger('filtering', args, function (args) {
if (!args.cancel) {
var flag = false;
var fields = void 0;
_this.isFilteredData = true;
if (args.text === '') {
_this.isFilteredData = false;
_this.isFilterRestore = true;
fields = _this.cloneFields(_this.fields);
_this.treeObj.element.classList.remove('e-filtering');
}
else if (args.preventDefaultAction) {
fields = args.fields;
_this.treeObj.element.classList.add('e-filtering');
}
else {
if (_this.treeDataType === 1) {
fields = _this.selfReferencefilter(args.text, args.fields);
}
else {
if (_this.fields.dataSource instanceof DataManager) {
fields = _this.remoteDataFilter(args.text, args.fields);
fields.child = _this.fields.child;
_this.treeObj.fields = _this.getTreeFields(args.fields);
_this.treeObj.dataBind();
flag = true;
}
else {
fields = _this.nestedFilter(args.text, args.fields);
}
}
_this.treeObj.element.classList.add('e-filtering');
}
_this.hideCheckAll(_this.isFilteredData);
if (flag) {
return;
}
if (_this.isRemoteData) {
if (_this.isChildObject()) {
fields.child = _this.fields.child;
}
else {
fields = args.fields;
}
}
_this.treeObj.fields = _this.getTreeFields(fields);
_this.treeObj.dataBind();
if (_this.popupObj) {
_this.popupObj.refreshPosition();
}
if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
for (var i = 0; i < _this.treeObj.portals.length; i++) {
if (_this.portals.indexOf(_this.treeObj.portals[i]) === -1) {
_this.portals.push(_this.treeObj.portals[i]);
}
}
if (_this.isReact) {
_this.renderReactTemplates();
}
}
}
});
};
DropDownTree.prototype.remoteDataFilter = function (value, filteredFields) {
var _this = this;
filteredFields.dataSource = this.treeData.map(function (item) {
return _this.remoteChildFilter(value, item);
}).filter(function (filteredChild) {
return !isNOU(filteredChild);
});
return filteredFields;
};
DropDownTree.prototype.remoteChildFilter = function (value, node, isChild, isChildFiltering) {
var children = this.isChildObject() ? node['child'] : node[this.fields.child];
if (isNOU(children)) {
return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;
}
var matchedChildren = [];
for (var i = 0; i < children.length; i++) {
var filteredChild = this.remoteChildFilter(value, children[i], true, true);
if (!isNOU(filteredChild)) {
matchedChildren.push(filteredChild);
}
}
var filteredItems = Object.assign({}, node);
isChildFiltering = false;
if (matchedChildren.length !== 0) {
filteredItems.child = matchedChildren;
}
else {
filteredItems.child = null;
filteredItems = (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;
}
return filteredItems;
};
DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
var matchedDataSource = [];
for (var i = 0; i < this.treeData.length; i++) {
var filteredChild = this.nestedChildFilter(value, this.treeData[parseInt(i.toString(), 10)]);
if (!isNOU(filteredChild)) {
matchedDataSource.push(filteredChild);
}
}
filteredFields.dataSource = matchedDataSource;
return filteredFields;
};
DropDownTree.prototype.nestedChildFilter = function (value, node) {
var children = node[this.fields.child];
if (isNOU(children)) {
return (this.isMatchedNode(value, node)) ? node : null;
}
else {
var matchedChildren = [];
for (var i = 0; i < children.length; i++) {
var filteredChild = this.nestedChildFilter(value, children[parseInt(i.toString(), 10)]);
if (!isNOU(filteredChild)) {
matchedChildren.push(filteredChild);
}
}
var filteredItems = Object.assign({}, node);
if (matchedChildren.length !== 0) {
filteredItems[this.fields.child] = matchedChildren;
return filteredItems;
}
else {
filteredItems[this.fields.child] = null;
return (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;
}
}
};
DropDownTree.prototype.selfReferencefilter = function (value, filteredFields) {
var matchedData = [];
var matchedDataSource = [];
for (var i = 0; i < this.treeData.length; i++) {
if (this.isMatchedNode(value, this.treeData[i])) {
matchedData.push(this.treeData[i]);
}
}
for (var i = 0; i < matchedData.length; i++) {
if (matchedDataSource.indexOf(matchedData[i]) === -1) {
matchedDataSource.push(matchedData[i]);
var parentId = matchedData[parseInt(i.toString(), 10)][this.fields.parentValue];
while (!isNOU(parentId)) {
var parent_1 = null;
for (var j = 0; j < this.treeData.length; j++) {
var value_1 = this.treeData[parseInt(j.toString(), 10)][this.fields.value];
if (!isNOU(value_1) && (value_1 === parentId)) {
parent_1 = this.treeData[j];
break;
}
}
if (!isNOU(parent_1) && (matchedDataSource.indexOf(parent_1) === -1)) {
matchedDataSource.push(parent_1);
parentId = parent_1[this.fields.parentValue];
}
else {
break;
}
}
}
}
filteredFields.dataSource = matchedDataSource;
return filteredFields;
};
DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {
var checkValue;
var isObjectValue = isChild && isChildFiltering && this.isChildObject();
checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];
if (!checkValue && !isNOU(this.fields.child.text)) {
var tempChild = this.fields.child;
while (!node[tempChild.text]) {
tempChild = tempChild.child;
}
checkValue = node[tempChild.text];
}
if (this.ignoreCase) {
checkValue = checkValue.toLowerCase();
value = value.toLowerCase();
}
if (this.ignoreAccent) {
checkValue = DataUtil.ignoreDiacritics(checkValue);
value = DataUtil.ignoreDiacritics(value);
}
if (this.filterType === 'StartsWith') {
return checkValue.slice(0, value.length) === value;
}
else if (this.filterType === 'EndsWith') {
return checkValue.slice(-value.length) === value;
}
else {
return checkValue.indexOf(value) !== -1;
}
};
/* To wire events for the dropdown tree */
DropDownTree.prototype.wireEvents = function () {
EventHandler.add(this.inputWrapper, 'mouseup', this.dropDownClick, this);
EventHandler.add(this.inputWrapper, 'focus', this.focusIn, this);
EventHandler.add(this.inputWrapper, 'blur', this.focusOut, this);
EventHandler.add(this.inputWrapper, 'mousemove', this.mouseIn, this);
EventHandler.add(this.inputWrapper, 'mouseout', this.onMouseLeave, this);
EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
EventHandler.add(window, 'resize', this.windowResize, this);
var formElement = closest(this.inputWrapper, 'form');
if (formElement) {
EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
}
this.keyboardModule = new KeyboardEvents(this.inputWrapper, {
keyAction: this.keyActionHandler.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
};
DropDownTree.prototype.wireTreeEvents = function () {
this.keyboardModule = new KeyboardEvents(this.tree, {
keyAction: this.treeAction.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
};
DropDownTree.prototype.wireCheckAllWrapperEvents = function () {
this.keyboardModule = new KeyboardEvents(this.checkAllParent, {
keyAction: this.checkAllAction.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
};
/* To unwire events for the dropdown tree */
DropDownTree.prototype.unWireEvents = function () {
EventHandler.remove(this.inputWrapper, 'mouseup', this.dropDownClick);
EventHandler.remove(this.inputWrapper, 'focus', this.focusIn);
EventHandler.remove(this.inputWrapper, 'blur', this.focusOut);
EventHandler.remove(this.inputWrapper, 'mousemove', this.mouseIn);
EventHandler.remove(this.inputWrapper, 'mouseout', this.onMouseLeave);
EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
EventHandler.remove(window, 'resize', this.windowResize);
var formElement = closest(this.inputWrapper, 'form');
if (formElement) {
EventHandler.remove(formElement, 'reset', this.resetValueHandler);
}
this.keyboardModule.destroy();
if (this.showSelectAll && this.checkAllParent) {
EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
}
document.removeEventListener('mousedown', this.documentClickContext);
};
/* Trigger when the dropdown is clicked */
DropDownTree.prototype.dropDownClick = function (e) {
if (!this.enabled || this.readonly) {
return;
}
if (this.isClearButtonClick) {
this.isClearButtonClick = false;
return;
}
if (this.isPopupOpen) {
this.hidePopup();
}
else {
this.focusIn(e);
this.renderPopup();
}
this.showOverAllClear();
};
DropDownTree.prototype.mouseIn = function () {
if (this.enabled || !this.readonly) {
this.showOverAllClear();
}
};
DropDownTree.prototype.onMouseLeave = function () {
if (!this.inputFocus) {
addClass([this.overAllClear], HIDEICON);
removeClass([this.inputWrapper], SHOW_CLEAR);
}
};
DropDownTree.prototype.getDirective = function () {
return 'EJS-DROPDOWNTREE';
};
DropDownTree.prototype.focusOut = function (e) {
if (!this.enabled || this.readonly || !this.inputFocus) {
return;
}
if ((Browser.isIE || Browser.info.name === 'edge') && (e.target === this.inputWrapper)) {
return;
}
var target = e.relatedTarget;
if ((target !== this.inputEle) && (isNOU(target)) && (e.target !== this.inputWrapper || !this.isPopupOpen)) {
this.onFocusOut(e);
}
};
DropDownTree.prototype.onFocusOut = function (event) {
this.inputFocus = false;
if (this.isPopupOpen) {
this.hidePopup();
}
if (this.isClearButtonClick) {
this.isClearButtonClick = false;
}
if (this.showClearButton) {
this.clearIconWidth = select('.e-clear-icon', this.inputWrapper).offsetWidth;
addClass([this.overAllClear], HIDEICON);
removeClass([this.inputWrapper], SHOW_CLEAR);
}
removeClass([this.inputWrapper], [INPUTFOCUS]);
if ((this.allowMultiSelection || this.showCheckBox)) {
var isValue = this.value ? (this.value.length ? true : false) : false;
if (this.mode !== 'Delimiter' && this.mode !== 'Custom') {
if (this.chipWrapper && (this.mode === 'Default')) {
addClass([this.chipWrapper], HIDEICON);
removeClass([this.inputWrapper], SHOW_CHIP);
removeClass([this.inputEle], CHIP_INPUT);
}
}
if (isValue && this.mode !== 'Custom') {
this.showOrHideValueTemplate(true);
}
if (!this.wrapText && isValue) {
this.updateView();
}
}
if (this.changeOnBlur) {
this.triggerChangeEvent(event);
}
this.removeValue = false;
this.setOldValue();
this.trigger('blur');
};
DropDownTree.prototype.updateView = function () {
if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom' || this.inputFocus) {
return;
}
if (this.mode !== 'Box') {
addClass([this.inputWrapper, this.overFlowWrapper], SHOW_TEXT);
}
else {
addClass([this.inputWrapper], SHOW_CHIP);
}
if (this.value && this.value.length !== 0) {
if (this.inputWrapper.contains(this.chipWrapper)) {
addClass([this.chipWrapper], HIDEICON);
}
addClass([this.inputEle], CHIP_INPUT);
this.updateOverFlowView();
}
this.ensurePlaceHolder();
};
DropDownTree.prototype.triggerChangeEvent = function (event) {
var isEqual = this.ddtCompareValues(this.oldValue, this.value);
if ((!isEqual || this.isChipDelete) && !this.removeValue) {
var eventArgs = {
e: event,
oldValue: this.oldValue,
value: this.value,
isInteracted: event ? true : false,
element: this.element
};
this.trigger('change', eventArgs);
this.setOldValue();
}
};
DropDownTree.prototype.ddtCompareValues = function (oldValue, newValue) {
if (oldValue === null || newValue === null) {
var isValid = oldValue === null ? ((newValue === oldValue) ? true : false) :
(oldValue.length === 0 ? (newValue === oldValue) : false);
return isValid;
}
else if (oldValue.length !== newValue.length) {
return false;
}
for (var i = 0; i < oldValue.length; i++) {
if (oldValue[i] !== newValue[i]) {
return false;
}
}
return true;
};
DropDownTree.prototype.focusIn = function (e) {
if (!this.enabled || this.readonly || this.inputFocus) {
return;
}
this.showOverAllClear();
this.inputFocus = true;
addClass([this.inputWrapper], [INPUTFOCUS]);
if (this.allowMultiSelection || this.showCheckBox) {
if (this.mode !== 'Delimiter' && this.inputFocus) {
if (this.chipWrapper && (this.value && this.value.length !== 0)) {
removeClass([this.chipWrapper], HIDEICON);
addClass([this.inputEle], CHIP_INPUT);
this.showOrHideValueTemplate(false, true);
}
addClass([this.inputWrapper], SHOW_CHIP);
if (this.popupObj) {
this.popupObj.refreshPosition();
}
}
if (!this.wrapText && this.mode !== 'Custom') {
if (this.inputWrapper.contains(this.overFlowWrapper)) {
addClass([this.overFlowWrapper], HIDEICON);
}
if (this.mode === 'Delimiter') {
removeClass([this.inputWrapper], SHOW_CHIP);
removeClass([this.inputEle], CHIP_INPUT);
this.showOrHideValueTemplate(true);
}
else {
addClass([this.inputWrapper], SHOW_CHIP);
}
removeClass([this.inputWrapper], SHOW_TEXT);
this.ensurePlaceHolder();
}
}
var args = { isInteracted: e ? true : false, event: e };
this.trigger('focus', args);
};
DropDownTree.prototype.treeAction = function (e) {
var _this = this;
var eventArgs = {
cancel: false,
event: e
};
this.trigger('keyPress', eventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
switch (e.action) {
case 'escape':
case 'altUp':
_this.inputWrapper.focus();
e.preventDefault();
if (_this.isPopupOpen) {
_this.hidePopup();
}
break;
case 'tab':
if (_this.isPopupOpen) {
_this.hidePopup();
}
break;
case 'enter':
case 'ctrlEnter':
case 'shiftEnter':
case 'csEnter':
if (!_this.showCheckBox) {
_this.isValueChange = true;
_this.keyEventArgs = e;
}
break;
case 'space':
_this.isValueChange = true;
_this.keyEventArgs = e;
break;
case 'ctrlA':
if (_this.allowMultiSelection) {
_this.selectAll(true);
}
break;
case 'moveRight':
case 'moveLeft':
case 'shiftDown':
case 'moveDown':
case 'ctrlDown':
case 'csDown':
case 'shiftUp':
case 'moveUp':
case 'ctrlUp':
case 'csUp':
case 'home':
case 'shiftHome':
case 'ctrlHome':
case 'csHome':
case 'end':
case 'shiftEnd':
case 'ctrlEnd':
case 'csEnd':
}
}
else {
e.stopImmediatePropagation();
}
});
};
DropDownTree.prototype.keyActionHandler = function (e) {
var _this = this;
var eventArgs = {
cancel: false,
event: e
};
this.trigger('keyPress', eventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
switch (e.action) {
case 'escape':
case 'altUp':
if (_this.isPopupOpen) {
_this.hidePopup();
}
break;
case 'shiftTab':
if (_this.isPopupOpen) {
_this.hidePopup();
}
if (_this.inputFocus) {
_this.onFocusOut();
}
break;
case 'altDown':
if (!_this.isPopupOpen) {
_this.showPopup();
e.preventDefault();
}
break;
case 'moveDown':
if (_this.showSelectAll && _this.showCheckBox) {
_this.checkAllParent.focus();
}
break;
case 'tab':
if (!_this.isPopupOpen && _this.inputFocus) {
_this.onFocusOut();
}
break;
}
}
});
};
DropDownTree.prototype.checkAllAction = function (e) {
var _this = this;
var eventArgs = {
cancel: false,
event: e
};
var focusedElement;
this.trigger('keyPress', eventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
switch (e.action) {
case 'space':
_this.clickHandler(e);
break;
case 'moveDown':
e.preventDefault();
focusedElement = _this.treeObj.element.querySelector('li[tabindex="0"]') || _this.treeObj.element.querySelector('li');
focusedElement.focus();
addClass([focusedElement], ['e-node-focus']);
break;
}
}
});
};
DropDownTree.prototype.windowResize = function () {
if (this.popupObj) {
this.popupObj.setProperties({ width: this.setWidth() });
this.popupObj.refreshPosition();
}
};
DropDownTree.prototype.resetValueHandler = function (e) {
var formElement = closest(this.inputWrapper, 'form');
if (formElement && e.target === formElement) {
this.isDynamicChange = true;
this.setProperties({ value: null }, true);
this.resetValue(true);
this.isDynamicChange = false;
}
};
DropDownTree.prototype.getAriaAttributes = function () {
return {};
};
DropDownTree.prototype.updateOverFlowView = function () {
this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
removeClass([this.overFlowWrapper], HIDEICON);
if (this.value && this.value.length) {
var data = '';
var overAllContainer = void 0;
var temp = void 0;
var tempData = void 0;
var tempIndex = 1;
var wrapperleng = void 0;
var remaining = void 0;
var downIconWidth = 0;
this.overFlowWrapper.innerHTML = '';
var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
var remainContent = this.l10n.getConstant('overflowCountTemplate');
var totalContent = this.l10n.getConstant('totalCountTemplate');
var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
this.overFlowWrapper.appendChild(remainElement);
remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());
var remainSize = remainElement.offsetWidth;
remove(remainElement);
if (this.showDropDownIcon) {
downIconWidth = select('.' + DDTICON, this.inputWrapper).offsetWidth;
}
if (!isNOU(this.value)) {
if (this.mode !== 'Box') {
if (this.valueTemplate) {
remaining = this.updateChipAndValueTemplate(false, downIconWidth, remainSize);
this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);
this.updateDelimMode();
return;
}
for (var index = 0; !isNOU(this.value[index]); index++) {
data += (index === 0) ? '' : this.delimiterChar + ' ';
temp = this.getOverflowVal(index);
data += temp;
temp = this.overFlowWrapper.innerHTML;
if (this.enableHtmlSanitizer) {
this.overFlowWrapper.innerText = SanitizeHtmlHelper.sanitize(data);
}
else {
this.overFlowWrapper.innerHTML = data;
}
wrapperleng = this.overFlowWrapper.offsetWidth;
overAllContainer = this.inputWrapper.offsetWidth;
if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
if (tempData !== undefined && tempData !== '') {
temp = tempData;
index = tempIndex + 1;
}
this.overFlowWrapper.innerHTML = temp;
remaining = this.value.length - index;
wrapperleng = this.overFlowWrapper.offsetWidth;
while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)
&& wrapperleng !== 0 && this.overFlowWrapper.innerHTML !== '') {
var textArr = this.overFlowWrapper.innerHTML.split(this.delimiterChar);
textArr.pop();
this.overFlowWrapper.innerHTML = textArr.join(this.delimiterChar);
remaining++;
wrapperleng = this.overFlowWrapper.offsetWidth;
}
break;
}
else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
tempData = data;
tempIndex = index;
}
else if (index === 0) {
tempData = '';
tempIndex = -1;
}
}
}
else {
remaining = this.updateChipAndValueTemplate(true, downIconWidth, remainSize);
}
}
this.checkRemainingTemplate(remaining, remainElement, remainContent, totalContent);
}
else {
this.overFlowWrapper.innerHTML = '';
addClass([this.overFlowWrapper], HIDEICON);
}
this.updateDelimMode();
};
DropDownTree.prototype.checkRemainingTemplate = function (remaining, remainElement, remainContent, totalContent) {
if (remaining > 0) {
this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
}
if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
addClass([remainElement], REMAIN_COUNT);
}
};
DropDownTree.prototype.updateChipAndValueTemplate = function (isChip, downIconWidth, remainSize) {
if (downIconWidth === void 0) { downIconWidth = 0; }
var currentHtmlContent = '';
var overAllContainer;
var previousHtmlContent;
var previousData;
var index = 1;
var wrapperLength;
var remainingItemsCount;
addClass([isChip ? this.chipWrapper : this.valueTemplateContainer], HIDEICON);
var clonedElement = (isChip ? this.chipWrapper :
this.valueTemplateContainer).cloneNode(true);
var valueElements = isChip ? selectAll('.' + CHIP, clonedElement) : Array.prototype.slice.call(clonedElement.children);
for (var i = 0; i < valueElements.length; i++) {
previousHtmlContent = this.overFlowWrapper.innerHTML;
this.overFlowWrapper.appendChild(valueElements[i]);
currentHtmlContent = this.overFlowWrapper.innerHTML;
wrapperLength = this.overFlowWrapper.offsetWidth;
overAllContainer = this.inputWrapper.offsetWidth;
if ((wrapperLength + downIconWidth + this.clearIconWidth) > overAllContainer) {
if (previousData !== undefined && previousData !== '') {
previousHtmlContent = previousData;
i = index + 1;
}
this.overFlowWrapper.innerHTML = previousHtmlContent;
remainingItemsCount = this.value.length - i;
wrapperLength = this.overFlowWrapper.offsetWidth;
while (((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)
&& wrapperLength !== 0 && this.overFlowWrapper.innerHTML !== '') {
this.overFlowWrapper.removeChild(this.overFlowWrapper.lastChild);
remainingItemsCount++;
wrapperLength = this.overFlowWrapper.offsetWidth;
}
break;
}
else if ((wrapperLength + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
previousData = currentHtmlContent;
index = i;
}
else if (i === 0) {
previousData = '';
index = -1;
}
}
return remainingItemsCount;
};
DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {
if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
this.overFlowWrapper.firstChild.nodeValue === '') {
this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
}
remainElement.innerHTML = '';
remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box' || this.valueTemplateContainer)) ?
remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
}
else {
addClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
removeClass([this.overFlowWrapper], REMAIN_COUNT);
}
return remainElement;
};
DropDownTree.prototype.getOverflowVal = function (index) {
var selectedData = this.getSelectedData(this.value[parseInt(index.toString(), 10)]);
return getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
};
DropDownTree.prototype.updateDelimMode = function () {
if (this.mode !== 'Box') {
if (select('.' + REMAIN_WRAPPER, this.overFlowWrapper) && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
addClass([this.overFlowWrapper], REMAIN_COUNT);
addClass([this.overFlowWrapper], SHOW_TEXT);
}
else {
this.overFlowWrapper.classList.remove(REMAIN_COUNT);