@hazyflame/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
1,195 lines • 124 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Input, TextBox } from '@syncfusion/ej2-inputs';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { NotifyPropertyChanges, Property, Event } 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 { updateBlazorTemplate, resetBlazorTemplate, isBlazor } from '@syncfusion/ej2-base';
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 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 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('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('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;
// eslint-disable-next-line
_this.selectedData = [];
_this.filterDelayTime = 300;
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.isBlazorPlatForm = isBlazor();
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.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 () {
this.ensureAutoCheck();
if (this.element.tagName === 'INPUT') {
this.inputEle = this.element;
if (isNOU(this.inputEle.getAttribute('role'))) {
this.inputEle.setAttribute('role', 'textbox');
}
if (isNOU(this.inputEle.getAttribute('type'))) {
this.inputEle.setAttribute('type', 'text');
}
}
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.setAttributes();
this.updateDataAttribute();
this.setHTMLAttributes();
this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
this.popupDiv.classList.add(DROPDOWN);
this.tree = this.createElement('div', { id: this.element.id + '_tree' });
this.popupDiv.appendChild(this.tree);
document.body.appendChild(this.popupDiv);
this.wireTreeEvents();
this.popupDiv.style.display = 'none';
this.renderTree();
this.isRemoteData = this.fields.dataSource instanceof DataManager;
if (this.allowMultiSelection || this.showCheckBox) {
if (this.mode !== 'Delimiter') {
this.createChip();
}
if (!this.wrapText) {
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.oldValue = this.value;
this.isInitialized = true;
this.hasTemplate = this.itemTemplate || this.headerTemplate || this.footerTemplate || this.actionFailureTemplate
|| this.noRecordsTemplate;
this.renderComplete();
};
DropDownTree.prototype.ensureAutoCheck = function () {
if (this.allowFiltering && this.treeSettings.autoCheck) {
this.setProperties({ treeSettings: { autoCheck: false } }, true);
}
};
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');
};
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.filterHandler = function (value, event) {
var _this = this;
if (!this.isFilteredData) {
this.treeData = this.treeObj.getTreeData();
}
var filterFields = this.cloneFields(this.fields);
var args = {
cancel: false,
preventDefaultAction: false,
event: event,
text: value,
fields: filterFields
};
this.trigger('filtering', args, function (args) {
if (!args.cancel) {
var flag = false;
var fields = void 0;
_this.isFilteredData = true;
if (value === '') {
_this.isFilteredData = false;
_this.isFilterRestore = true;
fields = _this.cloneFields(_this.fields);
}
else if (args.preventDefaultAction) {
fields = args.fields;
}
else {
if (_this.treeDataType === 1) {
fields = _this.selfReferencefilter(value, args.fields);
}
else {
if (_this.fields.dataSource instanceof DataManager) {
flag = true;
}
else {
fields = _this.nestedFilter(value, args.fields);
}
}
}
_this.hideCheckAll(_this.isFilteredData);
if (flag) {
return;
}
_this.treeObj.fields = _this.getTreeFields(fields);
_this.treeObj.dataBind();
}
});
};
DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
// eslint-disable-next-line
var matchedDataSource = [];
for (var i = 0; i < this.treeData.length; i++) {
// eslint-disable-next-line
var filteredChild = this.nestedChildFilter(value, this.treeData[i]);
if (!isNOU(filteredChild)) {
matchedDataSource.push(filteredChild);
}
}
filteredFields.dataSource = matchedDataSource;
return filteredFields;
};
// eslint-disable-next-line
DropDownTree.prototype.nestedChildFilter = function (value, node) {
// eslint-disable-next-line
var children = node[this.fields.child];
if (isNOU(children)) {
return (this.isMatchedNode(value, node)) ? node : null;
}
else {
// eslint-disable-next-line
var matchedChildren = [];
for (var i = 0; i < children.length; i++) {
// eslint-disable-next-line
var filteredChild = this.nestedChildFilter(value, children[i]);
if (!isNOU(filteredChild)) {
matchedChildren.push(filteredChild);
}
}
if (matchedChildren.length !== 0) {
node[this.fields.child] = matchedChildren;
return node;
}
else {
node[this.fields.child] = null;
return (this.isMatchedNode(value, node)) ? node : null;
}
}
};
DropDownTree.prototype.selfReferencefilter = function (value, filteredFields) {
// eslint-disable-next-line
var matchedData = [];
// eslint-disable-next-line
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]);
// eslint-disable-next-line
var parentId = matchedData[i][this.fields.parentValue];
while (!isNOU(parentId)) {
// eslint-disable-next-line
var parent_1 = null;
for (var j = 0; j < this.treeData.length; j++) {
// eslint-disable-next-line
var value_1 = this.treeData[j][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;
};
// eslint-disable-next-line
DropDownTree.prototype.isMatchedNode = function (value, node) {
var checkValue = node[this.fields.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);
}
};
/* 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.wrapText && e.target.classList.contains(CHIP_CLOSE)) {
this.removeChip(e);
}
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') {
if (this.chipWrapper && (this.mode === 'Default')) {
addClass([this.chipWrapper], HIDEICON);
removeClass([this.inputWrapper], SHOW_CHIP);
removeClass([this.inputEle], CHIP_INPUT);
}
}
if (!this.wrapText && isValue) {
this.updateView();
}
}
if (this.changeOnBlur) {
this.triggerChangeEvent(event);
}
this.removeValue = false;
this.oldValue = this.value;
this.trigger('blur');
};
DropDownTree.prototype.updateView = function () {
if (!this.showCheckBox && !this.allowMultiSelection) {
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.oldValue = this.value;
}
};
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);
}
addClass([this.inputWrapper], SHOW_CHIP);
if (this.popupObj) {
this.popupObj.refreshPosition();
}
}
if (!this.wrapText) {
if (this.inputWrapper.contains(this.overFlowWrapper)) {
addClass([this.overFlowWrapper], HIDEICON);
}
if (this.mode === 'Delimiter') {
removeClass([this.inputWrapper], SHOW_CHIP);
removeClass([this.inputEle], CHIP_INPUT);
}
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':
case 'shiftTab':
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':
case 'shiftTab':
case 'tab':
if (_this.isPopupOpen) {
_this.hidePopup();
}
break;
case 'altDown':
if (!_this.isPopupOpen) {
_this.showPopup();
e.preventDefault();
}
break;
case 'moveDown':
if (_this.showSelectAll && _this.showCheckBox) {
_this.checkAllParent.focus();
}
break;
}
}
});
};
DropDownTree.prototype.checkAllAction = function (e) {
var _this = this;
var eventArgs = {
cancel: false,
event: e
};
this.trigger('keyPress', eventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
switch (e.action) {
case 'space':
_this.clickHandler(e);
break;
case 'moveDown':
_this.treeObj.element.focus();
}
}
});
};
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 () {
var disable = this.enabled ? 'false' : 'true';
return {
'aria-disabled': disable,
'aria-owns': this.element.id + '_options',
'role': 'listbox',
'aria-haspopup': 'true',
'aria-expanded': 'false',
'aria-activedescendant': 'null',
'aria-labelledby': this.hiddenElement.id
};
};
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 = '';
// eslint-disable-next-line
var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
var remainContent = this.l10n.getConstant('overflowCountTemplate');
var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
// eslint-disable-next-line
var compiledString = compile(remainContent);
// eslint-disable-next-line
var totalCompiledString = compile(this.l10n.getConstant('totalCountTemplate'));
remainElement.appendChild(compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0]);
this.overFlowWrapper.appendChild(remainElement);
var remainSize = remainElement.offsetWidth;
remove(remainElement);
if (this.showDropDownIcon) {
downIconWidth = select('.' + DDTICON, this.inputWrapper).offsetWidth;
}
if (!isNOU(this.value)) {
if (this.mode !== 'Box') {
for (var index = 0; !isNOU(this.value[index]); index++) {
data += (index === 0) ? '' : this.delimiterChar + ' ';
temp = this.getOverflowVal(index);
data += temp;
temp = this.overFlowWrapper.innerHTML;
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 {
addClass([this.chipWrapper], HIDEICON);
var ele = this.chipWrapper.cloneNode(true);
var chips = selectAll('.' + CHIP, ele);
for (var i = 0; i < chips.length; i++) {
temp = this.overFlowWrapper.innerHTML;
this.overFlowWrapper.appendChild(chips[i]);
data = this.overFlowWrapper.innerHTML;
wrapperleng = this.overFlowWrapper.offsetWidth;
overAllContainer = this.inputWrapper.offsetWidth;
if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
if (tempData !== undefined && tempData !== '') {
temp = tempData;
i = tempIndex + 1;
}
this.overFlowWrapper.innerHTML = temp;
remaining = this.value.length - i;
wrapperleng = this.overFlowWrapper.offsetWidth;
while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer)
&& wrapperleng !== 0 && this.overFlowWrapper.innerHTML !== '') {
this.overFlowWrapper.removeChild(this.overFlowWrapper.lastChild);
remaining++;
wrapperleng = this.overFlowWrapper.offsetWidth;
}
break;
}
else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
tempData = data;
tempIndex = i;
}
else if (i === 0) {
tempData = '';
tempIndex = -1;
}
}
}
}
if (remaining > 0) {
this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, compiledString, totalCompiledString));
}
if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
addClass([remainElement], REMAIN_COUNT);
}
}
else {
this.overFlowWrapper.innerHTML = '';
addClass([this.overFlowWrapper], HIDEICON);
}
this.updateDelimMode();
};
DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining,
// eslint-disable-next-line
compiledString,
// eslint-disable-next-line
totalCompiledString) {
if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
this.overFlowWrapper.firstChild.nodeValue === '') {
this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
}
remainElement.innerHTML = '';
remainElement.appendChild((this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0] :
totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate)[0]);
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) {
// eslint-disable-next-line
var selectedData = this.getSelectedData(this.value[index]);
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);
removeClass([this.overFlowWrapper], REMAIN_COUNT);
}
}
else if (select('.' + REMAIN_WRAPPER, this.overFlowWrapper)) {
this.overFlowWrapper.classList.remove(REMAIN_COUNT);
}
};
DropDownTree.prototype.createHiddenElement = function () {
if (this.allowMultiSelection || this.showCheckBox) {
this.hiddenElement = this.createElement('select', {
attrs: { 'aria-hidden': 'true', 'class': HIDDENELEMENT, 'tabindex': '-1', 'multiple': '' }
});
}
else {
this.hiddenElement = this.createElement('select', {
attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': HIDDENELEMENT }
});
}
prepend([this.hiddenElement], this.inputWrapper);
this.validationAttribute();
};
DropDownTree.prototype.createClearIcon = function () {
this.overAllClear = this.createElement('span', {
className: CLOSEICON_CLASS
});
addClass([this.overAllClear], HIDEICON);
removeClass([this.inputWrapper], SHOW_CLEAR);
if (this.showClearButton) {
this.inputWrapper.insertBefore(this.overAllClear, this.inputObj.buttons[0]);
}
};
DropDownTree.prototype.validationAttribute = function () {
var name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');
this.hiddenElement.setAttribute('name', name);
this.inputEle.removeAttribute('name');
var attributes = ['required', 'aria-required', 'form'];
for (var i = 0; i < attributes.length; i++) {
var attr = this.inputEle.getAttribute(attributes[i]);
if (attr) {
this.hiddenElement.setAttribute(attributes[i], attr);
this.inputEle.removeAttribute(attributes[i]);
}
}
};
DropDownTree.prototype.createChip = function () {
if (!this.inputWrapper.contains(this.chipWrapper)) {
this.chipWrapper = this.createElement('span', {
className: CHIP_WRAPPER
});
this.chipCollection = this.createElement('span', {
className: CHIP_COLLECTION
});
this.chipWrapper.appendChild(this.chipCollection);
this.inputWrapper.insertBefore(this.chipWrapper, this.hiddenElement);
addClass([this.inputWrapper], SHOW_CHIP);
var isValid = this.getValidMode();
if (isValid && this.value !== null) {
addClass([this.inputEle], CHIP_INPUT);
}
else if (this.value === null) {
addClass([this.chipWrapper], HIDEICON);
}
}
};
DropDownTree.prototype.getValidMode = function () {
if (this.allowMultiSelection || this.showCheckBox) {
return this.mode === 'Box' ? true : (this.mode === 'Default' && this.inputFocus) ? true : false;
}
else {
return false;
}
};
DropDownTree.prototype.createSelectAllWrapper = function () {
this.checkAllParent = this.createElement('div', {
className: CHECKALLPARENT, attrs: { 'tabindex': '0' }
});
this.selectAllSpan = this.createElement('span', {
className: ALLTEXT
});
this.selectAllSpan.textContent = '';
var ele = closest(this.element, '.' + BIGGER);
var touchClass = isNOU(ele) ? '' : SMALL;
this.checkBoxElement = createCheckBox(this.createElement, true, { cssClass: touchClass });
this.checkBoxElement.setAttribute('role', 'checkbox');
this.checkAllParent.appendChild(this.checkBoxElement);
this.checkAllParent.appendChild(this.selectAllSpan);
this.setLocale();
EventHandler.add(this.checkAllParent, 'mouseup', this.clickHandler, this);
this.wireCheckAllWrapperEvents();
};
DropDownTree.prototype.clickHandler = function (e) {
var target;
if ((e.currentTarget && e.currentTarget.classList.contains(CHECKALLPARENT))) {
target = e.currentTarget.firstElementChild.lastElementChild;
}
else {
target = e.target;
}
this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);
if (!isNOU(this.checkWrapper)) {
var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);
this.changeState(this.checkWrapper, checkElement.classList.contains(CHECK) ? 'uncheck' : 'check', e);
}
e.preventDefault();
};
DropDownTree.prototype.changeState = function (wrapper, state, e) {
var ariaState;
var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];
if (state === 'check' && !frameSpan.classList.contains(CHECK)) {
frameSpan.classList.add(CHECK);
ariaState = 'true';
if (!this.isReverseUpdate) {
this.treeObj.checkAll();
if (!this.changeOnBlur) {
this.triggerChangeEvent(e);
}
}
this.setLocale(true);
}
else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK))) {
frameSpan.classList.remove(CHECK);
ariaState = 'false';
if (!this.isReverseUpdate) {
this.treeObj.uncheckAll();
if (!this.changeOnBlur) {
this.triggerChangeEvent(e);
}
}
this.setLocale(false);
}
this.setMultiSelect();
this.ensurePlaceHolder();
ariaState = state === 'check' ? 'true' : 'false';
if (!isNOU(ariaState)) {
wrapper.setAttribute('aria-checked', ariaState);
}
};
DropDownTree.prototype.setLocale = function (unSelect) {
if (!this.selectAllSpan) {
return;
}
if (this.selectAllText !== 'Select All' || this.unSelectAllText !== 'Unselect All') {
var template = unSelect ? this.unSelectAllText : this.selectAllText;
this.selectAllSpan.textContent = '';
// eslint-disable-next-line
var compiledString = compile(template);
var templateName = unSelect ? 'unSelectAllText' : 'selectAllText';
for (var _i = 0, _a = compiledString({}, this, templateName, null, !this.isStringTemplate); _i < _a.length; _i++) {
var item = _a[_i];
this.selectAllSpan.textContent = item.textContent;
}
}
else {
this.selectAllSpan.textContent = unSelect ? this.unSelectAllText : this.selectAllText;
}
};
DropDownTree.prototype.setAttributes = function () {
this.element.removeAttribute('tabindex');
var id = this.element.getAttribute('id');
this.hiddenElement.id = id + '_hidden';
this.inputWrapper.setAttribute('tabindex', '0');
attributes(this.inputWrapper, this.getAriaAttributes());
};
DropDownTree.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')