\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n *\n * @param {HScrollModel} options - Specifies HScroll model properties as options.\n * @param {string | HTMLElement} 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 *\n * @private\n * @returns {void}\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\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 horizontal scroll rendering\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('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 *\n * @returns {string} - It returns the current module name.\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 *\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 ele.classList.remove(CLS_DEVICE);\n ele.classList.remove(CLS_RTL);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\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 if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\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 /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\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 rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };\n var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };\n var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\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, true);\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 [].slice.call(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, true);\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, isContinuous) {\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 if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n if (this.enableRtl && this.scrollEle.scrollLeft > 0) {\n this.scrollEle.scrollLeft = 0;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var 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 if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else if (addDisable && removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\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 leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n this.arrowDisabling(navRightEle, navLeftEle);\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 *\n * @param {HScrollModel} newProp - It contains the new value of data.\n * @param {HScrollModel} oldProp - It contains the old value of data.\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 this.setScrollState();\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(null)\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 = function (d, b) {\n 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 extendStatics(d, b);\n };\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 { ChildProperty, extend, deleteObject, Property, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @param {Object} props - Specifies the properties\n * @param {string[]} model - Specifies the model\n * @returns {Object} Component Model\n */\nexport function getModel(props, model) {\n var obj = extend({}, props);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\n/** @hidden\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {number} keyCode - Specifies the keycode\n * @returns {void}\n */\nexport function upDownKeyHandler(ul, keyCode) {\n var defaultIdx = keyCode === 40 ? 0 : ul.childElementCount - 1;\n var liIdx = defaultIdx;\n var li;\n var selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains('e-focused')) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove('e-focused');\n if (keyCode === 40) {\n liIdx++;\n }\n else {\n liIdx--;\n }\n if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = isValidLI(ul, li, liIdx, keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], 'e-focused');\n ul.children[liIdx].focus();\n }\n}\n/**\n * Get Valid LI element\n *\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {Element} li - Specifies the LI element\n * @param {number} index - Specifies the index\n * @param {number} keyCode - Specifies the keycode\n * @param {number} count - Specifies the count\n * @returns {number} - Index\n */\nfunction isValidLI(ul, li, index, keyCode, count) {\n if (count === void 0) { count = 0; }\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {\n index = keyCode === 40 ? 0 : ul.childElementCount - 1;\n }\n else {\n if (keyCode === 40) {\n index++;\n }\n else {\n index--;\n }\n }\n }\n li = ul.children[index];\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n count++;\n if (count === ul.childElementCount) {\n return index = -1;\n }\n index = isValidLI(ul, li, index, keyCode, count);\n }\n return index;\n}\n/** @hidden\n * @param {HTMLElement} popup - Specifies the popup element.\n * @returns {void}\n */\nexport function setBlankIconStyle(popup, blankIcon) {\n var blankIconList = [].slice.call(popup.getElementsByClassName('e-blank-icon'));\n if (blankIcon) {\n var menuItem = [].slice.call(popup.getElementsByClassName('e-item'));\n menuItem.forEach(function (li) {\n if (li.style.paddingLeft || li.style.paddingRight) {\n li.removeAttribute('style');\n }\n });\n }\n if (!blankIconList.length) {\n return;\n }\n var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');\n if (isNullOrUndefined(iconLi)) {\n return;\n }\n if (iconLi.classList.contains('e-url')) {\n iconLi = iconLi.querySelector('.e-menu-url');\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n var cssProp;\n var enableRtl = popup.classList.contains('e-rtl');\n if (enableRtl) {\n cssProp = { padding: 'paddingRight', margin: 'marginLeft' };\n }\n else {\n cssProp = { padding: 'paddingLeft', margin: 'marginRight' };\n }\n /* eslint-disable */\n var size = parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)\n + parseInt(getComputedStyle(iconLi).paddingLeft, 10) + \"px\";\n blankIconList.forEach(function (li) {\n if (li.classList.contains('e-url')) {\n li.querySelector('.e-menu-url').style[cssProp.padding] = size;\n }\n else {\n li.style[cssProp.padding] = size;\n }\n });\n /* eslint-enable */\n}\n/**\n * Defines the items of Split Button/DropDownButton.\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, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"separator\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"url\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Property, Event, addClass, Browser, removeClass, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';\nimport { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { Search } from '../common/incremental-search';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-combobox';\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n *
\n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @class */ (function (_super) {\n __extends(ComboBox, _super);\n /**\n * *Constructor for creating the component\n *\n * @param {ComboBoxModel} options - Specifies the ComboBox model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.getLocaleName = function () {\n return 'combo-box';\n };\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlurHandler, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.onBlurHandler = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ?\n null : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {\n this.customValue(e);\n }\n _super.prototype.onBlurHandler.call(this, e);\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value, text: value, index: null }, true);\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if (this.previousValue !== this.value) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n var li = this.getElementByValue(this.value);\n var isExistItem = !isNullOrUndefined(li) ? true : false;\n if (this.enableVirtualization && this.value) {\n var fields = (this.fields.value) ? this.fields.value : '';\n if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {\n var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n else {\n var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n }\n if (li) {\n this.setSelection(li, null);\n }\n else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {\n this.valueMuteChange(this.value);\n }\n else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.ulElement && this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n var searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject;\n return searchBoxContainer;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {\n setTimeout(function () {\n _this.inlineSearch();\n });\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;\n var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);\n if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {\n var updatingincrementalindex = false;\n if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = this.incrementalEndIndex;\n if (this.incrementalEndIndex == 0) {\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n }\n else {\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n }\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {\n this.incrementalStartIndex = this.incrementalEndIndex;\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n if (!isNullOrUndefined(activeItem)) {\n break;\n }\n if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n break;\n }\n }\n if (activeItem.index) {\n if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {\n var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n if (startIndex != this.viewPortInfo.startIndex) {\n this.updateIncrementalView(startIndex, endIndex);\n }\n }\n }\n if (!isNullOrUndefined(activeItem.item)) {\n var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;\n if (index_1 > this.itemCount / 2) {\n var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n if (activeItem && activeItem.item) {\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n }\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n if (!this.enableVirtualization) {\n this.list.scrollTop = count * height + fixedHead;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n if (this.enableVirtualization && !this.fields.groupBy) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;\n this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);\n }\n }\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {\n this.setProperties({ 'value': dataItem.value }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = (this.getModuleName() === 'autocomplete') ? (this.inputWrapper.buttons[0] ||\n this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container, this.createElement)) :\n (this.inputWrapper.buttons[0] || this.inputWrapper.clearButton);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && this.previousValue !== currentFillValue) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue, isHover);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n }\n if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {\n this.searchLists(e);\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (this.inputElement.value === '') {\n this.activeIndex = null;\n if (!isNullOrUndefined(this.list)) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {\n this.removeFocus();\n }\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup(e);\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {\n if (isKeyNavigate === void 0) { isKeyNavigate = false; }\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else if (isKeyNavigate) {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlurHandler);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n EventHandler.remove(window, 'resize', this.windowResize);\n }\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n if (this.isSelected) {\n li = this.list.querySelector('.' + dropDownListClasses.selected);\n }\n else {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n }\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clearAll(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue(e);\n }\n this.hidePopup(e);\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus(e);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function (e) {\n var _this = this;\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n var previousValue = this.previousValue;\n var currentValue = this.value;\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.autofill && previousValue === this.value && currentValue !== this.value) {\n this.onChangeEvent(null);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue_1 = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n // eslint-disable-next-line max-len\n var eventArgs = { text: value_1, item: {} };\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {\n _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);\n });\n }\n else {\n this.updateCustomValueCallback(value_1, eventArgs, previousValue_1);\n }\n }\n else {\n this.isSelectCustom = false;\n this.setProperties({ value: value });\n if (previousValue_1 !== this.value) {\n this.onChangeEvent(e);\n }\n }\n }\n else if (this.allowCustom) {\n this.isSelectCustom = true;\n }\n };\n ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {\n var fields = this.fields;\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value, dataItem);\n setValue(fields.value, value, dataItem);\n }\n this.itemData = dataItem;\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n if (previousValue !== this.value) {\n this.onChangeEvent(e);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {ComboBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {ComboBoxModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'combobox') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n this.setReadOnly();\n break;\n case 'allowFiltering':\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n break;\n case 'allowCustom':\n break;\n default: {\n // eslint-disable-next-line max-len\n var comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n if (this.isFiltering() && prop === 'dataSource' && isNullOrUndefined(this.list) && this.itemTemplate &&\n this.getModuleName() === 'combobox') {\n _super.prototype.renderList.call(this);\n }\n break;\n }\n }\n }\n };\n /**\n * To initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n this.renderComplete();\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n\n */\n ComboBox.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n\n */\n ComboBox.prototype.filter = function (dataSource, query, fields) {\n _super.prototype.filter.call(this, dataSource, query, fields);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showPopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.showPopup.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n var inputValue = this.inputElement && this.inputElement.value === '' ? null\n : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;\n if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(e);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this, e);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue(e);\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this, e);\n };\n /**\n * Sets the focus to the component for interaction.\n *\n * @returns {void}\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.clear = function () {\n this.value = null;\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.focusOut.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n\n */\n ComboBox.prototype.getItems = function () {\n return _super.prototype.getItems.call(this);\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n\n */\n ComboBox.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n ComboBox.prototype.renderHightSearch = function () {\n // update high light search\n };\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], ComboBox.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"value\", void 0);\n ComboBox = __decorate([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\nexport { ComboBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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 { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-vscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n *\n * @param {VScrollModel} options - Specifies VScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlayElement(this.element);\n }\n this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.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 scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflow = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT, CLS_DEVICE, CLS_RTL]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = buildTag('div', { id: id.concat('down'), className: clsDown });\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = buildTag('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = buildTag('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = buildTag('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + 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 *\n * @param {VScrollModel} newProp - It contains the new value of data.\n * @param {VScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n VScroll.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 this.setScrollState();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(CLS_RTL);\n }\n else {\n this.element.classList.remove(CLS_RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\nexport { VScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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, NotifyPropertyChanges, Property, setValue } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler, setHiddenInput } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\nvar containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n *
\n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isMouseClick = false;\n _this.clickTriggered = false;\n _this.validCheck = true;\n return _this;\n }\n CheckBox.prototype.changeState = function (state, isInitialize) {\n var ariaState;\n var rippleSpan;\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n if (frameSpan) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n }\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {\n this.element.checked = false;\n this.validCheck = false;\n }\n else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {\n this.validCheck = true;\n }\n }\n else if (state === 'uncheck') {\n if (frameSpan) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n }\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize) {\n this.element.checked = true;\n this.validCheck = false;\n }\n else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {\n this.validCheck = true;\n }\n }\n else {\n if (frameSpan) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n }\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n this.indeterminate = true;\n }\n };\n CheckBox.prototype.clickHandler = function (event) {\n if (event.target.tagName === 'INPUT' && this.clickTriggered) {\n if (this.isVue) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n this.clickTriggered = false;\n return;\n }\n if (event.target.tagName === 'SPAN' || event.target.tagName === 'LABEL') {\n this.clickTriggered = true;\n }\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n this.element = wrapper;\n if (this.refreshing) {\n ['e-control', 'e-checkbox', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n }\n }\n };\n CheckBox.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n CheckBox.prototype.focusOutHandler = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.getLabel = function () {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check', true);\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.labelMouseDownHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.labelMouseLeaveHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n CheckBox.prototype.labelMouseUpHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n CheckBox.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 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n CheckBox.prototype.setText = function (text) {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n var label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.changeHandler = function (e) {\n e.stopPropagation();\n };\n CheckBox.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.wrapper;\n EventHandler.remove(wrapper, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n EventHandler.remove(label, 'mouseleave', this.labelMouseLeaveHandler);\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.remove(formElem, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(wrapper, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n EventHandler.add(label, 'mouseleave', this.labelMouseLeaveHandler, this);\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.add(formElem, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n };\n CheckBox.prototype.updateVueArrayModel = function (init) {\n if (this.isVue && typeof this.value === 'object') {\n var value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (var i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n var index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.validCheck ? this.element.checked : !this.element.checked;\n };\n CheckBox.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n var wrapper = this.getWrapper();\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'style') {\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'disabled') {\n if (this.htmlAttributes[\"\" + key] === 'true') {\n this.setDisabled();\n }\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], CheckBox.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], CheckBox.prototype, \"htmlAttributes\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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, Browser, L10n, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\nvar selectionTimeOut = 0;\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n else if (attributeName === 'class') {\n input.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('numerictextbox'));\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'aria-label': 'hidden', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n if (this.isAngular && this.angularTagName === 'EJS-NUMERICTEXTBOX' && this.cloneElement.id.length > 0) {\n attributes(this.hiddenInput, { 'name': this.cloneElement.id });\n }\n else {\n attributes(this.hiddenInput, { 'name': this.inputName });\n }\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[\"\" + key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[\"\" + pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[\"\" + pro]) :\n this.htmlAttributes[\"\" + pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n if (this.min !== -(Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemin': this.min.toString() });\n }\n if (this.max !== (Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemax': this.max.toString() });\n }\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;\n if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n //EJ2-54963-if type \".\" or \".0\" or \"-.0\" it converts to \"0\" automatically when binding v-model\n var nonZeroRegex = new RegExp('[^0-9]+$');\n if (nonZeroRegex.test(this.element.value) || ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) && this.element.value[this.element.value.length - 1] === '0')) {\n current = this.value;\n }\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.inputValue = value;\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var decimalSeparator = getValue('decimal', getNumericObject(this.locale));\n var isAlterNumPadDecimalChar = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;\n //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different\n if (isAlterNumPadDecimalChar) {\n currentChar = decimalSeparator;\n }\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n //EJ2-59813-update the numberpad decimal separator and update the cursor position\n if (isAlterNumPadDecimalChar) {\n var start = this.element.selectionStart + 1;\n this.element.value = text;\n this.element.setSelectionRange(start, start);\n event.preventDefault();\n event.stopPropagation();\n }\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n clearTimeout(selectionTimeOut);\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n selectionTimeOut = setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === 'touchmove') {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n this.prevValue = this.value;\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n if (this.spinUp) {\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n }\n if (this.spinDown) {\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n }\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',\n 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n this.spinUp = null;\n this.spinDown = null;\n this.container = null;\n this.hiddenInput = null;\n this.changeEventArgs = null;\n this.blurEventArgs = null;\n this.focusEventArgs = null;\n this.inputWrapper = null;\n Input.destroy();\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.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 this.setElementWidth(newProp.width);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","import { select, detach } from '@syncfusion/ej2-base';\nimport { VScroll } from './v-scroll';\nimport { HScroll } from './h-scroll';\n/**\n * Used to add scroll in menu.\n *\n * @param {createElementType} createElement - Specifies the create element model\n * @param {HTMLElement} container - Specifies the element container\n * @param {HTMLElement} content - Specifies the content element\n * @param {string} scrollType - Specifies the scroll type\n * @param {boolean} enableRtl - Specifies the enable RTL property\n * @param {boolean} offset - Specifies the offset value\n * @returns {HTMLElement} - Element\n * @hidden\n */\nexport function addScrolling(createElement, container, content, scrollType, enableRtl, offset) {\n var containerOffset;\n var contentOffset;\n var parentElem = container.parentElement;\n if (scrollType === 'vscroll') {\n containerOffset = offset || container.getBoundingClientRect().height;\n contentOffset = content.getBoundingClientRect().height;\n }\n else {\n containerOffset = container.getBoundingClientRect().width;\n contentOffset = content.getBoundingClientRect().width;\n }\n if (containerOffset < contentOffset) {\n return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);\n }\n else if (parentElem) {\n var width = parentElem.getBoundingClientRect().width;\n if (width < containerOffset && scrollType === 'hscroll') {\n contentOffset = width;\n container.style.maxWidth = width + 'px';\n return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);\n }\n return content;\n }\n else {\n return content;\n }\n}\n/**\n * Used to create scroll bar in menu.\n *\n * @param {createElementType} createElement - Specifies the create element model\n * @param {HTMLElement} container - Specifies the element container\n * @param {HTMLElement} content - Specifies the content element\n * @param {string} scrollType - Specifies the scroll type\n * @param {boolean} enableRtl - Specifies the enable RTL property\n * @param {boolean} offset - Specifies the offset value\n * @returns {HTMLElement} - Element\n * @hidden\n */\nfunction createScrollbar(createElement, container, content, scrollType, enableRtl, offset) {\n var scrollEle = createElement('div', { className: 'e-menu-' + scrollType });\n container.appendChild(scrollEle);\n scrollEle.appendChild(content);\n if (offset) {\n scrollEle.style.overflow = 'hidden';\n scrollEle.style.height = offset + 'px';\n }\n else {\n scrollEle.style.maxHeight = container.style.maxHeight;\n container.style.overflow = 'hidden';\n }\n var scrollObj;\n if (scrollType === 'vscroll') {\n scrollObj = new VScroll({ enableRtl: enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetHeight / 2;\n }\n else {\n scrollObj = new HScroll({ enableRtl: enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetWidth;\n }\n return scrollEle;\n}\n/**\n * Used to destroy the scroll option.\n *\n * @param {VScroll | HScroll} scrollObj - Specifies the scroller object\n * @param {Element} element - Specifies the element\n * @param {HTMLElement} skipEle - Specifies the skip element\n * @returns {void}\n * @hidden\n */\nexport function destroyScroll(scrollObj, element, skipEle) {\n if (scrollObj) {\n var menu = select('.e-menu-parent', element);\n if (menu) {\n if (!skipEle || skipEle === menu) {\n scrollObj.destroy();\n element.parentElement.appendChild(menu);\n detach(element);\n }\n }\n else {\n scrollObj.destroy();\n detach(element);\n }\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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, isBlazor } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { getZindexPartial, calculatePosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';\nimport { SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nimport { addScrolling, destroyScroll } from '../common/menu-scroll';\nvar ENTER = 'enter';\nvar ESCAPE = 'escape';\nvar FOCUSED = 'e-focused';\nvar HEADER = 'e-menu-header';\nvar SELECTED = 'e-selected';\nvar SEPARATOR = 'e-separator';\nvar UPARROW = 'uparrow';\nvar DOWNARROW = 'downarrow';\nvar LEFTARROW = 'leftarrow';\nvar RIGHTARROW = 'rightarrow';\nvar HOME = 'home';\nvar END = 'end';\nvar TAB = 'tab';\nvar CARET = 'e-caret';\nvar ITEM = 'e-menu-item';\nvar DISABLED = 'e-disabled';\nvar HIDE = 'e-menu-hide';\nvar ICONS = 'e-icons';\nvar RTL = 'e-rtl';\nvar POPUP = 'e-menu-popup';\nvar TEMPLATE_PROPERTY = 'Template';\n/**\n * Configures the field options of the Menu.\n */\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('id')\n ], FieldSettings.prototype, \"itemId\", void 0);\n __decorate([\n Property('parentId')\n ], FieldSettings.prototype, \"parentId\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('url')\n ], FieldSettings.prototype, \"url\", void 0);\n __decorate([\n Property('separator')\n ], FieldSettings.prototype, \"separator\", void 0);\n __decorate([\n Property('items')\n ], FieldSettings.prototype, \"children\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\n/**\n * Specifies 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(null)\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 * Animation configuration settings.\n */\nvar MenuAnimationSettings = /** @class */ (function (_super) {\n __extends(MenuAnimationSettings, _super);\n function MenuAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], MenuAnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], MenuAnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], MenuAnimationSettings.prototype, \"easing\", void 0);\n return MenuAnimationSettings;\n}(ChildProperty));\nexport { MenuAnimationSettings };\n/**\n * Base class for Menu and ContextMenu components.\n *\n * @private\n */\nvar MenuBase = /** @class */ (function (_super) {\n __extends(MenuBase, _super);\n /**\n * Constructor for creating the widget.\n *\n * @private\n * @param {MenuBaseModel} options - Specifies the menu base model\n * @param {string | HTMLUListElement} element - Specifies the element\n */\n function MenuBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.navIdx = [];\n _this.animation = new Animation({});\n _this.isTapHold = false;\n _this.tempItem = [];\n _this.showSubMenuOn = 'Auto';\n return _this;\n }\n /**\n * Initialized third party configuration settings.\n *\n * @private\n * @returns {void}\n */\n MenuBase.prototype.preRender = function () {\n if (!this.isMenu) {\n var ul = void 0;\n if (this.element.tagName === 'EJS-CONTEXTMENU') {\n ul = this.createElement('ul', {\n id: getUniqueID(this.getModuleName()), className: 'e-control e-lib e-' + this.getModuleName()\n });\n var ejInst = getValue('ej2_instances', this.element);\n removeClass([this.element], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);\n this.clonedElement = this.element;\n this.element = ul;\n setValue('ej2_instances', ejInst, this.element);\n }\n else {\n ul = this.createElement('ul', { id: getUniqueID(this.getModuleName()) });\n append([].slice.call(this.element.cloneNode(true).children), ul);\n var refEle = this.element.nextElementSibling;\n if (refEle) {\n this.element.parentElement.insertBefore(ul, refEle);\n }\n else {\n this.element.parentElement.appendChild(ul);\n }\n this.clonedElement = ul;\n }\n this.clonedElement.style.display = 'none';\n }\n if (this.element.tagName === 'EJS-MENU') {\n var ele = this.element;\n var ejInstance = getValue('ej2_instances', ele);\n var ul = this.createElement('ul');\n var wrapper = this.createElement('EJS-MENU', { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n ul.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = ul;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.clonedElement = wrapper;\n this.element = ele;\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n MenuBase.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderItems();\n this.wireEvents();\n this.renderComplete();\n var wrapper = this.getWrapper();\n // eslint-disable-next-line\n if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {\n requestAnimationFrame(function () {\n addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);\n });\n }\n };\n MenuBase.prototype.initialize = function () {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n if (this.isMenu) {\n this.element.parentElement.insertBefore(wrapper, this.element);\n }\n else {\n document.body.appendChild(wrapper);\n }\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n wrapper.appendChild(this.element);\n if (this.isMenu && this.hamburgerMode) {\n if (!this.target) {\n this.createHeaderContainer(wrapper);\n }\n }\n this.defaultOption = this.showItemOnClick;\n };\n MenuBase.prototype.renderItems = function () {\n if (!this.items.length) {\n var items = ListBase.createJsonFromElement(this.element, { fields: { child: 'items' } });\n this.setProperties({ items: items }, true);\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\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 if (this.isMenu) {\n if (!this.hamburgerMode && this.element.classList.contains('e-vertical')) {\n this.setBlankIconStyle(this.element);\n }\n if (this.enableScrolling) {\n var wrapper = this.getWrapper();\n if (this.element.classList.contains('e-vertical')) {\n addScrolling(this.createElement, wrapper, this.element, 'vscroll', this.enableRtl);\n }\n else {\n addScrolling(this.createElement, wrapper, this.element, 'hscroll', this.enableRtl);\n }\n }\n }\n else {\n this.element.parentElement.setAttribute('role', 'dialog');\n this.element.parentElement.setAttribute('aria-label', 'context menu');\n }\n };\n MenuBase.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 (this.isMenu) {\n EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);\n }\n else {\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 }\n this.targetElement = target;\n if (!this.isMenu) {\n EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);\n }\n }\n }\n if (!Browser.isDevice) {\n this.delegateMoverHandler = this.moverHandler.bind(this);\n this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);\n EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);\n EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);\n }\n this.delegateClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHandler, this);\n this.wireKeyboardEvent(wrapper);\n this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });\n };\n MenuBase.prototype.wireKeyboardEvent = function (element) {\n var keyConfigs = {\n downarrow: DOWNARROW,\n uparrow: UPARROW,\n enter: ENTER,\n leftarrow: LEFTARROW,\n rightarrow: RIGHTARROW,\n escape: ESCAPE\n };\n if (this.isMenu) {\n keyConfigs.home = HOME;\n keyConfigs.end = END;\n keyConfigs.tab = TAB;\n }\n new KeyboardEvents(element, {\n keyAction: this.keyBoardHandler.bind(this),\n keyConfigs: keyConfigs\n });\n };\n MenuBase.prototype.mouseDownHandler = function (e) {\n if (closest(e.target, '.e-' + this.getModuleName() + '-wrapper') !== this.getWrapper()\n && (!closest(e.target, '.e-' + this.getModuleName() + '-popup'))) {\n this.closeMenu(this.isMenu ? null : this.navIdx.length, e);\n }\n };\n MenuBase.prototype.keyHandler = function (e) {\n if (e.keyCode === 38 || e.keyCode === 40) {\n if (e.target && (e.target.classList.contains('e-contextmenu') || e.target.classList.contains('e-menu-item'))) {\n e.preventDefault();\n }\n }\n };\n MenuBase.prototype.keyBoardHandler = function (e) {\n var actionName = '';\n var trgt = e.target;\n var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')\n && this.navIdx.length < 1;\n e.preventDefault();\n if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);\n }\n if (actionNeeded) {\n switch (e.action) {\n case RIGHTARROW:\n actionName = RIGHTARROW;\n e.action = DOWNARROW;\n break;\n case LEFTARROW:\n actionName = LEFTARROW;\n e.action = UPARROW;\n break;\n case DOWNARROW:\n actionName = DOWNARROW;\n e.action = RIGHTARROW;\n break;\n case UPARROW:\n actionName = UPARROW;\n e.action = '';\n break;\n }\n }\n else if (this.enableRtl) {\n switch (e.action) {\n case LEFTARROW:\n actionNeeded = true;\n actionName = LEFTARROW;\n e.action = RIGHTARROW;\n break;\n case RIGHTARROW:\n actionNeeded = true;\n actionName = RIGHTARROW;\n e.action = LEFTARROW;\n break;\n }\n }\n switch (e.action) {\n case DOWNARROW:\n case UPARROW:\n case END:\n case HOME:\n case TAB:\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 if (this.hamburgerMode && trgt.tagName === 'SPAN' && trgt.classList.contains('e-menu-icon')) {\n this.menuHeaderClickHandler(e);\n }\n else {\n this.rightEnterKeyHandler(e);\n }\n break;\n case ESCAPE:\n this.leftEscKeyHandler(e);\n break;\n }\n if (actionNeeded) {\n e.action = actionName;\n }\n };\n MenuBase.prototype.upDownKeyHandler = function (e) {\n var cul = this.getUlByNavIdx();\n var defaultIdx = (e.action === DOWNARROW || e.action === HOME || e.action === TAB) ? 0 : cul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n if (e.action !== END && e.action !== HOME) {\n fliIdx = this.getIdx(cul, fli);\n }\n fli.classList.remove(FOCUSED);\n if (e.action !== END && e.action !== HOME) {\n if (e.action === DOWNARROW) {\n fliIdx++;\n }\n else {\n fliIdx--;\n }\n if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {\n fliIdx = defaultIdx;\n }\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 MenuBase.prototype.isValidLI = function (cli, index, action) {\n var cul = this.getUlByNavIdx();\n var defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n if (action === DOWNARROW && index === cul.childElementCount - 1) {\n index = defaultIdx;\n }\n else if (action === UPARROW && index === 0) {\n index = defaultIdx;\n }\n else if ((action === DOWNARROW) || (action === RIGHTARROW)) {\n index++;\n }\n else {\n index--;\n }\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 MenuBase.prototype.getUlByNavIdx = function (navIdxLen) {\n var _this = this;\n if (navIdxLen === void 0) { navIdxLen = this.navIdx.length; }\n if (this.isMenu) {\n var popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];\n var popups_1 = [];\n var allPopup = selectAll('.' + POPUP);\n allPopup.forEach(function (elem) {\n if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {\n popups_1.push(elem);\n }\n });\n popup = [this.getWrapper()].concat([].slice.call(popups_1))[navIdxLen];\n return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);\n }\n else {\n return this.getWrapper().children[navIdxLen];\n }\n };\n MenuBase.prototype.rightEnterKeyHandler = function (e) {\n var eventArgs;\n var cul = this.getUlByNavIdx();\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 item = this.getItem(navIdx);\n if (item.items.length) {\n this.navIdx.push(fliIdx);\n this.keyType = 'right';\n this.action = e.action;\n this.openMenu(fli, item, -1, -1, e);\n }\n else {\n if (e.action === ENTER) {\n if (this.isMenu && this.navIdx.length === 0) {\n this.removeLIStateByClass([SELECTED], [this.getWrapper()]);\n }\n else {\n fli.classList.remove(FOCUSED);\n }\n fli.classList.add(SELECTED);\n eventArgs = { element: fli, item: item, event: e };\n this.trigger('select', eventArgs);\n var aEle = fli.querySelector('.e-menu-url');\n if (item.url && aEle) {\n switch (aEle.getAttribute('target')) {\n case '_blank':\n window.open(item.url, '_blank');\n break;\n case '_parent':\n window.parent.location.href = item.url;\n break;\n default:\n window.location.href = item.url;\n }\n }\n this.closeMenu(null, e);\n var sli = this.getLIByClass(this.getUlByNavIdx(), SELECTED);\n if (sli) {\n sli.classList.add(FOCUSED);\n sli.focus();\n }\n }\n }\n }\n };\n MenuBase.prototype.leftEscKeyHandler = function (e) {\n if (this.navIdx.length) {\n this.keyType = 'left';\n this.closeMenu(this.navIdx.length, e);\n }\n else {\n if (e.action === ESCAPE) {\n this.closeMenu(null, e);\n }\n }\n };\n MenuBase.prototype.scrollHandler = function (e) {\n this.closeMenu(null, e);\n };\n MenuBase.prototype.touchHandler = function (e) {\n this.isTapHold = true;\n this.cmenuHandler(e.originalEvent);\n };\n MenuBase.prototype.cmenuHandler = function (e) {\n e.preventDefault();\n this.currentTarget = e.target;\n this.isCMenu = true;\n this.pageX = e.changedTouches ? e.changedTouches[0].pageX + 1 : e.pageX + 1;\n this.pageY = e.changedTouches ? e.changedTouches[0].pageY + 1 : e.pageY + 1;\n this.closeMenu(null, e);\n if (this.isCMenu) {\n if (this.canOpen(e.target)) {\n this.openMenu(null, null, this.pageY, this.pageX, e);\n }\n this.isCMenu = false;\n }\n };\n // eslint:disable-next-line:max-func-body-length\n MenuBase.prototype.closeMenu = function (ulIndex, e, isIterated) {\n var _this = this;\n if (ulIndex === void 0) { ulIndex = 0; }\n if (e === void 0) { e = null; }\n if (this.isMenuVisible()) {\n var sli = void 0;\n var item_1;\n var wrapper_1 = this.getWrapper();\n var beforeCloseArgs = void 0;\n var items_1;\n var popups = this.getPopups();\n var isClose = false;\n var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;\n var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])\n : selectAll('.e-menu-parent', wrapper_1)[cnt - 1];\n if (this.isMenu && ul_1.classList.contains('e-menu')) {\n sli = this.getLIByClass(ul_1, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n isClose = true;\n }\n if (!isClose) {\n var liElem_1 = e && e.target && this.getLI(e.target);\n if (liElem_1) {\n this.cli = liElem_1;\n }\n else {\n this.cli = ul_1.children[0];\n }\n item_1 = this.navIdx.length ? this.getItem(this.navIdx) : null;\n items_1 = item_1 ? item_1.items : this.items;\n beforeCloseArgs = { element: ul_1, parentItem: item_1, items: items_1, event: e, cancel: false, isFocused: true };\n this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {\n var popupEle;\n var closeArgs;\n var popupId = '';\n var popupObj;\n var isOpen = !observedCloseArgs.cancel;\n if (isOpen || _this.isCMenu) {\n if (_this.isMenu) {\n popupEle = closest(ul_1, '.' + POPUP);\n if (_this.hamburgerMode) {\n popupEle.parentElement.style.minHeight = '';\n closest(ul_1, '.e-menu-item').setAttribute('aria-expanded', 'false');\n }\n _this.unWireKeyboardEvent(popupEle);\n destroyScroll(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);\n popupObj = getInstance(popupEle, Popup);\n popupObj.hide();\n popupId = popupEle.id;\n popupObj.destroy();\n detach(popupEle);\n }\n else {\n _this.toggleAnimation(ul_1, false);\n }\n closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };\n _this.trigger('onClose', closeArgs);\n _this.navIdx.pop();\n if (_this.navIdx.length === 0 && e && e.type === 'keyup') {\n _this.showSubMenu = false;\n }\n if (!_this.isMenu) {\n EventHandler.remove(ul_1, 'keydown', _this.keyHandler);\n if (_this.keyType === 'right') {\n _this.keyType = '';\n }\n }\n }\n _this.updateReactTemplate();\n var trgtliId;\n var closedLi;\n var trgtLi;\n var trgtpopUp = _this.getWrapper() && _this.getUlByNavIdx();\n if (_this.isCMenu) {\n if (_this.canOpen(e.target)) {\n _this.openMenu(null, null, _this.pageY, _this.pageX, e);\n }\n _this.isCMenu = false;\n }\n if (_this.isMenu && trgtpopUp && popupId.length) {\n // eslint-disable-next-line\n trgtliId = new RegExp('(.*)-ej2menu-' + _this.element.id + '-popup').exec(popupId)[1];\n closedLi = trgtpopUp.querySelector('[id=\"' + trgtliId + '\"]');\n trgtLi = (liElem_1 && trgtpopUp.querySelector('[id=\"' + liElem_1.id + '\"]'));\n }\n else if (trgtpopUp) {\n closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');\n trgtLi = (liElem_1 && trgtpopUp.querySelector('[id=\"' + liElem_1.id + '\"]'));\n }\n var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');\n if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {\n _this.afterCloseMenu(e);\n }\n else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {\n var ele = (e && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))\n ? closest(e.target, '.e-menu-wrapper') : null;\n if (ele) {\n ele = ele.querySelector('.e-menu-item');\n if (_this.showItemOnClick || (ele && _this.getIndex(ele.id, true).length <= _this.navIdx.length)) {\n _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e, true);\n }\n }\n else {\n if (!(e && e.target.classList.contains('e-nav-arrow'))) {\n _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);\n }\n }\n }\n else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||\n _this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {\n _this.closeMenu(null, e);\n }\n else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {\n _this.closeMenu(null, e);\n }\n else if (isOpen && !_this.isMenu && !ulIndex && _this.navIdx.length === 0 && !_this.isMenusClosed) {\n _this.isMenusClosed = true;\n _this.closeMenu(0, e);\n }\n else if (isOpen && _this.isMenu && e && e.target &&\n _this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {\n _this.closeMenu(0, e);\n }\n else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {\n _this.closeMenu(null, e);\n }\n else {\n if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {\n _this.afterCloseMenu(e);\n }\n else {\n var cul = _this.getUlByNavIdx();\n var sli_1 = _this.getLIByClass(cul, SELECTED);\n if (sli_1) {\n sli_1.setAttribute('aria-expanded', 'false');\n sli_1.classList.remove(SELECTED);\n if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {\n sli_1.classList.add(FOCUSED);\n if (!e.target || !e.target.classList.contains('e-edit-template')) {\n sli_1.focus();\n }\n }\n }\n if (!isOpen && _this.hamburgerMode && liElem_1 && liElem_1.getAttribute('aria-expanded') === 'false' &&\n liElem_1.getAttribute('aria-haspopup') === 'true') {\n if (closest(liElem_1, '.e-menu-parent.e-control')) {\n _this.navIdx = [];\n }\n else {\n _this.navIdx.pop();\n }\n _this.navIdx.push(_this.cliIdx);\n var item_2 = _this.getItem(_this.navIdx);\n liElem_1.setAttribute('aria-expanded', 'true');\n _this.openMenu(liElem_1, item_2, -1, -1, e);\n }\n }\n if (_this.navIdx.length < 1) {\n if (_this.showSubMenuOn === 'Hover' || _this.showSubMenuOn === 'Click') {\n _this.showItemOnClick = _this.defaultOption;\n _this.showSubMenuOn = 'Auto';\n }\n }\n }\n _this.removeStateWrapper();\n });\n }\n }\n };\n MenuBase.prototype.updateReactTemplate = function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && this.template && this.navIdx.length === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var portals = this.portals.splice(0, this.items.length);\n this.clearTemplate(['template']);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.portals = portals;\n this.renderReactTemplates();\n }\n };\n MenuBase.prototype.getMenuItemModel = function (item, level) {\n if (isNullOrUndefined(item)) {\n return null;\n }\n if (isNullOrUndefined(level)) {\n level = 0;\n }\n var fields = this.getFields(level);\n return { text: item[fields.text], id: item[fields.id], items: item[fields.child], separator: item[fields.separator],\n iconCss: item[fields.iconCss], url: item[fields.url] };\n };\n MenuBase.prototype.getPopups = function () {\n var _this = this;\n var popups = [];\n [].slice.call(document.querySelectorAll('.' + POPUP)).forEach(function (elem) {\n if (!isNullOrUndefined(elem.querySelector('.' + ITEM)) && _this.getIndex(elem.querySelector('.' + ITEM).id, true).length) {\n popups.push(elem);\n }\n });\n return popups;\n };\n MenuBase.prototype.isMenuVisible = function () {\n return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));\n };\n MenuBase.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 = filter.length; i < len; i++) {\n if (closest(target, '.' + filter[i])) {\n canOpen = true;\n break;\n }\n }\n }\n return canOpen;\n };\n MenuBase.prototype.openMenu = function (li, item, top, left, e, target) {\n var _this = this;\n if (top === void 0) { top = 0; }\n if (left === void 0) { left = 0; }\n if (e === void 0) { e = null; }\n if (target === void 0) { target = this.targetElement; }\n var wrapper = this.getWrapper();\n this.lItem = li;\n var elemId = this.element.id !== '' ? this.element.id : 'menu';\n this.isMenusClosed = false;\n if (isNullOrUndefined(top)) {\n top = -1;\n }\n if (isNullOrUndefined(left)) {\n left = -1;\n }\n if (li) {\n this.uList = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);\n if (!this.isMenu && Browser.isDevice) {\n wrapper.lastChild.style.display = 'none';\n var data = {\n text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'\n };\n var hdata = new MenuItem(this.items[0], 'items', data, true);\n var hli = this.createItems([hdata]).children[0];\n hli.classList.add(HEADER);\n this.uList.insertBefore(hli, this.uList.children[0]);\n }\n if (this.isMenu) {\n this.popupWrapper = this.createElement('div', {\n className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'\n });\n if (this.hamburgerMode) {\n top = li.offsetHeight;\n li.appendChild(this.popupWrapper);\n }\n else {\n document.body.appendChild(this.popupWrapper);\n }\n this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;\n this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);\n if (this.template) {\n this.renderReactTemplates();\n }\n if (this.hamburgerMode) {\n this.calculateIndentSize(this.uList, li);\n }\n else {\n if (this.cssClass) {\n addClass([this.popupWrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.popupObj.hide();\n }\n if (!this.hamburgerMode && !this.showItemOnClick && this.hoverDelay) {\n window.clearInterval(this.timer);\n this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, 0, 0, 'menu'); }, this.hoverDelay);\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, 0, 0, 'menu');\n }\n }\n else {\n this.uList.style.zIndex = this.element.style.zIndex;\n wrapper.appendChild(this.uList);\n if (!this.showItemOnClick && this.hoverDelay) {\n window.clearInterval(this.timer);\n this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, top, left, 'none'); }, this.hoverDelay);\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');\n }\n }\n }\n else {\n this.uList = this.element;\n this.uList.style.zIndex = getZindexPartial(target ? target : this.element).toString();\n if (isNullOrUndefined(e)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, false);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var targetEvent = this.copyObject(ev, {});\n targetEvent.target = targetEvent.srcElement = target;\n targetEvent.currentTarget = target;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.triggerBeforeOpen(li, this.uList, item, targetEvent, top, left, 'none');\n }\n else {\n this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n MenuBase.prototype.copyObject = function (source, destination) {\n for (var prop in source) {\n destination[\"\" + prop] = source[\"\" + prop];\n }\n return destination;\n };\n MenuBase.prototype.calculateIndentSize = function (ul, li) {\n var liStyle = getComputedStyle(li);\n var liIndent = parseInt(liStyle.textIndent, 10);\n if (this.navIdx.length < 2 && !li.classList.contains('e-blankicon')) {\n liIndent *= 2;\n }\n else {\n liIndent += (liIndent / 4);\n }\n ul.style.textIndent = liIndent + 'px';\n var blankIconElem = ul.querySelectorAll('.e-blankicon');\n if (blankIconElem && blankIconElem.length) {\n var menuIconElem = ul.querySelector('.e-menu-icon');\n var menuIconElemStyle = getComputedStyle(menuIconElem);\n var blankIconIndent = (parseInt(menuIconElemStyle.marginRight, 10) + menuIconElem.offsetWidth + liIndent);\n for (var i = 0; i < blankIconElem.length; i++) {\n blankIconElem[i].style.textIndent = blankIconIndent + 'px';\n }\n }\n };\n MenuBase.prototype.generatePopup = function (popupWrapper, ul, li, isNestedOrVertical) {\n var _this = this;\n var popupObj = new Popup(popupWrapper, {\n actionOnScroll: this.hamburgerMode ? 'none' : 'reposition',\n relateTo: li,\n collision: this.hamburgerMode ? { X: 'none', Y: 'none' } : { X: isNestedOrVertical ||\n this.enableRtl ? 'none' : 'flip', Y: 'fit' },\n position: (isNestedOrVertical && !this.hamburgerMode) ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n enableRtl: this.enableRtl,\n content: ul,\n open: function () {\n var scrollEle = select('.e-menu-vscroll', popupObj.element);\n if (scrollEle) {\n scrollEle.style.height = 'inherit';\n scrollEle.style.maxHeight = '';\n }\n var ul = select('.e-ul', popupObj.element);\n popupObj.element.style.maxHeight = '';\n ul.focus();\n _this.triggerOpen(ul);\n }\n });\n return popupObj;\n };\n MenuBase.prototype.createHeaderContainer = function (wrapper) {\n wrapper = wrapper || this.getWrapper();\n var spanElem = this.createElement('span', { className: 'e-' + this.getModuleName() + '-header' });\n var tempTitle = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.title) : this.title;\n var spanTitle = this.createElement('span', {\n className: 'e-' + this.getModuleName() + '-title', innerHTML: tempTitle\n });\n var spanIcon = this.createElement('span', {\n className: 'e-icons e-' + this.getModuleName() + '-icon', attrs: { 'tabindex': '0' }\n });\n spanElem.appendChild(spanTitle);\n spanElem.appendChild(spanIcon);\n wrapper.insertBefore(spanElem, this.element);\n };\n MenuBase.prototype.openHamburgerMenu = function (e) {\n if (this.hamburgerMode) {\n this.triggerBeforeOpen(null, this.element, null, e, 0, 0, 'hamburger');\n }\n };\n MenuBase.prototype.closeHamburgerMenu = function (e) {\n var _this = this;\n var beforeCloseArgs = { element: this.element, parentItem: null, event: e,\n items: this.items, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedHamburgerCloseArgs) {\n if (!observedHamburgerCloseArgs.cancel) {\n _this.closeMenu(null, e);\n _this.element.classList.add('e-hide-menu');\n _this.trigger('onClose', { element: _this.element, parentItem: null, items: _this.items });\n }\n });\n };\n MenuBase.prototype.callFit = function (element, x, y, top, left) {\n return fit(element, null, { X: x, Y: y }, { top: top, left: left });\n };\n MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left, type) {\n var _this = this;\n var items = li ? item[this.getField('children', this.navIdx.length - 1)] : this.items;\n var eventArgs = {\n element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left, showSubMenuOn: 'Auto'\n };\n var menuType = type;\n this.trigger('beforeOpen', eventArgs, function (observedOpenArgs) {\n switch (menuType) {\n case 'menu':\n if (!_this.hamburgerMode) {\n if (observedOpenArgs.showSubMenuOn !== 'Auto') {\n _this.showItemOnClick = !_this.defaultOption;\n _this.showSubMenuOn = observedOpenArgs.showSubMenuOn;\n }\n _this.top = observedOpenArgs.top;\n _this.left = observedOpenArgs.left;\n }\n _this.popupWrapper.style.display = 'block';\n if (!_this.hamburgerMode) {\n _this.popupWrapper.style.maxHeight = _this.popupWrapper.getBoundingClientRect().height + 'px';\n if (_this.enableScrolling) {\n addScrolling(_this.createElement, _this.popupWrapper, _this.uList, 'vscroll', _this.enableRtl);\n }\n _this.checkScrollOffset(e);\n }\n if (!_this.hamburgerMode && !_this.left && !_this.top) {\n _this.popupObj.refreshPosition(_this.lItem, true);\n _this.left = parseInt(_this.popupWrapper.style.left, 10);\n _this.top = parseInt(_this.popupWrapper.style.top, 10);\n if (_this.enableRtl) {\n _this.left =\n _this.isNestedOrVertical ? _this.left - _this.popupWrapper.offsetWidth - _this.lItem.parentElement.offsetWidth + 2\n : _this.left - _this.popupWrapper.offsetWidth + _this.lItem.offsetWidth;\n }\n // eslint-disable-next-line\n if (_this.template && (_this.isReact || _this.isAngular)) {\n requestAnimationFrame(function () {\n _this.collision();\n _this.popupWrapper.style.display = '';\n });\n }\n else {\n _this.collision();\n _this.popupWrapper.style.display = '';\n }\n }\n else {\n _this.popupObj.collision = { X: 'none', Y: 'none' };\n _this.popupWrapper.style.display = '';\n }\n break;\n case 'none':\n _this.top = observedOpenArgs.top;\n _this.left = observedOpenArgs.left;\n break;\n case 'hamburger':\n if (!observedOpenArgs.cancel) {\n _this.element.classList.remove('e-hide-menu');\n _this.triggerOpen(_this.element);\n }\n break;\n }\n if (menuType !== 'hamburger') {\n if (observedOpenArgs.cancel) {\n if (_this.isMenu) {\n _this.popupObj.destroy();\n detach(_this.popupWrapper);\n }\n else if (ul.className.indexOf('e-ul') > -1) {\n detach(ul);\n }\n _this.navIdx.pop();\n }\n else {\n if (_this.isMenu) {\n if (_this.hamburgerMode) {\n _this.popupWrapper.style.top = _this.top + 'px';\n _this.popupWrapper.style.left = 0 + 'px';\n _this.toggleAnimation(_this.popupWrapper);\n }\n else {\n _this.setBlankIconStyle(_this.popupWrapper);\n _this.wireKeyboardEvent(_this.popupWrapper);\n rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });\n _this.popupWrapper.style.left = _this.left + 'px';\n _this.popupWrapper.style.top = _this.top + 'px';\n var animationOptions = _this.animationSettings.effect !== 'None' ? {\n name: _this.animationSettings.effect, duration: _this.animationSettings.duration,\n timingFunction: _this.animationSettings.easing\n } : null;\n _this.popupObj.show(animationOptions, _this.lItem);\n }\n }\n else {\n _this.setBlankIconStyle(_this.uList);\n _this.setPosition(_this.lItem, _this.uList, _this.top, _this.left);\n _this.toggleAnimation(_this.uList);\n }\n }\n }\n if (_this.keyType === 'right') {\n var cul = _this.getUlByNavIdx();\n li.classList.remove(FOCUSED);\n if (_this.isMenu && _this.navIdx.length === 1) {\n _this.removeLIStateByClass([SELECTED], [_this.getWrapper()]);\n }\n li.classList.add(SELECTED);\n if (_this.action === ENTER) {\n var eventArgs_1 = { element: li, item: item, event: e };\n _this.trigger('select', eventArgs_1);\n }\n li.focus();\n cul = _this.getUlByNavIdx();\n var index = _this.isValidLI(cul.children[0], 0, _this.action);\n cul.children[index].classList.add(FOCUSED);\n cul.children[index].focus();\n }\n });\n };\n MenuBase.prototype.collision = function () {\n var collide;\n collide = isCollide(this.popupWrapper, null, this.left, this.top);\n if ((this.isNestedOrVertical || this.enableRtl) && (collide.indexOf('right') > -1\n || collide.indexOf('left') > -1)) {\n this.popupObj.collision.X = 'none';\n var offWidth = closest(this.lItem, '.e-' + this.getModuleName() + '-wrapper').offsetWidth;\n this.left =\n this.enableRtl ? calculatePosition(this.lItem, this.isNestedOrVertical ? 'right' : 'left', 'top').left\n : this.left - this.popupWrapper.offsetWidth - offWidth + 2;\n }\n collide = isCollide(this.popupWrapper, null, this.left, this.top);\n if (collide.indexOf('left') > -1 || collide.indexOf('right') > -1) {\n this.left = this.callFit(this.popupWrapper, true, false, this.top, this.left).left;\n }\n this.popupWrapper.style.left = this.left + 'px';\n };\n MenuBase.prototype.setBlankIconStyle = function (menu) {\n var blankIconList = [].slice.call(menu.getElementsByClassName('e-blankicon'));\n if (!blankIconList.length) {\n return;\n }\n var iconLi = menu.querySelector('.e-menu-item:not(.e-blankicon):not(.e-separator)');\n if (!iconLi) {\n return;\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n if (!icon) {\n return;\n }\n var cssProp = this.enableRtl ? { padding: 'paddingRight', margin: 'marginLeft' } :\n { padding: 'paddingLeft', margin: 'marginRight' };\n var iconCssProps = getComputedStyle(icon);\n var iconSize = parseInt(iconCssProps.fontSize, 10);\n if (!!parseInt(iconCssProps.width, 10) && parseInt(iconCssProps.width, 10) > iconSize) {\n iconSize = parseInt(iconCssProps.width, 10);\n }\n // eslint:disable\n var size = iconSize + parseInt(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n iconCssProps[cssProp.margin], 10) + parseInt(getComputedStyle(iconLi)[cssProp.padding], 10) + \"px\";\n blankIconList.forEach(function (li) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n li.style[cssProp.padding] = size;\n });\n // eslint:enable\n };\n MenuBase.prototype.checkScrollOffset = function (e) {\n var wrapper = this.getWrapper();\n if (wrapper.children[0].classList.contains('e-menu-hscroll') && this.navIdx.length === 1) {\n var trgt = isNullOrUndefined(e) ? this.element : closest(e.target, '.' + ITEM);\n var offsetEle = select('.e-hscroll-bar', wrapper);\n if (offsetEle.scrollLeft > trgt.offsetLeft) {\n offsetEle.scrollLeft -= (offsetEle.scrollLeft - trgt.offsetLeft);\n }\n var offsetLeft = offsetEle.scrollLeft + offsetEle.offsetWidth;\n var offsetRight = trgt.offsetLeft + trgt.offsetWidth;\n if (offsetLeft < offsetRight) {\n offsetEle.scrollLeft += (offsetRight - offsetLeft);\n }\n }\n };\n MenuBase.prototype.setPosition = function (li, ul, top, left) {\n var px = 'px';\n this.toggleVisiblity(ul);\n if (ul === this.element || (left > -1 && top > -1)) {\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 = this.callFit(ul, false, true, top, left);\n top = offset.top - 20;\n if (top < 0) {\n var newTop = (pageYOffset + document.documentElement.clientHeight) - ul.getBoundingClientRect().height;\n if (newTop > -1) {\n top = newTop;\n }\n }\n }\n collide = isCollide(ul, null, left, top);\n if (collide.indexOf('left') > -1) {\n var offset = this.callFit(ul, true, false, top, 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 = this.callFit(ul, false, true, top, 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 MenuBase.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 MenuBase.prototype.createItems = function (items) {\n var _this = this;\n var level = this.navIdx ? this.navIdx.length : 0;\n var fields = this.getFields(level);\n var showIcon = this.hasField(items, this.getField('iconCss', level));\n var listBaseOptions = {\n showIcon: showIcon,\n moduleName: 'menu',\n fields: fields,\n template: this.template,\n itemNavigable: true,\n itemCreating: function (args) {\n if (!args.curData[args.fields[fields.id]]) {\n args.curData[args.fields[fields.id]] = getUniqueID('menuitem');\n }\n if (isNullOrUndefined(args.curData.htmlAttributes)) {\n args.curData.htmlAttributes = {};\n }\n if (Browser.isIE) {\n args.curData.htmlAttributes.role = 'menuitem';\n args.curData.htmlAttributes.tabindex = '-1';\n }\n else {\n Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });\n }\n if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {\n args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?\n args.curData[args.fields.text] : args.curData[args.fields.id];\n }\n if (args.curData[args.fields[fields.iconCss]] === '') {\n args.curData[args.fields[fields.iconCss]] = null;\n }\n },\n itemCreated: function (args) {\n if (args.curData[_this.getField('separator', level)]) {\n args.item.classList.add(SEPARATOR);\n args.item.setAttribute('role', 'separator');\n }\n if (showIcon && !args.curData[args.fields.iconCss]\n && !args.curData[_this.getField('separator', level)]) {\n args.item.classList.add('e-blankicon');\n }\n if (args.curData[args.fields.child]\n && args.curData[args.fields.child].length) {\n var span = _this.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.classList.add('e-menu-caret-icon');\n }\n if (_this.isMenu && _this.template) {\n args.item.setAttribute('id', args.curData[args.fields.id].toString());\n args.item.removeAttribute('data-uid');\n if (args.item.classList.contains('e-level-1')) {\n args.item.classList.remove('e-level-1');\n }\n if (args.item.classList.contains('e-has-child')) {\n args.item.classList.remove('e-has-child');\n }\n args.item.removeAttribute('aria-level');\n }\n var eventArgs = { item: args.curData, element: args.item };\n _this.trigger('beforeItemRender', eventArgs);\n }\n };\n this.setProperties({ 'items': this.items }, true);\n if (this.isMenu) {\n listBaseOptions.templateID = this.element.id + TEMPLATE_PROPERTY;\n }\n var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);\n ul.setAttribute('tabindex', '0');\n if (this.isMenu) {\n ul.setAttribute('role', 'menu');\n }\n else {\n ul.setAttribute('role', 'menubar');\n }\n return ul;\n };\n MenuBase.prototype.moverHandler = function (e) {\n var trgt = e.target;\n this.liTrgt = trgt;\n var cli = this.getLI(trgt);\n var wrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : this.getWrapper();\n var hdrWrapper = this.getWrapper();\n var regex = new RegExp('-ej2menu-(.*)-popup');\n var ulId;\n var isDifferentElem = false;\n if (!wrapper) {\n return;\n }\n if (wrapper.id !== '') {\n ulId = regex.exec(wrapper.id)[1];\n }\n else {\n ulId = wrapper.querySelector('ul').id;\n }\n if (ulId !== this.element.id) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [this.getWrapper()]);\n if (this.navIdx.length) {\n isDifferentElem = true;\n }\n else {\n return;\n }\n }\n if (cli && closest(cli, '.e-' + this.getModuleName() + '-wrapper') && !isDifferentElem) {\n this.removeLIStateByClass([FOCUSED], this.isMenu ? [wrapper].concat(this.getPopups()) : [wrapper]);\n this.removeLIStateByClass([FOCUSED], this.isMenu ? [hdrWrapper].concat(this.getPopups()) : [hdrWrapper]);\n cli.classList.add(FOCUSED);\n if (!this.showItemOnClick) {\n this.clickHandler(e);\n }\n }\n else if (this.isMenu && this.showItemOnClick && !isDifferentElem) {\n this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));\n }\n if (this.isMenu) {\n if (!this.showItemOnClick && (trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup'))\n && (!cli || (cli && !this.getIndex(cli.id, true).length)) && this.showSubMenuOn !== 'Hover') {\n this.removeLIStateByClass([FOCUSED], [wrapper]);\n if (this.navIdx.length) {\n this.isClosed = true;\n this.closeMenu(null, e);\n }\n }\n else if (isDifferentElem && !this.showItemOnClick) {\n if (this.navIdx.length) {\n this.isClosed = true;\n this.closeMenu(null, e);\n }\n }\n if (!this.isClosed) {\n this.removeStateWrapper();\n }\n this.isClosed = false;\n }\n };\n MenuBase.prototype.removeStateWrapper = function () {\n if (this.liTrgt) {\n var wrapper = closest(this.liTrgt, '.e-menu-vscroll');\n if (this.liTrgt.tagName === 'DIV' && wrapper) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);\n }\n }\n };\n MenuBase.prototype.removeLIStateByClass = function (classList, element) {\n var li;\n var _loop_1 = function (i) {\n classList.forEach(function (className) {\n li = select('.' + className, element[i]);\n if (li) {\n li.classList.remove(className);\n }\n });\n };\n for (var i = 0; i < element.length; i++) {\n _loop_1(i);\n }\n };\n MenuBase.prototype.getField = function (propName, level) {\n if (level === void 0) { level = 0; }\n var fieldName = this.fields[\"\" + propName];\n return typeof fieldName === 'string' ? fieldName :\n (!fieldName[level] ? fieldName[fieldName.length - 1].toString()\n : fieldName[level].toString());\n };\n MenuBase.prototype.getFields = function (level) {\n if (level === void 0) { level = 0; }\n return {\n id: this.getField('itemId', level),\n iconCss: this.getField('iconCss', level),\n text: this.getField('text', level),\n url: this.getField('url', level),\n child: this.getField('children', level),\n separator: this.getField('separator', level)\n };\n };\n MenuBase.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 MenuBase.prototype.menuHeaderClickHandler = function (e) {\n if (closest(e.target, '.e-menu-wrapper').querySelector('ul.e-menu-parent').id !== this.element.id) {\n return;\n }\n if (this.element.className.indexOf('e-hide-menu') > -1) {\n this.openHamburgerMenu(e);\n }\n else {\n this.closeHamburgerMenu(e);\n }\n };\n MenuBase.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.cli = this.getLI(trgt);\n var regex = new RegExp('-ej2menu-(.*)-popup');\n var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;\n var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0\n : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);\n if (Browser.isDevice && this.isMenu) {\n this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));\n this.mouseDownHandler(e);\n }\n if (cli && cliWrapper && this.isMenu) {\n var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;\n if (this.element.id !== cliWrapperId) {\n return;\n }\n }\n if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {\n this.setLISelected(cli);\n var navIdx = this.getIndex(cli.id, true);\n var item = this.getItem(navIdx);\n var eventArgs = { element: cli, item: item, event: e };\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 this.showSubMenu = true;\n var cul = cli.parentNode;\n if (isNullOrUndefined(cul)) {\n return;\n }\n this.cliIdx = this.getIdx(cul, cli);\n if (this.isMenu || !Browser.isDevice) {\n var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))\n : this.getIdx(wrapper, cul);\n if (this.navIdx[culIdx] === this.cliIdx) {\n this.showSubMenu = false;\n }\n if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n this.isClosed = true;\n this.keyType = 'click';\n if (this.showItemOnClick) {\n this.setLISelected(cli);\n }\n this.closeMenu(culIdx + 1, e);\n if (this.showItemOnClick) {\n this.setLISelected(cli);\n }\n }\n }\n if (!this.isClosed) {\n this.afterCloseMenu(e);\n }\n this.isClosed = false;\n }\n }\n }\n else {\n if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {\n var popupEle = closest(trgt, '.' + POPUP);\n var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;\n if (cIdx < this.navIdx.length) {\n this.closeMenu(cIdx + 1, e);\n if (popupEle) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);\n }\n }\n }\n else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'\n && trgt.classList.contains('e-menu-icon')) {\n this.menuHeaderClickHandler(e);\n }\n else {\n if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&\n !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {\n if (!cli) {\n this.removeLIStateByClass([SELECTED], [wrapper]);\n }\n if (!cli || !cli.querySelector('.' + CARET)) {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n };\n MenuBase.prototype.afterCloseMenu = function (e) {\n if (isNullOrUndefined(e)) {\n return;\n }\n var isHeader;\n if (this.showSubMenu) {\n if (this.showItemOnClick && this.navIdx.length === 0) {\n isHeader = closest(e.target, '.e-menu-parent.e-control');\n }\n else {\n isHeader = closest(this.element, '.e-menu-parent.e-control');\n }\n var idx = this.navIdx.concat(this.cliIdx);\n var item = this.getItem(idx);\n if (item && item[this.getField('children', idx.length - 1)] &&\n item[this.getField('children', idx.length - 1)].length) {\n if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {\n this.setLISelected(this.cli);\n }\n if ((!this.hamburgerMode && isHeader) || (this.hamburgerMode && this.cli.getAttribute('aria-expanded') === 'false')) {\n this.cli.setAttribute('aria-expanded', 'true');\n this.navIdx.push(this.cliIdx);\n this.openMenu(this.cli, item, null, null, e);\n }\n }\n else {\n if (e.type !== 'mouseover') {\n this.closeMenu(null, e);\n }\n }\n if (!isHeader) {\n var cul = this.getUlByNavIdx();\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.setAttribute('aria-expanded', 'false');\n sli.classList.remove(SELECTED);\n }\n }\n }\n this.keyType = '';\n };\n MenuBase.prototype.setLISelected = function (li) {\n var sli = this.getLIByClass(li.parentElement, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n if (!this.isMenu) {\n li.classList.remove(FOCUSED);\n }\n li.classList.add(SELECTED);\n };\n MenuBase.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 /**\n * This method is used to get the index of the menu item in the Menu based on the argument.\n *\n * @param {MenuItem | string} item - item be passed to get the index | id to be passed to get the item index.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.getItemIndex = function (item, isUniqueId) {\n var idx;\n if (typeof item === 'string') {\n idx = item;\n }\n else {\n idx = item.id;\n }\n var isText = (isUniqueId === false) ? false : true;\n var navIdx = this.getIndex(idx, isText);\n return navIdx;\n };\n /**\n * This method is used to set the menu item in the Menu based on the argument.\n *\n * @param {MenuItem} item - item need to be updated.\n * @param {string} id - id / text to be passed to update the item.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.setItem = function (item, id, isUniqueId) {\n var idx;\n if (isUniqueId) {\n idx = id ? id : item.id;\n }\n else {\n idx = id ? id : item.text;\n }\n var navIdx = this.getIndex(idx, isUniqueId);\n var newItem = this.getItem(navIdx);\n Object.assign(newItem, item);\n };\n MenuBase.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 MenuBase.prototype.getItems = function (navIdx) {\n var items = this.items;\n for (var i = 0; i < navIdx.length; i++) {\n items = items[navIdx[i]][this.getField('children', i)];\n }\n return items;\n };\n MenuBase.prototype.setItems = function (newItems, navIdx) {\n var items = this.getItems(navIdx);\n items.splice(0, items.length);\n for (var i = 0; i < newItems.length; i++) {\n items.splice(i, 0, newItems[i]);\n }\n };\n MenuBase.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 MenuBase.prototype.getLI = function (elem) {\n if (elem.tagName === 'LI' && elem.classList.contains('e-menu-item')) {\n return elem;\n }\n return closest(elem, 'li.e-menu-item');\n };\n MenuBase.prototype.updateItemsByNavIdx = function () {\n var items = this.items;\n var count = 0;\n for (var index = 0; index < this.navIdx.length; index++) {\n items = items[index].items;\n if (!items) {\n break;\n }\n count++;\n var ul = this.getUlByNavIdx(count);\n if (!ul) {\n break;\n }\n this.updateItem(ul, items);\n }\n };\n MenuBase.prototype.removeChildElement = function (elem) {\n while (elem.firstElementChild) {\n elem.removeChild(elem.firstElementChild);\n }\n return elem;\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {MenuBaseModel} newProp - Specifies the new properties\n * @param {MenuBaseModel} oldProp - Specifies the old properties\n * @returns {void}\n */\n MenuBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n var wrapper = this.getWrapper();\n var _loop_2 = function (prop) {\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (this_1.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'showItemOnClick':\n this_1.unWireEvents();\n this_1.showItemOnClick = newProp.showItemOnClick;\n this_1.wireEvents();\n break;\n case 'enableScrolling':\n if (newProp.enableScrolling) {\n var ul_2;\n if (this_1.element.classList.contains('e-vertical')) {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);\n }\n else {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);\n }\n this_1.getPopups().forEach(function (wrapper) {\n ul_2 = select('.e-ul', wrapper);\n addScrolling(_this.createElement, wrapper, ul_2, 'vscroll', _this.enableRtl);\n });\n }\n else {\n var ul_3 = wrapper.children[0];\n if (this_1.element.classList.contains('e-vertical')) {\n destroyScroll(getInstance(ul_3, VScroll), ul_3);\n }\n else {\n destroyScroll(getInstance(ul_3, HScroll), ul_3);\n }\n wrapper.style.overflow = '';\n wrapper.appendChild(this_1.element);\n this_1.getPopups().forEach(function (wrapper) {\n ul_3 = wrapper.children[0];\n destroyScroll(getInstance(ul_3, VScroll), ul_3);\n wrapper.style.overflow = '';\n });\n }\n break;\n case 'items': {\n var idx = void 0;\n var navIdx = void 0;\n var item = void 0;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this_1.isReact && this_1.template) {\n this_1.clearTemplate(['template']);\n }\n if (!Object.keys(oldProp.items).length) {\n this_1.updateItem(this_1.element, this_1.items);\n if (this_1.enableScrolling && this_1.element.parentElement.classList.contains('e-custom-scroll')) {\n if (this_1.element.classList.contains('e-vertical')) {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);\n }\n else {\n addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);\n }\n }\n if (!this_1.hamburgerMode) {\n for (var i = 1, count = wrapper.childElementCount; i < count; i++) {\n detach(wrapper.lastElementChild);\n }\n }\n this_1.navIdx = [];\n }\n else {\n var keys = Object.keys(newProp.items);\n for (var i = 0; i < keys.length; i++) {\n navIdx = this_1.getChangedItemIndex(newProp, [], Number(keys[i]));\n if (navIdx.length <= this_1.getWrapper().children.length) {\n idx = navIdx.pop();\n item = this_1.getItems(navIdx);\n this_1.insertAfter([item[idx]], item[idx].text);\n this_1.removeItem(item, navIdx, idx);\n this_1.setItems(item, navIdx);\n }\n navIdx.length = 0;\n }\n }\n break;\n }\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_2(prop);\n }\n };\n MenuBase.prototype.updateItem = function (ul, items) {\n if (isBlazor() && !this.isMenu) {\n ul = this.removeChildElement(ul);\n }\n else {\n if (this.enableScrolling) {\n var wrapper1 = this.getWrapper();\n var ul1 = wrapper1.children[0];\n if (this.element.classList.contains('e-vertical')) {\n destroyScroll(getInstance(ul1, VScroll), ul1);\n }\n else {\n destroyScroll(getInstance(ul1, HScroll), ul1);\n }\n }\n ul.innerHTML = '';\n }\n var lis = [].slice.call(this.createItems(items).children);\n lis.forEach(function (li) {\n ul.appendChild(li);\n });\n };\n MenuBase.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 var popStr = Object.keys(item.items).pop();\n if (popStr) {\n this.getChangedItemIndex(item, index, Number(popStr));\n }\n }\n else {\n if (key === 'isParentArray' && index.length > 1) {\n index.pop();\n }\n }\n return index;\n };\n MenuBase.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 *\n * @private\n * @param {string} targetSelctor - Specifies the target selector\n * @returns {void}\n */\n MenuBase.prototype.unWireEvents = function (targetSelctor) {\n if (targetSelctor === void 0) { targetSelctor = this.target; }\n var wrapper = this.getWrapper();\n if (targetSelctor) {\n var target = void 0;\n var touchModule = void 0;\n var targetElems = selectAll(targetSelctor);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (this.isMenu) {\n EventHandler.remove(target, 'click', this.menuHeaderClickHandler);\n }\n else {\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 }\n if (!this.isMenu) {\n EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);\n EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);\n }\n EventHandler.remove(document, 'click', this.delegateClickHandler);\n this.unWireKeyboardEvent(wrapper);\n this.rippleFn();\n };\n MenuBase.prototype.unWireKeyboardEvent = function (element) {\n var keyboardModule = getInstance(element, KeyboardEvents);\n if (keyboardModule) {\n keyboardModule.destroy();\n }\n };\n MenuBase.prototype.toggleAnimation = function (ul, isMenuOpen) {\n var _this = this;\n if (isMenuOpen === void 0) { isMenuOpen = true; }\n var pUlHeight;\n var pElement;\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 if (_this.hamburgerMode) {\n pElement = options.element.parentElement;\n options.element.style.position = 'absolute';\n pUlHeight = pElement.offsetHeight;\n options.element.style.maxHeight = options.element.offsetHeight + 'px';\n pElement.style.maxHeight = '';\n }\n else {\n options.element.style.display = 'block';\n options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';\n }\n },\n progress: function (options) {\n if (_this.hamburgerMode) {\n pElement.style.minHeight = (pUlHeight + options.element.offsetHeight) + 'px';\n }\n },\n end: function (options) {\n if (_this.hamburgerMode) {\n options.element.style.position = '';\n options.element.style.maxHeight = '';\n pElement.style.minHeight = '';\n options.element.style.top = 0 + 'px';\n options.element.children[0].focus();\n _this.triggerOpen(options.element.children[0]);\n }\n else {\n _this.end(options.element, isMenuOpen);\n }\n }\n });\n }\n };\n MenuBase.prototype.triggerOpen = function (ul) {\n var item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n var eventArgs = {\n element: ul, parentItem: item, items: item ? item.items : this.items\n };\n this.trigger('onOpen', eventArgs);\n if (!this.isMenu) {\n EventHandler.add(ul, 'keydown', this.keyHandler, this);\n }\n };\n MenuBase.prototype.end = function (ul, isMenuOpen) {\n if (isMenuOpen) {\n ul.style.display = 'block';\n ul.style.maxHeight = '';\n this.triggerOpen(ul);\n if (ul.querySelector('.' + FOCUSED)) {\n ul.querySelector('.' + FOCUSED).focus();\n }\n else {\n var ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];\n if (this.currentTarget) {\n if (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n else {\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\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 *\n * @returns {string} - Persist data\n */\n MenuBase.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Get wrapper element.\n *\n * @returns {Element} - Wrapper element\n * @private\n */\n MenuBase.prototype.getWrapper = function () {\n return closest(this.element, '.e-' + this.getModuleName() + '-wrapper');\n };\n MenuBase.prototype.getIndex = function (data, isUniqueId, items, nIndex, isCallBack, level) {\n if (items === void 0) { items = this.items; }\n if (nIndex === void 0) { nIndex = []; }\n if (isCallBack === void 0) { isCallBack = false; }\n if (level === void 0) { level = 0; }\n var item;\n level = isCallBack ? level + 1 : 0;\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i];\n if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {\n nIndex.push(i);\n break;\n }\n else if (item[this.getField('children', level)]\n && item[this.getField('children', level)].length) {\n nIndex = this.getIndex(data, isUniqueId, item[this.getField('children', level)], nIndex, true, level);\n if (nIndex[nIndex.length - 1] === -1) {\n if (i !== len - 1) {\n nIndex.pop();\n }\n }\n else {\n nIndex.unshift(i);\n break;\n }\n }\n else {\n if (i === len - 1) {\n nIndex.push(-1);\n }\n }\n }\n return (!isCallBack && nIndex[0] === -1) ? [] : nIndex;\n };\n /**\n * This method is used to enable or disable the menu items in the Menu based on the items and enable argument.\n *\n * @param {string[]} items - Text items that needs to be enabled/disabled.\n * @param {boolean} enable - Set `true`/`false` to enable/disable the list items.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.enableItems = function (items, enable, isUniqueId) {\n if (enable === void 0) { enable = true; }\n var ul;\n var idx;\n var navIdx;\n var disabled = DISABLED;\n var skipItem;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n if (this.navIdx.length) {\n if (navIdx.length !== 1) {\n skipItem = false;\n for (var i_1 = 0, len = navIdx.length - 1; i_1 < len; i_1++) {\n if (navIdx[i_1] !== this.navIdx[i_1]) {\n skipItem = true;\n break;\n }\n }\n if (skipItem) {\n continue;\n }\n }\n }\n else {\n if (navIdx.length !== 1) {\n continue;\n }\n }\n idx = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n if (ul && !isNullOrUndefined(idx)) {\n if (enable) {\n if (this.isMenu) {\n ul.children[idx].classList.remove(disabled);\n ul.children[idx].removeAttribute('aria-disabled');\n }\n else {\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 }\n else {\n if (this.isMenu) {\n ul.children[idx].classList.add(disabled);\n ul.children[idx].setAttribute('aria-disabled', 'true');\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 /**\n * This method is used to show the menu items in the Menu based on the items text.\n *\n * @param {string[]} items - Text items that needs to be shown.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.showItems = function (items, isUniqueId) {\n this.showHideItems(items, false, isUniqueId);\n };\n /**\n * This method is used to hide the menu items in the Menu based on the items text.\n *\n * @param {string[]} items - Text items that needs to be hidden.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.hideItems = function (items, isUniqueId) {\n this.showHideItems(items, true, isUniqueId);\n };\n MenuBase.prototype.showHideItems = function (items, ishide, isUniqueId) {\n var ul;\n var index;\n var navIdx;\n var item;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n index = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n item = this.getItems(navIdx);\n if (ul) {\n var validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();\n if (ishide && validUl === items[i]) {\n ul.children[index].classList.add(HIDE);\n }\n else if (!ishide && validUl === items[i]) {\n ul.children[index].classList.remove(HIDE);\n }\n }\n }\n };\n /**\n * It is used to remove the menu items from the Menu based on the items text.\n *\n * @param {string[]} items Text items that needs to be removed.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.removeItems = function (items, isUniqueId) {\n var idx;\n var navIdx;\n var iitems;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n if (!isNullOrUndefined(idx)) {\n this.removeItem(iitems, navIdx, idx);\n }\n }\n };\n /**\n * It is used to insert the menu items after the specified menu item text.\n *\n * @param {MenuItemModel[]} items - Items that needs to be inserted.\n * @param {string} text - Text item after that the element to be inserted.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.insertAfter = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId);\n };\n /**\n * It is used to insert the menu items before the specified menu item text.\n *\n * @param {MenuItemModel[]} items - Items that needs to be inserted.\n * @param {string} text - Text item before that the element to be inserted.\n * @param {boolean} isUniqueId - Set `true` if it is a unique id.\n * @returns {void}\n */\n MenuBase.prototype.insertBefore = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId, false);\n };\n MenuBase.prototype.insertItems = function (items, text, isUniqueId, isAfter) {\n if (isAfter === void 0) { isAfter = true; }\n var li;\n var idx;\n var navIdx;\n var iitems;\n var menuitem;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(text, isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n menuitem = new MenuItem(iitems[0], 'items', items[i], true);\n iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);\n var uls = this.isMenu ? [this.getWrapper()].concat(this.getPopups()) : [].slice.call(this.getWrapper().children);\n if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {\n idx = isAfter ? idx + 1 : idx;\n li = this.createItems(iitems).children[idx];\n var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];\n ul.insertBefore(li, ul.children[idx]);\n }\n }\n };\n MenuBase.prototype.removeAttributes = function () {\n var _this = this;\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 (key === 'class' && _this.element.classList.contains('e-menu-parent')) {\n _this.element.classList.remove('e-menu-parent');\n }\n if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {\n _this.element.removeAttribute(key);\n }\n if (_this.isMenu && key === 'class' && _this.element.classList.contains('e-vertical')) {\n _this.element.classList.remove('e-vertical');\n }\n });\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n MenuBase.prototype.destroy = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n this.unWireEvents();\n if (!this.isMenu) {\n this.clonedElement.style.display = '';\n if (this.clonedElement.tagName === 'EJS-CONTEXTMENU') {\n addClass([this.clonedElement], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);\n this.element = this.clonedElement;\n }\n else {\n if (this.refreshing && this.clonedElement.childElementCount && this.clonedElement.children[0].tagName === 'LI') {\n this.setProperties({ 'items': [] }, true);\n }\n if (document.getElementById(this.clonedElement.id)) {\n var refEle = this.clonedElement.nextElementSibling;\n if (refEle && refEle !== wrapper) {\n this.clonedElement.parentElement.insertBefore(this.element, refEle);\n }\n else {\n this.clonedElement.parentElement.appendChild(this.element);\n }\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\n append([].slice.call(this.clonedElement.children), this.element);\n detach(this.clonedElement);\n this.removeAttributes();\n }\n }\n this.clonedElement = null;\n }\n else {\n this.closeMenu();\n if (isBlazor() && !this.isMenu) {\n this.element = this.removeChildElement(this.element);\n }\n else {\n this.element.innerHTML = '';\n }\n this.removeAttributes();\n wrapper.parentNode.insertBefore(this.element, wrapper);\n this.clonedElement = null;\n }\n if (this.isMenu && this.clonedElement) {\n detach(this.element);\n wrapper.style.display = '';\n wrapper.classList.remove('e-' + this.getModuleName() + '-wrapper');\n wrapper.removeAttribute('data-ripple');\n }\n else {\n detach(wrapper);\n }\n _super.prototype.destroy.call(this);\n if (this.template) {\n this.clearTemplate(['template']);\n }\n }\n this.rippleFn = null;\n };\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"onOpen\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"onClose\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"created\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"cssClass\", void 0);\n __decorate([\n Property(0)\n ], MenuBase.prototype, \"hoverDelay\", void 0);\n __decorate([\n Property(false)\n ], MenuBase.prototype, \"showItemOnClick\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"filter\", void 0);\n __decorate([\n Property(null)\n ], MenuBase.prototype, \"template\", void 0);\n __decorate([\n Property(false)\n ], MenuBase.prototype, \"enableScrolling\", void 0);\n __decorate([\n Property(false)\n ], MenuBase.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)\n ], MenuBase.prototype, \"fields\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], MenuBase.prototype, \"items\", void 0);\n __decorate([\n Complex({ duration: 400, easing: 'ease', effect: 'SlideDown' }, MenuAnimationSettings)\n ], MenuBase.prototype, \"animationSettings\", void 0);\n MenuBase = __decorate([\n NotifyPropertyChanges\n ], MenuBase);\n return MenuBase;\n}(Component));\nexport { MenuBase };\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PdfComponent.vue?vue&type=style&index=0&id=d11d8384&prod&scoped=true&lang=css\"","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';\nimport { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';\nimport { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';\nimport { getRandomId, SanitizeHtmlHelper, Draggable } from '@syncfusion/ej2-base';\nimport { Toolbar } from '../toolbar/toolbar';\nvar CLS_TAB = 'e-tab';\nvar CLS_HEADER = 'e-tab-header';\nvar CLS_BLA_TEM = 'blazor-template';\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_TAB = 'e-icon-tab';\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_HOR_NAV = 'e-hor-nav';\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 CLS_HSCRCNT = 'e-hscroll-content';\nvar CLS_VSCRCNT = 'e-vscroll-content';\nvar CLS_VTAB = 'e-vertical-tab';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_VLEFT = 'e-vertical-left';\nvar CLS_VRIGHT = 'e-vertical-right';\nvar CLS_HBOTTOM = 'e-horizontal-bottom';\nvar CLS_FILL = 'e-fill-mode';\nvar TABITEMPREFIX = 'tabitem_';\nvar CLS_REORDER_ACTIVE_ITEM = 'e-reorder-active-item';\n/**\n * Objects used for configuring the Tab selecting item action properties.\n */\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 };\n/**\n * Objects used for configuring the Tab animation properties.\n */\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(null)\n ], TabItem.prototype, \"headerTemplate\", 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 __decorate([\n Property(true)\n ], TabItem.prototype, \"visible\", void 0);\n __decorate([\n Property()\n ], TabItem.prototype, \"id\", void 0);\n __decorate([\n Property(-1)\n ], TabItem.prototype, \"tabIndex\", 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 *\n * @param {TabModel} options - Specifies Tab model properties as options.\n * @param {string | HTMLElement} 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.show = {};\n _this.hide = {};\n _this.maxHeight = 0;\n _this.title = 'Close';\n _this.isInteracted = false;\n _this.lastIndex = 0;\n _this.isAdd = false;\n _this.isIconAlone = false;\n _this.draggableItems = [];\n _this.resizeContext = _this.refreshActiveTabBorder.bind(_this);\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 *\n * @returns {void}\n */\n Tab.prototype.destroy = function () {\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n if (!isNOU(this.tbObj)) {\n this.tbObj.destroy();\n this.tbObj = null;\n }\n this.unWireEvents();\n this.element.removeAttribute('aria-disabled');\n this.expTemplateContent();\n if (!this.isTemplate) {\n while (this.element.firstElementChild) {\n remove(this.element.firstElementChild);\n }\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 if (this.btnCls) {\n this.btnCls = null;\n }\n this.hdrEle = null;\n this.cntEle = null;\n this.tbItems = null;\n this.tbItem = null;\n this.tbPop = null;\n this.prevItem = null;\n this.popEle = null;\n this.bdrLine = null;\n this.content = null;\n this.dragItem = null;\n this.cloneElement = null;\n this.draggingItems = [];\n if (this.draggableItems && this.draggableItems.length > 0) {\n for (var i = 0; i < this.draggableItems.length; i++) {\n this.draggableItems[i].destroy();\n this.draggableItems[i] = null;\n }\n this.draggableItems = [];\n }\n _super.prototype.destroy.call(this);\n this.trigger('destroyed');\n };\n /**\n * Refresh the tab component\n *\n * @returns {void}\n */\n Tab.prototype.refresh = function () {\n if (this.isReact) {\n this.clearTemplate();\n }\n _super.prototype.refresh.call(this);\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Initialize component\n *\n * @private\n * @returns {void}\n */\n Tab.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.prevIndex = 0;\n this.isNested = false;\n this.isPopup = false;\n this.initRender = true;\n this.isSwiped = false;\n this.itemIndexArray = [];\n this.templateEle = [];\n if (this.allowDragAndDrop) {\n this.dragArea = !isNOU(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER);\n }\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, { 'aria-disabled': 'false' });\n this.setCssClass(this.element, css, true);\n this.updatePopAnimationConfig();\n };\n /**\n * Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n Tab.prototype.render = function () {\n var _this = this;\n this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });\n this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();\n this.renderContainer();\n this.wireEvents();\n this.initRender = false;\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n if (!isNOU(_this.tbObj)) {\n _this.tbObj.refreshOverflow();\n }\n _this.refreshActiveBorder();\n });\n }\n };\n Tab.prototype.renderContainer = function () {\n var ele = this.element;\n this.items.forEach(function (item, index) {\n if (isNOU(item.id) && !isNOU(item.setProperties)) {\n item.setProperties({ id: TABITEMPREFIX + index.toString() }, true);\n }\n });\n if (this.items.length > 0 && ele.children.length === 0) {\n ele.appendChild(this.createElement('div', { className: CLS_CONTENT }));\n this.setOrientation(this.headerPlacement, this.createElement('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 = this.createElement('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });\n var scrCnt = select('.' + this.scrCntClass, 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 hdrPlace = this.headerPlacement;\n var tabItems = [];\n this.hdrEle = this.getTabHeader();\n this.addVerticalClass();\n if (!this.isTemplate) {\n tabItems = this.parseObject(this.items, 0);\n }\n else {\n if (this.element.children.length > 1 && this.element.children[1].classList.contains(CLS_HEADER)) {\n this.setProperties({ headerPlacement: 'Bottom' }, true);\n }\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));\n }\n if (count > 0) {\n var tabItems_1 = this.createElement('div', { className: CLS_ITEMS });\n this.hdrEle.appendChild(tabItems_1);\n hdrItems.forEach(function (item, index) {\n _this.lastIndex = index;\n var attr = {\n className: CLS_ITEM, id: CLS_ITEM + _this.tabId + '_' + index\n };\n var txt = _this.createElement('span', {\n className: CLS_TEXT, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var cont = _this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML\n }).outerHTML;\n var wrap = _this.createElement('div', {\n className: CLS_WRAP, innerHTML: cont,\n attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-disabled': 'false' }\n });\n wrap.querySelector('.' + CLS_TEXT).appendChild(item);\n tabItems_1.appendChild(_this.createElement('div', attr));\n selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);\n });\n }\n }\n this.tbObj = new Toolbar({\n width: (hdrPlace === 'Left' || hdrPlace === 'Right') ? 'auto' : '100%',\n height: (hdrPlace === 'Left' || hdrPlace === 'Right') ? '100%' : 'auto',\n overflowMode: this.overflowMode,\n items: (tabItems.length !== 0) ? tabItems : [],\n clicked: this.clickHandler.bind(this),\n scrollStep: this.scrollStep,\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n cssClass: this.cssClass\n });\n this.tbObj.isStringTemplate = true;\n this.tbObj.createElement = this.createElement;\n this.tbObj.appendTo(this.hdrEle);\n attributes(this.hdrEle, { role: 'tablist' });\n if (!isNOU(this.element.getAttribute('aria-label'))) {\n this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));\n this.element.removeAttribute('aria-label');\n }\n else if (!isNOU(this.element.getAttribute('aria-labelledby'))) {\n this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));\n this.element.removeAttribute('aria-labelledby');\n }\n this.setCloseButton(this.showCloseButton);\n var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);\n if (!isNOU(toolbarHeader)) {\n if (isNOU(toolbarHeader.id) || toolbarHeader.id === '') {\n toolbarHeader.id = this.element.id + '_' + 'tab_header_items';\n }\n }\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 addClass([contents.item(i)], CLS_ITEM);\n attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + i });\n contents.item(i).id = CLS_CONTENT + this.tabId + '_' + i;\n }\n }\n }\n };\n Tab.prototype.reRenderItems = function () {\n this.renderContainer();\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n };\n Tab.prototype.parseObject = function (items, index) {\n var _this = this;\n var tbItems = Array.prototype.slice.call(selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element));\n var maxId = this.lastIndex;\n if (!this.isReplace && tbItems.length > 0) {\n var idList_1 = [];\n tbItems.forEach(function (item) {\n idList_1.push(_this.getIndexFromEle(item.id));\n });\n maxId = Math.max.apply(Math, idList_1);\n }\n var tItems = [];\n var txtWrapEle;\n var spliceArray = [];\n var i = 0;\n items.forEach(function (item, i) {\n var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n if ((isNOU(item.headerTemplate)) && (isNOU(item.header) || isNOU(item.header.text) ||\n ((item.header.text.length === 0)) && (css === ''))) {\n spliceArray.push(i);\n return;\n }\n var txt = item.headerTemplate || item.header.text;\n if (typeof txt === 'string' && _this.enableHtmlSanitizer) {\n txt = SanitizeHtmlHelper.sanitize(txt);\n }\n var itemIndex;\n if (_this.isReplace && !isNOU(_this.tbId) && _this.tbId !== '') {\n itemIndex = parseInt(_this.tbId.substring(_this.tbId.lastIndexOf('_') + 1), 10);\n _this.tbId = '';\n }\n else {\n itemIndex = index + i;\n }\n _this.lastIndex = ((tbItems.length === 0) ? i : ((_this.isReplace) ? (itemIndex) : (maxId + 1 + i)));\n var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';\n var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN : '';\n txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);\n var txtEmpty = (!isNOU(tHtml) && tHtml !== '');\n if (!isNOU(txt.tagName)) {\n txtWrapEle.appendChild(txt);\n }\n else {\n _this.headerTextCompile(txtWrapEle, txt, i);\n }\n var tEle;\n var icon = _this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tCont = _this.createElement('div', { className: CLS_TEXT_WRAP });\n tCont.appendChild(txtWrapEle);\n if ((txt !== '' && txt !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tCont.insertBefore(icon, tCont.firstElementChild);\n }\n else {\n tCont.appendChild(icon);\n }\n tEle = txtWrapEle;\n _this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrapEle : icon);\n if (tEle === icon) {\n detach(txtWrapEle);\n tCont.appendChild(icon);\n _this.isIconAlone = true;\n }\n }\n var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();\n var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };\n tCont.appendChild(_this.btnCls.cloneNode(true));\n var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });\n wrap.appendChild(tCont);\n if (_this.itemIndexArray instanceof Array) {\n _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);\n }\n var attrObj = {\n id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex, 'data-id': item.id\n };\n var tItem = { htmlAttributes: attrObj, template: wrap };\n tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden + ' '\n + ((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 i++;\n });\n if (!this.isAdd) {\n spliceArray.forEach(function (spliceItemIndex) {\n _this.items.splice(spliceItemIndex, 1);\n });\n }\n if (this.isIconAlone) {\n this.element.classList.add(CLS_ICON_TAB);\n }\n else {\n this.element.classList.remove(CLS_ICON_TAB);\n }\n return tItems;\n };\n Tab.prototype.removeActiveClass = function () {\n var tabHeader = this.getTabHeader();\n if (tabHeader) {\n var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, tabHeader);\n [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE); });\n [].slice.call(tabItems).forEach(function (node) { return node.firstElementChild.setAttribute('aria-selected', 'false'); });\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 var lastChild = tbrItems.lastChild;\n var isOverflow = false;\n if (!this.isVertical() && ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))\n || (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth))) {\n isOverflow = true;\n }\n else if (this.isVertical() && (popIcon.offsetTop < lastChild.offsetTop + lastChild.offsetHeight)) {\n isOverflow = true;\n }\n if (isOverflow) {\n ele.classList.add(CLS_TB_POPUP);\n this.tbPop.insertBefore(ele, selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);\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 target.removeAttribute('style');\n this.tbItems.appendChild(target);\n this.actEleId = target.id;\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 if (val === true) {\n trg.classList.add(CLS_CLOSE_SHOW);\n }\n else {\n trg.classList.remove(CLS_CLOSE_SHOW);\n }\n this.tbObj.refreshOverflow();\n this.refreshActiveTabBorder();\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 = {\n name: 'SlideLeftOut',\n duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing\n };\n }\n else {\n animation = null;\n }\n }\n else {\n if (this.animation.next.effect === 'SlideRightIn') {\n animation = {\n name: 'SlideRightOut',\n duration: this.animation.next.duration, timingFunction: this.animation.next.easing\n };\n }\n else {\n animation = null;\n }\n }\n return animation;\n };\n Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {\n var _this = this;\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 if (oldCnt.childNodes.length === 0 && !_this.isTemplate) {\n detach(oldCnt);\n }\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 oldCnt;\n var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);\n itemCollection.forEach(function (item) {\n if (item.id === _this.prevActiveEle) {\n oldCnt = item;\n }\n });\n var prevEle = this.tbItem[prevIndex];\n var newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNOU(oldCnt) && !isNOU(prevEle)) {\n var idNo = this.extIndex(prevEle.id);\n oldCnt = this.getTrgContent(this.cntEle, idNo);\n }\n if (!isNOU(newCnt)) {\n this.prevActiveEle = newCnt.id;\n }\n var isPrevent = isNOU(this.animation) || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)\n || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';\n if (this.initRender || value === false || isPrevent) {\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 === 0 && animationMode === 'Enable') ? 600 : 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 === 0 && animationMode === 'Enable') ? 600 : 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 && !isNOU(oldCnt)) {\n this.triggerPrevAnimation(oldCnt, prevIndex);\n }\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.selectTab(trgIndex, null, true);\n if (!isNOU(this.popEle)) {\n this.popObj.hide(this.hide);\n }\n }\n }\n };\n Tab.prototype.getTabHeader = function () {\n if (isNOU(this.element)) {\n return undefined;\n }\n var headers = [].slice.call(this.element.children).filter(function (e) { return e.classList.contains(CLS_HEADER); });\n if (headers.length > 0) {\n return headers[0];\n }\n else {\n var wrap = [].slice.call(this.element.children).filter(function (e) { return !e.classList.contains(CLS_BLA_TEM); })[0];\n if (!wrap) {\n return undefined;\n }\n return [].slice.call(wrap.children).filter(function (e) { return e.classList.contains(CLS_HEADER); })[0];\n }\n };\n Tab.prototype.getEleIndex = function (item) {\n return Array.prototype.indexOf.call(selectAll('.' + CLS_TB_ITEM, this.getTabHeader()), item);\n };\n Tab.prototype.extIndex = function (id) {\n return id.replace(CLS_ITEM + this.tabId + '_', '');\n };\n Tab.prototype.expTemplateContent = function () {\n var _this = this;\n this.templateEle.forEach(function (eleStr) {\n if (!isNOU(_this.element.querySelector(eleStr))) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n }\n });\n };\n Tab.prototype.templateCompile = function (ele, cnt, index) {\n var tempEle = this.createElement('div');\n this.compileElement(tempEle, cnt, 'content', index);\n if (tempEle.childNodes.length !== 0) {\n ele.appendChild(tempEle);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.compileElement = function (ele, val, prop, index) {\n var templateFn;\n if (typeof val === 'string') {\n val = val.trim();\n if (this.isVue) {\n templateFn = compile(SanitizeHtmlHelper.sanitize(val));\n }\n else {\n ele.innerHTML = SanitizeHtmlHelper.sanitize(val);\n }\n }\n else {\n templateFn = compile(val);\n }\n var templateFUN;\n if (!isNOU(templateFn)) {\n templateFUN = templateFn({}, this, prop);\n }\n if (!isNOU(templateFn) && templateFUN.length > 0) {\n [].slice.call(templateFUN).forEach(function (el) {\n ele.appendChild(el);\n });\n }\n };\n Tab.prototype.headerTextCompile = function (element, text, index) {\n this.compileElement(element, text, 'headerTemplate', index);\n };\n Tab.prototype.getContent = function (ele, cnt, callType, index) {\n var eleStr;\n cnt = isNOU(cnt) ? '' : cnt;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\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, index);\n }\n }\n else {\n this.templateCompile(ele, cnt, index);\n }\n }\n else {\n ele.appendChild(cnt);\n }\n if (!isNOU(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\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 + this.tabId + '_' + no, this.element);\n }\n else {\n ele = this.findEle(cntEle.children, CLS_CONTENT + this.tabId + '_' + 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.isVertical = function () {\n var isVertical = (this.headerPlacement === 'Left' || this.headerPlacement === 'Right') ? true : false;\n this.scrCntClass = (isVertical) ? CLS_VSCRCNT : CLS_HSCRCNT;\n return isVertical;\n };\n Tab.prototype.addVerticalClass = function () {\n if (this.isVertical()) {\n var tbPos = (this.headerPlacement === 'Left') ? CLS_VLEFT : CLS_VRIGHT;\n addClass([this.hdrEle], [CLS_VERTICAL, tbPos]);\n if (!this.element.classList.contains(CLS_NEST)) {\n addClass([this.element], [CLS_VTAB, tbPos]);\n }\n else {\n addClass([this.hdrEle], [CLS_VTAB, tbPos]);\n }\n }\n if (this.headerPlacement === 'Bottom') {\n addClass([this.hdrEle], [CLS_HBOTTOM]);\n }\n };\n Tab.prototype.updatePopAnimationConfig = function () {\n this.show = { name: (this.isVertical() ? 'FadeIn' : 'SlideDown'), duration: 100 };\n this.hide = { name: (this.isVertical() ? 'FadeOut' : 'SlideUp'), duration: 100 };\n };\n Tab.prototype.changeOrientation = function (place) {\n this.setOrientation(place, this.hdrEle);\n var activeTab = this.hdrEle.querySelector('.' + CLS_ACTIVE);\n var isVertical = this.hdrEle.classList.contains(CLS_VERTICAL) ? true : false;\n removeClass([this.element], [CLS_VTAB]);\n removeClass([this.hdrEle], [CLS_VERTICAL, CLS_VLEFT, CLS_VRIGHT]);\n if (isVertical !== this.isVertical()) {\n this.changeToolbarOrientation();\n if (!isNOU(activeTab) && activeTab.classList.contains(CLS_TB_POPUP)) {\n this.popupHandler(activeTab);\n }\n }\n this.addVerticalClass();\n this.setActiveBorder();\n this.focusItem();\n };\n Tab.prototype.focusItem = function () {\n var curActItem = select(' #' + CLS_ITEM + this.tabId + '_' + this.selectedItem, this.hdrEle);\n if (!isNOU(curActItem)) {\n curActItem.firstElementChild.focus();\n }\n };\n Tab.prototype.changeToolbarOrientation = function () {\n this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);\n this.tbObj.changeOrientation();\n this.updatePopAnimationConfig();\n };\n Tab.prototype.setOrientation = function (place, ele) {\n var headerPos = Array.prototype.indexOf.call(this.element.children, ele);\n var contentPos = Array.prototype.indexOf.call(this.element.children, this.element.querySelector('.' + CLS_CONTENT));\n if (place === 'Bottom' && (contentPos > headerPos)) {\n this.element.appendChild(ele);\n }\n else {\n removeClass([ele], [CLS_HBOTTOM]);\n this.element.insertBefore(ele, select('.' + CLS_CONTENT, this.element));\n }\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 (this.element.classList.contains(CLS_FILL)) {\n removeClass([this.element], [CLS_FILL]);\n }\n if (isNOU(this.cntEle)) {\n return;\n }\n var hdrEle = this.getTabHeader();\n if (this.heightAdjustMode === 'None') {\n if (this.height === 'auto') {\n return;\n }\n else {\n if (!this.isVertical()) {\n setStyle(this.cntEle, { 'height': (this.element.clientHeight - hdrEle.offsetHeight) + 'px' });\n }\n }\n }\n else if (this.heightAdjustMode === 'Fill') {\n addClass([this.element], [CLS_FILL]);\n setStyle(this.element, { 'height': '100%' });\n this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';\n }\n else if (this.heightAdjustMode === 'Auto') {\n if (this.isTemplate === true) {\n var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);\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(this.createElement('div', {\n id: (CLS_CONTENT + this.tabId + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + 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, this.items[i].content, 'clone', i);\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n }\n if (this.isReact) {\n this.clearTemplate(['content']);\n }\n this.templateEle = [];\n this.getContent(ele, this.items[0].content, 'render', 0);\n if (this.prevIndex !== this.selectedItem) {\n ele.classList.remove(CLS_ACTIVE);\n }\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 trgHdrEle = this.getTabHeader();\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);\n if (isNOU(trg)) {\n return;\n }\n if (!this.reorderActiveTab) {\n if (trg.classList.contains(CLS_TB_POPUP) && !this.bdrLine.classList.contains(CLS_HIDDEN)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n if (trgHdrEle && !trgHdrEle.classList.contains(CLS_REORDER_ACTIVE_ITEM)) {\n trgHdrEle.classList.add(CLS_REORDER_ACTIVE_ITEM);\n }\n }\n else if (trgHdrEle) {\n trgHdrEle.classList.remove(CLS_REORDER_ACTIVE_ITEM);\n }\n var root = closest(trg, '.' + CLS_TAB);\n if (this.element !== root) {\n return;\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, trgHdrEle);\n var bar = select('.' + CLS_INDICATOR, trgHdrEle);\n var scrollCnt = select('.' + CLS_TB_ITEMS + ' .' + this.scrCntClass, trgHdrEle);\n if (this.isVertical()) {\n setStyle(bar, { 'left': '', 'right': '' });\n var tbHeight = (isNOU(scrollCnt)) ? this.tbItems.offsetHeight : scrollCnt.offsetHeight;\n if (tbHeight !== 0) {\n setStyle(bar, { 'top': trg.offsetTop + 'px', 'height': trg.offsetHeight + 'px' });\n }\n else {\n setStyle(bar, { 'top': 0, 'height': 0 });\n }\n }\n else {\n if (this.overflowMode === 'MultiRow') {\n var top_1 = this.headerPlacement === 'Bottom' ? trg.offsetTop : trg.offsetHeight + trg.offsetTop;\n setStyle(bar, { 'top': top_1 + 'px', 'height': '' });\n }\n else {\n setStyle(bar, { 'top': '', 'height': '' });\n }\n var tbWidth = (isNOU(scrollCnt)) ? this.tbItems.offsetWidth : scrollCnt.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 }\n if (!isNOU(this.bdrLine) && !trg.classList.contains(CLS_TB_POPUP)) {\n this.bdrLine.classList.remove(CLS_HIDDEN);\n }\n };\n Tab.prototype.setActive = function (value, skipDataBind, isInteracted) {\n if (skipDataBind === void 0) { skipDataBind = false; }\n if (isInteracted === void 0) { isInteracted = false; }\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n var trg = this.tbItem[value];\n if (value < 0 || isNaN(value) || this.tbItem.length === 0 || !isNOU(trg) && trg.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (value >= 0 && !skipDataBind) {\n this.allowServerDataBinding = false;\n this.setProperties({ selectedItem: value }, true);\n this.allowServerDataBinding = true;\n if (!this.initRender) {\n this.serverDataBind();\n }\n }\n if (trg.classList.contains(CLS_ACTIVE)) {\n this.setActiveBorder();\n return;\n }\n if (!this.isTemplate) {\n attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass();\n trg.classList.add(CLS_ACTIVE);\n trg.firstElementChild.setAttribute('aria-selected', 'true');\n var no = Number(this.extIndex(id));\n if (isNOU(this.prevActiveEle)) {\n this.prevActiveEle = CLS_CONTENT + this.tabId + '_' + no;\n }\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 + this.tabId + '_' + 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(this.createElement('div', {\n id: CLS_CONTENT + this.tabId + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + this.extIndex(id) }\n }));\n var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));\n var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, id);\n this.getContent(eleTrg, this.items[itemIndex].content, 'render', itemIndex);\n }\n else {\n item.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n this.setActiveBorder();\n this.refreshItemVisibility(trg);\n if (!this.initRender && !skipDataBind) {\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: trg,\n selectedIndex: value,\n selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),\n isSwiped: this.isSwiped,\n isInteracted: isInteracted,\n preventFocus: false\n };\n this.trigger('selected', eventArg, function (selectEventArgs) {\n if (!selectEventArgs.preventFocus) {\n trg.firstElementChild.focus();\n }\n });\n }\n };\n Tab.prototype.setItems = function (items) {\n this.isReplace = true;\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\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.showPopup = function (config) {\n var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);\n if (tbPop && tbPop.classList.contains('e-popup-close')) {\n var tbPopObj = (tbPop && tbPop.ej2_instances[0]);\n tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';\n tbPopObj.dataBind();\n tbPopObj.show(config);\n }\n };\n Tab.prototype.bindDraggable = function () {\n var _this = this;\n if (this.allowDragAndDrop) {\n var tabHeader = this.element.querySelector('.' + CLS_HEADER);\n if (tabHeader) {\n var items = Array.prototype.slice.call(tabHeader.querySelectorAll('.' + CLS_TB_ITEM));\n items.forEach(function (element) {\n _this.initializeDrag(element);\n });\n }\n }\n };\n Tab.prototype.wireEvents = function () {\n this.bindDraggable();\n window.addEventListener('resize', this.resizeContext);\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 if (!isNOU(this.keyModule)) {\n this.keyModule.destroy();\n }\n if (!isNOU(this.tabKeyModule)) {\n this.tabKeyModule.destroy();\n }\n if (!isNOU(this.cntEle) && !isNOU(this.touchModule)) {\n this.touchModule.destroy();\n this.touchModule = null;\n }\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'keydown', this.spaceKeyDown);\n this.element.classList.remove(CLS_RTL);\n this.element.classList.remove(CLS_FOCUS);\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 if (this.isVertical() && closest(trg, '.' + CLS_HOR_NAV)) {\n this.showPopup(this.show);\n }\n else {\n this.isPopup = false;\n if (!isNOU(trgParent) && (trgIndex !== this.selectedItem)) {\n this.selectTab(trgIndex, args.originalEvent, true);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {\n return;\n }\n if (this.isNested) {\n this.element.setAttribute('data-swipe', 'true');\n }\n var nestedTab = this.element.querySelector('[data-swipe=\"true\"]');\n if (nestedTab) {\n nestedTab.removeAttribute('data-swipe');\n return;\n }\n this.isSwiped = true;\n if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {\n for (var k = this.selectedItem - 1; k >= 0; k--) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.selectTab(k, null, true);\n break;\n }\n }\n }\n else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {\n for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {\n this.selectTab(i, null, true);\n break;\n }\n }\n }\n this.isSwiped = 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 tabHeader = this.getTabHeader();\n var actEle = select('.' + CLS_ACTIVE, tabHeader);\n this.popEle = select('.' + CLS_TB_POP, tabHeader);\n if (!isNOU(this.popEle)) {\n this.popObj = this.popEle.ej2_instances[0];\n }\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\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 this.showPopup(this.show);\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', trg.getAttribute('data-tabindex'));\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n if (!isNOU(actEle) && actEle.children.item(0).getAttribute('tabindex') === '-1') {\n actEle.children.item(0).setAttribute('tabindex', '0');\n }\n break;\n case 'moveLeft':\n case 'moveRight':\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 if (this.showCloseButton === true && !isNOU(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstElementChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!this.isVertical() && !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.getIndexFromEle = function (id) {\n return parseInt(id.substring(id.lastIndexOf('_') + 1), 10);\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 Tab.prototype.evalOnPropertyChangeItems = function (newProp, oldProp) {\n var _this = this;\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 properties = Object.keys(newProp.items[index]);\n for (var j = 0; j < properties.length; j++) {\n var oldVal = Object(oldProp.items[index])[properties[j]];\n var newVal = Object(newProp.items[index])[properties[j]];\n var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];\n var itemIndex = void 0;\n if (hdr && !isNOU(hdr.id) && hdr.id !== '') {\n itemIndex = this.getIndexFromEle(hdr.id);\n }\n else {\n itemIndex = index;\n }\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + itemIndex, this.element);\n var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + itemIndex, this.element);\n if (properties[j] === 'header' || properties[j] === 'headerTemplate') {\n var icon = (isNOU(this.items[index].header) ||\n isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;\n var textVal = this.items[index].headerTemplate || this.items[index].header.text;\n if (properties[j] === 'headerTemplate') {\n this.clearTabTemplate(hdrItem, properties[j], CLS_TB_ITEM);\n }\n if ((textVal === '') && (icon === '')) {\n this.removeTab(index);\n }\n else {\n this.tbId = hdr.id;\n var arr = [];\n arr.push(this.items[index]);\n this.items.splice(index, 1);\n this.itemIndexArray.splice(index, 1);\n this.tbObj.items.splice(index, 1);\n var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);\n detach(hdrItem);\n this.isReplace = true;\n this.addTab(arr, index);\n if (isHiddenEle) {\n this.hideTab(index);\n }\n this.isReplace = false;\n }\n }\n if (properties[j] === 'content' && !isNOU(cntItem)) {\n var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);\n if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {\n var eleVal = document.querySelector(newVal);\n cntItem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else if (newVal === '' && oldVal[0] === '#') {\n document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';\n cntItem.innerHTML = newVal;\n }\n else if (this.isAngular || this.isReact) {\n this.clearTabTemplate(cntItem, properties[j], CLS_ITEM);\n cntItem.innerHTML = '';\n this.templateCompile(cntItem, newVal, index);\n }\n else if (typeof newVal !== 'function') {\n cntItem.innerHTML = newVal;\n }\n }\n if (properties[j] === '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 (properties[j] === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n if (properties[j] === 'visible') {\n this.hideTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshActiveTabBorder();\n });\n }\n }\n else {\n this.lastIndex = 0;\n if (isNOU(this.tbObj)) {\n this.reRenderItems();\n }\n else {\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n this.setItems(newProp.items);\n if (this.templateEle.length > 0) {\n this.expTemplateContent();\n }\n this.templateEle = [];\n var selectElement = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n while (selectElement.firstElementChild) {\n detach(selectElement.firstElementChild);\n }\n this.select(this.selectedItem);\n this.draggableItems = [];\n this.bindDraggable();\n }\n }\n };\n Tab.prototype.clearTabTemplate = function (templateEle, templateName, className) {\n if (!this.clearTemplates) {\n return;\n }\n if (this.registeredTemplate && this.registeredTemplate[templateName]) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[templateName].length; index++) {\n var registeredItem = registeredTemplates[templateName][index].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate([templateName], [registeredTemplates[templateName][index]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[index];\n var closestItem = closest(portalItem.containerInfo, '.' + className);\n if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {\n this.clearTemplate([templateName], index);\n break;\n }\n }\n }\n };\n Tab.prototype.initializeDrag = function (target) {\n var _this = this;\n var dragObj = new Draggable(target, {\n dragArea: this.dragArea,\n dragTarget: '.' + CLS_TB_ITEM,\n clone: true,\n helper: this.helper.bind(this),\n dragStart: this.itemDragStart.bind(this),\n drag: function (e) {\n var dragIndex = _this.getEleIndex(_this.dragItem);\n var dropIndex;\n var dropItem;\n var dragArgs = {\n draggedItem: _this.dragItem,\n event: e.event,\n target: e.target,\n droppedItem: e.target.closest('.' + CLS_TB_ITEM),\n clonedElement: _this.cloneElement,\n index: dragIndex\n };\n if (!isNOU(e.target.closest('.' + CLS_TAB)) && !e.target.closest('.' + CLS_TAB).isEqualNode(_this.element) &&\n _this.dragArea !== '.' + CLS_HEADER) {\n _this.trigger('dragging', dragArgs);\n }\n else {\n if (!(e.target.closest(_this.dragArea)) && _this.overflowMode !== 'Popup') {\n document.body.style.cursor = 'not-allowed';\n addClass([_this.cloneElement], CLS_HIDDEN);\n if (_this.dragItem.classList.contains(CLS_HIDDEN)) {\n removeClass([_this.dragItem], CLS_HIDDEN);\n }\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';\n }\n else {\n document.body.style.cursor = '';\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';\n if (_this.cloneElement.classList.contains(CLS_HIDDEN)) {\n removeClass([_this.cloneElement], CLS_HIDDEN);\n }\n }\n if (_this.overflowMode === 'Scrollable' && !isNOU(_this.element.querySelector('.e-hscroll'))) {\n var scrollRightNavEle = _this.element.querySelector('.e-scroll-right-nav');\n var scrollLeftNavEle = _this.element.querySelector('.e-scroll-left-nav');\n var hscrollBar = _this.element.querySelector('.e-hscroll-bar');\n if (!isNOU(scrollRightNavEle) && Math.abs((scrollRightNavEle.offsetWidth / 2) +\n scrollRightNavEle.offsetLeft) > _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {\n hscrollBar.scrollLeft -= 10;\n }\n if (!isNOU(scrollLeftNavEle) && Math.abs((scrollLeftNavEle.offsetLeft + scrollLeftNavEle.offsetWidth) -\n _this.cloneElement.offsetLeft) > (scrollLeftNavEle.offsetWidth / 2)) {\n hscrollBar.scrollLeft += 10;\n }\n }\n _this.cloneElement.style.pointerEvents = 'none';\n dropItem = closest(e.target, '.' + CLS_TB_ITEM + '.e-draggable');\n var scrollContentWidth = 0;\n if (_this.overflowMode === 'Scrollable' && !isNOU(_this.element.querySelector('.e-hscroll'))) {\n scrollContentWidth = _this.element.querySelector('.e-hscroll-content').offsetWidth;\n }\n if (dropItem != null && !dropItem.isSameNode(_this.dragItem) &&\n dropItem.closest('.' + CLS_TAB).isSameNode(_this.dragItem.closest('.' + CLS_TAB))) {\n dropIndex = _this.getEleIndex(dropItem);\n if (dropIndex < dragIndex &&\n (Math.abs((dropItem.offsetLeft + dropItem.offsetWidth) -\n _this.cloneElement.offsetLeft) > (dropItem.offsetWidth / 2))) {\n _this.dragAction(dropItem, dragIndex, dropIndex);\n }\n if (dropIndex > dragIndex &&\n (Math.abs(dropItem.offsetWidth / 2) + dropItem.offsetLeft -\n scrollContentWidth) < _this.cloneElement.offsetLeft + _this.cloneElement.offsetWidth) {\n _this.dragAction(dropItem, dragIndex, dropIndex);\n }\n }\n _this.droppedIndex = _this.getEleIndex(_this.dragItem);\n _this.trigger('dragging', dragArgs);\n }\n },\n dragStop: this.itemDragStop.bind(this)\n });\n this.draggableItems.push(dragObj);\n };\n Tab.prototype.helper = function (e) {\n this.cloneElement = this.createElement('div');\n if (e.element) {\n this.cloneElement = (e.element.cloneNode(true));\n addClass([this.cloneElement], 'e-tab-clone-element');\n if (this.element.querySelector('.' + CLS_HEADER).classList.contains(CLS_CLOSE_SHOW)) {\n addClass([this.cloneElement], CLS_CLOSE_SHOW);\n }\n removeClass([this.cloneElement.querySelector('.' + CLS_WRAP)], 'e-ripple');\n if (!isNOU(this.cloneElement.querySelector('.e-ripple-element'))) {\n remove(this.cloneElement.querySelector('.e-ripple-element'));\n }\n document.body.appendChild(this.cloneElement);\n }\n return this.cloneElement;\n };\n Tab.prototype.itemDragStart = function (e) {\n var _this = this;\n this.draggingItems = this.items.map(function (x) { return x; });\n this.dragItem = e.element;\n var dragArgs = {\n draggedItem: e.element,\n event: e.event,\n target: e.target,\n droppedItem: null,\n index: this.getEleIndex(this.dragItem),\n clonedElement: this.cloneElement,\n cancel: false\n };\n this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {\n if (tabItemDragArgs.cancel) {\n var dragObj = e.element.ej2_instances[0];\n if (!isNullOrUndefined(dragObj)) {\n dragObj.intDestroy(e.event);\n }\n detach(_this.cloneElement);\n }\n else {\n _this.removeActiveClass();\n addClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN);\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'hidden';\n }\n });\n };\n Tab.prototype.dragAction = function (dropItem, dragsIndex, dropIndex) {\n if (this.items.length > 0) {\n var item = this.draggingItems[dragsIndex];\n this.draggingItems.splice(dragsIndex, 1);\n this.draggingItems.splice(dropIndex, 0, item);\n }\n if (this.overflowMode === 'MultiRow') {\n dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);\n }\n if (dragsIndex > dropIndex) {\n if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {\n if (this.overflowMode === 'Extended') {\n if (dropItem.isSameNode(dropItem.parentElement.lastChild)) {\n var popupContainer = this.dragItem.parentNode;\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n popupContainer.insertBefore(dropItem.parentElement.lastChild, popupContainer.childNodes[0]);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement.lastChild), this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n else {\n var lastEle = (dropItem.parentElement).lastChild;\n if (dropItem.isSameNode(lastEle)) {\n var popupContainer = this.dragItem.parentNode;\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n popupContainer.insertBefore(lastEle, popupContainer.childNodes[0]);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n }\n else {\n this.dragItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n if (dragsIndex < dropIndex) {\n if (!(this.dragItem.parentElement).isSameNode(dropItem.parentElement)) {\n if (this.overflowMode === 'Extended') {\n this.dragItem.parentElement.appendChild(dropItem.parentElement.firstElementChild);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem.nextSibling);\n }\n else {\n this.dragItem.parentNode.insertBefore((dropItem.parentElement).lastChild, this.dragItem.parentElement.childNodes[0]);\n dropItem.parentNode.insertBefore(this.dragItem, dropItem);\n }\n }\n else {\n this.dragItem.parentNode.insertBefore(this.dragItem, dropItem.nextElementSibling);\n }\n }\n };\n Tab.prototype.itemDragStop = function (e) {\n var _this = this;\n detach(this.cloneElement);\n this.cloneElement = null;\n this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';\n document.body.style.cursor = '';\n var dragStopArgs = {\n draggedItem: this.dragItem,\n event: e.event,\n target: e.target,\n droppedItem: this.tbItem[this.droppedIndex],\n clonedElement: null,\n index: this.droppedIndex,\n cancel: false\n };\n this.trigger('dragged', dragStopArgs, function (tabItemDropArgs) {\n if (tabItemDropArgs.cancel) {\n _this.refresh();\n }\n else {\n if (_this.items.length > 0 && _this.draggingItems.length > 0) {\n _this.items = _this.draggingItems;\n _this.selectedItem = _this.droppedIndex;\n _this.refresh();\n }\n else {\n _this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = '';\n removeClass([_this.tbItems.querySelector('.' + CLS_INDICATOR)], CLS_HIDDEN);\n _this.selectTab(_this.droppedIndex, null, true);\n }\n }\n });\n this.dragItem = null;\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n *\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.firstElementChild.setAttribute('tabindex', tbItems.firstElementChild.getAttribute('data-tabindex'));\n }\n else {\n tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstElementChild.removeAttribute('tabindex');\n if (tbItems.classList.contains(CLS_ACTIVE)) {\n this.select(index + 1);\n }\n }\n if (!isNOU(this.items[index])) {\n this.items[index].disabled = !value;\n this.dataBind();\n }\n tbItems.firstElementChild.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n *\n * @param {TabItemModel[]} 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 var addArgs = { addedItems: items, cancel: false };\n if (!this.isReplace) {\n this.trigger('adding', addArgs, function (tabAddingArgs) {\n if (!tabAddingArgs.cancel) {\n _this.addingTabContent(items, index);\n }\n });\n }\n else {\n this.addingTabContent(items, index);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.addingTabContent = function (items, index) {\n var _this = this;\n var lastEleIndex = 0;\n this.hdrEle = select('.' + CLS_HEADER, this.element);\n if (isNOU(this.hdrEle)) {\n this.items = items;\n this.reRenderItems();\n this.bindDraggable();\n }\n else {\n var itemsCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;\n if (itemsCount !== 0) {\n lastEleIndex = this.lastIndex + 1;\n }\n if (isNOU(index)) {\n index = itemsCount - 1;\n }\n if (itemsCount < index || index < 0 || isNaN(index)) {\n return;\n }\n if (itemsCount === 0 && !isNOU(this.hdrEle)) {\n this.hdrEle.style.display = '';\n }\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\n this.isAdd = true;\n var tabItems_2 = this.parseObject(items, index);\n this.isAdd = false;\n var i_1 = 0;\n var textValue_1;\n items.forEach(function (item, place) {\n textValue_1 = item.headerTemplate || item.header.text;\n if (!(isNOU(item.headerTemplate || item.header) || isNOU(textValue_1) ||\n (textValue_1.length === 0) && !isNOU(item.header) && isNOU(item.header.iconCss))) {\n if (tabItems_2[place]) {\n if (isNOU(item.id)) {\n item.id = CLS_ITEM + _this.tabId + '_' + TABITEMPREFIX + (lastEleIndex + place).toString();\n }\n tabItems_2[place].htmlAttributes['data-id'] = item.id;\n }\n _this.items.splice((index + i_1), 0, item);\n i_1++;\n }\n if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {\n var no = lastEleIndex + place;\n var ele = _this.createElement('div', {\n id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + no }\n });\n _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);\n var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());\n _this.getContent(eleTrg, item.content, 'render', index);\n }\n });\n this.tbObj.addItems(tabItems_2, index);\n if (!this.isReplace) {\n this.trigger('added', { addedItems: items });\n }\n if (this.selectedItem === index) {\n this.select(index);\n }\n else {\n this.setActiveBorder();\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n }\n this.bindDraggable();\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n *\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 _this = this;\n var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(trg)) {\n return;\n }\n var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };\n this.trigger('removing', removeArgs, function (tabRemovingArgs) {\n if (!tabRemovingArgs.cancel) {\n var header = select('#' + CLS_ITEM + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_TB_ITEMS, _this.element));\n if (!isNOU(header)) {\n _this.clearTabTemplate(header, 'headerTemplate', CLS_TB_ITEM);\n }\n _this.tbObj.removeItems(index);\n if (_this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(_this.itemIndexArray, trg.id))) {\n index = Array.prototype.indexOf.call(_this.itemIndexArray, trg.id);\n }\n var targetEleIndex = _this.itemIndexArray.indexOf(trg.id);\n _this.items.splice(targetEleIndex, 1);\n _this.itemIndexArray.splice(targetEleIndex, 1);\n _this.refreshActiveBorder();\n var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));\n if (!isNOU(cntTrg)) {\n _this.clearTabTemplate(cntTrg, 'content', CLS_ITEM);\n detach(cntTrg);\n }\n _this.trigger('removed', tabRemovingArgs);\n if (_this.draggableItems && _this.draggableItems.length > 0) {\n _this.draggableItems[index].destroy();\n _this.draggableItems[index] = null;\n _this.draggableItems.splice(index, 1);\n }\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.selectedItem = index;\n _this.select(index);\n }\n else if (index !== _this.selectedItem) {\n if (index < _this.selectedItem) {\n index = _this.itemIndexArray.indexOf(_this.tbItem[_this.selectedItem].id);\n _this.setProperties({ selectedItem: index > -1 ? index : _this.selectedItem }, true);\n _this.prevIndex = _this.selectedItem;\n }\n _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());\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 };\n /**\n * Shows or hides the Tab that is in the specified index.\n *\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 items;\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 items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN + ')', this.tbItems);\n if (items.length !== 0 && item.classList.contains(CLS_ACTIVE)) {\n if (index !== 0) {\n for (var i = index - 1; i >= 0; i--) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {\n this.select(i);\n break;\n }\n else if (i === 0) {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\n break;\n }\n }\n }\n }\n }\n else {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\n break;\n }\n }\n }\n }\n else if (items.length === 0) {\n this.element.classList.add(CLS_HIDDEN);\n }\n }\n else {\n this.element.classList.remove(CLS_HIDDEN);\n items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN + ')', this.tbItems);\n item.classList.remove(CLS_HIDDEN);\n if (items.length === 0) {\n this.select(index);\n }\n }\n this.setActiveBorder();\n if (!isNullOrUndefined(item.firstElementChild)) {\n item.firstElementChild.setAttribute('aria-hidden', '' + value);\n }\n if (this.overflowMode === 'Popup' && this.tbObj) {\n this.tbObj.refreshOverflow();\n }\n };\n Tab.prototype.selectTab = function (args, event, isInteracted) {\n if (event === void 0) { event = null; }\n if (isInteracted === void 0) { isInteracted = false; }\n this.isInteracted = isInteracted;\n this.select(args, event);\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n *\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @param {Event} event - An event which takes place in DOM.\n * @returns {void}\n */\n Tab.prototype.select = function (args, event) {\n var _this = this;\n var tabHeader = this.getTabHeader();\n this.tbItems = select('.' + CLS_TB_ITEMS, tabHeader);\n this.tbItem = selectAll('.' + CLS_TB_ITEM, tabHeader);\n this.content = select('.' + CLS_CONTENT, this.element);\n this.prevItem = this.tbItem[this.prevIndex];\n if (isNOU(this.selectedItem) || (this.selectedItem < 0) || (this.tbItem.length <= this.selectedItem) || isNaN(this.selectedItem)) {\n this.selectedItem = 0;\n }\n else {\n this.selectedID = this.extIndex(this.tbItem[this.selectedItem].id);\n }\n var trg = this.tbItem[args];\n if (isNOU(trg)) {\n this.selectedID = '0';\n }\n else {\n this.selectingID = this.extIndex(trg.id);\n }\n if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {\n this.prevItem.children.item(0).setAttribute('tabindex', this.prevItem.firstElementChild.getAttribute('tabindex'));\n }\n var eventArg = {\n event: event,\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: this.tbItem[this.selectedItem],\n selectedIndex: this.selectedItem,\n selectedContent: !isNOU(this.content) ?\n select('#' + CLS_CONTENT + this.tabId + '_' + this.selectedID, this.content) : null,\n selectingItem: trg,\n selectingIndex: args,\n selectingContent: !isNOU(this.content) ?\n select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,\n isSwiped: this.isSwiped,\n isInteracted: this.isInteracted,\n cancel: false\n };\n if (!this.initRender) {\n this.trigger('selecting', eventArg, function (selectArgs) {\n if (!selectArgs.cancel) {\n _this.selectingContent(args, _this.isInteracted);\n }\n });\n }\n else {\n this.selectingContent(args, this.isInteracted);\n }\n this.isInteracted = false;\n };\n Tab.prototype.selectingContent = function (args, isInteracted) {\n if (typeof args === 'number') {\n if (!isNOU(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE) ||\n this.tbItem[args].classList.contains(CLS_HIDDEN))) {\n for (var i = args + 1; i < this.items.length; i++) {\n if (this.items[i].disabled === false && this.items[i].visible === true) {\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 this.prevItem = this.tbItem[this.prevIndex];\n if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {\n this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);\n if ((!isNOU(this.items) && this.items.length > 0) && this.allowDragAndDrop) {\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var item = this.items[args];\n this.items.splice(args, 1);\n this.items.splice(this.tbItem.length - 1, 0, item);\n var itemId = this.itemIndexArray[args];\n this.itemIndexArray.splice(args, 1);\n this.itemIndexArray.splice(this.tbItem.length - 1, 0, itemId);\n }\n }\n else {\n this.setActive(args, null, isInteracted);\n }\n }\n else {\n this.setActive(0, null, isInteracted);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args), null, isInteracted);\n }\n };\n /**\n * Gets the item index from the Tab.\n *\n * @param {string} tabItemId - Item ID is used for getting index from the Tab.\n * @returns {number} - It returns item index.\n */\n Tab.prototype.getItemIndex = function (tabItemId) {\n var tabIndex;\n for (var i = 0; i < this.tbItem.length; i++) {\n var value = this.tbItem[i].getAttribute('data-id');\n if (tabItemId === value) {\n tabIndex = i;\n break;\n }\n }\n return tabIndex;\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n *\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 *\n * @returns {string} - It returns the persisted state.\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\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 *\n * @param {TabModel} newProp - It contains the new value of data.\n * @param {TabModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\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 var headerEle = this.element.querySelector('.' + CLS_HEADER);\n if (oldProp.cssClass !== '' && !isNullOrUndefined(oldProp.cssClass)) {\n this.setCssClass(this.element, oldProp.cssClass, false);\n this.setCssClass(this.element, newProp.cssClass, true);\n if (!isNullOrUndefined(headerEle)) {\n this.setCssClass(headerEle, oldProp.cssClass, false);\n this.setCssClass(headerEle, newProp.cssClass, true);\n }\n }\n else {\n this.setCssClass(this.element, newProp.cssClass, true);\n if (!isNullOrUndefined(headerEle)) {\n this.setCssClass(headerEle, newProp.cssClass, true);\n }\n }\n break;\n case 'items':\n this.evalOnPropertyChangeItems(newProp, oldProp);\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'reorderActiveTab':\n this.refreshActiveTabBorder();\n break;\n case 'selectedItem':\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n break;\n case 'headerPlacement':\n this.changeOrientation(newProp.headerPlacement);\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.refreshActiveTabBorder();\n break;\n case 'heightAdjustMode':\n this.setContentHeight(false);\n this.select(this.selectedItem);\n break;\n case 'scrollStep':\n if (this.tbObj) {\n this.tbObj.scrollStep = this.scrollStep;\n }\n break;\n case 'allowDragAndDrop':\n this.bindDraggable();\n break;\n case 'dragArea':\n if (this.allowDragAndDrop) {\n this.draggableItems.forEach(function (item) {\n item.dragArea = _this.dragArea;\n });\n this.refresh();\n }\n break;\n }\n }\n };\n /**\n * To refresh the active tab contents.\n *\n * @returns {void}\n */\n Tab.prototype.refreshActiveTab = function () {\n if (this.isReact && this.isTemplate) {\n this.clearTemplate();\n }\n if (!this.isTemplate) {\n if (this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE)) {\n detach(this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).children[0]);\n detach(this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0]);\n var item = this.items[this.selectedItem];\n var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n var text = item.headerTemplate || item.header.text;\n var txtWrap = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n if (!isNOU(text.tagName)) {\n txtWrap.appendChild(text);\n }\n else {\n this.headerTextCompile(txtWrap, text, this.selectedItem);\n }\n var tEle = void 0;\n var icon = this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tConts = this.createElement('div', { className: CLS_TEXT_WRAP });\n tConts.appendChild(txtWrap);\n if ((text !== '' && text !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tConts.insertBefore(icon, tConts.firstElementChild);\n }\n else {\n tConts.appendChild(icon);\n }\n tEle = txtWrap;\n this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrap : icon);\n if (tEle === icon) {\n detach(txtWrap);\n tConts.appendChild(icon);\n this.isIconAlone = true;\n }\n }\n var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();\n var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };\n tConts.appendChild(this.btnCls.cloneNode(true));\n var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });\n wraper.appendChild(tConts);\n if (pos === 'top' || pos === 'bottom') {\n this.element.classList.add('e-vertical-icon');\n }\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wraper);\n var crElem = this.createElement('div');\n var cnt = item.content;\n var eleStr = void 0;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n crElem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n crElem.appendChild(cnt);\n }\n if (!isNOU(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\n }\n this.element.querySelector('.' + CLS_ITEM + '.' + CLS_ACTIVE).appendChild(crElem);\n }\n }\n else {\n var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);\n var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE);\n var index = this.getIndexFromEle(element.id);\n var header = element.innerText;\n var detachContent = this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0];\n var mainContents = detachContent.innerHTML;\n detach(element);\n detach(detachContent);\n var attr = {\n className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE + ' ' + CLS_ACTIVE, id: CLS_ITEM + this.tabId + '_' + index\n };\n var txtString = this.createElement('span', {\n className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var conte = this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML\n }).outerHTML;\n var tabIndex = element.firstElementChild.getAttribute('data-tabindex');\n var wrap = this.createElement('div', {\n className: CLS_WRAP, innerHTML: conte,\n attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index, 'aria-selected': 'true', 'aria-disabled': 'false' }\n });\n tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);\n var crElem = this.createElement('div', { innerHTML: mainContents });\n this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).appendChild(crElem);\n }\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * To refresh the active tab indicator.\n *\n * @returns {void}\n */\n Tab.prototype.refreshActiveTabBorder = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);\n if (!isNOU(activeEle) && this.reorderActiveTab) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\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('Dynamic')\n ], Tab.prototype, \"loadOn\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"showCloseButton\", void 0);\n __decorate([\n Property(true)\n ], Tab.prototype, \"reorderActiveTab\", void 0);\n __decorate([\n Property()\n ], Tab.prototype, \"scrollStep\", void 0);\n __decorate([\n Property()\n ], Tab.prototype, \"dragArea\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property(true)\n ], Tab.prototype, \"clearTemplates\", 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, \"onDragStart\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"dragging\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"dragged\", 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 = function (d, b) {\n 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 extendStatics(d, b);\n };\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 { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, isRippleEnabled, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';\nimport { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { classList, removeClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { upDownKeyHandler } from './../common/common';\nimport { getModel, Item, setBlankIconStyle } from './../common/common';\nvar classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DropDownButton = /** @class */ (function (_super) {\n __extends(DropDownButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DropDownButtonModel} options - Specifies dropdown button model\n * @param {string|HTMLButtonElement} element - Specifies element\n * @hidden\n */\n function DropDownButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPopupCreated = true;\n return _this;\n }\n DropDownButton.prototype.preRender = function () {\n /** */\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n DropDownButton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n *\n * @returns {void}\n */\n DropDownButton.prototype.toggle = function () {\n if (this.canOpen()) {\n this.openPopUp();\n }\n else if (this.createPopupOnClick && !this.isPopupCreated) {\n this.createPopup();\n this.openPopUp();\n }\n else {\n this.closePopup();\n }\n };\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n DropDownButton.prototype.addItems = function (items, text) {\n var newItem;\n var idx = this.items.length;\n for (var j = 0, len = this.items.length; j < len; j++) {\n if (text === this.items[j].text) {\n idx = j;\n break;\n }\n }\n for (var i = items.length - 1; i >= 0; i--) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newItem = new Item(this, 'items', items[i], true);\n this.items.splice(idx, 0, newItem);\n }\n if (!this.canOpen()) {\n this.createItems();\n }\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n DropDownButton.prototype.removeItems = function (items, isUniqueId) {\n var refresh = false;\n for (var i = 0, len = items.length; i < len; i++) {\n for (var j = 0, len_1 = this.items.length; j < len_1; j++) {\n if (items[i] === (isUniqueId ? this.items[j].id : this.items[j].text)) {\n this.items.splice(j, 1);\n refresh = true;\n break;\n }\n }\n }\n if (refresh && this.getULElement()) {\n this.createItems();\n }\n };\n DropDownButton.prototype.createPopup = function () {\n var _a;\n var div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n this.dropDown.element.setAttribute('role', 'dialog');\n this.dropDown.element.setAttribute('aria-label', 'dropdown menu');\n if (!isNullOrUndefined(this.popupContent)) {\n this.popupContent.style.display = '';\n }\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, (_a = {},\n _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',\n _a['aria-expanded'] = 'false',\n _a['type'] = 'button',\n _a));\n if (this.cssClass) {\n addClass([div], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n this.isPopupCreated = true;\n };\n DropDownButton.prototype.getTargetElement = function () {\n if (this.createPopupOnClick && !this.isColorPicker() && !isNullOrUndefined(this.popupContent)) {\n return this.popupContent;\n }\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n };\n DropDownButton.prototype.createItems = function (appendItems) {\n var items = this.items;\n var showIcon = this.hasIcon(this.items, 'iconCss');\n var span;\n var item;\n var li;\n var eventArgs;\n var ul = this.getULElement();\n if (ul) {\n ul.innerHTML = '';\n }\n else {\n ul = this.createElement('ul', {\n attrs: { 'role': 'menu', 'tabindex': '0' }\n });\n }\n for (var i = 0; i < items.length; i++) {\n item = items[i];\n var tempItem = item.text;\n li = this.createElement('li', {\n innerHTML: item.url ? '' : tempItem,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1', 'aria-label': 'separator', 'aria-hidden': 'true' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (this.enableHtmlSanitizer) {\n li.textContent = item.url ? '' : tempItem;\n }\n else {\n li.innerHTML = item.url ? '' : tempItem;\n }\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n li.classList.add('e-url');\n }\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n if (item.url) {\n li.childNodes[0].appendChild(span);\n }\n else {\n li.insertBefore(span, li.childNodes[0]);\n }\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n var beforeDisabled = item.disabled;\n if (item.disabled) {\n li.classList.add('e-disabled');\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n var afterDisabled = eventArgs.item.disabled;\n if (beforeDisabled !== afterDisabled) {\n if (eventArgs.item.disabled) {\n li.classList.add('e-disabled');\n }\n else {\n li.classList.remove('e-disabled');\n }\n }\n ul.appendChild(li);\n }\n if (appendItems) {\n this.getPopUpElement().appendChild(ul);\n }\n if (showIcon) {\n setBlankIconStyle(this.getPopUpElement());\n }\n };\n DropDownButton.prototype.hasIcon = 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 DropDownButton.prototype.createAnchor = function (item) {\n var tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: tempItem, attrs: { 'href': item.url } });\n };\n DropDownButton.prototype.initialize = function () {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.setActiveElem([this.element]);\n this.element.setAttribute('aria-label', this.element.textContent ? this.element.textContent : 'dropdownbutton');\n if ((this.target && !this.isColorPicker() && !this.createPopupOnClick) || !this.createPopupOnClick) {\n this.createPopup();\n }\n else {\n this.isPopupCreated = false;\n if (this.target && !this.isColorPicker() && this.createPopupOnClick) {\n this.popupContent = this.getTargetElement();\n this.popupContent.style.display = 'none';\n }\n }\n };\n DropDownButton.prototype.isColorPicker = function () {\n if (!this.element) {\n return false;\n }\n var prevElem = this.element.previousSibling;\n if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {\n return true;\n }\n return false;\n };\n DropDownButton.prototype.appendArrowSpan = function () {\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n };\n DropDownButton.prototype.setActiveElem = function (elem) {\n this.activeElem = elem;\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n DropDownButton.prototype.getModuleName = function () {\n return 'dropdown-btn';\n };\n DropDownButton.prototype.canOpen = function () {\n var val = false;\n if (this.isPopupCreated) {\n val = this.getPopUpElement().classList.contains('e-popup-close');\n }\n return val;\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n DropDownButton.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'dropdown-btn') {\n var classList_1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList_1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList_1) {\n removeClass([this.element], classList_1);\n }\n removeClass(this.activeElem, ['e-active']);\n var attrList = this.element.getAttribute('class') ? ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.popupUnWireEvents();\n this.destroyPopup();\n this.isPopupCreated = false;\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n };\n DropDownButton.prototype.destroyPopup = function () {\n if (this.isPopupCreated) {\n this.dropDown.destroy();\n if (this.getPopUpElement()) {\n var popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n }\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated && this.dropDown) {\n this.dropDown.element = null;\n this.dropDown = undefined;\n }\n }\n this.isPopupCreated = false;\n };\n DropDownButton.prototype.getPopUpElement = function () {\n var val = null;\n if (!this.dropDown && this.activeElem[0].classList.contains('e-split-btn')) {\n var dropDownBtn = getComponent(this.activeElem[1], 'dropdown-btn');\n if (dropDownBtn) {\n this.dropDown = dropDownBtn.dropDown;\n }\n }\n if (this.dropDown) {\n val = this.dropDown.element;\n }\n return val;\n };\n DropDownButton.prototype.getULElement = function () {\n var val = null;\n if (this.getPopUpElement()) {\n val = this.getPopUpElement().children[0];\n }\n return val;\n };\n DropDownButton.prototype.wireEvents = function () {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n if (!this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n };\n DropDownButton.prototype.windowResize = function () {\n if (!this.canOpen() && this.dropDown) {\n this.dropDown.refreshPosition(this.element);\n }\n };\n DropDownButton.prototype.popupWireEvents = function () {\n if (!this.delegateMousedownHandler) {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n }\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n if (popupElement) {\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n if (this.closeActionEvents) {\n EventHandler.add(popupElement, this.closeActionEvents, this.focusoutHandler, this);\n }\n }\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n };\n DropDownButton.prototype.popupUnWireEvents = function () {\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n if (popupElement && popupElement.parentElement) {\n EventHandler.remove(popupElement, 'click', this.clickHandler);\n EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);\n if (this.closeActionEvents) {\n EventHandler.remove(popupElement, this.closeActionEvents, this.focusoutHandler);\n }\n }\n if (isRippleEnabled && this.rippleFn) {\n this.rippleFn();\n }\n };\n /**\n * Handles the keyboard interactions.\n *\n * @param {KeyboardEventArgs} e - Specifies keyboard event args.\n * @returns {void}\n * @hidden\n */\n DropDownButton.prototype.keyBoardHandler = function (e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n };\n DropDownButton.prototype.upDownKeyHandler = function (e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n upDownKeyHandler(this.getULElement(), e.keyCode);\n };\n DropDownButton.prototype.keyEventHandler = function (e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.keyCode === 13 && this.activeElem[0].classList.contains('e-split-btn')) {\n this.triggerSelect(e);\n this.activeElem[0].focus();\n return;\n }\n if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n };\n DropDownButton.prototype.getLI = function (elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n };\n DropDownButton.prototype.mousedownHandler = function (e) {\n var trgt = e.target;\n if (this.dropDown && !this.canOpen() && !(closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')\n || closest(trgt, '[id=\"' + this.element.id + '\"]'))) {\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.focusoutHandler = function (e) {\n if (this.isPopupCreated && !this.canOpen()) {\n var liTarget = e.relatedTarget;\n if (liTarget && liTarget.className.indexOf('e-item') > -1) {\n var li = this.getLI(liTarget);\n if (li) {\n var liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n var item = this.items[liIdx];\n if (item) {\n var selectEventArgs = { element: li, item: item, event: e };\n this.trigger('select', selectEventArgs);\n }\n }\n }\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.clickHandler = function (e) {\n var trgt = e.target;\n if (closest(trgt, '[id=\"' + this.element.id + '\"]')) {\n if (!this.createPopupOnClick || (this.target && this.target !== '' && !this.isColorPicker() && !this.createPopupOnClick)) {\n if (this.getPopUpElement().classList.contains('e-popup-close')) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e);\n }\n }\n else if (this.isPopupCreated) {\n this.closePopup(e, this.activeElem[0]);\n }\n else {\n this.createPopup();\n this.openPopUp(e);\n }\n }\n else {\n if (closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')) {\n var li = this.getLI(e.target);\n if (li) {\n this.triggerSelect(e);\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n };\n DropDownButton.prototype.triggerSelect = function (e) {\n var eventArgs;\n var liIdx;\n var item;\n var li = this.getLI(e.target);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item, event: e };\n this.trigger('select', eventArgs);\n }\n }\n };\n DropDownButton.prototype.openPopUp = function (e) {\n var _this = this;\n if (e === void 0) { e = null; }\n var isReact = false;\n var popupElem = this.getPopUpElement();\n if (!this.target) {\n this.createItems(true);\n }\n else {\n if (this.activeElem.length > 1) {\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (splitButton.isReact && popupElem.childNodes.length < 1) {\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && popupElem.childNodes.length < 1) {\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n }\n var ul = this.getULElement();\n this.popupWireEvents();\n var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var ul_1 = _this.getULElement();\n _this.dropDown.show(null, _this.element);\n addClass([_this.element], 'e-active');\n _this.element.setAttribute('aria-expanded', 'true');\n _this.element.setAttribute('aria-owns', _this.getPopUpElement().id);\n if (ul_1) {\n ul_1.focus();\n }\n if (_this.enableRtl && ul_1.parentElement.style.left !== '0px') {\n var wrapperWidth = void 0;\n if (_this.element.parentElement && _this.element.parentElement.classList.contains('e-split-btn-wrapper')) {\n wrapperWidth = _this.element.parentElement.offsetWidth;\n }\n else {\n wrapperWidth = _this.element.offsetWidth;\n }\n var popupRect = ul_1.parentElement.offsetWidth - wrapperWidth;\n var popupLeft = parseFloat(ul_1.parentElement.style.left) - popupRect;\n if (popupLeft < 0) {\n popupLeft = 0;\n }\n ul_1.parentElement.style.left = popupLeft + \"px\";\n }\n var openArgs = { element: ul_1, items: _this.items };\n _this.trigger('open', openArgs);\n }\n });\n };\n DropDownButton.prototype.closePopup = function (e, focusEle) {\n var _this = this;\n if (e === void 0) { e = null; }\n var ul = this.getULElement();\n var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var popupElement = _this.getPopUpElement();\n if (popupElement) {\n EventHandler.remove(popupElement, 'keydown', _this.keyBoardHandler);\n }\n _this.popupUnWireEvents();\n var ul_2 = _this.getULElement();\n var selectedLi = void 0;\n if (ul_2) {\n selectedLi = ul_2.querySelector('.e-selected');\n }\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n _this.dropDown.hide();\n removeClass(_this.activeElem, 'e-active');\n _this.element.setAttribute('aria-expanded', 'false');\n _this.element.removeAttribute('aria-owns');\n if (focusEle) {\n focusEle.focus();\n }\n var closeArgs = { element: ul_2, items: _this.items };\n _this.trigger('close', closeArgs);\n if (!_this.target && ul_2) {\n detach(ul_2);\n }\n if (!_this.target || _this.isColorPicker() || (_this.target && !_this.isColorPicker())) {\n if (_this.createPopupOnClick) {\n _this.destroyPopup();\n }\n }\n }\n else {\n if (ul) {\n ul.focus();\n }\n }\n });\n };\n DropDownButton.prototype.unWireEvents = function () {\n if (!this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n }\n EventHandler.remove(window, 'resize', this.windowResize);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DropDownButtonModel} newProp - Specifies new properties\n * @param {DropDownButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n var popupElement;\n if (this.isPopupCreated) {\n popupElement = this.getPopUpElement();\n this.dropDown.setProperties(getModel(newProp, ['enableRtl']));\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (this.isPopupCreated && !this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1 || oldProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n var arrowSpan = this.element.querySelector('span.e-caret');\n newProp.cssClass.indexOf(classNames.VERTICAL) > -1 ? classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right'])\n : classList(arrowSpan, ['e-icon-right'], ['e-icon-bottom']);\n }\n if (this.isPopupCreated) {\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n }\n break;\n case 'target':\n this.dropDown.content = this.getTargetElement();\n this.dropDown.dataBind();\n break;\n case 'items':\n if (this.isPopupCreated && this.getULElement()) {\n this.createItems();\n }\n break;\n case 'createPopupOnClick':\n if (newProp.createPopupOnClick) {\n this.destroyPopup();\n }\n else {\n this.createPopup();\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to DropDownButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n DropDownButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], DropDownButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Collection([], Item)\n ], DropDownButton.prototype, \"items\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"closeActionEvents\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"created\", void 0);\n DropDownButton = __decorate([\n NotifyPropertyChanges\n ], DropDownButton);\n return DropDownButton;\n}(Component));\nexport { DropDownButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar HIDE_CLEAR = 'e-clear-icon-hide';\nvar TEXTBOX_FOCUS = 'e-input-focus';\nvar containerAttr = ['title', 'style', 'class'];\n/**\n * Represents the TextBox component that allows the user to enter the values based on it's type.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar TextBox = /** @class */ (function (_super) {\n __extends(TextBox, _super);\n /**\n *\n * @param {TextBoxModel} options - Specifies the TextBox model.\n * @param {string | HTMLInputElement | HTMLTextAreaElement} element - Specifies the element to render as component.\n * @private\n */\n function TextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isAngular = false;\n _this.isHiddenInput = false;\n _this.isForm = false;\n _this.inputPreviousValue = null;\n _this.isVue = false;\n _this.textboxOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {TextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {TextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TextBox.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 'floatLabelType':\n Input.removeFloating(this.textboxWrapper);\n Input.addFloating(this.respectiveElement, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n this.bindClearEvent();\n break;\n case 'width':\n Input.setWidth(newProp.width, this.textboxWrapper.container);\n break;\n case 'value':\n {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!this.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n }\n break;\n case 'htmlAttributes':\n {\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkAttributes(true);\n this.multiline && !isNullOrUndefined(this.textarea) ? Input.validateInputType(this.textboxWrapper.container, this.textarea) : Input.validateInputType(this.textboxWrapper.container, this.element);\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.respectiveElement);\n break;\n case 'type':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n this.respectiveElement.setAttribute('type', this.type);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n this.raiseChangeEvent();\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);\n break;\n case 'autocomplete':\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else {\n this.removeAttributes(['autocomplete']);\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TextBox.prototype.getModuleName = function () {\n return 'textbox';\n };\n TextBox.prototype.isBlank = function (str) {\n return (!str || /^\\s*$/.test(str));\n };\n TextBox.prototype.preRender = function () {\n this.cloneElement = this.element.cloneNode(true);\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.multiline ?\n this.createElement('textarea') :\n this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n else if (attributeName === 'class') {\n inputElement.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, true);\n }\n if (this.element.tagName !== 'TEXTAREA') {\n this.element.setAttribute('type', this.type);\n }\n if (this.type === 'text') {\n this.element.setAttribute('role', 'textbox');\n }\n this.globalize = new Internationalization(this.locale);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n this.isHiddenInput = true;\n this.textarea = this.createElement('textarea');\n this.element.parentNode.insertBefore(this.textarea, this.element);\n this.element.setAttribute('type', 'hidden');\n this.textarea.setAttribute('name', this.element.getAttribute('name'));\n this.element.removeAttribute('name');\n this.textarea.setAttribute('role', this.element.getAttribute('role'));\n this.element.removeAttribute('role');\n this.textarea.setAttribute('id', getUniqueID('textarea'));\n var apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var index = 0; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&\n !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {\n // e-mappinguid attribute is handled for Grid component.\n this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n if (apiAttributes.indexOf(attributeName) < 0) {\n this.element.removeAttribute(attributeName);\n index--;\n }\n }\n }\n }\n };\n TextBox.prototype.checkAttributes = function (isDynamic) {\n var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {\n var key = attrs_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'autocomplete':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['autocomplete'] === undefined)) || isDynamic) {\n var autoCompleteTxt = this.element.autocomplete === 'off' ? 'off' : 'on';\n this.setProperties({ autocomplete: autoCompleteTxt }, !isDynamic);\n }\n break;\n case 'value':\n if (((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) && this.element.value !== '') {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'type':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || isDynamic) {\n this.setProperties({ type: this.element.type }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n TextBox.prototype.render = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getInputValidClassList(this.cssClass);\n }\n this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;\n this.textboxWrapper = Input.createInput({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttrToWrapper();\n if (this.isHiddenInput) {\n this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n this.setInitialValue();\n }\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else if (!isNullOrUndefined(this.textboxOptions) && (this.textboxOptions['autocomplete'] !== undefined)) {\n this.removeAttributes(['autocomplete']);\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.respectiveElement.defaultValue = this.respectiveElement.value;\n Input.setWidth(this.width, this.textboxWrapper.container);\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n };\n TextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = this.getInputValidClassList(this.htmlAttributes[\"\" + key]);\n if (updatedClassValues !== '') {\n addClass([this.textboxWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.textboxWrapper.container.getAttribute(key);\n setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[\"\" + key]) :\n this.htmlAttributes[\"\" + key];\n this.textboxWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n TextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) < 0) {\n this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea.setAttribute(key, this.htmlAttributes[\"\" + key]) : this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n TextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));\n };\n TextBox.prototype.getInputValidClassList = function (inputClassName) {\n var result = inputClassName;\n if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {\n result = (inputClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n TextBox.prototype.setInitialValue = function () {\n if (!this.isAngular) {\n this.respectiveElement.setAttribute('value', this.initialValue);\n }\n };\n TextBox.prototype.wireEvents = function () {\n EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);\n EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.respectiveElement, 'keydown', this.keydownHandler, this);\n EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);\n EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-autofill') &&\n this.textboxWrapper.container.classList.contains('e-outline')) {\n EventHandler.add((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler, this);\n }\n };\n TextBox.prototype.animationHandler = function () {\n this.textboxWrapper.container.classList.add('e-valid-input');\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n label.classList.add('e-label-top');\n if (label.classList.contains('e-label-bottom')) {\n label.classList.remove('e-label-bottom');\n }\n }\n };\n TextBox.prototype.resetValue = function (value) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n if (value == null && this.textboxWrapper.container.classList.contains('e-valid-input')) {\n this.textboxWrapper.container.classList.remove('e-valid-input');\n }\n this.isProtectedOnChange = prevOnChange;\n };\n TextBox.prototype.resetForm = function () {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textboxWrapper)) {\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label) && this.floatLabelType !== 'Always') {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n };\n TextBox.prototype.focusHandler = function (args) {\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n };\n TextBox.prototype.focusOutHandler = function (args) {\n if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&\n (this.previousValue !== this.value)) {\n this.raiseChangeEvent(args, true);\n }\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n };\n TextBox.prototype.keydownHandler = function (args) {\n if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === \"\") && (this.value === null || this.value === \"\") && this.respectiveElement.value === \"\")) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n }\n };\n TextBox.prototype.inputHandler = function (args) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var textboxObj = this;\n var eventArgs = {\n event: args,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textboxObj.localChange({ value: this.respectiveElement.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n };\n TextBox.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n if (this.previousValue != this.value) {\n this.raiseChangeEvent(args, true);\n }\n args.stopPropagation();\n };\n TextBox.prototype.raiseChangeEvent = function (event, interaction) {\n var eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textboxWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n //EJ2CORE-738:For this task we update the textarea value to the input when input tag with multiline is present\n if (this.element.tagName === 'INPUT' && this.multiline && Browser.info.name === 'mozilla') {\n this.element.value = this.respectiveElement.value;\n }\n };\n TextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n if (this.enabled) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n };\n TextBox.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR)) || this.textboxWrapper.container.classList.contains('e-static-clear')) {\n Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.setProperties({ value: this.respectiveElement.value }, true);\n var eventArgs = {\n event: event,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.respectiveElement.value;\n this.raiseChangeEvent(event, true);\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n }\n };\n TextBox.prototype.unWireEvents = function () {\n EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);\n EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);\n EventHandler.remove(this.respectiveElement, 'keydown', this.keydownHandler);\n EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);\n EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-outline') &&\n this.textboxWrapper.container.classList.contains('e-autofill')) {\n EventHandler.remove((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextBox element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n TextBox.prototype.destroy = function () {\n this.unWireEvents();\n if (this.element.tagName === 'INPUT' && this.multiline) {\n detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);\n this.respectiveElement = this.element;\n this.element.removeAttribute('type');\n }\n this.respectiveElement.value = this.respectiveElement.defaultValue;\n this.respectiveElement.classList.remove('e-input');\n this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby']);\n if (!isNullOrUndefined(this.textboxWrapper)) {\n this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);\n detach(this.textboxWrapper.container);\n }\n this.textboxWrapper = null;\n Input.destroy();\n _super.prototype.destroy.call(this);\n };\n /**\n * Adding the icons to the TextBox component.\n *\n * @param { string } position - Specify the icon placement on the TextBox. Possible values are append and prepend.\n * @param { string | string[] } icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for TextBox.\n * @returns {void}\n */\n TextBox.prototype.addIcon = function (position, icons) {\n Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n */\n TextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Adding the multiple attributes as key-value pair to the TextBox element.\n *\n * @param {string} attributes - Specifies the attributes to be add to TextBox element.\n * @returns {void}\n */\n TextBox.prototype.addAttributes = function (attributes) {\n for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'class') {\n this.respectiveElement.classList.add(attributes[\"\" + key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[\"\" + key] }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {\n this.respectiveElement.setAttribute(key, attributes[\"\" + key]);\n }\n else {\n this.respectiveElement.setAttribute(key, attributes[\"\" + key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n *\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.\n * @returns {void}\n */\n TextBox.prototype.removeAttributes = function (attributes) {\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var key = attributes_1[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else {\n this.respectiveElement.removeAttribute(key);\n }\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n TextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.respectiveElement && this.enabled) {\n this.respectiveElement.focus();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n addClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n TextBox.prototype.focusOut = function () {\n if (document.activeElement === this.respectiveElement && this.enabled) {\n this.respectiveElement.blur();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n __decorate([\n Property('text')\n ], TextBox.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"value\", void 0);\n __decorate([\n Property('Never')\n ], TextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property('')\n ], TextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('on')\n ], TextBox.prototype, \"autocomplete\", void 0);\n __decorate([\n Property({})\n ], TextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"multiline\", void 0);\n __decorate([\n Property(true)\n ], TextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"width\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"input\", void 0);\n TextBox = __decorate([\n NotifyPropertyChanges\n ], TextBox);\n return TextBox;\n}(Component));\nexport { TextBox };\n","/**\n * Save class provide method to save file\n * ```typescript\n * let blob : Blob = new Blob([''], { type: 'text/plain' });\n * Save.save('fileName.txt',blob);\n */\nvar Save = /** @class */ (function () {\n /**\n * Initialize new instance of {save}\n */\n function Save() {\n // tslint:disable\n }\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n * @param {boolean} isMicrosoftBrowser- specify whether microsoft browser or not\n * @returns {void}\n */\n Save.save = function (fileName, buffer) {\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('ArgumentException: fileName cannot be undefined, null or empty');\n }\n var extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);\n var mimeType = this.getMimeType(extension);\n if (mimeType !== '') {\n buffer = new Blob([buffer], { type: mimeType });\n }\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(buffer, fileName);\n }\n else {\n var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n this.saveInternal(fileName, extension, buffer, downloadLink, 'download' in downloadLink);\n }\n };\n Save.saveInternal = function (fileName, extension, buffer, downloadLink, hasDownloadAttribute) {\n if (hasDownloadAttribute) {\n downloadLink.download = fileName;\n var dataUrl_1 = window.URL.createObjectURL(buffer);\n downloadLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n downloadLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n dataUrl_1 = undefined;\n });\n }\n else {\n if (extension !== 'docx' && extension !== 'xlsx') {\n var url = window.URL.createObjectURL(buffer);\n var isPopupBlocked = window.open(url, '_blank');\n if (!isPopupBlocked) {\n window.location.href = url;\n }\n }\n else {\n var reader_1 = new FileReader();\n reader_1.onloadend = function () {\n var isPopupBlocked = window.open(reader_1.result, '_blank');\n if (!isPopupBlocked) {\n window.location.href = reader_1.result;\n }\n };\n reader_1.readAsDataURL(buffer);\n }\n }\n };\n /**\n *\n * @param {string} extension - get mime type of the specified extension\n * @private\n */\n Save.getMimeType = function (extension) {\n var mimeType = '';\n switch (extension) {\n case 'html':\n mimeType = 'text/html';\n break;\n case 'pdf':\n mimeType = 'application/pdf';\n break;\n case 'docx':\n mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';\n break;\n case 'xlsx':\n mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';\n break;\n case 'txt':\n mimeType = 'text/plain';\n break;\n }\n return mimeType;\n };\n return Save;\n}());\nexport { Save };\n","/**\n * Encoding class: Contains the details about encoding type, whether to write a Unicode byte order mark (BOM).\n * ```typescript\n * let encoding : Encoding = new Encoding();\n * encoding.type = 'Utf8';\n * encoding.getBytes('Encoding', 0, 5);\n * ```\n */\nvar Encoding = /** @class */ (function () {\n /**\n * Initializes a new instance of the Encoding class. A parameter specifies whether to write a Unicode byte order mark\n * @param {boolean} includeBom?-true to specify that a Unicode byte order mark is written; otherwise, false.\n */\n function Encoding(includeBom) {\n this.emitBOM = true;\n this.encodingType = 'Ansi';\n this.initBOM(includeBom);\n }\n Object.defineProperty(Encoding.prototype, \"includeBom\", {\n /**\n * Gets a value indicating whether to write a Unicode byte order mark\n * @returns boolean- true to specify that a Unicode byte order mark is written; otherwise, false\n */\n get: function () {\n return this.emitBOM;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Encoding.prototype, \"type\", {\n /**\n * Gets the encoding type.\n * @returns EncodingType\n */\n get: function () {\n return this.encodingType;\n },\n /**\n * Sets the encoding type.\n * @param {EncodingType} value\n */\n set: function (value) {\n this.encodingType = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Initialize the includeBom to emit BOM or Not\n * @param {boolean} includeBom\n */\n Encoding.prototype.initBOM = function (includeBom) {\n if (includeBom === undefined || includeBom === null) {\n this.emitBOM = true;\n }\n else {\n this.emitBOM = includeBom;\n }\n };\n /**\n * Calculates the number of bytes produced by encoding the characters in the specified string\n * @param {string} chars - The string containing the set of characters to encode\n * @returns {number} - The number of bytes produced by encoding the specified characters\n */\n Encoding.prototype.getByteCount = function (chars) {\n var byteCount = 0;\n validateNullOrUndefined(chars, 'string');\n if (chars === '') {\n var byte = this.utf8Len(chars.charCodeAt(0));\n return byte;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n return this.getByteCountInternal(chars, 0, chars.length);\n };\n /**\n * Return the Byte of character\n * @param {number} codePoint\n * @returns {number}\n */\n Encoding.prototype.utf8Len = function (codePoint) {\n var bytes = codePoint <= 0x7F ? 1 :\n codePoint <= 0x7FF ? 2 :\n codePoint <= 0xFFFF ? 3 :\n codePoint <= 0x1FFFFF ? 4 : 0;\n return bytes;\n };\n /**\n * for 4 byte character return surrogate pair true, otherwise false\n * @param {number} codeUnit\n * @returns {boolean}\n */\n Encoding.prototype.isHighSurrogate = function (codeUnit) {\n return codeUnit >= 0xD800 && codeUnit <= 0xDBFF;\n };\n /**\n * for 4byte character generate the surrogate pair\n * @param {number} highCodeUnit\n * @param {number} lowCodeUnit\n */\n Encoding.prototype.toCodepoint = function (highCodeUnit, lowCodeUnit) {\n highCodeUnit = (0x3FF & highCodeUnit) << 10;\n var u = highCodeUnit | (0x3FF & lowCodeUnit);\n return u + 0x10000;\n };\n /**\n * private method to get the byte count for specific charindex and count\n * @param {string} chars\n * @param {number} charIndex\n * @param {number} charCount\n */\n Encoding.prototype.getByteCountInternal = function (chars, charIndex, charCount) {\n var byteCount = 0;\n if (this.encodingType === 'Utf8' || this.encodingType === 'Unicode') {\n var isUtf8 = this.encodingType === 'Utf8';\n for (var i = 0; i < charCount; i++) {\n var charCode = chars.charCodeAt(isUtf8 ? charIndex : charIndex++);\n if (this.isHighSurrogate(charCode)) {\n if (isUtf8) {\n var high = charCode;\n var low = chars.charCodeAt(++charIndex);\n byteCount += this.utf8Len(this.toCodepoint(high, low));\n }\n else {\n byteCount += 4;\n ++i;\n }\n }\n else {\n if (isUtf8) {\n byteCount += this.utf8Len(charCode);\n }\n else {\n byteCount += 2;\n }\n }\n if (isUtf8) {\n charIndex++;\n }\n }\n return byteCount;\n }\n else {\n byteCount = charCount;\n return byteCount;\n }\n };\n /**\n * Encodes a set of characters from the specified string into the ArrayBuffer.\n * @param {string} s- The string containing the set of characters to encode\n * @param {number} charIndex-The index of the first character to encode.\n * @param {number} charCount- The number of characters to encode.\n * @returns {ArrayBuffer} - The ArrayBuffer that contains the resulting sequence of bytes.\n */\n Encoding.prototype.getBytes = function (s, charIndex, charCount) {\n validateNullOrUndefined(s, 'string');\n validateNullOrUndefined(charIndex, 'charIndex');\n validateNullOrUndefined(charCount, 'charCount');\n if (charIndex < 0 || charCount < 0) {\n throw new RangeError('Argument Out Of Range Exception: charIndex or charCount is less than zero');\n }\n if (s.length - charIndex < charCount) {\n throw new RangeError('Argument Out Of Range Exception: charIndex and charCount do not denote a valid range in string');\n }\n var bytes;\n if (s === '') {\n bytes = new ArrayBuffer(0);\n return bytes;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var byteCount = this.getByteCountInternal(s, charIndex, charCount);\n switch (this.type) {\n case 'Utf8':\n bytes = this.getBytesOfUtf8Encoding(byteCount, s, charIndex, charCount);\n return bytes;\n case 'Unicode':\n bytes = this.getBytesOfUnicodeEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n default:\n bytes = this.getBytesOfAnsiEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n }\n };\n /**\n * Decodes a sequence of bytes from the specified ArrayBuffer into the string.\n * @param {ArrayBuffer} bytes- The ArrayBuffer containing the sequence of bytes to decode.\n * @param {number} index- The index of the first byte to decode.\n * @param {number} count- The number of bytes to decode.\n * @returns {string} - The string that contains the resulting set of characters.\n */\n Encoding.prototype.getString = function (bytes, index, count) {\n validateNullOrUndefined(bytes, 'bytes');\n validateNullOrUndefined(index, 'index');\n validateNullOrUndefined(count, 'count');\n if (index < 0 || count < 0) {\n throw new RangeError('Argument Out Of Range Exception: index or count is less than zero');\n }\n if (bytes.byteLength - index < count) {\n throw new RangeError('Argument Out Of Range Exception: index and count do not denote a valid range in bytes');\n }\n if (bytes.byteLength === 0 || count === 0) {\n return '';\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var out = '';\n var byteCal = new Uint8Array(bytes);\n switch (this.type) {\n case 'Utf8':\n var s = this.getStringOfUtf8Encoding(byteCal, index, count);\n return s;\n case 'Unicode':\n var byteUnicode = new Uint16Array(bytes);\n out = this.getStringofUnicodeEncoding(byteUnicode, index, count);\n return out;\n default:\n var j = index;\n for (var i = 0; i < count; i++) {\n var c = byteCal[j];\n out += String.fromCharCode(c); // 1 byte(ASCII) character \n j++;\n }\n return out;\n }\n };\n Encoding.prototype.getBytesOfAnsiEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var bufview = new Uint8Array(bytes);\n var k = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(charIndex++);\n if (charcode < 0x800) {\n bufview[k] = charcode;\n }\n else {\n bufview[k] = 63; //replacement character '?'\n }\n k++;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUtf8Encoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint = new Uint8Array(bytes);\n var index = charIndex;\n var j = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(index);\n if (charcode <= 0x7F) { // 1 byte character 2^7\n uint[j] = charcode;\n }\n else if (charcode < 0x800) { // 2 byte character 2^11\n uint[j] = 0xc0 | (charcode >> 6);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else if ((charcode < 0xd800 || charcode >= 0xe000)) { // 3 byte character 2^16 \n uint[j] = 0xe0 | (charcode >> 12);\n uint[++j] = 0x80 | ((charcode >> 6) & 0x3f);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else {\n uint[j] = 0xef;\n uint[++j] = 0xbf;\n uint[++j] = 0xbd; // U+FFFE \"replacement character\"\n }\n ++j;\n ++index;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUnicodeEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint16 = new Uint16Array(bytes);\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(i);\n uint16[i] = charcode;\n }\n return bytes;\n };\n Encoding.prototype.getStringOfUtf8Encoding = function (byteCal, index, count) {\n var j = 0;\n var i = index;\n var s = '';\n for (j; j < count; j++) {\n var c = byteCal[i++];\n while (i > byteCal.length) {\n return s;\n }\n if (c > 127) {\n if (c > 191 && c < 224 && i < count) {\n c = (c & 31) << 6 | byteCal[i] & 63;\n }\n else if (c > 223 && c < 240 && i < byteCal.byteLength) {\n c = (c & 15) << 12 | (byteCal[i] & 63) << 6 | byteCal[++i] & 63;\n }\n else if (c > 239 && c < 248 && i < byteCal.byteLength) {\n c = (c & 7) << 18 | (byteCal[i] & 63) << 12 | (byteCal[++i] & 63) << 6 | byteCal[++i] & 63;\n }\n ++i;\n }\n s += String.fromCharCode(c); // 1 byte(ASCII) character \n }\n return s;\n };\n Encoding.prototype.getStringofUnicodeEncoding = function (byteUni, index, count) {\n if (count > byteUni.length) {\n throw new RangeError('ArgumentOutOfRange_Count');\n }\n var byte16 = new Uint16Array(count);\n var out = '';\n for (var i = 0; i < count && i < byteUni.length; i++) {\n byte16[i] = byteUni[index++];\n }\n out = String.fromCharCode.apply(null, byte16);\n return out;\n };\n /**\n * To clear the encoding instance\n * @return {void}\n */\n Encoding.prototype.destroy = function () {\n this.emitBOM = undefined;\n this.encodingType = undefined;\n };\n return Encoding;\n}());\nexport { Encoding };\n/**\n * To check the object is null or undefined and throw error if it is null or undefined\n * @param {Object} value - object to check is null or undefined\n * @return {boolean}\n * @throws {ArgumentException} - if the value is null or undefined\n * @private\n */\nexport function validateNullOrUndefined(value, message) {\n if (value === null || value === undefined) {\n throw new Error('ArgumentException: ' + message + ' cannot be null or undefined');\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n 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 extendStatics(d, b);\n };\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};\n/* eslint-disable @typescript-eslint/triple-slash-reference */\n///
\nimport { attributes, getUniqueID, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { getZindexPartial } from '@syncfusion/ej2-popups';\nimport { MenuBase, MenuItem } from '../common/menu-base';\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 *\n * @private\n * @param {ContextMenuModel} options - Specifies the context menu model\n * @param {string} element - Specifies the element\n */\n function ContextMenu(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * For internal use only - prerender processing.\n *\n * @private\n * @returns {void}\n */\n ContextMenu.prototype.preRender = function () {\n this.isMenu = false;\n this.element.id = this.element.id || getUniqueID('ej2-contextmenu');\n _super.prototype.preRender.call(this);\n };\n ContextMenu.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });\n this.element.style.zIndex = getZindexPartial(this.element).toString();\n };\n /**\n * This method is used to open the ContextMenu in specified position.\n *\n * @param {number} top - To specify ContextMenu vertical positioning.\n * @param {number} left - To specify ContextMenu horizontal positioning.\n * @param {HTMLElement} target - To calculate z-index for ContextMenu based upon the specified target.\n * @function open\n * @returns {void}\n */\n ContextMenu.prototype.open = function (top, left, target) {\n _super.prototype.openMenu.call(this, null, null, top, left, null, target);\n };\n /**\n * Closes the ContextMenu if it is opened.\n *\n * @function close\n * @returns {void}\n */\n ContextMenu.prototype.close = function () {\n _super.prototype.closeMenu.call(this);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @private\n * @param {ContextMenuModel} newProp - Specifies new properties\n * @param {ContextMenuModel} oldProp - Specifies old properties\n * @returns {void}\n */\n ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {\n _super.prototype.onPropertyChanged.call(this, 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 'filter':\n this.close();\n this.filter = newProp.filter;\n break;\n case 'target':\n this.unWireEvents(oldProp.target);\n this.wireEvents();\n break;\n }\n }\n };\n /**\n * Get module name.\n *\n * @returns {string} - Module Name\n * @private\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'contextmenu';\n };\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"filter\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], ContextMenu.prototype, \"items\", void 0);\n ContextMenu = __decorate([\n NotifyPropertyChanges\n ], ContextMenu);\n return ContextMenu;\n}(MenuBase));\nexport { ContextMenu };\n"],"sourceRoot":""}