\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n * @param options - Specifies HScroll model properties as options.\n * @param element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this) });\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = buildTag('div', { className: CLS_HSCROLLCON });\n var scrollDiv = buildTag('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n detach(nav[1]);\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var nav = buildTag('div', { id: id.concat('_right'), className: clsRight });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var navEle = buildTag('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = buildTag('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n ele.forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt) {\n var element = this.scrollEle;\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n var scrlLeft = element.scrollLeft;\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n element.scrollLeft = scrlLeft + scrollDis;\n }\n else {\n element.scrollLeft = scrlLeft - scrollDis;\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n element.scrollLeft = scrlLeft + scrollDis;\n }\n else {\n element.scrollLeft = scrlLeft - scrollDis;\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target);\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance;\n distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n clearInterval(this.timeout);\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (scrollLeft === 0) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n * @param {HScrollModel} newProp\n * @param {HScrollModel} oldProp\n * @returns void\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(40)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_TBARSCROLL = 'e-hscroll-content';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n * @param options - Specifies Toolbar model properties as options.\n * @param element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n if (this.trgtEle) {\n ele.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n ele.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toolbar.prototype.preRender = function () {\n this.trigger('beforeCreate');\n this.scrollModule = null;\n this.popObj = null;\n this.tbarItemsCol = this.items;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resize.bind(this));\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && isVisible(this.popObj.element)) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyHScroll();\n this.keyModule.destroy();\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n };\n Toolbar.prototype.destroyHScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyHScroll();\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n clst = this.element.querySelector('.' + CLS_ITEM);\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'SlideUp', duration: 100 };\n switch (e.action) {\n case 'moveRight':\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n var ele = void 0;\n var nodes = void 0;\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = popupCheck.children;\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj) {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'SlideDown', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT') {\n return;\n }\n e.preventDefault();\n var clst;\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n var contains = function (el) {\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE);\n };\n if (sib) {\n var skipEle = contains(sib);\n if (skipEle) {\n if (Object(sib)[pos + 'ElementSibling']) {\n sib = Object(sib)[pos + 'ElementSibling'];\n skipEle = contains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n }\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (contains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (contains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var trgt = e.target;\n var clsList = trgt.classList;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n itemObj = this.items[this.tbarEle.indexOf(clst)];\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n this.trigger('clicked', eventArgs);\n if (isPopupElement && !eventArgs.cancel) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n };\n ;\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.element.offsetHeight + 'px';\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'SlideDown', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Toolbar.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false', 'aria-orientation': 'horizontal',\n };\n attributes(this.element, ariaAttr);\n };\n Toolbar.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n };\n Toolbar.prototype.initHScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n this.scrollModule = new HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var width = 0;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n width += (el.offsetWidth + parseFloat(window.getComputedStyle(el).marginRight));\n }\n });\n return width;\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = element.offsetWidth;\n var itemWidth;\n if (this.tbarAlign || this.scrollModule) {\n itemWidth = this.itemWidthCal(this.scrollModule ? innerItem.querySelector('.e-hscroll-content') : innerItem);\n }\n else {\n itemWidth = innerItem.offsetWidth;\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : (scrollNav ? scrollNav.offsetWidth * 2 : 0))) {\n return true;\n }\n else {\n return false;\n }\n };\n /** @hidden */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n switch (this.overflowMode) {\n case 'Scrollable':\n this.destroyHScroll();\n this.initHScroll(ele, ele.getElementsByClassName(CLS_ITEMS));\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n }\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n break;\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight) {\n var element = tbarObj.element;\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n setStyle(el, { display: '', height: eleHeight + 'px' });\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR)) {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var eleHeight;\n var eleItem;\n eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_POPUP + ' )');\n eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : eleItem.offsetHeight;\n var ele;\n var popupPri = [];\n if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {\n ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);\n }\n else {\n ele = buildTag('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n setStyle(this.element, { overflow: '' });\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (element.offsetHeight),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose,\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n popup.hide();\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if ((window.innerHeight + scrollVal) < popupElePos) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n };\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element.parentElement;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);\n mrgn += parseFloat((window.getComputedStyle(inEle[i])).marginLeft);\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n var eleWid_1 = fstEleCheck ? (inEle[i].offsetWidth + mrgn) : inEle[i].offsetWidth;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n itemPopCount++;\n }\n if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= (inEle[i].offsetWidth + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n itemPopCount++;\n }\n else {\n eleWidth -= (inEle[i].offsetWidth + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n var nav = buildTag('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = buildTag('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var ele = this.element;\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n this.popupEleRefresh(width, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n ele.setAttribute('aria-haspopup', 'false');\n ele.classList.remove('e-toolpop');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(el.style.minWidth);\n btn.style.minWidth = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var checkOverflow;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n el.style.minWidth = '';\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n innerItem = [].slice.call(item.querySelector('.' + CLS_TBARSCROLL).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n var margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n var tbarWid = this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= popupNav.offsetWidth;\n var popWid = popupNav.offsetWidth + 'px';\n innerItem[2].removeAttribute('style');\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = (innerItem[0].offsetWidth + value) + 'px';\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(buildTag('div', { className: CLS_TBARLEFT }));\n alignDiv.push(buildTag('div', { className: CLS_TBARCENTER }));\n alignDiv.push(buildTag('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var itemEleDom;\n var innerItem;\n var innerPos;\n var items = this.items;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n if (!itemEleDom) {\n itemEleDom = buildTag('div', { className: CLS_ITEMS });\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[i]);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n * @param {HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns void.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (len && len > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n var ele = void 0;\n ele = (len && len === 1) ? elements[0] : items;\n enable(isEnable, ele);\n }\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n * @param {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns void.\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item);\n if (this.tbarEle.length >= index && innerItems.length > 0) {\n this.destroyMode();\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns void.\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = void 0;\n indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n detach(innerItems[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n var e = void 0;\n try {\n if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n templateFn = templateCompiler(tempStr);\n detach(ele);\n item.template = tempStr;\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n tempArray = templateFn({}, this, 'template');\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = buildTag('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = buildTag('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = buildTag('div', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n new Button({ iconCss: iconCss, iconPosition: iconPos }, dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item) {\n var innerEle;\n var dom;\n innerEle = buildTag('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', item.tooltipText);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj) {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyHScroll();\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {ToolbarModel} newProp\n * @param {ToolbarModel} oldProp\n * @returns void\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldProperty = Object(oldProp.items[index])[property];\n var newProperty = Object(newProp.items[index])[property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && property === 'overflow' && this.popupPriCount !== 0) {\n --this.popupPriCount;\n }\n this.destroyMode();\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n var wid = tEle.offsetWidth;\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns void.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n if (this.tbarEle[index]) {\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (value === true) {\n innerItems[index].classList.add(CLS_HIDDEN);\n }\n else {\n innerItems[index].classList.remove(CLS_HIDDEN);\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property(false)\n ], Toolbar.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';\nimport { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { addClass, isVisible, closest, attributes, classList, detach, select } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, formatUnit, selectAll } from '@syncfusion/ej2-base';\nvar CLS_ACRDN_ROOT = 'e-acrdn-root';\nvar CLS_ROOT = 'e-accordion';\nvar CLS_ITEM = 'e-acrdn-item';\nvar CLS_ITEMFOCUS = 'e-item-focus';\nvar CLS_ITEMHIDE = 'e-hide';\nvar CLS_HEADER = 'e-acrdn-header';\nvar CLS_HEADERICN = 'e-acrdn-header-icon';\nvar CLS_HEADERCTN = 'e-acrdn-header-content';\nvar CLS_CONTENT = 'e-acrdn-panel';\nvar CLS_CTENT = 'e-acrdn-content';\nvar CLS_TOOGLEICN = 'e-toggle-icon';\nvar CLS_COLLAPSEICN = 'e-tgl-collapse-icon e-icons';\nvar CLS_EXPANDICN = 'e-expand-icon';\nvar CLS_RTL = 'e-rtl';\nvar CLS_CTNHIDE = 'e-content-hide';\nvar CLS_SLCT = 'e-select';\nvar CLS_SLCTED = 'e-selected';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_ANIMATE = 'e-animate';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_TOGANIMATE = 'e-toggle-animation';\nvar CLS_NEST = 'e-nested';\nvar CLS_EXPANDSTATE = 'e-expand-state';\nvar AccordionActionSettings = /** @class */ (function (_super) {\n __extends(AccordionActionSettings, _super);\n function AccordionActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], AccordionActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AccordionActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], AccordionActionSettings.prototype, \"easing\", void 0);\n return AccordionActionSettings;\n}(ChildProperty));\nexport { AccordionActionSettings };\nvar AccordionAnimationSettings = /** @class */ (function (_super) {\n __extends(AccordionAnimationSettings, _super);\n function AccordionAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"expand\", void 0);\n return AccordionAnimationSettings;\n}(ChildProperty));\nexport { AccordionAnimationSettings };\n/**\n * An item object that is used to configure Accordion items.\n */\nvar AccordionItem = /** @class */ (function (_super) {\n __extends(AccordionItem, _super);\n function AccordionItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"content\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"header\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], AccordionItem.prototype, \"expanded\", void 0);\n return AccordionItem;\n}(ChildProperty));\nexport { AccordionItem };\n/**\n * The Accordion is a vertically collapsible content panel that displays one or more panels at a time within the available space.\n * ```html\n *
\n * \n * ```\n */\nvar Accordion = /** @class */ (function (_super) {\n __extends(Accordion, _super);\n /**\n * Initializes a new instance of the Accordion class.\n * @param options - Specifies Accordion model properties as options.\n * @param element - Specifies the element that is rendered as an Accordion.\n */\n function Accordion(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Accordion.\n */\n _this.keyConfigs = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n space: 'space',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n Accordion.prototype.destroy = function () {\n var _this = this;\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.isDestroy = true;\n this.templateEle.forEach(function (eleStr) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n });\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n if (this.trgtEle) {\n while (this.ctrlTem.firstChild) {\n ele.appendChild(this.ctrlTem.firstChild);\n }\n }\n ele.removeAttribute('style');\n ['aria-disabled', 'aria-multiselectable', 'role'].forEach(function (attrb) {\n _this.element.removeAttribute(attrb);\n });\n };\n Accordion.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.templateEle = [];\n if (!this.isDestroy) {\n this.isDestroy = false;\n }\n if (!isNOU(nested)) {\n nested.classList.add(CLS_NEST);\n this.isNested = true;\n }\n else {\n this.element.classList.add(CLS_ACRDN_ROOT);\n }\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n if (!this.enablePersistence || isNOU(this.expandedItems)) {\n this.expandedItems = [];\n }\n };\n Accordion.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Accordion.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n /**\n * To initialize the control rendering\n * @private\n */\n Accordion.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n };\n Accordion.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n setStyle(this.element, { 'width': width, 'height': height });\n var ariaAttr = {\n 'aria-disabled': 'false', 'role': 'presentation', 'aria-multiselectable': 'true'\n };\n if (this.expandedItems.length > 0) {\n this.initExpand = this.expandedItems;\n }\n attributes(this.element, ariaAttr);\n if (this.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n };\n Accordion.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? select('div', this.element) : null;\n this.renderItems();\n this.initItemExpand();\n };\n Accordion.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n if (!isNOU(this.keyModule)) {\n this.keyModule.destroy();\n }\n };\n Accordion.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n if (!this.isNested && !this.isDestroy) {\n rippleEffect(this.element, { selector: '.' + CLS_HEADER });\n }\n if (!this.isNested) {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n }\n };\n Accordion.prototype.focusIn = function (e) {\n e.target.parentElement.classList.add(CLS_ITEMFOCUS);\n };\n Accordion.prototype.focusOut = function (e) {\n e.target.parentElement.classList.remove(CLS_ITEMFOCUS);\n };\n Accordion.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.element.cloneNode(true);\n var innerEles = this.element.children;\n var content;\n addClass(innerEles, [CLS_ITEM]);\n [].slice.call(innerEles).forEach(function (el) {\n el.id = getUniqueID('acrdn_item');\n if (el.children.length > 0) {\n _this.add(el.children[0], CLS_HEADER);\n var header = el.children[0];\n attributes(header, { 'tabindex': '0', 'role': 'heading', 'aria-level': innerEles.length.toString() });\n header.id = getUniqueID('acrdn_header');\n EventHandler.add(header, 'focus', _this.focusIn, _this);\n EventHandler.add(header, 'blur', _this.focusOut, _this);\n var headerEle = header.firstElementChild;\n if (headerEle) {\n headerEle.classList.add(CLS_HEADERCTN);\n }\n content = el.children[1];\n if (content) {\n content.id = getUniqueID('acrdn_panel');\n header.setAttribute('aria-controls', content.id);\n content.style.display = '';\n el.classList.add(CLS_SLCT);\n el.children[0].appendChild(_this.toggleIconGenerate());\n classList(content, [CLS_CONTENT, CLS_CTNHIDE], []);\n attributes(content, { 'aria-labelledby': header.id, 'aria-hidden': 'true' });\n content = content.firstElementChild;\n if (content) {\n content.classList.add(CLS_CTENT);\n content.style.display = '';\n }\n }\n }\n });\n };\n Accordion.prototype.toggleIconGenerate = function () {\n var tglIcon = buildTag('div', { className: CLS_TOOGLEICN });\n var hdrColIcon = buildTag('span', { className: CLS_COLLAPSEICN });\n tglIcon.appendChild(hdrColIcon);\n return tglIcon;\n };\n Accordion.prototype.initItemExpand = function () {\n var len = this.initExpand.length;\n if (len === 0) {\n return;\n }\n if (this.expandMode === 'Single') {\n this.expandItem(true, this.initExpand[len - 1]);\n }\n else {\n for (var i = 0; i < len; i++) {\n this.expandItem(true, this.initExpand[i]);\n }\n }\n };\n Accordion.prototype.renderItems = function () {\n var _this = this;\n var ele = this.element;\n var innerItem;\n if (isNOU(this.initExpand)) {\n this.initExpand = [];\n }\n var items = this.items;\n if (!isNOU(this.trgtEle)) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n items.forEach(function (item, index) {\n innerItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerItem);\n if (innerItem.childElementCount > 0) {\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n };\n Accordion.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var eventArgs = {};\n var index;\n var tglIcon;\n var acrdEle = closest(trgt, '.' + CLS_ROOT);\n if (acrdEle !== this.element) {\n return;\n }\n trgt.classList.add('e-target');\n var acrdnItem = closest(trgt, '.' + CLS_ITEM);\n var acrdnHdr = closest(trgt, '.' + CLS_HEADER);\n var acrdnCtn = closest(trgt, '.' + CLS_CONTENT);\n if (acrdnItem && (isNOU(acrdnHdr) || isNOU(acrdnCtn))) {\n acrdnHdr = acrdnItem.children[0];\n acrdnCtn = acrdnItem.children[1];\n }\n if (acrdnHdr) {\n tglIcon = select('.' + CLS_TOOGLEICN, acrdnHdr);\n }\n var acrdnCtnItem;\n if (acrdnCtn) {\n acrdnCtnItem = closest(acrdnCtn, '.' + CLS_ITEM);\n }\n var acrdActive = [];\n index = this.getIndexByItem(acrdnItem);\n if (acrdnCtnItem) {\n eventArgs.item = this.items[this.getIndexByItem(acrdnCtnItem)];\n }\n eventArgs.originalEvent = e;\n var ctnCheck = !isNOU(tglIcon) && isNOU(this.trgtEle) && acrdnItem.childElementCount <= 1;\n if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {\n acrdnItem.appendChild(this.contentRendering(index));\n this.ariaAttrUpdate(acrdnItem);\n }\n this.trigger('clicked', eventArgs);\n var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));\n cntclkCheck = cntclkCheck && (isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === this.element));\n trgt.classList.remove('e-target');\n if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {\n return;\n }\n [].slice.call(this.element.children).forEach(function (el) {\n if (el.classList.contains(CLS_ACTIVE)) {\n acrdActive.push(el);\n }\n });\n var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));\n if (acrdAniEle.length > 0) {\n for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {\n var el = acrdAniEle_1[_i];\n acrdActive.push(el.parentElement);\n }\n }\n var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';\n var sameHeader = false;\n if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {\n var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);\n var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n if (isNOU(acrdnCtn_1)) {\n return;\n }\n sameHeader = (expandState === acrdnItem);\n if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {\n this.collapse(acrdnCtn_1);\n }\n else {\n if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {\n acrdActive.forEach(function (el) {\n _this.collapse(select('.' + CLS_CONTENT, el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n }\n this.expand(acrdnCtn_1);\n }\n if (!isNOU(expandState) && !sameHeader) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n }\n };\n Accordion.prototype.eleMoveFocus = function (action, root, trgt) {\n var clst;\n var clstItem = closest(trgt, '.' + CLS_ITEM);\n if (trgt === root) {\n clst = ((action === 'moveUp' ? trgt.lastElementChild : trgt).querySelector('.' + CLS_HEADER));\n }\n else if (trgt.classList.contains(CLS_HEADER)) {\n clstItem = (action === 'moveUp' ? clstItem.previousElementSibling : clstItem.nextElementSibling);\n if (clstItem) {\n clst = select('.' + CLS_HEADER, clstItem);\n }\n }\n if (clst) {\n clst.focus();\n }\n };\n Accordion.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT') {\n return;\n }\n e.preventDefault();\n var clst;\n var root = this.element;\n var content;\n switch (e.action) {\n case 'moveUp':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'moveDown':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'space':\n case 'enter':\n content = trgt.nextElementSibling;\n if (!isNOU(content) && content.classList.contains(CLS_CONTENT)) {\n if (content.getAttribute('e-animate') !== 'true') {\n trgt.click();\n }\n }\n else {\n trgt.click();\n }\n break;\n case 'home':\n case 'end':\n clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];\n clst.focus();\n break;\n }\n };\n Accordion.prototype.headerEleGenerate = function () {\n var header = buildTag('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });\n var ariaAttr = {\n 'tabindex': '0', 'role': 'heading', 'aria-expanded': 'false', 'aria-selected': 'false',\n 'aria-disabled': 'false', 'aria-level': this.items.length.toString()\n };\n attributes(header, ariaAttr);\n return header;\n };\n Accordion.prototype.renderInnerItem = function (item, index) {\n var innerEle;\n innerEle = buildTag('div', { className: CLS_ITEM });\n innerEle.id = getUniqueID('acrdn_item');\n if (item.header) {\n var ctnEle = this.headerEleGenerate();\n var hdrEle = buildTag('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));\n innerEle.appendChild(ctnEle);\n }\n var hdr = select('.' + CLS_HEADER, innerEle);\n if (item.expanded && !isNOU(index) && (!this.enablePersistence)) {\n if (this.initExpand.indexOf(index) === -1) {\n this.initExpand.push(index);\n }\n }\n if (item.cssClass) {\n innerEle.classList.add(item.cssClass);\n }\n if (item.iconCss) {\n var hdrIcnEle = buildTag('div', { className: CLS_HEADERICN });\n var icon = buildTag('span', { className: item.iconCss + ' e-icons' });\n hdrIcnEle.appendChild(icon);\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n hdr.appendChild(hdrIcnEle);\n innerEle.appendChild(hdr);\n }\n else {\n hdr.insertBefore(hdrIcnEle, hdr.childNodes[0]);\n }\n }\n if (item.content) {\n var hdrIcon = this.toggleIconGenerate();\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n innerEle.appendChild(hdr);\n }\n hdr.appendChild(hdrIcon);\n this.add(innerEle, CLS_SLCT);\n }\n return innerEle;\n };\n Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {\n var templateFn;\n var temString;\n try {\n if (document.querySelectorAll(value).length) {\n var eleVal = document.querySelector(value);\n temString = eleVal.outerHTML.trim();\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n catch (e) {\n templateFn = templateCompiler(value);\n }\n if (!isNOU(templateFn) && templateFn().length > 0 && !(isNOU(templateFn()[0].tagName) && templateFn().length === 1)) {\n [].slice.call(templateFn()).forEach(function (el) {\n if (!isNOU(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (ele.childElementCount === 0) {\n ele.innerHTML = value;\n }\n if (!isNOU(temString)) {\n this.templateEle.push(value);\n }\n return ele;\n };\n Accordion.prototype.ariaAttrUpdate = function (itemEle) {\n var header = select('.' + CLS_HEADER, itemEle);\n var content = select('.' + CLS_CONTENT, itemEle);\n header.setAttribute('aria-controls', content.id);\n content.setAttribute('aria-labelledby', header.id);\n };\n Accordion.prototype.contentRendering = function (index) {\n var content = this.items[index].content;\n var itemcnt = buildTag('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });\n attributes(itemcnt, { 'aria-hidden': 'true' });\n var ctn = buildTag('div', { className: CLS_CTENT });\n itemcnt.appendChild(this.fetchElement(ctn, content, index, false));\n return itemcnt;\n };\n Accordion.prototype.expand = function (trgt) {\n var eventArgs;\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var acrdnRoot = closest(trgtItemEle, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n var animation = {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = { element: trgtItemEle,\n item: this.items[this.getIndexByItem(trgtItemEle)],\n isExpanded: true };\n var eff = animation.name;\n this.trigger('expanding', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n icon.classList.add(CLS_TOGANIMATE);\n this.expandedItemsPush(trgtItemEle);\n if (!isNOU(expandState)) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n if ((animation.name === 'None')) {\n this.expandProgress('begin', icon, trgt, trgtItemEle, eventArgs);\n this.expandProgress('end', icon, trgt, trgtItemEle, eventArgs);\n return;\n }\n this.expandAnimation(eff, icon, trgt, trgtItemEle, animation, eventArgs);\n };\n Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {\n var _this = this;\n var height;\n var trgtHgt;\n if (ef === 'SlideDown') {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n trgt.style.position = 'absolute';\n height = trgtItemEle.offsetHeight;\n trgtHgt = trgt.offsetHeight;\n trgt.style.maxHeight = (trgt.offsetHeight) + 'px';\n trgtItemEle.style.maxHeight = '';\n };\n animate.progress = function () {\n trgtItemEle.style.minHeight = (height + trgt.offsetHeight) + 'px';\n };\n animate.end = function () {\n setStyle(trgt, { 'position': '', 'maxHeight': '' });\n trgtItemEle.style.minHeight = '';\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n else {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n };\n animate.end = function () {\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.expandProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(trgt, CLS_CTNHIDE);\n this.add(trgtItemEle, CLS_SLCTED);\n this.add(icon, CLS_EXPANDICN);\n if (progress === 'end') {\n this.add(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'false');\n attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-expanded': 'true' });\n icon.classList.remove(CLS_TOGANIMATE);\n this.trigger('expanded', eventArgs);\n }\n };\n Accordion.prototype.expandedItemsPush = function (item) {\n var index = this.getIndexByItem(item);\n if (this.expandedItems.indexOf(index) === -1) {\n this.expandedItems.push(index);\n }\n };\n Accordion.prototype.getIndexByItem = function (item) {\n return [].slice.call(this.element.children).indexOf(item);\n };\n Accordion.prototype.expandedItemsPop = function (item) {\n var index = this.getIndexByItem(item);\n this.expandedItems.splice(this.expandedItems.indexOf(index), 1);\n };\n Accordion.prototype.collapse = function (trgt) {\n var eventArgs;\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var animation = {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = { element: trgtItemEle,\n item: this.items[this.getIndexByItem(trgtItemEle)],\n isExpanded: false };\n var eff = animation.name;\n this.trigger('expanding', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.expandedItemsPop(trgtItemEle);\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n icon.classList.add(CLS_TOGANIMATE);\n if ((animation.name === 'None')) {\n this.collapseProgress('begin', icon, trgt, trgtItemEle, eventArgs);\n this.collapseProgress('end', icon, trgt, trgtItemEle, eventArgs);\n return;\n }\n this.collapseAnimation(eff, trgt, trgtItemEle, icon, animation, eventArgs);\n };\n Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {\n var _this = this;\n var height;\n var trgtHeight;\n var itemHeight;\n var remain;\n if (ef === 'SlideUp') {\n animate.begin = function () {\n itemHeight = trgtItEl.offsetHeight;\n trgtItEl.style.minHeight = itemHeight + 'px';\n trgt.style.position = 'absolute';\n height = trgtItEl.offsetHeight;\n trgtHeight = trgt.offsetHeight;\n trgt.style.maxHeight = trgtHeight + 'px';\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.progress = function () {\n remain = ((height - (trgtHeight - trgt.offsetHeight)));\n if (remain < itemHeight) {\n trgtItEl.style.minHeight = remain + 'px';\n }\n };\n animate.end = function () {\n trgt.style.display = 'none';\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n trgtItEl.style.minHeight = '';\n setStyle(trgt, { 'position': '', 'maxHeight': '', 'display': '' });\n };\n }\n else {\n animate.begin = function () {\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.end = function () {\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.collapseProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(icon, CLS_EXPANDICN);\n this.remove(trgtItemEle, CLS_SLCTED);\n if (progress === 'end') {\n this.add(trgt, CLS_CTNHIDE);\n icon.classList.remove(CLS_TOGANIMATE);\n this.remove(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'true');\n attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-expanded': 'false' });\n this.trigger('expanded', eventArgs);\n }\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Accordion.prototype.getModuleName = function () {\n return 'accordion';\n };\n Accordion.prototype.itemAttribUpdate = function () {\n var itemEle = [].slice.call(this.element.children);\n var itemLen = this.items.length;\n itemEle.forEach(function (ele) {\n select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);\n });\n };\n /**\n * Adds new item to the Accordion with the specified index of the Accordion.\n * @param {AccordionItemModel} item - Item array that is to be added to the Accordion.\n * @param {number} index - Number value that determines where the item should be added.\n * By default, item is added at the last index if the index is not specified.\n * @returns void\n */\n Accordion.prototype.addItem = function (item, index) {\n var ele = this.element;\n if (isNOU(index)) {\n index = this.items.length;\n }\n if (ele.childElementCount >= index) {\n this.items.splice(index, 0, item);\n var innerItemEle = this.renderInnerItem(item, index);\n if (ele.childElementCount === index) {\n ele.appendChild(innerItemEle);\n }\n else {\n ele.insertBefore(innerItemEle, ele.children[index]);\n }\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);\n this.itemAttribUpdate();\n }\n this.expandedItems = [];\n this.expandedItemRefresh(ele);\n if (item.expanded) {\n this.expandItem(true, index);\n }\n };\n Accordion.prototype.expandedItemRefresh = function (ele) {\n var _this = this;\n [].slice.call(ele.children).forEach(function (el) {\n if (el.classList.contains(CLS_SLCTED)) {\n _this.expandedItemsPush(el);\n }\n });\n };\n /**\n * Dynamically removes item from Accordion.\n * @param {number} index - Number value that determines which item should be removed.\n * @returns void.\n */\n Accordion.prototype.removeItem = function (index) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n detach(ele);\n this.items.splice(index, 1);\n this.itemAttribUpdate();\n this.expandedItems = [];\n this.expandedItemRefresh(this.element);\n };\n /**\n * Sets focus to the specified index item header in Accordion.\n * @param {number} index - Number value that determines which item should be focused.\n * @returns void.\n */\n Accordion.prototype.select = function (index) {\n var ele = this.element.children[index];\n if (isNOU(ele) || isNOU(select('.' + CLS_HEADER, ele))) {\n return;\n }\n ele.children[0].focus();\n };\n /**\n * Shows or hides the specified item from Accordion.\n * @param {number} index - Number value that determines which item should be hidden/shown.\n * @param {Boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.\n * If the `isHidden` value is false, the item is shown or else item it is hidden.\n * @returns void.\n */\n Accordion.prototype.hideItem = function (index, isHidden) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n if (isNOU(isHidden)) {\n isHidden = true;\n }\n isHidden ? this.add(ele, CLS_ITEMHIDE) : this.remove(ele, CLS_ITEMHIDE);\n };\n /**\n * Enables/Disables the specified Accordion item.\n * @param {number} index - Number value that determines which item should be enabled/disabled.\n * @param {boolean} isEnable - Boolean value that determines the action as enable (true) or disable (false).\n * If the `isEnable` value is true, the item is enabled or else it is disabled.\n * @returns void.\n */\n Accordion.prototype.enableItem = function (index, isEnable) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n var eleHeader = ele.firstElementChild;\n if (isEnable) {\n this.remove(ele, CLS_DISABLE);\n attributes(eleHeader, { 'tabindex': '0', 'aria-disabled': 'false' });\n eleHeader.focus();\n }\n else {\n if (ele.classList.contains(CLS_ACTIVE)) {\n this.expandItem(false, index);\n this.eleMoveFocus('movedown', this.element, eleHeader);\n }\n this.add(ele, CLS_DISABLE);\n eleHeader.setAttribute('aria-disabled', 'true');\n eleHeader.removeAttribute('tabindex');\n }\n };\n /**\n * Expands/Collapses the specified Accordion item.\n * @param {boolean} isExpand - Boolean value that determines the action as expand or collapse.\n * @param {number} index - Number value that determines which item should be expanded/collapsed.`index` is optional parameter.\n * Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.\n * @returns void.\n */\n Accordion.prototype.expandItem = function (isExpand, index) {\n var _this = this;\n var root = this.element;\n if (isNOU(index)) {\n if (this.expandMode === 'Single' && isExpand) {\n var ele = root.children[root.childElementCount - 1];\n this.itemExpand(isExpand, ele, this.getIndexByItem(ele));\n }\n else {\n [].slice.call(this.element.children).forEach(function (el) {\n _this.itemExpand(isExpand, el, _this.getIndexByItem(el));\n });\n }\n }\n else {\n var ele = this.element.children[index];\n if (isNOU(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {\n return;\n }\n else {\n if (this.expandMode === 'Single') {\n this.expandItem(false);\n }\n this.itemExpand(isExpand, ele, index);\n }\n }\n };\n Accordion.prototype.itemExpand = function (isExpand, ele, index) {\n var ctn = ele.children[1];\n if (ele.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (isNOU(ctn) && isExpand) {\n ctn = this.contentRendering(index);\n ele.appendChild(ctn);\n this.ariaAttrUpdate(ele);\n }\n else if (isNOU(ctn)) {\n return;\n }\n isExpand ? this.expand(ctn) : this.collapse(ctn);\n };\n Accordion.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n };\n Accordion.prototype.updateItem = function (item, index) {\n if (!isNOU(item)) {\n var itemObj = this.items[index];\n this.items.splice(index, 1);\n detach(item);\n this.addItem(itemObj, index);\n }\n };\n Accordion.prototype.getPersistData = function () {\n var keyEntity = ['expandedItems'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {AccordionModel} newProp\n * @param {AccordionModel} oldProp\n * @returns void\n * @private\n */\n Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {\n var acrdn = this.element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var item = selectAll('.' + CLS_ITEM, this.element)[index];\n if (property === 'header' || property === 'iconCss' || property === 'expanded') {\n this.updateItem(item, index);\n }\n if (property === 'cssClass' && !isNOU(item)) {\n item.classList.remove(oldVal);\n item.classList.add(newVal);\n }\n if (property === 'content' && !isNOU(item) && item.children.length === 2) {\n if (item.classList.contains(CLS_SLCTED)) {\n this.expandItem(false, index);\n }\n detach(item.querySelector('.' + CLS_CONTENT));\n }\n }\n }\n else {\n this.destroyItems();\n this.renderItems();\n this.initItemExpand();\n }\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(acrdn, CLS_RTL) : this.remove(acrdn, CLS_RTL);\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyle(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'expandMode':\n if (newProp.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n if (this.expandedItems.length > 1) {\n this.expandItem(false);\n }\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n break;\n }\n }\n };\n __decorate([\n Collection([], AccordionItem)\n ], Accordion.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Accordion.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Accordion.prototype, \"height\", void 0);\n __decorate([\n Property('Multiple')\n ], Accordion.prototype, \"expandMode\", void 0);\n __decorate([\n Complex({}, AccordionAnimationSettings)\n ], Accordion.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanding\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanded\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"destroyed\", void 0);\n Accordion = __decorate([\n NotifyPropertyChanges\n ], Accordion);\n return Accordion;\n}(Component));\nexport { Accordion };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';\nimport { attributes, Animation } from '@syncfusion/ej2-base';\nimport { Browser, Collection, setValue, getValue, getUniqueID, getInstance } from '@syncfusion/ej2-base';\nimport { select, selectAll, closest, createElement, detach, append, rippleEffect, isVisible } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { calculatePosition, isCollide, fit, getScrollableParent, getZindexPartial } from '@syncfusion/ej2-popups';\nvar DOWNARROW = 'downarrow';\nvar ENTER = 'enter';\nvar ESCAPE = 'escape';\nvar FOCUSED = 'e-focused';\nvar HEADER = 'e-menu-header';\nvar LEFTARROW = 'leftarrow';\nvar RIGHTARROW = 'rightarrow';\nvar RTL = 'e-rtl';\nvar SELECTED = 'e-selected';\nvar SEPARATOR = 'e-separator';\nvar UPARROW = 'uparrow';\nvar WRAPPER = 'e-contextmenu-wrapper';\nvar CARET = 'e-caret';\nvar ITEM = 'e-menu-item';\nvar DISABLED = 'e-disabled';\nvar HIDE = 'e-menu-hide';\nvar ICONS = 'e-icons';\n/**\n * Specifies context menu items.\n */\nvar MenuItem = /** @class */ (function (_super) {\n __extends(MenuItem, _super);\n function MenuItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], MenuItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], MenuItem.prototype, \"separator\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], MenuItem.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"url\", void 0);\n return MenuItem;\n}(ChildProperty));\nexport { MenuItem };\n/**\n * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.\n * ```html\n *
\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ContextMenu = /** @class */ (function (_super) {\n __extends(ContextMenu, _super);\n /**\n * Constructor for creating the widget.\n * @private\n */\n function ContextMenu(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.animation = new Animation({});\n _this.navIdx = [];\n _this.isTapHold = false;\n return _this;\n }\n /**\n * Initialized animation with parent menu animation settings.\n * @private\n */\n ContextMenu.prototype.preRender = function () {\n if (this.element.tagName === 'EJS-CONTEXTMENU') {\n this.element.style.display = 'none';\n this.element.classList.remove('e-' + this.getModuleName());\n this.element.classList.remove('e-control');\n var ejInst = getValue('ej2_instances', this.element);\n var ul = createElement('ul');\n this.ngElement = this.element;\n this.element = ul;\n this.element.classList.add('e-control');\n this.element.classList.add('e-' + this.getModuleName());\n setValue('ej2_instances', ejInst, this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n ContextMenu.prototype.render = function () {\n this.initWrapper();\n this.renderItems();\n this.wireEvents();\n };\n ContextMenu.prototype.initWrapper = function () {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n wrapper = createElement('div', { className: WRAPPER });\n document.body.appendChild(wrapper);\n }\n if (this.cssClass) {\n wrapper.classList.add(this.cssClass);\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n attributes(this.element, { 'role': 'menu', 'tabindex': '0' });\n wrapper.appendChild(this.element);\n this.element.style.zIndex = getZindexPartial(this.element).toString();\n };\n ContextMenu.prototype.renderItems = function () {\n if (!this.items.length) {\n this.items = ListBase.createJsonFromElement(this.element);\n this.element.innerHTML = '';\n }\n var ul = this.createItems(this.items);\n append(Array.prototype.slice.call(ul.children), this.element);\n this.element.classList.add('e-menu-parent');\n };\n ContextMenu.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n new Touch(target, { tapHold: this.touchHandler.bind(this) });\n }\n else {\n EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);\n }\n }\n this.targetElement = target;\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(wrapper, 'mouseover', this.moverHandler, this);\n EventHandler.add(document, 'mousedown', this.mouseDownHandler, this);\n }\n this.delegateClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHandler, this);\n new KeyboardEvents(wrapper, {\n keyAction: this.keyBoardHandler.bind(this),\n keyConfigs: {\n downarrow: DOWNARROW,\n uparrow: UPARROW,\n enter: ENTER,\n leftarrow: LEFTARROW,\n rightarrow: RIGHTARROW,\n escape: ESCAPE\n }\n });\n rippleEffect(wrapper, { selector: '.' + ITEM });\n };\n ContextMenu.prototype.mouseDownHandler = function (e) {\n if (closest(e.target, '.' + WRAPPER) !== this.getWrapper()) {\n this.closeMenu(this.navIdx.length, e);\n }\n };\n ContextMenu.prototype.keyBoardHandler = function (e) {\n e.preventDefault();\n switch (e.action) {\n case DOWNARROW:\n case UPARROW:\n this.upDownKeyHandler(e);\n break;\n case RIGHTARROW:\n this.rightEnterKeyHandler(e);\n break;\n case LEFTARROW:\n this.leftEscKeyHandler(e);\n break;\n case ENTER:\n this.rightEnterKeyHandler(e);\n break;\n case ESCAPE:\n this.leftEscKeyHandler(e);\n break;\n }\n };\n ContextMenu.prototype.upDownKeyHandler = function (e) {\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n var defaultIdx = e.action === DOWNARROW ? 0 : cul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n fliIdx = this.getIdx(cul, fli);\n fli.classList.remove(FOCUSED);\n e.action === DOWNARROW ? fliIdx++ : fliIdx--;\n if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {\n fliIdx = defaultIdx;\n }\n }\n var cli = cul.children[fliIdx];\n fliIdx = this.isValidLI(cli, fliIdx, e.action);\n cul.children[fliIdx].classList.add(FOCUSED);\n cul.children[fliIdx].focus();\n };\n ContextMenu.prototype.isValidLI = function (cli, index, action) {\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n ((action === DOWNARROW) || (action === RIGHTARROW)) ? index++ : index--;\n }\n cli = cul.children[index];\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n index = this.isValidLI(cli, index, action);\n }\n return index;\n };\n ContextMenu.prototype.rightEnterKeyHandler = function (e) {\n var eventArgs;\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n var fliIdx = this.getIdx(cul, fli);\n var navIdx = this.navIdx.concat(fliIdx);\n var index = void 0;\n var item = this.getItem(navIdx);\n if (item.items.length) {\n this.navIdx.push(fliIdx);\n this.openMenu(fli, item, null, null, e);\n fli.classList.remove(FOCUSED);\n fli.classList.add(SELECTED);\n if (e.action === ENTER) {\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n }\n fli.focus();\n cul = wrapper.children[this.navIdx.length];\n index = this.isValidLI(cul.children[0], 0, e.action);\n cul.children[index].classList.add(FOCUSED);\n cul.children[index].focus();\n }\n else {\n if (e.action === ENTER) {\n fli.classList.remove(FOCUSED);\n fli.classList.add(SELECTED);\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n this.closeMenu(null, e);\n }\n }\n }\n };\n ContextMenu.prototype.leftEscKeyHandler = function (e) {\n if (this.navIdx.length) {\n var wrapper = this.getWrapper();\n this.closeMenu(this.navIdx.length, e);\n var cul = wrapper.children[this.navIdx.length];\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.setAttribute('aria-expanded', 'false');\n sli.classList.remove(SELECTED);\n sli.classList.add(FOCUSED);\n sli.focus();\n }\n }\n else {\n if (e.action === ESCAPE) {\n this.closeMenu(null, e);\n }\n }\n };\n ContextMenu.prototype.scrollHandler = function (e) {\n this.closeMenu(null, e);\n };\n ContextMenu.prototype.touchHandler = function (e) {\n this.isTapHold = true;\n this.cmenuHandler(e.originalEvent);\n };\n ContextMenu.prototype.cmenuHandler = function (e) {\n e.preventDefault();\n this.closeMenu(null, e);\n if (this.canOpen(e.target)) {\n if (e.changedTouches) {\n this.openMenu(null, null, e.changedTouches[0].pageY + 1, e.changedTouches[0].pageX + 1, e);\n }\n else {\n this.openMenu(null, null, e.pageY + 1, e.pageX + 1, e);\n }\n }\n };\n /**\n * Closes the ContextMenu if it is opened.\n */\n ContextMenu.prototype.close = function () {\n this.closeMenu();\n };\n ContextMenu.prototype.closeMenu = function (ulIndex, e) {\n if (ulIndex === void 0) { ulIndex = 0; }\n if (e === void 0) { e = null; }\n if (this.isMenuVisible()) {\n var ul = void 0;\n var item = void 0;\n var items = void 0;\n var closeArgs = void 0;\n var beforeCloseArgs = void 0;\n var wrapper = this.getWrapper();\n for (var cnt = wrapper.childElementCount; cnt > ulIndex; cnt--) {\n item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n items = item ? item.items : this.items;\n ul = wrapper.children[cnt - 1];\n beforeCloseArgs = { element: ul, parentItem: item, items: items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (!beforeCloseArgs.cancel) {\n this.toggleAnimation(ul, false);\n this.navIdx.length = ulIndex ? ulIndex - 1 : ulIndex;\n closeArgs = { element: ul, parentItem: item, items: items };\n this.trigger('onClose', closeArgs);\n }\n }\n }\n };\n ContextMenu.prototype.isMenuVisible = function () {\n return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));\n };\n ContextMenu.prototype.canOpen = function (target) {\n var canOpen = true;\n if (this.filter) {\n canOpen = false;\n var filter = this.filter.split(' ');\n for (var i = 0, len = target.classList.length; i < len; i++) {\n if (filter.indexOf(target.classList[i]) > -1) {\n canOpen = true;\n break;\n }\n }\n }\n return canOpen;\n };\n /**\n * This method is used to open the ContextMenu in specified position.\n * @param top To specify ContextMenu vertical positioning.\n * @param left To specify ContextMenu horizontal positioning.\n * @returns void\n */\n ContextMenu.prototype.open = function (top, left) {\n this.openMenu(null, null, top, left);\n };\n ContextMenu.prototype.openMenu = function (li, item, top, left, e) {\n if (top === void 0) { top = 0; }\n if (left === void 0) { left = 0; }\n if (e === void 0) { e = null; }\n var ul;\n var navIdx;\n var wrapper = this.getWrapper();\n if (li) {\n ul = this.createItems(item.items);\n if (Browser.isDevice) {\n wrapper.lastChild.style.display = 'none';\n var data = { text: item.text, iconCss: ICONS + ' e-previous' };\n var hdata = new MenuItem(this.items[0], null, data, true);\n var hli = this.createItems([hdata]).children[0];\n hli.classList.add(HEADER);\n ul.insertBefore(hli, ul.children[0]);\n }\n ul.style.zIndex = this.element.style.zIndex;\n wrapper.appendChild(ul);\n }\n else {\n ul = this.element;\n }\n navIdx = this.getIndex(li ? this.getTextContent(li) : null);\n var items = li ? item.items : this.items;\n var eventArgs = { element: ul, items: items, parentItem: item, event: e, cancel: false };\n this.trigger('beforeOpen', eventArgs);\n if (eventArgs.cancel) {\n this.navIdx.pop();\n }\n else {\n this.setPosition(li, ul, top, left);\n this.toggleAnimation(ul);\n }\n };\n ContextMenu.prototype.setPosition = function (li, ul, top, left) {\n var px = 'px';\n this.toggleVisiblity(ul);\n if (ul === this.element) {\n var collide = isCollide(ul, null, left, top);\n if (collide.indexOf('right') > -1) {\n left = left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n var offset = fit(ul, null, { X: false, Y: true }, { top: top, left: left });\n top = offset.top - 20;\n }\n collide = isCollide(ul, null, left, top);\n if (collide.indexOf('left') > -1) {\n var offset = fit(ul, null, { X: true, Y: false }, { top: top, left: left });\n left = offset.left;\n }\n }\n else {\n if (Browser.isDevice) {\n top = Number(this.element.style.top.replace(px, ''));\n left = Number(this.element.style.left.replace(px, ''));\n }\n else {\n var x = this.enableRtl ? 'left' : 'right';\n var offset = calculatePosition(li, x, 'top');\n top = offset.top;\n left = offset.left;\n var collide = isCollide(ul, null, this.enableRtl ? left - ul.offsetWidth : left, top);\n var xCollision = collide.indexOf('left') > -1 || collide.indexOf('right') > -1;\n if (xCollision) {\n offset = calculatePosition(li, this.enableRtl ? 'right' : 'left', 'top');\n left = offset.left;\n }\n if (this.enableRtl || xCollision) {\n left = (this.enableRtl && xCollision) ? left : left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n offset = fit(ul, null, { X: false, Y: true }, { top: top, left: left });\n top = offset.top;\n }\n }\n }\n this.toggleVisiblity(ul, false);\n ul.style.top = top + px;\n ul.style.left = left + px;\n };\n ContextMenu.prototype.toggleVisiblity = function (ul, isVisible) {\n if (isVisible === void 0) { isVisible = true; }\n ul.style.visibility = isVisible ? 'hidden' : '';\n ul.style.display = isVisible ? 'block' : 'none';\n };\n ContextMenu.prototype.createItems = function (items) {\n var _this = this;\n var showIcon = this.hasField(items, 'iconCss');\n var listBaseOptions = {\n showIcon: showIcon,\n moduleName: 'menu',\n itemCreating: function (args) {\n args.curData.htmlAttributes = {\n role: 'menuitem',\n tabindex: '-1'\n };\n },\n itemCreated: function (args) {\n if (args.curData.separator) {\n args.item.classList.add(SEPARATOR);\n args.item.removeAttribute('role');\n }\n if (showIcon && !args.curData.iconCss && !args.curData.separator) {\n args.item.classList.add('e-blankicon');\n }\n if (args.curData.items && args.curData.items.length) {\n var span = createElement('span', { className: ICONS + ' ' + CARET });\n args.item.appendChild(span);\n args.item.setAttribute('aria-haspopup', 'true');\n args.item.setAttribute('aria-expanded', 'false');\n args.item.removeAttribute('role');\n args.item.classList.add('e-menu-caret-icon');\n }\n var eventArgs = { item: args.curData, element: args.item };\n _this.trigger('beforeItemRender', eventArgs);\n }\n };\n var ul = ListBase.createList(this.toRawObject(items.slice()), listBaseOptions, true);\n ul.setAttribute('tabindex', '0');\n return ul;\n };\n ContextMenu.prototype.toRawObject = function (items) {\n var item;\n var menuItems = [];\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i].properties;\n menuItems.push(item);\n }\n return menuItems;\n };\n ContextMenu.prototype.moverHandler = function (e) {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n if (cli && closest(cli, '.' + WRAPPER)) {\n var fli = select('.' + FOCUSED, wrapper);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n cli.classList.add(FOCUSED);\n if (!this.showItemOnClick) {\n this.clickHandler(e);\n }\n }\n };\n ContextMenu.prototype.hasField = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][field]) {\n return true;\n }\n }\n return false;\n };\n ContextMenu.prototype.getWrapper = function () {\n return closest(this.element, '.' + WRAPPER);\n };\n ContextMenu.prototype.getTextContent = function (li) {\n var node;\n for (var i = 0; i < li.childNodes.length; i++) {\n node = li.childNodes[i];\n if (node.nodeType === 3 || (node.nodeType === 1 && node.classList.contains('e-menu-url'))) {\n return node.textContent;\n }\n }\n return '';\n };\n ContextMenu.prototype.clickHandler = function (e) {\n if (this.isTapHold) {\n this.isTapHold = false;\n }\n else {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n var cliWrapper = cli ? closest(cli, '.' + WRAPPER) : null;\n var isInstLI = cli && cliWrapper && wrapper.firstElementChild.id === cliWrapper.firstElementChild.id;\n if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {\n this.setLISelected(cli);\n var navIdx = this.getIndex(this.getTextContent(cli));\n var item = this.getItem(navIdx);\n var eventArgs = { element: cli, item: item };\n this.trigger('select', eventArgs);\n }\n if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {\n var ul = void 0;\n if (cli.classList.contains(HEADER)) {\n ul = wrapper.children[this.navIdx.length - 1];\n this.toggleAnimation(ul);\n var sli = this.getLIByClass(ul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n detach(cli.parentNode);\n this.navIdx.pop();\n }\n else {\n if (!cli.classList.contains(SEPARATOR)) {\n var showSubMenu = true;\n var cul = cli.parentNode;\n var cliIdx = this.getIdx(cul, cli);\n if (!Browser.isDevice) {\n var culIdx = this.getIdx(wrapper, cul);\n if (this.navIdx[culIdx] === cliIdx) {\n showSubMenu = false;\n }\n if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || showSubMenu)) {\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n this.closeMenu(culIdx + 1, e);\n }\n }\n if (showSubMenu) {\n var idx = this.navIdx.concat(cliIdx);\n var item = this.getItem(idx);\n if (item.items.length) {\n if (e.type === 'mouseover') {\n this.setLISelected(cli);\n }\n cli.setAttribute('aria-expanded', 'true');\n this.navIdx.push(cliIdx);\n this.openMenu(cli, item, null, null, e);\n }\n else {\n if (e.type !== 'mouseover') {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n }\n else {\n if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {\n if (!cli || !cli.querySelector('.' + CARET)) {\n this.closeMenu(null, e);\n }\n }\n }\n }\n };\n ContextMenu.prototype.setLISelected = function (li) {\n var sli = this.getLIByClass(li.parentElement, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n li.classList.remove(FOCUSED);\n li.classList.add(SELECTED);\n };\n ContextMenu.prototype.getLIByClass = function (ul, classname) {\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains(classname)) {\n return ul.children[i];\n }\n }\n return null;\n };\n ContextMenu.prototype.getItem = function (navIdx) {\n navIdx = navIdx.slice();\n var idx = navIdx.pop();\n var items = this.getItems(navIdx);\n return items[idx];\n };\n ContextMenu.prototype.getItems = function (navIdx) {\n var items = this.items;\n for (var i = 0; i < navIdx.length; i++) {\n items = items[navIdx[i]].items;\n }\n return items;\n };\n ContextMenu.prototype.getIdx = function (ul, li, skipHdr) {\n if (skipHdr === void 0) { skipHdr = true; }\n var idx = Array.prototype.indexOf.call(ul.children, li);\n if (skipHdr && ul.children[0].classList.contains(HEADER)) {\n idx--;\n }\n return idx;\n };\n ContextMenu.prototype.getLI = function (elem) {\n if (elem.tagName === 'LI') {\n return elem;\n }\n return closest(elem, 'li');\n };\n /**\n * Called internally if any of the property value changed\n * @private\n * @param {ContextMenuModel} newProp\n * @param {ContextMenuModel} oldProp\n * @returns void\n */\n ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n wrapper.classList.remove(oldProp.cssClass);\n }\n if (newProp.cssClass) {\n wrapper.classList.add(newProp.cssClass);\n }\n break;\n case 'enableRtl':\n wrapper.classList.toggle(RTL);\n break;\n case 'filter':\n this.closeMenu();\n this.filter = newProp.filter;\n break;\n case 'showItemOnClick':\n this.unWireEvents();\n this.showItemOnClick = newProp.showItemOnClick;\n this.wireEvents();\n break;\n case 'target':\n this.unWireEvents();\n this.target = newProp.target;\n this.wireEvents();\n break;\n case 'items':\n var idx = void 0;\n var navIdx = void 0;\n var item = void 0;\n var keys = Object.keys(newProp.items);\n for (var i = 0; i < keys.length; i++) {\n navIdx = this.getChangedItemIndex(newProp, [], Number(keys[i]));\n if (navIdx.length <= this.getWrapper().children.length) {\n idx = navIdx.pop();\n item = this.getItems(navIdx);\n this.insertAfter([item[idx]], item[idx].text);\n this.removeItem(item, navIdx, idx);\n }\n navIdx.length = 0;\n }\n break;\n }\n }\n };\n ContextMenu.prototype.getChangedItemIndex = function (newProp, index, idx) {\n index.push(idx);\n var key = Object.keys(newProp.items[idx]).pop();\n if (key === 'items') {\n var item = newProp.items[idx];\n this.getChangedItemIndex(item, index, Number(Object.keys(item.items).pop()));\n }\n else {\n if (key === 'isParentArray' && index.length > 1) {\n index.pop();\n }\n }\n return index;\n };\n ContextMenu.prototype.removeItem = function (item, navIdx, idx) {\n item.splice(idx, 1);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n detach(uls[navIdx.length].children[idx]);\n }\n };\n /**\n * Used to unwire the bind events.\n * @private\n */\n ContextMenu.prototype.unWireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var touchModule = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n touchModule = getInstance(target, Touch);\n if (touchModule) {\n touchModule.destroy();\n }\n }\n else {\n EventHandler.remove(target, 'contextmenu', this.cmenuHandler);\n }\n }\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollHandler);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.remove(wrapper, 'mouseover', this.moverHandler);\n EventHandler.remove(document, 'mousedown', this.mouseDownHandler);\n }\n EventHandler.remove(document, 'click', this.delegateClickHandler);\n var keyboardModule = getInstance(wrapper, KeyboardEvents);\n if (keyboardModule) {\n keyboardModule.destroy();\n }\n };\n ContextMenu.prototype.toggleAnimation = function (ul, isMenuOpen) {\n var _this = this;\n if (isMenuOpen === void 0) { isMenuOpen = true; }\n if (this.animationSettings.effect === 'None' || !isMenuOpen) {\n this.end(ul, isMenuOpen);\n }\n else {\n this.animation.animate(ul, {\n name: this.animationSettings.effect,\n duration: this.animationSettings.duration,\n timingFunction: this.animationSettings.easing,\n begin: function (options) {\n options.element.style.display = 'block';\n options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';\n },\n end: function (options) {\n _this.end(options.element, isMenuOpen);\n }\n });\n }\n };\n ContextMenu.prototype.end = function (ul, isMenuOpen) {\n if (isMenuOpen) {\n ul.style.display = 'block';\n ul.style.maxHeight = '';\n var item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n var eventArgs = { element: ul, parentItem: item, items: item ? item.items : this.items };\n this.trigger('onOpen', eventArgs);\n if (ul.querySelector('.' + FOCUSED)) {\n ul.querySelector('.' + FOCUSED).focus();\n }\n else {\n var ele = void 0;\n ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n else {\n if (ul === this.element) {\n var fli = this.getLIByClass(this.element, FOCUSED);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n var sli = this.getLIByClass(this.element, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n ul.style.display = 'none';\n }\n else {\n detach(ul);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n ContextMenu.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'contextmenu';\n };\n ContextMenu.prototype.getIndex = function (data, items, navIdx, isCallBack) {\n if (items === void 0) { items = this.items; }\n if (navIdx === void 0) { navIdx = []; }\n if (isCallBack === void 0) { isCallBack = false; }\n var item;\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i];\n if (item.text === data) {\n navIdx.push(i);\n break;\n }\n else if (item.items.length) {\n navIdx = this.getIndex(data, item.items, navIdx, true);\n if (navIdx[navIdx.length - 1] === -1) {\n if (i !== len - 1) {\n navIdx.pop();\n }\n }\n else {\n navIdx.unshift(i);\n break;\n }\n }\n else {\n if (i === len - 1) {\n navIdx.push(-1);\n }\n }\n }\n return (!isCallBack && navIdx[0] === -1) ? [] : navIdx;\n };\n /**\n * This method is used to enable or disable the menu items in the ContextMenu based on the items and enable argument.\n * @param items Text items that needs to be enabled/disabled.\n * @param enable Set `true`/`false` to enable/disable the list items.\n * @returns void\n */\n ContextMenu.prototype.enableItems = function (items, enable) {\n if (enable === void 0) { enable = true; }\n var ul;\n var idx;\n var navIdx;\n var disabled = DISABLED;\n var wrapper = this.getWrapper();\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n ul = wrapper.children[navIdx.length];\n if (ul) {\n if (enable) {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(disabled);\n }\n else {\n ul.children[idx].classList.remove(disabled);\n }\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(disabled);\n }\n else {\n ul.children[idx].classList.add(disabled);\n }\n }\n }\n }\n };\n /**\n * This method is used to show the menu items in the ContextMenu based on the items text.\n * @param items Text items that needs to be shown.\n * @returns void\n */\n ContextMenu.prototype.showItems = function (items) {\n this.showHideItems(items, false);\n };\n /**\n * This method is used to hide the menu items in the ContextMenu based on the items text.\n * @param items Text items that needs to be hidden.\n * @returns void\n */\n ContextMenu.prototype.hideItems = function (items) {\n this.showHideItems(items, true);\n };\n ContextMenu.prototype.showHideItems = function (items, ishide) {\n var ul;\n var idx;\n var navIdx;\n var wrapper = this.getWrapper();\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n ul = wrapper.children[navIdx.length];\n if (ul) {\n if (ishide) {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(HIDE);\n }\n else {\n ul.children[idx].classList.add(HIDE);\n }\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(HIDE);\n }\n else {\n ul.children[idx].classList.remove(HIDE);\n }\n }\n }\n }\n };\n /**\n * It is used to remove the menu items from the ContextMenu based on the items text.\n * @param items Text items that needs to be removed.\n * @returns void\n */\n ContextMenu.prototype.removeItems = function (items) {\n var idx;\n var navIdx;\n var iitems;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n this.removeItem(iitems, navIdx, idx);\n }\n };\n /**\n * It is used to insert the menu items after the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item after that the element to be inserted.\n * @returns void\n */\n ContextMenu.prototype.insertAfter = function (items, text) {\n this.insertItems(items, text);\n };\n /**\n * It is used to insert the menu items before the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item before that the element to be inserted.\n * @returns void\n */\n ContextMenu.prototype.insertBefore = function (items, text) {\n this.insertItems(items, text, false);\n };\n ContextMenu.prototype.insertItems = function (items, text, isAfter) {\n if (isAfter === void 0) { isAfter = true; }\n var li;\n var idx;\n var navIdx;\n var iitems;\n var menuitem;\n var showIcon;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(text);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n menuitem = new MenuItem(iitems[0], null, items[i], true);\n iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n idx = isAfter ? idx + 1 : idx;\n showIcon = this.hasField(iitems, 'iconCss');\n li = this.createItems(iitems).children[idx];\n uls[navIdx.length].insertBefore(li, uls[navIdx.length].children[idx]);\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n ContextMenu.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n if (wrapper) {\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n if (this.ngElement) {\n this.ngElement.style.display = 'block';\n }\n else {\n this.closeMenu();\n this.element.innerHTML = '';\n ['top', 'left', 'display', 'z-index'].forEach(function (key) {\n _this.element.style.removeProperty(key);\n });\n ['role', 'tabindex', 'class', 'style'].forEach(function (key) {\n if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {\n _this.element.removeAttribute(key);\n }\n });\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n }\n };\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"filter\", void 0);\n __decorate([\n Property(false)\n ], ContextMenu.prototype, \"showItemOnClick\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], ContextMenu.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"target\", void 0);\n __decorate([\n Property({ duration: 400, easing: 'ease', effect: 'SlideDown' })\n ], ContextMenu.prototype, \"animationSettings\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"onOpen\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"onClose\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"select\", void 0);\n ContextMenu = __decorate([\n NotifyPropertyChanges\n ], ContextMenu);\n return ContextMenu;\n}(Component));\nexport { ContextMenu };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, closest, Collection, Complex, attributes, detach } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll } from '@syncfusion/ej2-base';\nimport { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';\nimport { Toolbar } from '../toolbar/toolbar';\nvar CLS_TAB = 'e-tab';\nvar CLS_HEADER = 'e-tab-header';\nvar CLS_CONTENT = 'e-content';\nvar CLS_NEST = 'e-nested';\nvar CLS_ITEMS = 'e-items';\nvar CLS_ITEM = 'e-item';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_RTL = 'e-rtl';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_DISABLE = 'e-disable';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_FOCUS = 'e-focused';\nvar CLS_ICONS = 'e-icons';\nvar CLS_ICON = 'e-icon';\nvar CLS_ICON_CLOSE = 'e-close-icon';\nvar CLS_CLOSE_SHOW = 'e-close-show';\nvar CLS_TEXT = 'e-tab-text';\nvar CLS_INDICATOR = 'e-indicator';\nvar CLS_WRAP = 'e-tab-wrap';\nvar CLS_TEXT_WRAP = 'e-text-wrap';\nvar CLS_TAB_ICON = 'e-tab-icon';\nvar CLS_TB_ITEMS = 'e-toolbar-items';\nvar CLS_TB_ITEM = 'e-toolbar-item';\nvar CLS_TB_POP = 'e-toolbar-pop';\nvar CLS_TB_POPUP = 'e-toolbar-popup';\nvar CLS_POPUP_OPEN = 'e-popup-open';\nvar CLS_POPUP_CLOSE = 'e-popup-close';\nvar CLS_PROGRESS = 'e-progress';\nvar CLS_IGNORE = 'e-ignore';\nvar CLS_OVERLAY = 'e-overlay';\nvar TabActionSettings = /** @class */ (function (_super) {\n __extends(TabActionSettings, _super);\n function TabActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideLeftIn')\n ], TabActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(600)\n ], TabActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], TabActionSettings.prototype, \"easing\", void 0);\n return TabActionSettings;\n}(ChildProperty));\nexport { TabActionSettings };\nvar TabAnimationSettings = /** @class */ (function (_super) {\n __extends(TabAnimationSettings, _super);\n function TabAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"previous\", void 0);\n __decorate([\n Complex({ effect: 'SlideRightIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"next\", void 0);\n return TabAnimationSettings;\n}(ChildProperty));\nexport { TabAnimationSettings };\n/**\n * Objects used for configuring the Tab item header properties.\n */\nvar Header = /** @class */ (function (_super) {\n __extends(Header, _super);\n function Header() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Header.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Header.prototype, \"iconCss\", void 0);\n __decorate([\n Property('left')\n ], Header.prototype, \"iconPosition\", void 0);\n return Header;\n}(ChildProperty));\nexport { Header };\n/**\n * An array of object that is used to configure the Tab.\n */\nvar TabItem = /** @class */ (function (_super) {\n __extends(TabItem, _super);\n function TabItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({}, Header)\n ], TabItem.prototype, \"header\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TabItem.prototype, \"disabled\", void 0);\n return TabItem;\n}(ChildProperty));\nexport { TabItem };\n/**\n * Tab is a content panel to show multiple contents in a single space, one at a time.\n * Each Tab item has an associated content, that will be displayed based on the active Tab header item.\n * ```html\n *
\n * \n * ```\n */\nvar Tab = /** @class */ (function (_super) {\n __extends(Tab, _super);\n /**\n * Initializes a new instance of the Tab class.\n * @param options - Specifies Tab model properties as options.\n * @param element - Specifies the element that is rendered as a Tab.\n */\n function Tab(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.prevIndex = 0;\n _this.show = { name: 'SlideDown', duration: 100 };\n _this.hide = { name: 'SlideUp', duration: 100 };\n _this.animateOptions = {};\n _this.animObj = new Animation(_this.animateOptions);\n _this.maxHeight = 0;\n _this.title = 'Close';\n /**\n * Contains the keyboard configuration of the Tab.\n */\n _this.keyConfigs = {\n tab: 'tab',\n home: 'home',\n end: 'end',\n enter: 'enter',\n space: 'space',\n delete: 'delete',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow'\n };\n return _this;\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n * @returns void\n */\n Tab.prototype.destroy = function () {\n var _this = this;\n if (!isNOU(this.tbObj)) {\n this.tbObj.destroy();\n }\n this.unWireEvents();\n ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {\n _this.element.removeAttribute(val);\n });\n this.expTemplateContent();\n if (!this.isTemplate) {\n this.element.innerHTML = '';\n }\n else {\n var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n this.element.classList.remove(CLS_TEMPLATE);\n if (!isNOU(cntEle)) {\n cntEle.innerHTML = this.cnt;\n }\n }\n _super.prototype.destroy.call(this);\n this.trigger('destroyed');\n };\n /**\n * Initialize component\n * @private\n */\n Tab.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.isPopup = false;\n this.initRender = true;\n this.isSwipeed = false;\n this.templateEle = [];\n if (!isNOU(nested)) {\n nested.parentElement.classList.add(CLS_NEST);\n this.isNested = true;\n }\n var name = Browser.info.name;\n var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';\n setStyle(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });\n this.setCssClass(this.element, this.cssClass, true);\n attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '' });\n this.setCssClass(this.element, css, true);\n };\n /**\n * Initialize the component rendering\n * @private\n */\n Tab.prototype.render = function () {\n this.renderContainer();\n this.wireEvents();\n this.initRender = false;\n };\n Tab.prototype.renderContainer = function () {\n var ele = this.element;\n if (this.items.length > 0 && ele.children.length === 0) {\n ele.appendChild(buildTag('div', { className: CLS_CONTENT }));\n this.setOrientation(this.headerPlacement, buildTag('div', { className: CLS_HEADER }));\n this.isTemplate = false;\n }\n else if (this.element.children.length > 0) {\n this.isTemplate = true;\n ele.classList.add(CLS_TEMPLATE);\n var header = ele.querySelector('.' + CLS_HEADER);\n if (header && this.headerPlacement === 'Bottom') {\n this.setOrientation(this.headerPlacement, header);\n }\n }\n if (!isNOU(select('.' + CLS_HEADER, this.element)) && !isNOU(select('.' + CLS_CONTENT, this.element))) {\n this.renderHeader();\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n if (!isNOU(this.tbItems)) {\n rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });\n }\n this.renderContent();\n if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.bdrLine = buildTag('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });\n var scrCnt = select('.e-hscroll-content', this.tbItems);\n if (!isNOU(scrCnt)) {\n scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);\n }\n else {\n this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstChild);\n }\n this.setContentHeight(true);\n this.select(this.selectedItem);\n }\n this.setRTL(this.enableRtl);\n }\n };\n Tab.prototype.renderHeader = function () {\n var _this = this;\n var tabItems = [];\n this.hdrEle = select('.' + CLS_HEADER, this.element);\n this.btnCls = buildTag('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } }).outerHTML;\n if (!this.isTemplate) {\n tabItems = this.parseObject(this.items, 0);\n }\n else {\n var count = this.hdrEle.children.length;\n var hdrItems = [];\n for (var i = 0; i < count; i++) {\n hdrItems.push(this.hdrEle.children.item(i).innerHTML);\n }\n if (count > 0) {\n this.hdrEle.innerHTML = '';\n this.hdrEle.appendChild(buildTag('div', { className: CLS_ITEMS }));\n hdrItems.forEach(function (item, index) {\n var attr = {\n className: CLS_ITEM, id: CLS_ITEM + '_' + index,\n attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + '_' + index, 'aria-selected': 'false' }\n };\n var txt = buildTag('span', { className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' } }).outerHTML;\n var cont = buildTag('div', { className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls }).outerHTML;\n var wrap = buildTag('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });\n select('.' + CLS_ITEMS, _this.element).appendChild(buildTag('div', attr));\n selectAll('.' + CLS_ITEM, _this.element)[index].appendChild(wrap);\n });\n }\n }\n this.tbObj = new Toolbar({\n width: '100%',\n overflowMode: this.overflowMode,\n items: (tabItems.length !== 0) ? tabItems : [],\n clicked: this.clickHandler.bind(this)\n });\n this.tbObj.appendTo(this.hdrEle);\n attributes(this.element, { 'aria-orientation': 'horizontal' });\n this.setCloseButton(this.showCloseButton);\n this.setProperties({ headerPlacement: (this.element.children.item(0).classList.contains(CLS_HEADER)) ? 'Top' : 'Bottom' }, true);\n };\n Tab.prototype.renderContent = function () {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);\n if (this.isTemplate) {\n this.cnt = (this.cntEle.children.length > 0) ? this.cntEle.innerHTML : '';\n var contents = this.cntEle.children;\n for (var i = 0; i < hdrItem.length; i++) {\n if (contents.length - 1 >= i) {\n contents.item(i).className += CLS_ITEM;\n attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + i });\n contents.item(i).id = CLS_CONTENT + '_' + i;\n }\n }\n }\n };\n Tab.prototype.parseObject = function (items, index) {\n var _this = this;\n var inHTML = '';\n var tbCount = selectAll('.' + CLS_TB_ITEM, this.element).length;\n var tItems = [];\n items.forEach(function (item, i) {\n var pos = (isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n var txt = item.header.text;\n var id = ((tbCount === 0) ? i : (_this.isReplace === true) ? (i + index) : tbCount + i);\n var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';\n var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);\n var txtEmpty = (!isNOU(tHtml) && tHtml !== '');\n var tEle = (txtEmpty) ? buildTag('div', {\n className: CLS_TEXT, innerHTML: tHtml, attrs: { 'role': 'presentation' }\n }).outerHTML : '';\n var icon = buildTag('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n }).outerHTML;\n if ((txt === '' || txt === undefined) && css === '') {\n return;\n }\n else {\n if ((txt !== '' && txt !== undefined) && css !== '') {\n inHTML = (pos === 'left' || pos === 'top') ? icon + '' + tEle : tEle + '' + icon;\n }\n else {\n inHTML = (css === '') ? tEle : icon;\n }\n }\n var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };\n var tCont = buildTag('div', { className: CLS_TEXT_WRAP, innerHTML: inHTML + '' + _this.btnCls }).outerHTML;\n var wrap = buildTag('div', { className: CLS_WRAP, innerHTML: tCont, attrs: wrapAttrs });\n var attrObj = {\n id: CLS_ITEM + '_' + id, role: 'tab', 'aria-selected': 'false'\n };\n var tItem = { htmlAttributes: attrObj, template: wrap.outerHTML };\n tItem.cssClass = item.cssClass + ' ' + disabled + ' ' + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');\n if (pos === 'top' || pos === 'bottom') {\n _this.element.classList.add('e-vertical-icon');\n }\n tItems.push(tItem);\n });\n return tItems;\n };\n Tab.prototype.removeActiveClass = function (id) {\n var hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element)[0];\n if (this.headerPlacement === 'Bottom') {\n hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1])[0];\n }\n if (!isNOU(hdrActEle)) {\n hdrActEle.classList.remove(CLS_ACTIVE);\n var no = this.extIndex(hdrActEle.id);\n var trg = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n }\n };\n Tab.prototype.checkPopupOverflow = function (ele) {\n this.tbPop = select('.' + CLS_TB_POP, this.element);\n var popIcon = select('.e-hor-nav', this.element);\n var tbrItems = select('.' + CLS_TB_ITEMS, this.element);\n if ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))\n || (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth)) {\n ele.classList.add(CLS_TB_POPUP);\n this.tbPop.insertBefore(ele.cloneNode(true), selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);\n ele.outerHTML = '';\n }\n return true;\n };\n Tab.prototype.popupHandler = function (target) {\n var ripEle = target.querySelector('.e-ripple-element');\n if (!isNOU(ripEle)) {\n ripEle.outerHTML = '';\n target.querySelector('.' + CLS_WRAP).classList.remove('e-ripple');\n }\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var lastChild = this.tbItem[this.tbItem.length - 1];\n if (this.tbItem.length !== 0) {\n target.classList.remove(CLS_TB_POPUP);\n this.tbItems.appendChild(target.cloneNode(true));\n this.actEleId = target.id;\n target.outerHTML = '';\n if (this.checkPopupOverflow(lastChild)) {\n var prevEle = this.tbItems.lastChild.previousElementSibling;\n this.checkPopupOverflow(prevEle);\n }\n this.isPopup = true;\n }\n return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;\n };\n Tab.prototype.setCloseButton = function (val) {\n var trg = select('.' + CLS_HEADER, this.element);\n (val === true) ? trg.classList.add(CLS_CLOSE_SHOW) : trg.classList.remove(CLS_CLOSE_SHOW);\n this.tbObj.refreshOverflow();\n this.refreshActElePosition();\n };\n Tab.prototype.prevCtnAnimation = function (prev, current) {\n var animation;\n var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL);\n if (this.isPopup || prev <= current) {\n if (this.animation.previous.effect === 'SlideLeftIn') {\n animation = { name: 'SlideLeftOut',\n duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing };\n }\n else {\n animation = null;\n }\n }\n else {\n if (this.animation.next.effect === 'SlideRightIn') {\n animation = { name: 'SlideRightOut',\n duration: this.animation.next.duration, timingFunction: this.animation.next.easing };\n }\n else {\n animation = null;\n }\n }\n return animation;\n };\n Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {\n var animateObj = this.prevCtnAnimation(prevIndex, this.selectedItem);\n if (!isNOU(animateObj)) {\n animateObj.begin = function () {\n setStyle(oldCnt, { 'position': 'absolute' });\n oldCnt.classList.add(CLS_PROGRESS);\n oldCnt.classList.add('e-view');\n };\n animateObj.end = function () {\n oldCnt.style.display = 'none';\n oldCnt.classList.remove(CLS_ACTIVE);\n oldCnt.classList.remove(CLS_PROGRESS);\n oldCnt.classList.remove('e-view');\n setStyle(oldCnt, { 'display': '', 'position': '' });\n };\n new Animation(animateObj).animate(oldCnt);\n }\n else {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n };\n Tab.prototype.triggerAnimation = function (id, value) {\n var _this = this;\n var prevIndex = this.prevIndex;\n var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);\n var oldCnt;\n itemCollection.forEach(function (item) {\n if (item.id === _this.prevActiveEle) {\n oldCnt = item;\n }\n });\n var prevEle = this.tbItem[prevIndex];\n var no = this.extIndex(this.tbItem[this.selectedItem].id);\n var newCnt = this.getTrgContent(this.cntEle, no);\n if (isNOU(oldCnt) && !isNOU(prevEle)) {\n var idNo = this.extIndex(prevEle.id);\n oldCnt = this.getTrgContent(this.cntEle, idNo);\n }\n if (this.initRender || value === false || this.animation === {} || isNOU(this.animation)) {\n if (oldCnt && oldCnt !== newCnt) {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n return;\n }\n var cnt = select('.' + CLS_CONTENT, this.element);\n var animateObj;\n if (this.prevIndex > this.selectedItem && !this.isPopup) {\n var openEff = this.animation.previous.effect;\n animateObj = {\n name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),\n duration: this.animation.previous.duration,\n timingFunction: this.animation.previous.easing\n };\n }\n else if (this.isPopup || this.prevIndex < this.selectedItem || this.prevIndex === this.selectedItem) {\n var clsEff = this.animation.next.effect;\n animateObj = {\n name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),\n duration: this.animation.next.duration,\n timingFunction: this.animation.next.easing\n };\n }\n animateObj.progress = function () {\n cnt.classList.add(CLS_PROGRESS);\n _this.setActiveBorder();\n };\n animateObj.end = function () {\n cnt.classList.remove(CLS_PROGRESS);\n newCnt.classList.add(CLS_ACTIVE);\n };\n if (!this.initRender) {\n this.triggerPrevAnimation(oldCnt, prevIndex);\n }\n this.prevActiveEle = newCnt.id;\n this.isPopup = false;\n if (animateObj.name === '') {\n newCnt.classList.add(CLS_ACTIVE);\n }\n else {\n new Animation(animateObj).animate(newCnt);\n }\n };\n Tab.prototype.keyPressed = function (trg) {\n var trgParent = closest(trg, '.' + CLS_HEADER + ' .' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (!isNOU(this.popEle) && trg.classList.contains('e-hor-nav')) {\n (this.popEle.classList.contains(CLS_POPUP_OPEN)) ? this.popObj.hide(this.hide) : this.popObj.show(this.show);\n }\n else if (trg.classList.contains('e-scroll-nav')) {\n trg.click();\n }\n else {\n if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {\n this.select(trgIndex);\n if (!isNOU(this.popEle)) {\n this.popObj.hide(this.hide);\n }\n }\n }\n };\n Tab.prototype.getEleIndex = function (item) {\n return Array.prototype.indexOf.call(selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element), item);\n };\n Tab.prototype.extIndex = function (id) {\n return id.replace(CLS_ITEM + '_', '');\n };\n Tab.prototype.expTemplateContent = function () {\n var _this = this;\n this.templateEle.forEach(function (eleStr) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n });\n };\n Tab.prototype.templateCompile = function (ele, cnt) {\n var tempEle = buildTag('div');\n var templateFn = compile(cnt);\n if (!isNOU(templateFn) && templateFn().length > 0) {\n [].slice.call(templateFn()).forEach(function (el) {\n tempEle.appendChild(el);\n });\n ele.appendChild(tempEle);\n }\n };\n Tab.prototype.getContent = function (ele, index, callType) {\n var eleStr;\n var cnt = this.items[Number(index)].content;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n if (callType === 'clone') {\n ele.appendChild(eleVal.cloneNode(true));\n }\n else {\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n else {\n this.templateCompile(ele, cnt);\n }\n }\n else {\n this.templateCompile(ele, cnt);\n }\n }\n else {\n ele.innerHTML = cnt.outerHTML;\n }\n if (!isNOU(eleStr)) {\n this.templateEle.push(cnt.toString());\n }\n };\n Tab.prototype.getTrgContent = function (cntEle, no) {\n var ele;\n if (this.element.classList.contains(CLS_NEST)) {\n ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + '_' + no, this.element);\n }\n else {\n ele = this.findEle(cntEle.children, CLS_CONTENT + '_' + no);\n }\n return ele;\n };\n Tab.prototype.findEle = function (items, key) {\n var ele;\n for (var i = 0; i < items.length; i++) {\n if (items[i].id === key) {\n ele = items[i];\n break;\n }\n }\n return ele;\n };\n Tab.prototype.setOrientation = function (place, ele) {\n (place === 'Bottom') ? this.element.appendChild(ele) : this.element.insertBefore(ele, select('.' + CLS_CONTENT, this.element));\n };\n Tab.prototype.setCssClass = function (ele, cls, val) {\n if (cls === '') {\n return;\n }\n var list = cls.split(' ');\n for (var i = 0; i < list.length; i++) {\n if (val) {\n ele.classList.add(list[i]);\n }\n else {\n ele.classList.remove(list[i]);\n }\n }\n };\n Tab.prototype.setContentHeight = function (val) {\n if (isNOU(this.cntEle)) {\n return;\n }\n var height;\n var hdrEle = select('.' + CLS_HEADER, this.element);\n if (this.heightAdjustMode === 'None') {\n if (this.height === 'auto') {\n return;\n }\n else {\n setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });\n }\n }\n else if (this.heightAdjustMode === 'Fill') {\n setStyle(this.element, { 'height': '100%' });\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n else if (this.heightAdjustMode === 'Auto') {\n var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);\n if (this.isTemplate === true) {\n for (var i = 0; i < cnt.length; i++) {\n cnt[i].setAttribute('style', 'display:block; visibility: visible');\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));\n cnt[i].style.removeProperty('display');\n cnt[i].style.removeProperty('visibility');\n }\n }\n else {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n if (val === true) {\n this.cntEle.appendChild(buildTag('div', {\n id: (CLS_CONTENT + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + 0 }\n }));\n }\n var ele = this.cntEle.children.item(0);\n for (var i = 0; i < this.items.length; i++) {\n this.getContent(ele, i, 'clone');\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));\n ele.innerHTML = '';\n }\n this.templateEle = [];\n this.getContent(ele, 0, 'render');\n ele.classList.remove(CLS_ACTIVE);\n }\n setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });\n }\n else {\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n };\n Tab.prototype.getHeight = function (ele) {\n var cs = window.getComputedStyle(ele);\n return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +\n parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));\n };\n Tab.prototype.setActiveBorder = function () {\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element);\n if (this.headerPlacement === 'Bottom') {\n trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1]);\n }\n if (trg === null) {\n return;\n }\n var root = closest(trg, '.' + CLS_TAB);\n if (this.element !== root) {\n return;\n }\n var hsCnt = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS + ' .e-hscroll-content', this.element.children[0]);\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n var bar = select('.' + CLS_HEADER + ' .' + CLS_INDICATOR, this.element);\n if (this.headerPlacement === 'Bottom') {\n hsCnt = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS + ' .e-hscroll-content', this.element.children[1]);\n }\n var tbWidth = (isNOU(hsCnt)) ? this.tbItems.offsetWidth : hsCnt.offsetWidth;\n if (tbWidth !== 0) {\n setStyle(bar, { 'left': trg.offsetLeft + 'px', 'right': tbWidth - (trg.offsetLeft + trg.offsetWidth) + 'px' });\n }\n else {\n setStyle(bar, { 'left': 'auto', 'right': 'auto' });\n }\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.remove(CLS_HIDDEN);\n }\n };\n Tab.prototype.setActive = function (value) {\n this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);\n var trg = this.tbItem[value];\n if (value >= 0) {\n this.setProperties({ selectedItem: value }, true);\n }\n if (value < 0 || isNaN(value) || this.tbItem.length === 0) {\n return;\n }\n if (trg.classList.contains(CLS_ACTIVE)) {\n this.setActiveBorder();\n return;\n }\n if (!this.isTemplate) {\n var prev = this.tbItem[this.prevIndex];\n if (!isNOU(prev)) {\n prev.removeAttribute('aria-controls');\n }\n attributes(trg, { 'aria-controls': CLS_CONTENT + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass(id);\n trg.classList.add(CLS_ACTIVE);\n trg.setAttribute('aria-selected', 'true');\n var no = Number(this.extIndex(id));\n attributes(this.element, { 'aria-activedescendant': id });\n if (this.isTemplate) {\n if (select('.' + CLS_CONTENT, this.element).children.length > 0) {\n var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n if (!isNOU(trg_1)) {\n trg_1.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n }\n else {\n this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n var item = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNOU(item)) {\n this.cntEle.appendChild(buildTag('div', {\n id: CLS_CONTENT + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + this.extIndex(id) }\n }));\n var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));\n this.getContent(eleTrg, Number(this.extIndex(id)), 'render');\n }\n else {\n item.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n this.setActiveBorder();\n var curActItem = select('.' + CLS_HEADER + ' #' + id, this.element);\n this.refreshItemVisibility(curActItem);\n curActItem.firstChild.focus();\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: trg,\n selectedIndex: value,\n isSwiped: this.isSwipeed\n };\n this.trigger('selected', eventArg);\n };\n Tab.prototype.setItems = function (items) {\n this.isReplace = true;\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.tbObj.items = this.parseObject(items, 0);\n this.tbObj.dataBind();\n this.isReplace = false;\n };\n Tab.prototype.setRTL = function (value) {\n this.tbObj.enableRtl = value;\n this.tbObj.dataBind();\n this.setCssClass(this.element, CLS_RTL, value);\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshActiveBorder = function () {\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n this.setActiveBorder();\n };\n Tab.prototype.wireEvents = function () {\n window.addEventListener('resize', this.refreshActElePosition.bind(this));\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });\n this.tabKeyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyHandler.bind(this),\n keyConfigs: { openPopup: 'shift+f10', tab: 'tab', shiftTab: 'shift+tab' },\n eventName: 'keydown'\n });\n };\n Tab.prototype.unWireEvents = function () {\n this.keyModule.destroy();\n this.tabKeyModule.destroy();\n if (!isNOU(this.cntEle)) {\n this.touchModule.destroy();\n }\n window.removeEventListener('resize', this.refreshActElePosition.bind(this));\n this.element.removeEventListener('mouseover', this.hoverHandler.bind(this));\n };\n Tab.prototype.clickHandler = function (args) {\n this.element.classList.remove(CLS_FOCUS);\n var trg = args.originalEvent.target;\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (trg.classList.contains(CLS_ICON_CLOSE)) {\n this.removeTab(trgIndex);\n }\n else {\n this.isPopup = false;\n if (!isNOU(trgParent) && trgIndex !== this.selectedItem) {\n this.select(trgIndex);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {\n return;\n }\n this.isSwipeed = true;\n if (e.swipeDirection === 'Right') {\n this.select(this.selectedItem - 1);\n }\n else {\n if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {\n this.select(this.selectedItem + 1);\n }\n }\n this.isSwipeed = false;\n };\n Tab.prototype.spaceKeyDown = function (e) {\n if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {\n var clstHead = closest(e.target, '.' + CLS_HEADER);\n if (!isNOU(clstHead)) {\n e.preventDefault();\n }\n }\n };\n Tab.prototype.keyHandler = function (e) {\n if (this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n this.element.classList.add(CLS_FOCUS);\n var trg = e.target;\n var actEle = select('.' + CLS_HEADER + ' .' + CLS_ACTIVE, this.element);\n var tabItem = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element);\n this.popEle = select('.' + CLS_TB_POP, this.element);\n if (!isNOU(this.popEle)) {\n this.popObj = this.popEle.ej2_instances[0];\n }\n switch (e.action) {\n case 'space':\n case 'enter':\n if (trg.parentElement.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (e.action === 'enter' && trg.classList.contains('e-hor-nav')) {\n break;\n }\n this.keyPressed(trg);\n break;\n case 'tab':\n case 'shiftTab':\n if (trg.classList.contains(CLS_WRAP)\n && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE) === false) {\n trg.setAttribute('tabindex', '-1');\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n actEle.children.item(0).setAttribute('tabindex', '0');\n break;\n case 'moveLeft':\n case 'moveRight':\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n if (!isNOU(item)) {\n this.refreshItemVisibility(item);\n }\n break;\n case 'openPopup':\n e.preventDefault();\n if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {\n this.popObj.show(this.show);\n }\n break;\n case 'delete':\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n if (this.showCloseButton === true && !isNOU(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshActElePosition = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);\n if (!isNOU(activeEle)) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.e-hscroll-content', this.tbItems);\n if (!isNOU(scrCnt)) {\n var scrBar = select('.e-hscroll-bar', this.tbItems);\n var scrStart = scrBar.scrollLeft;\n var scrEnd = scrStart + scrBar.offsetWidth;\n var eleStart = target.offsetLeft;\n var eleWidth = target.offsetWidth;\n var eleEnd = target.offsetLeft + target.offsetWidth;\n if ((scrStart < eleStart) && (scrEnd < eleEnd)) {\n var eleViewRange = scrEnd - eleStart;\n scrBar.scrollLeft = scrStart + (eleWidth - eleViewRange);\n }\n else {\n if ((scrStart > eleStart) && (scrEnd > eleEnd)) {\n var eleViewRange = eleEnd - scrStart;\n scrBar.scrollLeft = scrStart - (eleWidth - eleViewRange);\n }\n }\n }\n else {\n return;\n }\n };\n Tab.prototype.hoverHandler = function (e) {\n var trg = e.target;\n if (!isNOU(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {\n trg.setAttribute('title', new L10n('tab', { closeButtonTitle: this.title }, this.locale).getConstant('closeButtonTitle'));\n }\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n * @param {number} index - Index value of target Tab item.\n * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.\n * By default, isEnable is true.\n * @returns void.\n */\n Tab.prototype.enableTab = function (index, value) {\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(tbItems)) {\n return;\n }\n if (value === true) {\n tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstChild.setAttribute('tabindex', '-1');\n }\n else {\n tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstChild.removeAttribute('tabindex');\n if (tbItems.classList.contains(CLS_ACTIVE)) {\n this.select(index + 1);\n }\n }\n tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n * @param {TabItemsModel[]} items - An array of item that is added to the Tab.\n * @param {number} index - Number value that determines where the items to be added. By default, index is 0.\n * @returns void.\n */\n Tab.prototype.addTab = function (items, index) {\n var _this = this;\n this.trigger('adding', { addedItems: items });\n if (isNOU(index)) {\n index = selectAll('.' + CLS_TB_ITEM).length - 1;\n }\n if (this.isTemplate === true || selectAll('.' + CLS_TB_ITEM).length - 1 < index || index < 0 || isNaN(index)) {\n return;\n }\n this.bdrLine.classList.add(CLS_HIDDEN);\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n var tabItems = this.parseObject(items, index);\n items.forEach(function (item, place) {\n if (_this.isReplace === true) {\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + '_' + index, _this.element);\n detach(hdrItem);\n _this.items.splice((index + place), 0, item);\n }\n else {\n _this.items.push(item);\n }\n });\n this.tbObj.addItems(tabItems, index);\n this.trigger('added', { addedItems: items });\n if (this.selectedItem === index) {\n this.select(index);\n }\n else {\n this.setActiveBorder();\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n * @param {number} index - Index of target item that is going to be removed.\n * @returns void.\n */\n Tab.prototype.removeTab = function (index) {\n var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n var removingArgs = { removedItem: trg, removedIndex: index };\n this.trigger('removing', removingArgs);\n if (isNOU(trg)) {\n return;\n }\n this.tbObj.removeItems(index);\n this.refreshActiveBorder();\n var no = this.extIndex(trg.id);\n var cntTrg = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n if (!isNOU(cntTrg)) {\n cntTrg.outerHTML = '';\n }\n var removedArgs = { removedItem: trg, removedIndex: index };\n this.trigger('removed', removedArgs);\n if (trg.classList.contains(CLS_ACTIVE)) {\n index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element).length - 1) ? index - 1 : index;\n this.enableAnimation = false;\n this.select(index);\n }\n if (selectAll('.' + CLS_TB_ITEM, this.element).length === 0) {\n this.hdrEle.style.display = 'none';\n }\n this.enableAnimation = true;\n };\n /**\n * Shows or hides the Tab that is in the specified index.\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.\n * @returns void.\n */\n Tab.prototype.hideTab = function (index, value) {\n var item = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(item)) {\n return;\n }\n if (isNOU(value)) {\n value = true;\n }\n this.bdrLine.classList.add(CLS_HIDDEN);\n if (value === true) {\n item.classList.add(CLS_HIDDEN);\n if (item.classList.contains(CLS_ACTIVE)) {\n this.select((index !== 0) ? index - 1 : index + 1);\n }\n }\n else {\n item.classList.remove(CLS_HIDDEN);\n }\n this.setActiveBorder();\n item.setAttribute('aria-hidden', '' + value);\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @returns void.\n */\n Tab.prototype.select = function (args) {\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);\n this.prevItem = this.tbItem[this.prevIndex];\n if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {\n this.prevItem.children.item(0).setAttribute('tabindex', '-1');\n }\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: this.tbItem[this.selectedItem],\n selectedIndex: this.selectedItem,\n isSwiped: this.isSwipeed\n };\n this.trigger('selecting', eventArg);\n if (eventArg.cancel) {\n return;\n }\n if (typeof args === 'number') {\n if (!isNOU(this.tbItem[args]) && this.tbItem[args].classList.contains(CLS_DISABLE)) {\n for (var i = args + 1; i < this.items.length; i++) {\n if (this.items[i].disabled === false) {\n args = i;\n break;\n }\n else {\n args = 0;\n }\n }\n }\n if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {\n this.prevIndex = this.selectedItem;\n if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {\n this.setActive(this.popupHandler(this.tbItem[args]));\n }\n else {\n this.setActive(args);\n }\n }\n else {\n this.setActive(0);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args));\n }\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).\n * @returns void.\n */\n Tab.prototype.disable = function (value) {\n this.setCssClass(this.element, CLS_DISABLE, value);\n this.element.setAttribute('aria-disabled', '' + value);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Tab.prototype.getModuleName = function () {\n return 'tab';\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {TabModel} newProp\n * @param {TabModel} oldProp\n * @returns void\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyle(this.element, { width: formatUnit(newProp.width) });\n break;\n case 'height':\n setStyle(this.element, { height: formatUnit(newProp.height) });\n this.setContentHeight(false);\n break;\n case 'cssClass':\n this.setCssClass(this.element, newProp.cssClass, true);\n break;\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + '_' + index, this.element);\n var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + '_' + index, this.element);\n if (property === 'header') {\n var arr = [];\n arr.push(this.items[index]);\n this.items.splice(index, 1);\n this.tbObj.items.splice(index, 1);\n this.isReplace = true;\n this.addTab(arr, index);\n this.isReplace = false;\n }\n if (property === 'content') {\n if (!isNOU(cntItem)) {\n (cntItem.classList.contains('e-active') ? (cntItem.innerHTML = newVal) : cntItem.remove());\n }\n }\n if (property === 'cssClass') {\n if (!isNOU(hdrItem)) {\n hdrItem.classList.remove(oldVal);\n hdrItem.classList.add(newVal);\n }\n if (!isNOU(cntItem)) {\n cntItem.classList.remove(oldVal);\n cntItem.classList.add(newVal);\n }\n }\n if (property === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n else {\n if (isNOU(this.tbObj)) {\n this.renderContainer();\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n }\n else {\n this.setItems(newProp.items);\n select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element).innerHTML = '';\n this.select(this.selectedItem);\n }\n }\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'selectedItem':\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n break;\n case 'headerPlacement':\n var tempHdrEle = select('.' + CLS_HEADER, this.element);\n this.setOrientation(newProp.headerPlacement, tempHdrEle);\n this.select(this.selectedItem);\n break;\n case 'enableRtl':\n this.setRTL(newProp.enableRtl);\n break;\n case 'overflowMode':\n this.tbObj.overflowMode = newProp.overflowMode;\n this.tbObj.dataBind();\n this.refreshActElePosition();\n break;\n case 'heightAdjustMode':\n this.setContentHeight(false);\n this.select(this.selectedItem);\n break;\n }\n }\n };\n __decorate([\n Collection([], TabItem)\n ], Tab.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Tab.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tab.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Tab.prototype, \"cssClass\", void 0);\n __decorate([\n Property(0)\n ], Tab.prototype, \"selectedItem\", void 0);\n __decorate([\n Property('Top')\n ], Tab.prototype, \"headerPlacement\", void 0);\n __decorate([\n Property('Content')\n ], Tab.prototype, \"heightAdjustMode\", void 0);\n __decorate([\n Property('Scrollable')\n ], Tab.prototype, \"overflowMode\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"showCloseButton\", void 0);\n __decorate([\n Complex({}, TabAnimationSettings)\n ], Tab.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"adding\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"added\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selecting\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"destroyed\", void 0);\n Tab = __decorate([\n NotifyPropertyChanges\n ], Tab);\n return Tab;\n}(Component));\nexport { Tab };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, isUndefined, Browser, compile } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { rippleEffect, Animation } from '@syncfusion/ej2-base';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, createElement, append } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { isNullOrUndefined as isNOU, Touch, getValue, setValue } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-treeview';\nvar COLLAPSIBLE = 'e-icon-collapsible';\nvar EXPANDABLE = 'e-icon-expandable';\nvar LISTITEM = 'e-list-item';\nvar LISTTEXT = 'e-list-text';\nvar PARENTITEM = 'e-list-parent';\nvar HOVER = 'e-hover';\nvar ACTIVE = 'e-active';\nvar LOAD = 'e-icons-spinner';\nvar PROCESS = 'e-process';\nvar ICON = 'e-icons';\nvar TEXTWRAP = 'e-text-content';\nvar INPUT = 'e-input';\nvar INPUTGROUP = 'e-input-group';\nvar TREEINPUT = 'e-tree-input';\nvar EDITING = 'e-editing';\nvar RTL = 'e-rtl';\nvar DRAGITEM = 'e-drag-item';\nvar DROPPABLE = 'e-droppable';\nvar DRAGGING = 'e-dragging';\nvar SIBLING = 'e-sibling';\nvar DROPIN = 'e-drop-in';\nvar DROPNEXT = 'e-drop-next';\nvar DROPOUT = 'e-drop-out';\nvar NODROP = 'e-no-drop';\nvar FULLROWWRAP = 'e-fullrow-wrap';\nvar FULLROW = 'e-fullrow';\nvar SELECTED = 'e-selected';\nvar EXPANDED = 'e-expanded';\nvar NODECOLLAPSED = 'e-node-collapsed';\nvar DISABLE = 'e-disable';\nvar CONTENT = 'e-content';\nvar DOWNTAIL = 'e-downtail';\nvar DROPCOUNT = 'e-drop-count';\nvar CHECK = 'e-check';\nvar INDETERMINATE = 'e-stop';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar FOCUS = 'e-node-focus';\nvar IMAGE = 'e-list-img';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar treeAriaAttr = {\n treeRole: 'tree',\n itemRole: 'treeitem',\n listRole: 'group',\n itemText: '',\n wrapperRole: '',\n};\n/**\n * Configures the fields to bind to the properties of node in the TreeView component.\n */\nvar FieldsSettings = /** @class */ (function (_super) {\n __extends(FieldsSettings, _super);\n function FieldsSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('child')\n ], FieldsSettings.prototype, \"child\", void 0);\n __decorate([\n Property([])\n ], FieldsSettings.prototype, \"dataSource\", void 0);\n __decorate([\n Property('expanded')\n ], FieldsSettings.prototype, \"expanded\", void 0);\n __decorate([\n Property('hasChildren')\n ], FieldsSettings.prototype, \"hasChildren\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldsSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldsSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('id')\n ], FieldsSettings.prototype, \"id\", void 0);\n __decorate([\n Property('imageUrl')\n ], FieldsSettings.prototype, \"imageUrl\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldsSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('parentID')\n ], FieldsSettings.prototype, \"parentID\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"query\", void 0);\n __decorate([\n Property('selected')\n ], FieldsSettings.prototype, \"selected\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"tableName\", void 0);\n __decorate([\n Property('text')\n ], FieldsSettings.prototype, \"text\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldsSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('navigateUrl')\n ], FieldsSettings.prototype, \"navigateUrl\", void 0);\n return FieldsSettings;\n}(ChildProperty));\nexport { FieldsSettings };\n/**\n * Configures animation settings for the TreeView component.\n */\nvar ActionSettings = /** @class */ (function (_super) {\n __extends(ActionSettings, _super);\n function ActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], ActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], ActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], ActionSettings.prototype, \"easing\", void 0);\n return ActionSettings;\n}(ChildProperty));\nexport { ActionSettings };\n/**\n * Configures the animation settings for expanding and collapsing nodes in TreeView.\n */\nvar NodeAnimationSettings = /** @class */ (function (_super) {\n __extends(NodeAnimationSettings, _super);\n function NodeAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"expand\", void 0);\n return NodeAnimationSettings;\n}(ChildProperty));\nexport { NodeAnimationSettings };\n/**\n * The TreeView component is used to represent hierarchical data in a tree like structure with advanced\n * functions to perform edit, drag and drop, selection with check-box, and more.\n * ```html\n *
\n * ```\n * ```typescript\n * let treeObj: TreeView = new TreeView();\n * treeObj.appendTo('#tree');\n * ```\n */\nvar TreeView = /** @class */ (function (_super) {\n __extends(TreeView, _super);\n function TreeView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseDownStatus = false;\n return _this;\n }\n /**\n * Get component name.\n * @returns string\n * @private\n */\n TreeView.prototype.getModuleName = function () {\n return 'treeview';\n };\n /**\n * Initialize the event handler\n */\n TreeView.prototype.preRender = function () {\n var _this = this;\n this.checkActionNodes = [];\n this.dragStartAction = false;\n this.isAnimate = false;\n this.keyConfigs = {\n escape: 'escape',\n end: 'end',\n enter: 'enter',\n f2: 'f2',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n ctrlA: 'ctrl+A',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space',\n };\n this.listBaseOption = {\n expandCollapse: true,\n fields: this.fields.properties,\n showIcon: true,\n expandIconClass: EXPANDABLE,\n ariaAttributes: treeAriaAttr,\n expandIconPosition: 'Left',\n itemCreated: function (e) {\n _this.beforeNodeCreate(e);\n },\n };\n this.listBaseOption.fields.url = this.fields.navigateUrl;\n this.aniObj = new Animation({});\n this.treeList = [];\n this.isLoaded = false;\n this.setTouchClass();\n if (isNOU(this.selectedNodes)) {\n this.setProperties({ selectedNodes: [] }, true);\n }\n if (isNOU(this.checkedNodes)) {\n this.setProperties({ checkedNodes: [] }, true);\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n * @hidden\n */\n TreeView.prototype.getPersistData = function () {\n var keyEntity = ['selectedNodes', 'checkedNodes'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n TreeView.prototype.render = function () {\n this.isAnimate = true;\n this.initialize();\n this.setDataBinding();\n this.setExpandOnType();\n this.setRipple();\n this.wireEditingEvents(this.allowEditing);\n this.setDragAndDrop(this.allowDragAndDrop);\n this.wireEvents();\n };\n TreeView.prototype.initialize = function () {\n this.element.setAttribute('role', 'tree');\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n this.setCssClass(null, this.cssClass);\n this.setEnableRtl();\n this.setFullRow(this.fullRowSelect);\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n };\n TreeView.prototype.setEnableRtl = function () {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n };\n TreeView.prototype.setRipple = function () {\n var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;\n var rippleModel = {\n selector: tempStr,\n ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP\n };\n this.rippleFn = rippleEffect(this.element, rippleModel);\n var iconModel = {\n selector: '.' + TEXTWRAP + ' > .' + ICON,\n isCenterRipple: true,\n };\n this.rippleIconFn = rippleEffect(this.element, iconModel);\n };\n TreeView.prototype.setFullRow = function (isEnabled) {\n isEnabled ? addClass([this.element], FULLROWWRAP) : removeClass([this.element], FULLROWWRAP);\n };\n TreeView.prototype.setMultiSelect = function (isEnabled) {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (isEnabled) {\n firstUl.setAttribute('aria-multiselectable', 'true');\n }\n else {\n firstUl.removeAttribute('aria-multiselectable');\n }\n };\n TreeView.prototype.templateComplier = function (template) {\n if (template) {\n var e = void 0;\n try {\n if (document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n };\n TreeView.prototype.setDataBinding = function () {\n var _this = this;\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager) {\n this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n _this.renderItems(true);\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n });\n }\n else {\n this.treeList.pop();\n if (isNOU(this.fields.dataSource)) {\n this.rootData = this.treeData = [];\n }\n else {\n this.treeData = this.fields.dataSource;\n this.setRootData();\n }\n this.renderItems(false);\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.getQuery = function (mapper, value) {\n if (value === void 0) { value = null; }\n var columns = [];\n var query;\n if (!mapper.query) {\n query = new Query();\n var prop = this.getActualProperties(mapper);\n for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[col]\n && columns.indexOf(mapper[col]) === -1) {\n columns.push(mapper[col]);\n }\n }\n query.select(columns);\n if (prop.hasOwnProperty('tableName')) {\n query.from(mapper.tableName);\n }\n }\n else {\n query = mapper.query.clone();\n }\n ListBase.addSorting(this.sortOrder, mapper.text, query);\n if (!isNOU(value) && !isNOU(mapper.parentID)) {\n query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));\n }\n return query;\n };\n TreeView.prototype.getType = function () {\n return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;\n };\n TreeView.prototype.setRootData = function () {\n this.dataType = this.getDataType(this.treeData, this.fields);\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n var rootItems = this.getChildNodes(this.treeData, undefined, true);\n if (isNOU(rootItems)) {\n this.rootData = [];\n }\n else {\n this.rootData = rootItems;\n }\n }\n else {\n this.rootData = this.treeData;\n }\n };\n TreeView.prototype.renderItems = function (isSorted) {\n this.listBaseOption.ariaAttributes.level = 1;\n this.ulElement = ListBase.createList(isSorted ? this.rootData : this.getSortedData(this.rootData), this.listBaseOption);\n this.element.appendChild(this.ulElement);\n this.finalizeNode(this.element);\n };\n TreeView.prototype.beforeNodeCreate = function (e) {\n if (this.showCheckBox) {\n var checkboxEle = createCheckBox(true, { cssClass: this.touchClass });\n var icon = select('div.' + ICON, e.item);\n var id = e.item.getAttribute('data-uid');\n e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);\n var checkValue = getValue(e.fields.isChecked, e.curData);\n if (this.checkedNodes.indexOf(id) > -1) {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else if (!isNOU(checkValue) && checkValue.toString() === 'true') {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else {\n checkboxEle.setAttribute('aria-checked', 'false');\n }\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);\n EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);\n }\n if (this.fullRowSelect) {\n this.createFullRow(e.item);\n }\n if (this.allowMultiSelection && !e.item.classList.contains(SELECTED)) {\n e.item.setAttribute('aria-selected', 'false');\n }\n var fields = e.fields;\n this.addActionClass(e, fields.selected, SELECTED);\n this.addActionClass(e, fields.expanded, EXPANDED);\n if (!isNOU(this.nodeTemplateFn)) {\n var textEle = e.item.querySelector('.' + LISTTEXT);\n textEle.innerHTML = '';\n append(this.nodeTemplateFn(e.curData), textEle);\n }\n var eventArgs = {\n node: e.item,\n nodeData: e.curData,\n text: e.text,\n };\n this.trigger('drawNode', eventArgs);\n };\n TreeView.prototype.frameMouseHandler = function (e) {\n var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);\n rippleMouseHandler(e, rippleSpan);\n };\n TreeView.prototype.addActionClass = function (e, action, cssClass) {\n var data = e.curData;\n var actionValue = getValue(action, data);\n if (!isNOU(actionValue) && actionValue.toString() !== 'false') {\n e.item.classList.add(cssClass);\n }\n };\n TreeView.prototype.getDataType = function (ds, mapper) {\n if (this.fields.dataSource instanceof DataManager) {\n return 2;\n }\n for (var i = 0, len = ds.length; i < len; i++) {\n if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {\n return 2;\n }\n if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {\n return 1;\n }\n }\n return 1;\n };\n TreeView.prototype.getGroupedData = function (dataSource, groupBy) {\n var cusQuery = new Query().group(groupBy);\n var ds = ListBase.getDataSource(dataSource, cusQuery);\n var grpItem = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n grpItem.push(itemObj);\n }\n return grpItem;\n };\n TreeView.prototype.getSortedData = function (list) {\n if (list && this.sortOrder !== 'None') {\n list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));\n }\n return list;\n };\n TreeView.prototype.finalizeNode = function (element) {\n var iNodes = selectAll('.' + IMAGE, element);\n for (var k = 0; k < iNodes.length; k++) {\n iNodes[k].setAttribute('alt', IMAGE);\n }\n if (this.isLoaded) {\n var sNodes = selectAll('.' + SELECTED, element);\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null);\n break;\n }\n removeClass(sNodes, SELECTED);\n }\n var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);\n for (var j = 0; j < cNodes.length; j++) {\n var icon = select('div.' + ICON, cNodes[j]);\n if (icon && icon.classList.contains(EXPANDABLE)) {\n cNodes[j].setAttribute('aria-expanded', 'false');\n addClass([cNodes[j]], NODECOLLAPSED);\n }\n }\n var eNodes = selectAll('.' + EXPANDED, element);\n for (var i = 0; i < eNodes.length; i++) {\n this.renderChildNodes(eNodes[i]);\n }\n removeClass(eNodes, EXPANDED);\n this.updateList();\n if (this.isLoaded) {\n this.updateCheckedProp();\n }\n };\n TreeView.prototype.updateCheckedProp = function () {\n var _this = this;\n if (this.showCheckBox) {\n var nodes_1 = [].concat([], this.checkedNodes);\n this.checkedNodes.forEach(function (value, index) {\n var checkBox = _this.element.querySelector('[data-uid=\"' + value + '\"]');\n if (isNOU(checkBox)) {\n nodes_1 = nodes_1.filter(function (e) { return e !== value; });\n }\n });\n this.setProperties({ checkedNodes: nodes_1 }, true);\n }\n };\n TreeView.prototype.ensureParentCheckState = function (element) {\n if (!isNOU(element)) {\n if (element.classList.contains(ROOT)) {\n return;\n }\n var ulElement = element;\n if (element.classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, element);\n }\n var checkedNodes = selectAll('.' + CHECK, ulElement);\n var nodes = selectAll('.' + LISTITEM, ulElement);\n var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];\n if (nodes.length === checkedNodes.length) {\n this.changeState(checkBoxEle, 'check', null, true, true);\n }\n else if (checkedNodes.length > 0) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedNodes.length === 0) {\n this.changeState(checkBoxEle, 'uncheck', null, true, true);\n }\n var parentUL = closest(element, '.' + PARENTITEM);\n if (!isNOU(parentUL)) {\n var currentParent = closest(parentUL, '.' + LISTITEM);\n this.ensureParentCheckState(currentParent);\n }\n }\n };\n TreeView.prototype.ensureChildCheckState = function (element, e) {\n if (!isNOU(element)) {\n var childElement = select('.' + PARENTITEM, element);\n var checkBoxes = void 0;\n if (!isNOU(childElement)) {\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n var checkedState = void 0;\n for (var index = 0; index < checkBoxes.length; index++) {\n if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {\n checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';\n }\n else {\n var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n checkedState = (!this.isLoaded && isNodeChecked) ? 'check' : (isChecked ? 'check' : 'uncheck');\n }\n this.changeState(checkBoxes[index], checkedState, e, true, true);\n }\n }\n }\n };\n TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {\n if (!isNOU(nodes)) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);\n this.validateCheckNode(checkBox, !doCheck, liEle, null);\n }\n }\n else {\n var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);\n for (var index = 0; index < checkBoxes.length; index++) {\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');\n }\n }\n };\n TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd) {\n var ariaState;\n var eventArgs;\n var currLi = closest(wrapper, '.' + LISTITEM);\n if (!isPrevent) {\n this.checkActionNodes = [];\n eventArgs = this.getCheckEvent(currLi, state, e);\n this.trigger('nodeChecking', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n this.addCheck(currLi);\n ariaState = 'true';\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n this.removeCheck(currLi);\n ariaState = 'false';\n }\n else if (state === 'indeterminate' && !frameSpan.classList.contains(INDETERMINATE)) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n this.removeCheck(currLi);\n ariaState = 'mixed';\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n if (isAdd) {\n var data = [].concat([], this.checkActionNodes);\n eventArgs = this.getCheckEvent(currLi, state, e);\n if (isUndefined(isPrevent)) {\n eventArgs.data = data;\n }\n }\n if (!isPrevent) {\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n eventArgs.data[0].checked = ariaState;\n this.trigger('nodeChecked', eventArgs);\n this.checkActionNodes = [];\n }\n }\n };\n TreeView.prototype.addCheck = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n };\n TreeView.prototype.removeCheck = function (liEle) {\n var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.checkedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.getCheckEvent = function (currLi, action, e) {\n this.checkActionNodes.push(this.getNodeData(currLi));\n var nodeData = this.checkActionNodes;\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, data: nodeData };\n };\n TreeView.prototype.finalize = function () {\n var firstUl = select('.' + PARENTITEM, this.element);\n firstUl.setAttribute('role', treeAriaAttr.treeRole);\n this.setMultiSelect(this.allowMultiSelection);\n var firstNode = select('.' + LISTITEM, this.element);\n if (firstNode) {\n addClass([firstNode], FOCUS);\n this.updateIdAttr(null, firstNode);\n }\n this.doSelectionAction();\n this.updateCheckedProp();\n this.isLoaded = true;\n this.isAnimate = false;\n var eventArgs = { data: this.treeData };\n this.trigger('dataBound', eventArgs);\n };\n TreeView.prototype.doSelectionAction = function () {\n var sNodes = selectAll('.' + SELECTED, this.element);\n var sUids = this.selectedNodes;\n if (sUids.length > 0) {\n this.setProperties({ selectedNodes: [] }, true);\n for (var i = 0; i < sUids.length; i++) {\n var sNode = select('[data-uid=\"' + sUids[i] + '\"]', this.element);\n this.selectNode(sNode, null, true);\n if (!this.allowMultiSelection) {\n break;\n }\n }\n }\n else {\n this.selectGivenNodes(sNodes);\n }\n removeClass(sNodes, SELECTED);\n };\n TreeView.prototype.selectGivenNodes = function (sNodes) {\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null, true);\n if (!this.allowMultiSelection) {\n break;\n }\n }\n };\n TreeView.prototype.clickHandler = function (event) {\n var target = event.originalEvent.target;\n EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);\n if (!target || this.dragStartAction) {\n return;\n }\n else {\n var classList = target.classList;\n var li = closest(target, '.' + LISTITEM);\n if (!li) {\n return;\n }\n else {\n this.removeHover();\n this.setFocusElement(li);\n if (this.showCheckBox && !li.classList.contains('e-disable')) {\n var checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNOU(checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);\n this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);\n this.triggerClickEvent(event.originalEvent, li);\n return;\n }\n }\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(li, target, event);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, target, event);\n }\n else {\n if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n this.triggerClickEvent(event.originalEvent, li);\n }\n }\n };\n TreeView.prototype.nodeCheckingEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n this.checkActionNodes = [];\n var ariaState = !isCheck ? 'true' : 'false';\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n var eventArgs = this.getCheckEvent(currLi, !isCheck ? 'uncheck' : 'check', e);\n this.trigger('nodeChecking', eventArgs);\n return eventArgs;\n };\n TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);\n eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);\n this.trigger('nodeChecked', eventArgs);\n };\n TreeView.prototype.triggerClickEvent = function (e, li) {\n var eventArgs = {\n event: e,\n node: li,\n };\n this.trigger('nodeClicked', eventArgs);\n };\n TreeView.prototype.expandNode = function (currLi, icon) {\n var _this = this;\n if (icon.classList.contains(LOAD)) {\n this.hideSpinner(icon);\n }\n removeClass([icon], EXPANDABLE);\n addClass([icon], COLLAPSIBLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n this.setHeight(liEle, ul);\n if (!this.isAnimate) {\n this.aniObj.animate(ul, {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n start = liEle.offsetHeight;\n end = select('.' + TEXTWRAP, currLi).offsetHeight;\n },\n progress: function (args) {\n args.element.style.display = 'block';\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n args.element.style.display = 'block';\n _this.expandedNode(liEle, ul, icon);\n }\n });\n }\n else {\n this.expandedNode(liEle, ul, icon);\n }\n };\n TreeView.prototype.expandedNode = function (currLi, ul, icon) {\n ul.style.display = 'block';\n currLi.style.display = 'block';\n currLi.style.overflow = '';\n currLi.style.height = '';\n removeClass([icon], PROCESS);\n currLi.setAttribute('aria-expanded', 'true');\n removeClass([currLi], NODECOLLAPSED);\n if (this.isLoaded && this.expandArgs) {\n this.expandArgs = this.getExpandEvent(currLi, null);\n this.trigger('nodeExpanded', this.expandArgs);\n }\n };\n TreeView.prototype.collapseNode = function (currLi, icon, e) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n var colArgs;\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeCollapsing', colArgs);\n if (colArgs.cancel) {\n removeClass([icon], PROCESS);\n return;\n }\n }\n removeClass([icon], COLLAPSIBLE);\n addClass([icon], EXPANDABLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n addClass([currLi], NODECOLLAPSED);\n this.aniObj.animate(ul, {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n start = select('.' + TEXTWRAP, currLi).offsetHeight;\n end = liEle.offsetHeight;\n },\n progress: function (args) {\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n liEle.style.overflow = '';\n args.element.style.display = 'none';\n liEle.style.height = '';\n removeClass([icon], PROCESS);\n currLi.setAttribute('aria-expanded', 'false');\n if (_this.isLoaded) {\n _this.trigger('nodeCollapsed', colArgs);\n }\n }\n });\n };\n TreeView.prototype.setHeight = function (currLi, ul) {\n ul.style.display = 'block';\n ul.style.visibility = 'hidden';\n currLi.style.height = currLi.offsetHeight + 'px';\n ul.style.display = 'none';\n ul.style.visibility = '';\n };\n TreeView.prototype.animateHeight = function (args, start, end) {\n var remaining = (args.duration - args.timeStamp) / args.duration;\n var currentHeight = (end - start) * remaining + start;\n args.element.parentElement.style.height = currentHeight + 'px';\n };\n TreeView.prototype.renderChildNodes = function (parentLi, expandChild) {\n var _this = this;\n var eicon = select('div.' + ICON, parentLi);\n if (isNOU(eicon)) {\n return;\n }\n this.showSpinner(eicon);\n var childItems;\n if (this.fields.dataSource instanceof DataManager) {\n var level = this.parents(parentLi, '.' + PARENTITEM).length;\n var mapper_1 = this.getChildFields(this.fields, level, 1);\n if (isNOU(mapper_1) || isNOU(mapper_1.dataSource)) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n return;\n }\n this.treeList.push('false');\n mapper_1.dataSource.executeQuery(this.getQuery(mapper_1, parentLi.getAttribute('data-uid'))).then(function (e) {\n _this.treeList.pop();\n childItems = e.result;\n _this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n }\n else {\n var prop = _this.getActualProperties(mapper_1);\n _this.listBaseOption.fields = prop;\n _this.listBaseOption.fields.url = prop.navigateUrl;\n var id = parentLi.getAttribute('data-uid');\n var nodeData = _this.getNodeObject(id);\n setValue('child', childItems, nodeData);\n _this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(childItems, _this.listBaseOption));\n _this.expandNode(parentLi, eicon);\n _this.ensureCheckNode(parentLi);\n _this.finalizeNode(parentLi);\n _this.renderSubChild(parentLi, expandChild);\n }\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n });\n }\n else {\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n return;\n }\n else {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.getSortedData(childItems), this.listBaseOption));\n this.expandNode(parentLi, eicon);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.renderSubChild(parentLi, expandChild);\n }\n }\n };\n TreeView.prototype.ensureCheckNode = function (element) {\n if (this.showCheckBox) {\n this.ensureChildCheckState(element);\n this.ensureParentCheckState(element);\n }\n this.currentLoadData = null;\n };\n TreeView.prototype.getFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return mapper;\n }\n else {\n return this.getFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildFields = function (mapper, nodeLevel, dataLevel) {\n var childData;\n if (nodeLevel === dataLevel) {\n return this.getChildMapper(mapper);\n }\n else {\n return this.getChildFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildMapper = function (mapper) {\n return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;\n };\n TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {\n if (isRoot === void 0) { isRoot = false; }\n var childNodes;\n if (isNOU(obj)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n return this.getChildGroup(this.groupedData, parentId, isRoot);\n }\n else {\n if (typeof this.fields.child === 'string') {\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, obj[i]);\n if (dataId && dataId.toString() === parentId) {\n return getValue(this.fields.child, obj[i]);\n }\n else if (!isNOU(getValue(this.fields.child, obj[i]))) {\n childNodes = this.getChildNodes(getValue(this.fields.child, obj[i]), parentId);\n if (childNodes !== undefined) {\n break;\n }\n }\n }\n }\n }\n return childNodes;\n };\n TreeView.prototype.getChildGroup = function (data, parentId, isRoot) {\n var childNodes;\n if (isNOU(data)) {\n return childNodes;\n }\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n if (!isNOU(data[i][0]) && !isNOU(getValue(this.fields.parentID, data[i][0]))) {\n if (getValue(this.fields.parentID, data[i][0]).toString() === parentId) {\n return data[i];\n }\n }\n else if (isRoot) {\n return data[i];\n }\n else {\n return [];\n }\n }\n return childNodes;\n };\n TreeView.prototype.renderSubChild = function (element, expandChild) {\n if (expandChild) {\n var cIcons = selectAll('.' + EXPANDABLE, element);\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var curLi = closest(icon, '.' + LISTITEM);\n this.expandArgs = this.getExpandEvent(curLi, null);\n this.trigger('nodeExpanding', this.expandArgs);\n this.renderChildNodes(curLi, expandChild);\n }\n }\n };\n TreeView.prototype.toggleSelect = function (li, e, multiSelect) {\n if (!li.classList.contains('e-disable')) {\n if (this.allowMultiSelection && ((e && e.ctrlKey) || multiSelect) && this.isActive(li)) {\n this.unselectNode(li, e);\n }\n else {\n this.selectNode(li, e, multiSelect);\n }\n }\n };\n TreeView.prototype.isActive = function (li) {\n return li.classList.contains(ACTIVE) ? true : false;\n };\n TreeView.prototype.selectNode = function (li, e, multiSelect) {\n if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {\n this.setFocusElement(li);\n return;\n }\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'select', e);\n this.trigger('nodeSelecting', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {\n this.removeSelectAll();\n }\n if (this.allowMultiSelection && e && e.shiftKey) {\n if (!this.startNode) {\n this.startNode = li;\n }\n var startIndex = this.liList.indexOf(this.startNode);\n var endIndex = this.liList.indexOf(li);\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex; i <= endIndex; i++) {\n var currNode = this.liList[i];\n if (isVisible(currNode)) {\n this.addSelect(currNode);\n }\n }\n }\n else {\n this.startNode = li;\n this.addSelect(li);\n }\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.unselectNode = function (li, e) {\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'un-select', e);\n this.trigger('nodeSelecting', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n this.removeSelect(li);\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.setFocusElement = function (li) {\n if (!isNOU(li)) {\n var focusedNode = this.getFocusedNode();\n if (focusedNode) {\n removeClass([focusedNode], FOCUS);\n }\n addClass([li], FOCUS);\n this.updateIdAttr(focusedNode, li);\n }\n };\n TreeView.prototype.addSelect = function (liEle) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n };\n TreeView.prototype.removeSelect = function (liEle) {\n if (this.allowMultiSelection) {\n liEle.setAttribute('aria-selected', 'false');\n }\n else {\n liEle.removeAttribute('aria-selected');\n }\n removeClass([liEle], ACTIVE);\n var index = this.selectedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.selectedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.removeSelectAll = function () {\n var selectedLI = this.element.querySelectorAll('.' + ACTIVE);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.allowMultiSelection) {\n ele.setAttribute('aria-selected', 'false');\n }\n else {\n ele.removeAttribute('aria-selected');\n }\n }\n removeClass(selectedLI, ACTIVE);\n this.setProperties({ selectedNodes: [] }, true);\n };\n TreeView.prototype.getSelectEvent = function (currLi, action, e) {\n var nodeData = this.getNodeData(currLi);\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData };\n };\n TreeView.prototype.setExpandOnType = function () {\n this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;\n };\n TreeView.prototype.expandHandler = function (e) {\n var target = e.originalEvent.target;\n if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||\n target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||\n target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {\n return;\n }\n else {\n this.expandCollapseAction(closest(target, '.' + LISTITEM), e);\n }\n };\n TreeView.prototype.expandCollapseAction = function (currLi, e) {\n var icon = select('div.' + ICON, currLi);\n if (!icon || icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n var classList = icon.classList;\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(currLi, icon, e);\n }\n else {\n this.collapseNode(currLi, icon, e);\n }\n }\n };\n TreeView.prototype.expandAction = function (currLi, icon, e, expandChild) {\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n if (this.isLoaded) {\n this.expandArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeExpanding', this.expandArgs);\n if (this.expandArgs.cancel) {\n removeClass([icon], PROCESS);\n return;\n }\n }\n var ul = select('.' + PARENTITEM, currLi);\n if (ul && ul.nodeName === 'UL') {\n this.expandNode(currLi, icon);\n }\n else {\n this.renderChildNodes(currLi, expandChild);\n }\n };\n TreeView.prototype.keyActionHandler = function (e) {\n var target = e.target;\n var focusedNode = this.getFocusedNode();\n if (target && target.classList.contains(INPUT)) {\n var inpEle = target;\n if (e.action === 'enter') {\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n else if (e.action === 'escape') {\n inpEle.value = this.oldText;\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n return;\n }\n e.preventDefault();\n var eventArgs = {\n cancel: false,\n event: e,\n node: focusedNode,\n };\n this.trigger('keyPress', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n switch (e.action) {\n case 'space':\n if (this.showCheckBox) {\n this.checkNode(e);\n }\n break;\n case 'moveRight':\n this.openNode(this.enableRtl ? false : true, e);\n break;\n case 'moveLeft':\n this.openNode(this.enableRtl ? true : false, e);\n break;\n case 'shiftDown':\n this.shiftKeySelect(true, e);\n break;\n case 'moveDown':\n case 'ctrlDown':\n case 'csDown':\n this.navigateNode(true);\n break;\n case 'shiftUp':\n this.shiftKeySelect(false, e);\n break;\n case 'moveUp':\n case 'ctrlUp':\n case 'csUp':\n this.navigateNode(false);\n break;\n case 'home':\n case 'shiftHome':\n case 'ctrlHome':\n case 'csHome':\n this.navigateRootNode(true);\n break;\n case 'end':\n case 'shiftEnd':\n case 'ctrlEnd':\n case 'csEnd':\n this.navigateRootNode(false);\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n this.toggleSelect(focusedNode, e);\n break;\n case 'f2':\n if (this.allowEditing) {\n this.createTextbox(focusedNode, e);\n }\n break;\n case 'ctrlA':\n if (this.allowMultiSelection) {\n var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', this.element);\n this.selectGivenNodes(sNodes);\n }\n break;\n }\n };\n TreeView.prototype.navigateToFocus = function (isUp) {\n var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);\n var pos = focusNode.getBoundingClientRect();\n var parent = this.getScrollParent(this.element);\n if (!isNOU(parent)) {\n var parentPos = parent.getBoundingClientRect();\n if (pos.bottom > parentPos.bottom) {\n parent.scrollTop += pos.bottom - parentPos.bottom;\n }\n else if (pos.top < parentPos.top) {\n parent.scrollTop -= parentPos.top - pos.top;\n }\n }\n var isVisible = this.isVisibleInViewport(focusNode);\n if (!isVisible) {\n focusNode.scrollIntoView(isUp);\n }\n };\n TreeView.prototype.isVisibleInViewport = function (txtWrap) {\n var pos = txtWrap.getBoundingClientRect();\n return (pos.top >= 0 && pos.left >= 0 && pos.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n pos.right <= (window.innerWidth || document.documentElement.clientWidth));\n };\n TreeView.prototype.getScrollParent = function (node) {\n if (isNOU(node)) {\n return null;\n }\n return (node.scrollHeight > node.clientHeight) ? node : this.getScrollParent(node.parentElement);\n };\n TreeView.prototype.shiftKeySelect = function (isTowards, e) {\n if (this.allowMultiSelection) {\n var focusedNode = this.getFocusedNode();\n var nextNode = isTowards ? this.getNextNode(focusedNode) : this.getPrevNode(focusedNode);\n this.removeHover();\n this.setFocusElement(nextNode);\n this.toggleSelect(nextNode, e, false);\n this.navigateToFocus(!isTowards);\n }\n else {\n this.navigateNode(isTowards);\n }\n };\n TreeView.prototype.checkNode = function (e) {\n var focusedNode = this.getFocusedNode();\n var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);\n var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);\n this.validateCheckNode(checkWrap, isChecked, focusedNode, e);\n };\n TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {\n var eventArgs = this.nodeCheckingEvent(checkWrap, isCheck, e);\n if (eventArgs.cancel) {\n return;\n }\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);\n this.ensureChildCheckState(li);\n this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));\n this.nodeCheckedEvent(checkWrap, isCheck, e);\n };\n TreeView.prototype.openNode = function (toBeOpened, e) {\n var focusedNode = this.getFocusedNode();\n var icon = select('div.' + ICON, focusedNode);\n if (toBeOpened) {\n if (!icon) {\n return;\n }\n else if (icon.classList.contains(EXPANDABLE)) {\n this.expandAction(focusedNode, icon, e);\n }\n else {\n this.focusNextNode(focusedNode, true);\n }\n }\n else {\n if (icon && icon.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(focusedNode, icon, e);\n }\n else {\n var parentLi = closest(closest(focusedNode, '.' + PARENTITEM), '.' + LISTITEM);\n if (!parentLi) {\n return;\n }\n else {\n this.setFocus(focusedNode, parentLi);\n this.navigateToFocus(true);\n }\n }\n }\n };\n TreeView.prototype.navigateNode = function (isTowards) {\n var focusedNode = this.getFocusedNode();\n this.focusNextNode(focusedNode, isTowards);\n };\n TreeView.prototype.navigateRootNode = function (isBackwards) {\n var focusedNode = this.getFocusedNode();\n var rootNode = isBackwards ? this.getRootNode() : this.getEndNode();\n this.setFocus(focusedNode, rootNode);\n this.navigateToFocus(isBackwards);\n };\n TreeView.prototype.getFocusedNode = function () {\n var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);\n return isNOU(fNode) ? select('.' + LISTITEM, this.element) : fNode;\n };\n TreeView.prototype.focusNextNode = function (li, isTowards) {\n var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);\n this.setFocus(li, nextNode);\n this.navigateToFocus(!isTowards);\n if (nextNode.classList.contains('e-disable')) {\n this.focusNextNode(nextNode, isTowards);\n }\n };\n TreeView.prototype.getNextNode = function (li) {\n var index = this.liList.indexOf(li);\n var nextNode;\n var i;\n do {\n index++;\n if (index === this.liList.length && li.classList.contains('e-disable')) {\n for (i = index - 1; i > 0; i--) {\n if (!this.liList[i].classList.contains('e-disable')) {\n index = i;\n break;\n }\n }\n }\n nextNode = this.liList[index];\n if (isNOU(nextNode)) {\n return li;\n }\n } while (!isVisible(nextNode));\n return nextNode;\n };\n TreeView.prototype.getPrevNode = function (li) {\n var index = this.liList.indexOf(li);\n var prevNode;\n var i;\n do {\n index--;\n if (index < 0 && li.classList.contains('e-disable')) {\n for (i = 1; i < this.liList.length; i++) {\n if (!this.liList[i].classList.contains('e-disable')) {\n index = i;\n break;\n }\n }\n }\n prevNode = this.liList[index];\n if (isNOU(prevNode)) {\n return li;\n }\n } while (!isVisible(prevNode));\n return prevNode;\n };\n TreeView.prototype.getRootNode = function () {\n var index = 0;\n var rootNode;\n do {\n rootNode = this.liList[index];\n index++;\n } while (!isVisible(rootNode));\n return rootNode;\n };\n TreeView.prototype.getEndNode = function () {\n var index = this.liList.length - 1;\n var endNode;\n do {\n endNode = this.liList[index];\n index--;\n } while (!isVisible(endNode));\n return endNode;\n };\n TreeView.prototype.setFocus = function (preNode, nextNode) {\n removeClass([preNode], [HOVER, FOCUS]);\n addClass([nextNode], [HOVER, FOCUS]);\n this.updateIdAttr(preNode, nextNode);\n };\n TreeView.prototype.updateIdAttr = function (preNode, nextNode) {\n this.element.removeAttribute('aria-activedescendant');\n if (preNode) {\n preNode.removeAttribute('id');\n }\n nextNode.setAttribute('id', this.element.id + '_active');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n };\n TreeView.prototype.focusIn = function () {\n if (!this.mouseDownStatus) {\n addClass([this.getFocusedNode()], HOVER);\n }\n this.mouseDownStatus = false;\n };\n TreeView.prototype.focusOut = function () {\n removeClass([this.getFocusedNode()], HOVER);\n };\n TreeView.prototype.onMouseOver = function (e) {\n var target = e.target;\n var classList = target.classList;\n var currentLi = closest(target, '.' + LISTITEM);\n if (!currentLi || classList.contains(PARENTITEM) || classList.contains(LISTITEM)) {\n this.removeHover();\n return;\n }\n else {\n if (currentLi && !currentLi.classList.contains('e-disable')) {\n this.setHover(currentLi);\n }\n }\n };\n TreeView.prototype.setHover = function (li) {\n if (!li.classList.contains(HOVER)) {\n this.removeHover();\n addClass([li], HOVER);\n }\n };\n ;\n TreeView.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n TreeView.prototype.removeHover = function () {\n var hoveredNode = selectAll('.' + HOVER, this.element);\n if (hoveredNode && hoveredNode.length) {\n removeClass(hoveredNode, HOVER);\n }\n };\n ;\n TreeView.prototype.getNodeData = function (currLi, fromDS) {\n if (!isNOU(currLi) && currLi.classList.contains(LISTITEM)) {\n var id = currLi.getAttribute('data-uid');\n var text = this.getText(currLi, fromDS);\n var pNode = closest(currLi.parentNode, '.' + LISTITEM);\n var pid = pNode ? pNode.getAttribute('data-uid') : null;\n var selected = currLi.classList.contains(ACTIVE);\n var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;\n var checked = null;\n if (this.showCheckBox) {\n checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');\n }\n return { id: id, text: text, parentID: pid, selected: selected, expanded: expanded, isChecked: checked };\n }\n return { id: '', text: '', parentID: '', selected: '', expanded: '', isChecked: '' };\n };\n TreeView.prototype.getText = function (currLi, fromDS) {\n if (fromDS) {\n var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));\n var level = parseFloat(currLi.getAttribute('aria-level'));\n var nodeFields = this.getFields(this.fields, level, 1);\n return getValue(nodeFields.text, nodeData);\n }\n return select('.' + LISTTEXT, currLi).textContent;\n };\n TreeView.prototype.getExpandEvent = function (currLi, e) {\n var nodeData = this.getNodeData(currLi);\n return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };\n };\n TreeView.prototype.reRenderNodes = function () {\n this.element.innerHTML = '';\n this.setTouchClass();\n this.setProperties({ selectedNodes: [], checkedNodes: [] }, true);\n this.isLoaded = false;\n this.setDataBinding();\n };\n TreeView.prototype.setCssClass = function (oldClass, newClass) {\n if (!isNOU(oldClass) && oldClass !== '') {\n removeClass([this.element], oldClass.split(' '));\n }\n if (!isNOU(newClass) && newClass !== '') {\n addClass([this.element], newClass.split(' '));\n }\n };\n TreeView.prototype.editingHandler = function (e) {\n var target = e.target;\n if (!target || target.classList.contains(ROOT) || target.classList.contains(PARENTITEM) ||\n target.classList.contains(LISTITEM) || target.classList.contains(ICON) ||\n target.classList.contains(INPUT) || target.classList.contains(INPUTGROUP)) {\n return;\n }\n else {\n var liEle = closest(target, '.' + LISTITEM);\n this.createTextbox(liEle, e);\n }\n };\n TreeView.prototype.createTextbox = function (liEle, e) {\n var oldInpEle = select('.' + TREEINPUT, this.element);\n if (oldInpEle) {\n oldInpEle.blur();\n }\n var textEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var innerEle = createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });\n var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);\n this.trigger('nodeEditing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var inpWidth = textEle.offsetWidth + 5;\n var style = 'width:' + inpWidth + 'px';\n addClass([liEle], EDITING);\n textEle.innerHTML = eventArgs.innerHtml;\n var inpEle = select('.' + TREEINPUT, textEle);\n this.inputObj = Input.createInput({\n element: inpEle,\n properties: {\n enableRtl: this.enableRtl,\n }\n });\n this.inputObj.container.setAttribute('style', style);\n inpEle.focus();\n var inputEle = inpEle;\n inputEle.setSelectionRange(0, inputEle.value.length);\n this.wireInputEvents(inpEle);\n };\n TreeView.prototype.updateOldText = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n this.editData = this.getNodeObject(id);\n var level = parseFloat(liEle.getAttribute('aria-level'));\n this.editFields = this.getFields(this.fields, level, 1);\n this.oldText = getValue(this.editFields.text, this.editData);\n };\n TreeView.prototype.inputFocusOut = function (e) {\n if (!select('.' + TREEINPUT, this.element)) {\n return;\n }\n var target = e.target;\n var newText = target.value;\n var txtEle = closest(target, '.' + LISTTEXT);\n var liEle = closest(target, '.' + LISTITEM);\n detach(this.inputObj.container);\n this.appendNewText(liEle, txtEle, newText, true);\n };\n TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {\n var newData = setValue(this.editFields.text, newText, this.editData);\n if (!isNOU(this.nodeTemplateFn)) {\n txtEle.innerHTML = '';\n append(this.nodeTemplateFn(newData), txtEle);\n }\n else {\n txtEle.innerHTML = newText;\n }\n if (isInput) {\n removeClass([liEle], EDITING);\n txtEle.focus();\n }\n this.trigger('nodeEdited', this.getEditEvent(liEle, newText, null));\n };\n TreeView.prototype.getElement = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return this.element.querySelector('[data-uid=\"' + ele + '\"]');\n }\n else if (typeof ele === 'object') {\n return ele;\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getEditEvent = function (liEle, newText, inpEle) {\n var data = this.getNodeData(liEle);\n return { cancel: false, newText: newText, node: liEle, nodeData: data, oldText: this.oldText, innerHtml: inpEle };\n };\n TreeView.prototype.getNodeObject = function (id) {\n var childNodes;\n if (isNOU(id)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n for (var i = 0, objlen = this.treeData.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, this.treeData[i]);\n if (!isNOU(this.treeData[i]) && !isNOU(dataId) && dataId.toString() === id) {\n return this.treeData[i];\n }\n }\n }\n else {\n return this.getChildNodeObject(this.treeData, this.fields, id);\n }\n return childNodes;\n };\n TreeView.prototype.getChildNodeObject = function (obj, mapper, id) {\n var newList;\n if (isNOU(obj)) {\n return newList;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(mapper.id, obj[i]);\n if (obj[i] && dataId && dataId.toString() === id) {\n return obj[i];\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var child = 'child';\n newList = this.getChildNodeObject(getValue(child, obj[i]), this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n }\n return newList;\n };\n TreeView.prototype.setDragAndDrop = function (toBind) {\n if (toBind) {\n this.initializeDrag();\n }\n else {\n this.destroyDrag();\n }\n };\n TreeView.prototype.initializeDrag = function () {\n var _this = this;\n var virtualEle;\n this.dragObj = new Draggable(this.element, {\n enableTailMode: true,\n dragTarget: '.' + TEXTWRAP,\n helper: function (e) {\n _this.dragTarget = e.sender.target;\n var dragRoot = closest(_this.dragTarget, '.' + ROOT);\n var dragWrap = closest(_this.dragTarget, '.' + TEXTWRAP);\n _this.dragLi = closest(_this.dragTarget, '.' + LISTITEM);\n if (_this.fullRowSelect && !dragWrap && _this.dragTarget.classList.contains(FULLROW)) {\n dragWrap = _this.dragTarget.nextElementSibling;\n }\n if (!_this.dragTarget || !e.element.isSameNode(dragRoot) || !dragWrap ||\n _this.dragTarget.classList.contains(ROOT) || _this.dragTarget.classList.contains(PARENTITEM) ||\n _this.dragTarget.classList.contains(LISTITEM)) {\n return false;\n }\n var cloneEle = (dragWrap.cloneNode(true));\n if (isNOU(select('div.' + ICON, cloneEle))) {\n var icon = createElement('div', { className: ICON + ' ' + EXPANDABLE });\n cloneEle.insertBefore(icon, cloneEle.children[0]);\n }\n var cssClass = DRAGITEM + ' ' + ROOT + ' ' + _this.cssClass + ' ' + (_this.enableRtl ? RTL : '');\n virtualEle = createElement('div', { className: cssClass });\n virtualEle.appendChild(cloneEle);\n var nLen = _this.selectedNodes.length;\n if (nLen > 1 && _this.allowMultiSelection && _this.dragLi.classList.contains(ACTIVE)) {\n var cNode = createElement('span', { className: DROPCOUNT, innerHTML: '' + nLen });\n virtualEle.appendChild(cNode);\n }\n document.body.appendChild(virtualEle);\n document.body.style.cursor = '';\n _this.dragData = _this.getNodeData(_this.dragLi);\n return virtualEle;\n },\n dragStart: function (e) {\n addClass([_this.element], DRAGGING);\n var eventArgs = _this.getDragEvent(e.event, _this, null, e.target);\n _this.trigger('nodeDragStart', eventArgs);\n if (eventArgs.cancel) {\n detach(virtualEle);\n removeClass([_this.element], DRAGGING);\n }\n _this.dragStartAction = true;\n },\n drag: function (e) {\n _this.dragObj.setProperties({ cursorAt: { top: (!isNOU(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n _this.dragAction(e, virtualEle);\n },\n dragStop: function (e) {\n removeClass([_this.element], DRAGGING);\n _this.removeVirtualEle();\n var dropTarget = e.target;\n var dropRoot = (closest(dropTarget, '.' + DROPPABLE));\n if (!dropTarget || !dropRoot || dropTarget.classList.contains(ROOT)) {\n detach(e.helper);\n document.body.style.cursor = '';\n }\n var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget);\n _this.trigger('nodeDragStop', eventArgs);\n if (eventArgs.cancel) {\n if (e.helper.parentNode) {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n }\n _this.dragStartAction = false;\n }\n });\n this.dropObj = new Droppable(this.element, {\n out: function (e) {\n if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {\n document.body.style.cursor = 'not-allowed';\n }\n },\n over: function (e) {\n document.body.style.cursor = '';\n },\n drop: function (e) {\n _this.dropAction(e);\n }\n });\n };\n TreeView.prototype.dragAction = function (e, virtualEle) {\n var dropRoot = closest(e.target, '.' + DROPPABLE);\n var dropWrap = closest(e.target, '.' + TEXTWRAP);\n var icon = select('div.' + ICON, virtualEle);\n removeClass([icon], [DROPIN, DROPNEXT, DROPOUT, NODROP]);\n this.removeVirtualEle();\n document.body.style.cursor = '';\n var classList = e.target.classList;\n if (this.fullRowSelect && !dropWrap && !isNOU(classList) && classList.contains(FULLROW)) {\n dropWrap = e.target.nextElementSibling;\n }\n if (dropRoot) {\n var dropLi = closest(e.target, '.' + LISTITEM);\n if (!dropRoot.classList.contains(ROOT) || (dropWrap &&\n (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {\n if (dropLi && e && (e.event.offsetY < 7)) {\n addClass([icon], DROPNEXT);\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (1) : (0);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else if (dropLi && e && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10))) {\n addClass([icon], DROPNEXT);\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (2) : (1);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else {\n addClass([icon], DROPIN);\n }\n }\n else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {\n addClass([icon], DROPNEXT);\n this.renderVirtualEle(e);\n }\n else if (e.target.classList.contains(SIBLING)) {\n addClass([icon], DROPNEXT);\n }\n else {\n addClass([icon], DROPOUT);\n }\n }\n else {\n addClass([icon], NODROP);\n document.body.style.cursor = 'not-allowed';\n }\n this.trigger('nodeDragging', this.getDragEvent(e.event, this, e.target, e.target));\n };\n TreeView.prototype.dropAction = function (e) {\n var offsetY = e.event.offsetY;\n var dropTarget = e.target;\n var dragObj = e.dragData.draggable.ej2_instances[0];\n var dragTarget = dragObj.dragTarget;\n var dragLi = (closest(dragTarget, '.' + LISTITEM));\n var dropLi = (closest(dropTarget, '.' + LISTITEM));\n detach(e.droppedElement);\n document.body.style.cursor = '';\n if (!dropLi || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n return;\n }\n if (dragObj.allowMultiSelection && (dragLi.classList.contains(ACTIVE) || (offsetY < 7 ||\n (e.target.offsetHeight > 0 && offsetY > (e.target.offsetHeight - 10))))) {\n var sNodes = selectAll('.' + ACTIVE, dragObj.element);\n for (var i = 0; i < sNodes.length; i++) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n else {\n this.appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY);\n }\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target));\n };\n TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {\n if (dropTarget.nodeName === 'LI') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);\n }\n };\n TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {\n var dropUl = closest(dropLi, '.' + PARENTITEM);\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var pre;\n if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos) {\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var dropParentUl = closest(dropLi, '.' + PARENTITEM);\n if (e && (pos < 7)) {\n dropParentUl.insertBefore(dragLi, dropLi);\n }\n else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10))) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n }\n else {\n var dropUl = this.expandParent(dropLi);\n dropUl.insertBefore(dragLi, dropUl.childNodes[index]);\n }\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.expandParent = function (dropLi) {\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {\n this.expandAction(dropLi, dropIcon, null);\n }\n var dropUl = select('.' + PARENTITEM, dropLi);\n if (isNOU(dropUl)) {\n ListBase.generateIcon(dropLi, COLLAPSIBLE, this.listBaseOption);\n var icon = select('div.' + ICON, dropLi);\n removeClass([icon], EXPANDABLE);\n dropUl = ListBase.generateUL([], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n dropLi.setAttribute('aria-expanded', 'true');\n removeClass([dropLi], NODECOLLAPSED);\n }\n return dropUl;\n };\n TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {\n if (dragParentLi && dragParentUl.childElementCount === 0) {\n var dragIcon = select('div.' + ICON, dragParentLi);\n detach(dragParentUl);\n detach(dragIcon);\n dragParentLi.removeAttribute('aria-expanded');\n }\n };\n TreeView.prototype.updateAriaLevel = function (dragLi) {\n var level = this.parents(dragLi, '.' + PARENTITEM).length;\n dragLi.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, dragLi), level + 1);\n };\n TreeView.prototype.updateChildAriaLevel = function (element, level) {\n if (!isNOU(element)) {\n var cNodes = element.childNodes;\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n liEle.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, liEle), level + 1);\n }\n }\n };\n TreeView.prototype.renderVirtualEle = function (e) {\n var pre;\n if (e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (pre ? 1 : 2) : (pre ? 0 : 1);\n e.target.insertBefore(virEle, e.target.children[index]);\n };\n TreeView.prototype.removeVirtualEle = function () {\n var sibEle = select('.' + SIBLING);\n if (sibEle) {\n detach(sibEle);\n }\n };\n TreeView.prototype.destroyDrag = function () {\n if (this.dragObj && this.dropObj) {\n this.dragObj.destroy();\n this.dropObj.destroy();\n }\n };\n TreeView.prototype.getDragEvent = function (event, obj, dropTarget, target) {\n var dropLi = dropTarget ? closest(dropTarget, '.' + LISTITEM) : null;\n var dropData = dropLi ? this.getNodeData(dropLi) : null;\n return {\n cancel: false,\n event: event,\n draggedNode: obj.dragLi,\n draggedNodeData: obj.dragData,\n droppedNode: dropLi,\n droppedNodeData: dropData,\n target: target\n };\n };\n TreeView.prototype.addFullRow = function (toAdd) {\n var len = this.liList.length;\n if (toAdd) {\n for (var i = 0; i < len; i++) {\n this.createFullRow(this.liList[i]);\n }\n }\n else {\n for (var i = 0; i < len; i++) {\n var rowDiv = select('.' + FULLROW, this.liList[i]);\n detach(rowDiv);\n }\n }\n };\n TreeView.prototype.createFullRow = function (item) {\n var rowDiv = createElement('div', { className: FULLROW });\n item.insertBefore(rowDiv, item.childNodes[0]);\n };\n TreeView.prototype.addMultiSelect = function (toAdd) {\n if (toAdd) {\n var liEles = selectAll('.' + LISTITEM + ':not([aria-selected=\"true\"])', this.element);\n for (var _i = 0, liEles_1 = liEles; _i < liEles_1.length; _i++) {\n var ele = liEles_1[_i];\n ele.setAttribute('aria-selected', 'false');\n }\n }\n else {\n var liEles = selectAll('.' + LISTITEM + '[aria-selected=\"false\"]', this.element);\n for (var _a = 0, liEles_2 = liEles; _a < liEles_2.length; _a++) {\n var ele = liEles_2[_a];\n ele.removeAttribute('aria-selected');\n }\n }\n };\n TreeView.prototype.collapseByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var cNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n var icon = select('.' + COLLAPSIBLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.collapseNode(liEle, icon, null);\n }\n this.collapseByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.collapseAllNodes = function (excludeHiddenNodes) {\n var cIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + COLLAPSIBLE, this.element));\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.collapseNode(liEle, icon, null);\n }\n };\n TreeView.prototype.expandByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var eNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n var liEle = eNodes[i];\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.expandAction(liEle, icon, null);\n }\n this.expandByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.expandAllNodes = function (excludeHiddenNodes) {\n var eIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + EXPANDABLE, this.element));\n for (var i = 0, len = eIcons.length; i < len; i++) {\n var icon = eIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.expandAction(liEle, icon, null, true);\n }\n };\n TreeView.prototype.getVisibleNodes = function (excludeHiddenNodes, nodes) {\n var vNodes = Array.prototype.slice.call(nodes);\n if (excludeHiddenNodes) {\n for (var i = 0; i < vNodes.length; i++) {\n if (!isVisible(vNodes[i])) {\n vNodes.splice(i, 1);\n i--;\n }\n }\n }\n return vNodes;\n };\n TreeView.prototype.removeNode = function (node) {\n var dragParentUl = closest(node, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n detach(node);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateInstance();\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n };\n TreeView.prototype.doGivenAction = function (nodes, selector, toExpand) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var icon = select('.' + selector, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n toExpand ? this.expandAction(liEle, icon, null) : this.collapseNode(liEle, icon, null);\n }\n }\n };\n TreeView.prototype.addGivenNodes = function (nodes, dropLi, index, isRemote) {\n var level = dropLi ? parseFloat(dropLi.getAttribute('aria-level')) + 1 : 1;\n if (isRemote) {\n this.updateMapper(level);\n }\n var li = ListBase.createListItemFromJson(nodes, this.listBaseOption, level);\n var dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);\n var refNode = dropUl.childNodes[index];\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[i], refNode);\n }\n this.finalizeNode(dropUl);\n };\n TreeView.prototype.updateMapper = function (level) {\n var mapper = (level === 1) ? this.fields : this.getChildFields(this.fields, level - 1, 1);\n var prop = this.getActualProperties(mapper);\n this.listBaseOption.fields = prop;\n this.listBaseOption.fields.url = prop.navigateUrl;\n };\n TreeView.prototype.doDisableAction = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n liEle.setAttribute('aria-disabled', 'true');\n addClass([liEle], DISABLE);\n }\n };\n TreeView.prototype.doEnableAction = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n liEle.removeAttribute('aria-disabled');\n removeClass([liEle], DISABLE);\n }\n };\n TreeView.prototype.setTouchClass = function () {\n var ele = closest(this.element, '.' + BIGGER);\n this.touchClass = isNOU(ele) ? '' : SMALL;\n };\n TreeView.prototype.wireInputEvents = function (inpEle) {\n EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);\n };\n TreeView.prototype.wireEditingEvents = function (toBind) {\n if (toBind) {\n var proxy_1 = this;\n this.touchEditObj = new Touch(this.element, {\n tap: function (e) {\n if (e.tapCount === 2) {\n e.originalEvent.preventDefault();\n proxy_1.editingHandler(e.originalEvent);\n }\n }\n });\n }\n else {\n if (this.touchEditObj) {\n this.touchEditObj.destroy();\n }\n }\n };\n TreeView.prototype.wireClickEvent = function (toBind) {\n if (toBind) {\n var proxy_2 = this;\n this.touchClickObj = new Touch(this.element, {\n tap: function (e) {\n proxy_2.clickHandler(e);\n }\n });\n }\n else {\n if (this.touchClickObj) {\n this.touchClickObj.destroy();\n }\n }\n };\n TreeView.prototype.wireExpandOnEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n var proxy_3 = this;\n this.touchExpandObj = new Touch(this.element, {\n tap: function (e) {\n if (_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && e.tapCount === 2)) {\n proxy_3.expandHandler(e);\n }\n }\n });\n }\n else {\n if (this.touchExpandObj) {\n this.touchExpandObj.destroy();\n }\n }\n };\n TreeView.prototype.mouseDownHandler = function (e) {\n this.mouseDownStatus = true;\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (e.ctrlKey && this.allowMultiSelection) {\n EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);\n }\n };\n ;\n TreeView.prototype.preventContextMenu = function (e) {\n e.preventDefault();\n };\n TreeView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);\n this.wireClickEvent(true);\n this.wireExpandOnEvent(true);\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, this);\n EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n };\n TreeView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);\n this.wireClickEvent(false);\n this.wireExpandOnEvent(false);\n EventHandler.remove(this.element, 'focus', this.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\n EventHandler.remove(this.element, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);\n this.keyboardModule.destroy();\n };\n TreeView.prototype.parents = function (element, selector) {\n var matched = [];\n var el = element.parentNode;\n while (!isNOU(el)) {\n if (matches(el, selector)) {\n matched.push(el);\n }\n el = el.parentNode;\n }\n return matched;\n };\n TreeView.prototype.isDescendant = function (parent, child) {\n var node = child.parentNode;\n while (!isNOU(node)) {\n if (node === parent) {\n return true;\n }\n node = node.parentNode;\n }\n return false;\n };\n TreeView.prototype.showSpinner = function (element) {\n addClass([element], LOAD);\n createSpinner({\n target: element,\n width: Browser.isDevice ? 16 : 14\n });\n showSpinner(element);\n };\n TreeView.prototype.hideSpinner = function (element) {\n hideSpinner(element);\n element.innerHTML = '';\n removeClass([element], LOAD);\n };\n TreeView.prototype.setCheckedNodes = function (nodes) {\n nodes = JSON.parse(JSON.stringify(nodes));\n this.uncheckAll();\n if (nodes.length > 0) {\n this.checkAll(nodes);\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @param {TreeView} newProp\n * @param {TreeView} oldProp\n * @returns void\n * @private\n */\n TreeView.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowDragAndDrop':\n this.setDragAndDrop(this.allowDragAndDrop);\n break;\n case 'allowEditing':\n this.wireEditingEvents(this.allowEditing);\n break;\n case 'allowMultiSelection':\n if (this.selectedNodes.length > 1) {\n var sNode = this.getElement(this.selectedNodes[0]);\n this.isLoaded = false;\n this.removeSelectAll();\n this.selectNode(sNode, null);\n this.isLoaded = true;\n }\n this.setMultiSelect(this.allowMultiSelection);\n this.addMultiSelect(this.allowMultiSelection);\n break;\n case 'checkedNodes':\n if (this.showCheckBox) {\n this.checkedNodes = oldProp.checkedNodes;\n this.setCheckedNodes(newProp.checkedNodes);\n }\n break;\n case 'cssClass':\n this.setCssClass(oldProp.cssClass, newProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'expandOn':\n this.wireExpandOnEvent(false);\n this.setExpandOnType();\n this.wireExpandOnEvent(true);\n break;\n case 'fields':\n this.listBaseOption.fields = this.fields.properties;\n this.listBaseOption.fields.url = this.fields.navigateUrl;\n this.reRenderNodes();\n break;\n case 'fullRowSelect':\n this.setFullRow(this.fullRowSelect);\n this.addFullRow(this.fullRowSelect);\n break;\n case 'nodeTemplate':\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n this.reRenderNodes();\n break;\n case 'selectedNodes':\n this.removeSelectAll();\n this.setProperties({ selectedNodes: newProp.selectedNodes }, true);\n this.doSelectionAction();\n break;\n case 'showCheckBox':\n this.reRenderNodes();\n break;\n case 'sortOrder':\n this.reRenderNodes();\n break;\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n */\n TreeView.prototype.destroy = function () {\n this.element.removeAttribute('aria-activedescendant');\n this.element.removeAttribute('tabindex');\n this.unWireEvents();\n this.wireEditingEvents(false);\n this.rippleFn();\n this.rippleIconFn();\n this.setCssClass(this.cssClass, null);\n this.setDragAndDrop(false);\n this.setFullRow(false);\n this.element.innerHTML = '';\n _super.prototype.destroy.call(this);\n };\n /**\n * Adds the collection of TreeView nodes based on target and index position. If target node is not specified,\n * then the nodes are added as children of the given parentID or in the root level of TreeView.\n * @param { Object[] } nodes - Specifies the array of JSON data that has to be added.\n * @param { string | Element } target - Specifies ID of TreeView node/TreeView node as target element.\n * @param { number } index - Specifies the index to place the newly added nodes in the target element.\n */\n TreeView.prototype.addNodes = function (nodes, target, index) {\n if (isNOU(nodes)) {\n return;\n }\n var dropLi = this.getElement(target);\n nodes = this.getSortedData(nodes);\n if (this.fields.dataSource instanceof DataManager) {\n this.addGivenNodes(nodes, dropLi, index, true);\n }\n else if (this.dataType === 2) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n if (dropLi) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n for (var i = 0; i < nodes.length; i++) {\n var pid = getValue(this.fields.parentID, nodes[i]);\n dropLi = pid ? this.getElement(pid.toString()) : pid;\n this.addGivenNodes([nodes[i]], dropLi, index);\n }\n }\n }\n };\n /**\n * Instead of clicking on the TreeView node for editing, we can enable it by using\n * `beginEdit` property. On passing the node ID or element through this property, the edit textBox\n * will be created for the particular node thus allowing us to edit it.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.beginEdit = function (node) {\n var ele = this.getElement(node);\n if (!isNOU(ele)) {\n this.createTextbox(ele, null);\n }\n };\n /**\n * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.checkAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, true);\n }\n };\n /**\n * Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.\n * You can also collapse all the nodes excluding the hidden nodes by setting **excludeHiddenNodes** to true. If you want to collapse\n * a specific level of nodes, set **level** as argument to collapseAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/ array of TreeView node.\n * @param {number} level - TreeView nodes will collapse up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.\n */\n TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, COLLAPSIBLE, false);\n }\n else {\n if (level > 0) {\n this.collapseByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.collapseAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Disables the collection of nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.disableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doDisableAction(nodes);\n }\n };\n /**\n * Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.enableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doEnableAction(nodes);\n }\n };\n /**\n * Ensures visibility of the TreeView node by using node ID or node element.\n * When many TreeView nodes are present and we need to find a particular node, `ensureVisible` property\n * helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView nodes.\n */\n TreeView.prototype.ensureVisible = function (node) {\n var liEle = this.getElement(node);\n if (isNOU(liEle)) {\n return;\n }\n var parents = this.parents(liEle, '.' + LISTITEM);\n this.expandAll(parents);\n setTimeout(function () { liEle.scrollIntoView(true); }, 450);\n };\n /**\n * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes\n * as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting\n * **excludeHiddenNodes** to true to this method. To expand a specific level of nodes, set **level** as argument to expandAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @param {number} level - TreeView nodes will expand up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes when expanding all nodes.\n */\n TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, EXPANDABLE, true);\n }\n else {\n if (level > 0) {\n this.expandByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.expandAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.getNode = function (node) {\n var ele = this.getElement(node);\n return this.getNodeData(ele, true);\n };\n /**\n * Moves the collection of nodes within the same TreeView based on target or its index position.\n * @param {string[] | Element[]} sourceNodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {number} index - Specifies the index to place the moved nodes in the target element.\n */\n TreeView.prototype.moveNodes = function (sourceNodes, target, index) {\n var dropLi = this.getElement(target);\n if (isNOU(dropLi)) {\n return;\n }\n for (var i = 0; i < sourceNodes.length; i++) {\n var dragLi = this.getElement(sourceNodes[i]);\n if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n continue;\n }\n this.dropAsChildNode(dragLi, dropLi, this, index);\n }\n };\n /**\n * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.removeNodes = function (nodes) {\n if (!isNOU(nodes)) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n this.removeNode(liEle);\n }\n }\n };\n /**\n * Replaces the text of the TreeView node with the given text.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {string} newText - Specifies the new text of TreeView node.\n */\n TreeView.prototype.updateNode = function (target, newText) {\n if (isNOU(target) || isNOU(newText) || !this.allowEditing) {\n return;\n }\n var liEle = this.getElement(target);\n if (isNOU(liEle)) {\n return;\n }\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var eventArgs = this.getEditEvent(liEle, null, null);\n this.trigger('nodeEditing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.appendNewText(liEle, txtEle, newText, false);\n };\n /**\n * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.uncheckAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, false);\n }\n };\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowMultiSelection\", void 0);\n __decorate([\n Complex({}, NodeAnimationSettings)\n ], TreeView.prototype, \"animation\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"checkedNodes\", void 0);\n __decorate([\n Property('')\n ], TreeView.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('Auto')\n ], TreeView.prototype, \"expandOn\", void 0);\n __decorate([\n Complex({}, FieldsSettings)\n ], TreeView.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"fullRowSelect\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"nodeTemplate\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"selectedNodes\", void 0);\n __decorate([\n Property('None')\n ], TreeView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"drawNode\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"keyPress\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecking\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeClicked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragging\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStart\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStop\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDropped\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEdited\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEditing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanded\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanding\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelected\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelecting\", void 0);\n TreeView = __decorate([\n NotifyPropertyChanges\n ], TreeView);\n return TreeView;\n}(Component));\nexport { TreeView };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, formatUnit, EventHandler, Event, isNullOrUndefined, closest } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { setStyleAttribute as setStyle, addClass, removeClass, createElement, Touch } from '@syncfusion/ej2-base';\nvar CONTROL = 'e-control';\nvar ROOT = 'e-sidebar';\nvar DOCKER = 'e-dock';\nvar CLOSE = 'e-close';\nvar OPEN = 'e-open';\nvar TRASITION = 'e-transition';\nvar DEFAULTBACKDROP = 'e-sidebar-overlay';\nvar CONTEXTBACKDROP = 'e-backdrop';\nvar RTL = 'e-rtl';\nvar RIGHT = 'e-right';\nvar LEFT = 'e-left';\nvar OVER = 'e-over';\nvar PUSH = 'e-push';\nvar SLIDE = 'e-slide';\nvar VISIBILITY = 'e-visibility';\nvar MAINCONTENTANIMATION = 'e-content-animation';\nvar DISABLEANIMATION = 'e-disable-animation';\nvar CONTEXT = 'e-sidebar-context';\nvar SIDEBARABSOLUTE = 'e-sidebar-absolute';\n/**\n * Sidebar is an expandable and collapsible\n * component that typically act as a side container to place the primary or secondary content alongside of the main content.\n * ```html\n * \n * ````\n * ````typescript\n * \n * ```\n */\nvar Sidebar = /** @class */ (function (_super) {\n __extends(Sidebar, _super);\n function Sidebar(options, element) {\n return _super.call(this, options, element) || this;\n }\n Sidebar.prototype.preRender = function () {\n this.setWidth();\n };\n Sidebar.prototype.render = function () {\n this.initialize();\n this.wireEvents();\n };\n Sidebar.prototype.initialize = function () {\n this.setContext();\n this.addClass();\n this.setZindex();\n if (this.enableDock) {\n this.setDock();\n }\n this.setMediaQuery();\n this.setType(this.type);\n this.setCloseOnDocumentClick();\n };\n Sidebar.prototype.setContext = function () {\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector('.' + this.target) }, true);\n }\n if (this.target) {\n this.target.insertAdjacentElement('afterbegin', this.element);\n addClass([this.element], SIDEBARABSOLUTE);\n addClass([this.target], CONTEXT);\n }\n };\n Sidebar.prototype.setCloseOnDocumentClick = function () {\n if (this.closeOnDocumentClick) {\n EventHandler.add(document, 'mousedown touchstart', this.documentclickHandler, this);\n }\n else {\n EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);\n }\n };\n Sidebar.prototype.setWidth = function () {\n if (this.enableDock && this.position === 'Left') {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n else if (this.enableDock && this.position === 'Right') {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n else if (!this.enableDock) {\n setStyle(this.element, { 'width': formatUnit(this.width) });\n }\n };\n Sidebar.prototype.setZindex = function () {\n setStyle(this.element, { 'z-index': '' + this.zIndex });\n };\n Sidebar.prototype.addClass = function () {\n var classELement = document.querySelector('.e-main-content');\n if (!isNullOrUndefined((classELement ||\n this.element.nextElementSibling))) {\n addClass([classELement || this.element.nextElementSibling], [MAINCONTENTANIMATION]);\n }\n if (!this.enableDock && this.type !== 'Auto') {\n addClass([this.element], [VISIBILITY]);\n }\n removeClass([this.element], [OPEN, CLOSE, RIGHT, LEFT, SLIDE, PUSH, OVER]);\n this.element.classList.add(ROOT);\n addClass([this.element], (this.position === 'Right') ? RIGHT : LEFT);\n if (this.type === 'Auto' && !Browser.isDevice && !this.enableDock) {\n addClass([this.element], OPEN);\n }\n else {\n addClass([this.element], CLOSE);\n }\n };\n Sidebar.prototype.destroyBackDrop = function () {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (this.target && this.showBackdrop && sibling) {\n removeClass([sibling], CONTEXTBACKDROP);\n }\n else if (this.showBackdrop && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n /**\n * Hide the Sidebar component.\n * @returns void\n */\n Sidebar.prototype.hide = function () {\n if (this.element.classList.contains(CLOSE)) {\n return;\n }\n if (this.element.classList.contains(OPEN)) {\n this.eventArguments = { name: 'change', element: this.element };\n this.trigger('change', this.eventArguments);\n }\n addClass([this.element], CLOSE);\n removeClass([this.element], OPEN);\n this.enableDock ? setStyle(this.element, { 'width': formatUnit(this.dockSize) }) :\n setStyle(this.element, { 'width': formatUnit(this.width) });\n this.setDock();\n this.setType(this.type);\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (!this.enableDock && sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';\n }\n this.eventArguments = { name: 'change', element: this.element };\n this.trigger('close', this.eventArguments);\n this.destroyBackDrop();\n this.setCloseOnDocumentClick();\n this.setAnimation();\n if (this.type === 'Slide') {\n document.body.classList.remove('e-sidebar-overflow');\n }\n };\n /**\n * Shows the Sidebar component.\n * @returns void\n */\n Sidebar.prototype.show = function () {\n removeClass([this.element], VISIBILITY);\n if (this.element.classList.contains(OPEN)) {\n return;\n }\n if (this.element.classList.contains(CLOSE)) {\n this.eventArguments = { name: 'open', element: this.element };\n this.trigger('change', this.eventArguments);\n }\n addClass([this.element], [OPEN, TRASITION]);\n setStyle(this.element, { 'transform': '' });\n removeClass([this.element], CLOSE);\n setStyle(this.element, { 'width': formatUnit(this.width) });\n var elementWidth = this.element.getBoundingClientRect().width;\n this.setType(this.type);\n this.createBackDrop();\n this.eventArguments.name = 'open';\n this.eventArguments.element = this.element;\n this.trigger('open', this.eventArguments);\n this.setCloseOnDocumentClick();\n this.setAnimation();\n if (this.type === 'Slide') {\n document.body.classList.add('e-sidebar-overflow');\n }\n };\n Sidebar.prototype.setAnimation = function () {\n if (this.animate) {\n removeClass([this.element], DISABLEANIMATION);\n }\n else {\n addClass([this.element], DISABLEANIMATION);\n }\n };\n Sidebar.prototype.setDock = function () {\n if (this.enableDock && this.position === 'Left' && !this.isOpen()) {\n setStyle(this.element, { 'transform': 'translateX(' + -100 + '%) translateX(' + formatUnit(this.dockSize) + ')' });\n }\n else if (this.enableDock && this.position === 'Right' && !this.isOpen()) {\n setStyle(this.element, { 'transform': 'translateX(' + 100 + '%) translateX(' + '-' + formatUnit(this.dockSize) + ')' });\n }\n if (this.element.classList.contains(CLOSE) && this.enableDock) {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n };\n Sidebar.prototype.createBackDrop = function () {\n if (this.target && this.showBackdrop) {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n addClass([sibling], CONTEXTBACKDROP);\n }\n else if (this.showBackdrop && !this.modal && this.isOpen()) {\n this.modal = createElement('div');\n this.modal.className = DEFAULTBACKDROP;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n };\n Sidebar.prototype.getPersistData = function () {\n return this.addOnPersist(['type', 'position']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Sidebar.prototype.getModuleName = function () {\n return 'sidebar';\n };\n /**\n * Shows or hides the Sidebar based on the current state.\n * @returns void\n */\n Sidebar.prototype.toggle = function (e) {\n this.element.classList.contains(OPEN) ? this.hide() : this.show();\n };\n /**\n * Specifies the current state of the Sidebar component.\n * @returns boolean\n */\n Sidebar.prototype.isOpen = function () {\n return this.element.classList.contains(OPEN) ? true : false;\n };\n Sidebar.prototype.setMediaQuery = function () {\n if (this.mediaQuery && this.mediaQuery.matches) {\n this.show();\n }\n else if (this.mediaQuery && this.isOpen()) {\n this.hide();\n }\n };\n Sidebar.prototype.resize = function (e) {\n if (this.type === 'Auto') {\n if (Browser.isDevice) {\n addClass([this.element], OVER);\n }\n else {\n addClass([this.element], PUSH);\n }\n }\n this.setMediaQuery();\n };\n Sidebar.prototype.documentclickHandler = function (e) {\n if (closest(e.target, '.' + CONTROL + '' + '.' + ROOT)) {\n return;\n }\n this.hide();\n };\n Sidebar.prototype.enableGestureHandler = function (args) {\n if (this.position === 'Left' && args.swipeDirection === 'Right' &&\n (args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n else if (this.position === 'Left' && args.swipeDirection === 'Left') {\n this.hide();\n }\n else if (this.position === 'Right' && args.swipeDirection === 'Right') {\n this.hide();\n }\n else if (this.position === 'Right' && args.swipeDirection === 'Left'\n && (window.innerWidth - args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n };\n Sidebar.prototype.setEnableGestures = function () {\n if (this.enableGestures) {\n this.mainContentEle = new Touch(document.body, { swipe: this.enableGestureHandler.bind(this) });\n this.sidebarEle = new Touch(this.element, { swipe: this.enableGestureHandler.bind(this) });\n }\n else {\n if (this.mainContentEle && this.sidebarEle) {\n this.mainContentEle.destroy();\n this.sidebarEle.destroy();\n }\n }\n };\n Sidebar.prototype.wireEvents = function () {\n this.setEnableGestures();\n window.addEventListener('resize', this.resize.bind(this));\n };\n Sidebar.prototype.unWireEvents = function () {\n window.removeEventListener('resize', this.resize.bind(this));\n EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);\n if (this.mainContentEle) {\n this.mainContentEle.destroy();\n }\n if (this.sidebarEle) {\n this.sidebarEle.destroy();\n }\n };\n Sidebar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.setWidth();\n if (!this.isOpen()) {\n this.setDock();\n }\n break;\n case 'animate':\n this.setAnimation();\n break;\n case 'type':\n removeClass([this.element], [VISIBILITY]);\n this.addClass();\n this.setType(this.type);\n break;\n case 'position':\n this.element.style.transform = '';\n this.setDock();\n if (sibling) {\n this.position === 'Left' ? sibling.style.marginRight = '0px' : sibling.style.marginLeft = '0px';\n }\n if (this.position === 'Right') {\n removeClass([this.element], LEFT);\n addClass([this.element], RIGHT);\n }\n else {\n removeClass([this.element], RIGHT);\n addClass([this.element], LEFT);\n }\n this.setType(this.type);\n break;\n case 'showBackdrop':\n if (this.showBackdrop) {\n this.createBackDrop();\n }\n else {\n if (this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n }\n break;\n case 'target':\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector('.' + this.target) }, true);\n }\n if (isNullOrUndefined(this.target)) {\n removeClass([this.element], SIDEBARABSOLUTE);\n removeClass([oldProp.target], CONTEXT);\n setStyle(sibling, { 'margin-left': 0, 'margin-right': 0 });\n document.body.insertAdjacentElement('afterbegin', this.element);\n }\n else {\n _super.prototype.refresh.call(this);\n }\n break;\n case 'closeOnDocumentClick':\n this.setCloseOnDocumentClick();\n break;\n case 'enableDock':\n if (!this.isOpen()) {\n this.setDock();\n }\n break;\n case 'zIndex':\n this.setZindex();\n break;\n case 'mediaQuery':\n this.setMediaQuery();\n break;\n case 'enableGestures':\n this.setEnableGestures();\n break;\n }\n }\n };\n Sidebar.prototype.setType = function (type) {\n var elementWidth = this.element.getBoundingClientRect().width;\n this.setZindex();\n if (this.enableDock) {\n addClass([this.element], DOCKER);\n }\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n if (!Browser.isDevice && this.type !== 'Auto') {\n this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';\n }\n }\n var margin = this.position === 'Left' ? elementWidth + 'px' : elementWidth + 'px';\n var eleWidth = this.position === 'Left' ? elementWidth : -(elementWidth);\n removeClass([this.element], [PUSH, OVER, SLIDE]);\n switch (type) {\n case 'Push':\n addClass([this.element], [PUSH]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n break;\n case 'Slide':\n addClass([this.element], [SLIDE]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n sibling.style.transform = 'translateX(' + eleWidth + 'px)';\n }\n break;\n case 'Over':\n addClass([this.element], [OVER]);\n if (this.enableDock && this.element.classList.contains(CLOSE)) {\n if (sibling) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n }\n break;\n case 'Auto':\n addClass([this.element], [TRASITION]);\n if (Browser.isDevice) {\n if (sibling && (this.enableDock) && !this.isOpen()) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n addClass([this.element], PUSH);\n }\n else {\n addClass([this.element], OVER);\n }\n }\n else {\n addClass([this.element], PUSH);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n }\n this.createBackDrop();\n }\n };\n /**\n * Removes the control from the DOM and removes all its related events\n * @returns void\n */\n Sidebar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);\n if (this.target) {\n removeClass([this.element], SIDEBARABSOLUTE);\n removeClass([this.target], CONTEXT);\n }\n this.destroyBackDrop();\n this.element.style.width = '';\n this.element.style.zIndex = '';\n this.element.style.transform = '';\n var sibling = document.querySelector('.e-main-content')\n || this.element.nextElementSibling;\n if (!isNullOrUndefined(sibling)) {\n sibling.style.margin = '';\n sibling.style.transform = '';\n }\n this.unWireEvents();\n };\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"dockSize\", void 0);\n __decorate([\n Property(null)\n ], Sidebar.prototype, \"mediaQuery\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"enableDock\", void 0);\n __decorate([\n Property(true)\n ], Sidebar.prototype, \"enableGestures\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(true)\n ], Sidebar.prototype, \"animate\", void 0);\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"height\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"closeOnDocumentClick\", void 0);\n __decorate([\n Property('Left')\n ], Sidebar.prototype, \"position\", void 0);\n __decorate([\n Property(null)\n ], Sidebar.prototype, \"target\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"showBackdrop\", void 0);\n __decorate([\n Property('Auto')\n ], Sidebar.prototype, \"type\", void 0);\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"width\", void 0);\n __decorate([\n Property(1000)\n ], Sidebar.prototype, \"zIndex\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"destroyed\", void 0);\n Sidebar = __decorate([\n NotifyPropertyChanges\n ], Sidebar);\n return Sidebar;\n}(Component));\nexport { Sidebar };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if (type === 'date' || type === 'datetime' || type === 'number') {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options) {\n var _this = this;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](./filtering.html#custom-component-in-filter-menu) for its customization.\n * @default null\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n * @default {}\n */\n this.edit = {};\n this.sortDirection = 'Descending';\n merge(this, options);\n this.uid = getUid('grid-column');\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || options.format.format)) {\n this.setFormatter(valueFormatter.getFormatFunction(options.format));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.isForeignColumn() && (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit')) {\n this.editType = 'dropdownedit';\n this.edit.params = {\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n };\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function comparer(x, y) {\n if (typeof a_1 === 'string') {\n a_1 = getValue(a_1, window);\n }\n if (this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n }\n return a_1(x, y);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getValue(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getValue(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /** @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /** @hidden */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /** @hidden */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[i]] = column[keys[i]];\n }\n };\n /**\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /** @hidden */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /** @hidden */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /** @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /** @hidden */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /** @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /** @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /** @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /** @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterafteropen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterbeforeopen';\nexport var filterSearchBegin = 'filtersearchbegin';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate } from '../base/util';\nimport { remove, createElement, debounce } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.existingPredicate = {};\n this.filterState = true;\n this.values = {};\n this.cBoxTrue = createCheckBox(false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(false, { checked: false, label: ' ' });\n this.parent = parent;\n this.id = this.parent.element.id;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n }\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilter.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n EventHandler.add(this.dlg.querySelector('.e-searchinput'), 'keyup', this.searchHandler, this);\n };\n CheckBoxFilter.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n var elem = this.dlg.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n CheckBoxFilter.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n this.refreshCheckboxes();\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilter.prototype.searchBoxKeyUp = function (e) {\n this.refreshCheckboxes();\n this.updateSearchIcon();\n };\n CheckBoxFilter.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n CheckBoxFilter.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilter.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n if (typeof dataSource !== 'object') {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n CheckBoxFilter.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.updateDataSource();\n this.options.type = options.type || 'string';\n this.options.format = options.format || '';\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.sortedColumns = options.sortedColumns || this.parent.sortSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n CheckBoxFilter.prototype.getAndSetChkElem = function (options) {\n this.dlg = createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n Input.createInput({\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilter.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen, filterModel: this,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n this.parent.trigger(events.actionBegin, args);\n if (args.cancel) {\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: { content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: 'e-primary', isPrimary: true }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: 'e-flat', content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this)\n });\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = '800px';\n this.dialogObj.show();\n this.wireEvents();\n createSpinner({ target: this.spinner });\n showSpinner(this.spinner);\n this.getAllData();\n };\n CheckBoxFilter.prototype.dialogCreated = function (e) {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n this.parent.notify(events.filterDialogCreated, e);\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n }\n };\n CheckBoxFilter.prototype.clearFilter = function () {\n this.options.handler({ action: 'clear-filter', field: this.options.field });\n };\n CheckBoxFilter.prototype.btnClick = function (e) {\n if (this.filterState) {\n if (e.target.tagName.toLowerCase() === 'input') {\n var args = {\n action: 'filtering', filterCollection: {\n field: this.options.field,\n operator: this.options.column.type === 'date' || this.options.column.type === 'datetime' ? 'equal' : 'contains',\n value: e.target.value, matchCase: false, type: this.options.column.type\n },\n field: this.options.field\n };\n e.target.value ? this.options.handler(args) : this.closeDialog();\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n this.fltrBtnHandler();\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n };\n CheckBoxFilter.prototype.fltrBtnHandler = function () {\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var optr = 'equal';\n var caseSen = this.options.type === 'string' ?\n this.options.allowCaseSensitive : true;\n var defaults = {\n field: this.options.field, predicate: 'or',\n operator: optr, matchCase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual) {\n optr = 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = 'and';\n defaults.operator = 'notequal';\n }\n var value;\n var fObj;\n var coll = [];\n var searchInput = this.searchBox.querySelector('.e-searchinput');\n if (checked.length !== this.itemsCnt || (searchInput.value && searchInput.value !== '')) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n coll.push(fObj);\n }\n this.initiateFilter(coll);\n }\n else {\n this.clearFilter();\n }\n };\n CheckBoxFilter.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ?\n predicate[fColl[j].predicate](fColl[j].ejpredicate) :\n predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilter.prototype.refreshCheckboxes = function () {\n var val = this.sInput.value;\n var query = this.options.query.clone();\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.options.type ? 'startswith' : 'contains';\n var matchCase = true;\n var ignoreAccent = this.parent.filterSettings.ignoreAccent;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var predicte;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n }\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: this.options.field, column: this.options.column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query\n };\n this.parent.trigger(events.actionBegin, args);\n predicte = new Predicate(this.options.field, args.operator, parsed, args.matchCase, args.ignoreAccent);\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);\n operator = 'equal';\n if (isNullOrUndefined(parsed) && val.length) {\n return;\n }\n predicte = getDatePredicate({\n field: this.options.field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n });\n }\n if (val.length) {\n query.where(predicte);\n }\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n this.processSearch(query);\n };\n CheckBoxFilter.prototype.getPredicateFromCols = function (columns) {\n var predicate;\n var predicates = CheckBoxFilter.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilter.prototype.getAllData = function () {\n var query = new Query();\n query = this.parent.query.clone();\n query.requiresCount(); //consider take query\n var args = {\n requestType: events.filterChoiceRequest, filterModel: this, query: query, filterChoiceCount: null\n };\n this.parent.trigger(events.actionBegin, args);\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.processDataOperation = function (query) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.options.column.isForeignColumn()) {\n allPromise.push(this.options.column.dataSource.executeQuery(new Query()));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n e.forEach(function (data) {\n runArray[i++](data.result);\n });\n });\n };\n CheckBoxFilter.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var query = new Query();\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n if (!(this.options.filteredColumns[i].field === this.options.field ||\n this.options.filteredColumns[i].field === this.options.foreignKeyValue)) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n var predicate = this.getPredicateFromCols(cols);\n if (predicate) {\n query.where(predicate);\n }\n }\n // query.select(this.options.field);\n var result = new DataManager(this.fullData).executeLocal(query);\n var col = this.options.column;\n var res = CheckBoxFilter.getDistinct(result, this.options.field, col, this.foreignKeyData);\n this.filteredData = res.records || [];\n this.processDataSource(null, true, this.filteredData);\n this.dialogObj.element.querySelector('.e-searchinput').focus();\n var args = {\n requestType: events.filterAfterOpen,\n filterModel: this, columnName: this.options.field, columnType: this.options.type\n };\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.processDataSource = function (query, isInitial, dataSource) {\n showSpinner(this.spinner);\n this.updateResult();\n this.createFilterItems(dataSource, isInitial);\n };\n CheckBoxFilter.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getValue(this.options.field, res)] = true;\n }\n };\n CheckBoxFilter.prototype.clickHandler = function (e) {\n var target = e.target;\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n };\n CheckBoxFilter.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.querySelectorAll('.e-frame'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n }\n };\n CheckBoxFilter.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n };\n CheckBoxFilter.prototype.createCheckbox = function (value, checked) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n var label = elem.querySelector('.e-label');\n label.innerHTML = !isNullOrUndefined(value) && value.toString().length ? value :\n this.getLocalizedLabel('Blanks');\n if (this.options.template) {\n label.innerHTML = '';\n var args = {};\n args[this.options.field] = value;\n appendChildren(label, this.options.template(args));\n }\n return elem;\n };\n CheckBoxFilter.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn = this.dlg.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];\n btn.disabled = false;\n if (cnt === selected) {\n className = ['e-check'];\n }\n else if (selected) {\n className = ['e-stop'];\n }\n else {\n className = ['e-uncheck'];\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n };\n CheckBoxFilter.prototype.createFilterItems = function (data, isInitial) {\n var cBoxes = createElement('div');\n var btn = this.dlg.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];\n this.itemsCnt = data.length;\n if (data.length) {\n var selectAll = createCboxWithWrap(getUid('cbox'), this.createCheckbox(this.getLocalizedLabel('SelectAll'), false), 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue('ejValue', data[i]);\n var value = this.valueFormatter.toView(getValue(this.options.field, data[i]), this.options.formatFn);\n cBoxes.appendChild(createCboxWithWrap(uid, this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid])), 'e-ftrchk'));\n }\n this.cBox.innerHTML = cBoxes.innerHTML;\n this.updateIndeterminatenBtn();\n btn.disabled = false;\n }\n else {\n cBoxes.appendChild(createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = cBoxes.innerHTML;\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n var args = { requestType: events.filterChoiceRequest, filterModel: this, dataSource: data };\n this.parent.trigger(events.actionComplete, args);\n hideSpinner(this.spinner);\n };\n CheckBoxFilter.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n return this.result[value];\n }\n };\n CheckBoxFilter.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn();\n while (len--) {\n value = json[len];\n value = getValue(field, value); //local remote diff, check with mdu \n if (!isNullOrUndefined(value)) {\n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n value = isForeignKey ? getValue(column.foreignKeyValue, getForeignData(column, {}, value, foreignKeyData)[0]) : value;\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n result.push(obj);\n }\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilter.getPredicate = function (columns) {\n var cols = CheckBoxFilter.getDistinct(columns, 'field').records || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilter.generatePredicate(collection);\n }\n }\n return pred;\n };\n CheckBoxFilter.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var first;\n first = CheckBoxFilter.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilter.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilter.updateDateFilter(cols[p]);\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p]));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate = predicate[(cols[p].predicate)](getDatePredicate(cols[p]), cols[p].ignoreAccent);\n }\n else {\n predicate = cols[p].ejpredicate ?\n predicate[cols[p].predicate](cols[p].ejpredicate) :\n predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilter.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n return true;\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilter.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, getDatePredicate, getColumnByForeignKeyValue } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\n/**\n * Grid data module is used to generate query and data source.\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n }\n /**\n * The function used to initialize dataManager and external query\n * @return {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n };\n /**\n * The function is used to generate updated Query from Grid model.\n * @return {Query}\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.query.clone();\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n this.pageQuery(query, skipPage);\n this.groupQuery(query);\n return query;\n };\n Data.prototype.aggregateQuery = function (query, isForeign) {\n this.parent.aggregates.forEach(function (row) {\n row.columns.forEach(function (column) {\n var types = column.type instanceof Array ? column.type : [column.type];\n types.forEach(function (type) { return query.aggregate(type.toLowerCase(), column.field); });\n });\n });\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n if ((gObj.allowPaging || gObj.enableVirtualization) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[i], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n if (col) {\n col.setSortDirection(columns[i].direction);\n }\n var fn = col.sortComparer && !this.isRemote() ? col.sortComparer.bind(col) :\n columns[i].direction;\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n query.sortBy(col.field, fn);\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n }\n return query;\n };\n Data.prototype.searchQuery = function (query) {\n var _this = this;\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.parent.getColumns().map(function (f) { return f.field; });\n var predicateList = [];\n if (this.parent.searchSettings.key.length) {\n var predicate = void 0;\n if (this.parent.getForeignKeyColumns().length) {\n fields.forEach(function (columnName) {\n var column = _this.getColumnByField(columnName);\n var sQuery = new Query();\n if (column.isForeignColumn()) {\n predicateList = _this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, _this.parent.filterSettings.ignoreAccent));\n }\n });\n query.where(Predicate.or(predicateList));\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, this.parent.filterSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var fPredicate = {};\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var checkBoxCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {\n checkBoxCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (checkBoxCols.length) {\n var excelPredicate = CheckBoxFilter.getPredicate(checkBoxCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col && !skipFoerign) {\n predicateList = this.fGeneratePredicate(col, predicateList);\n actualFilter.push(col);\n }\n else {\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n if (defaultFltrCols.length) {\n for (var _e = 0, defaultFltrCols_1 = defaultFltrCols; _e < defaultFltrCols_1.length; _e++) {\n var col = defaultFltrCols_1[_e];\n var column_1 = this.getColumnByField(col.field) ||\n getColumnByForeignKeyValue(col.field, this.parent.getForeignKeyColumns());\n var sType = column_1.type;\n if (getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n if (sType !== 'date' && sType !== 'datetime') {\n predicateList.push(new Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));\n }\n else {\n predicateList.push(getDatePredicate(col));\n }\n }\n }\n }\n if (predicateList.length) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @return {Promise