Blazor') === 0) {\n templateFUN = templateFn({}, this, prop, this.element.id + index + '_' + prop, this.isStringTemplate);\n }\n else {\n templateFUN = templateFn({}, this, prop);\n }\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 if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n if (callType === 'clone') {\n ele.appendChild(eleVal.cloneNode(true));\n }\n else {\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n else {\n this.templateCompile(ele, cnt, 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 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 }\n this.addVerticalClass();\n this.updateOrientationAttribute();\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.serverChangeOrientation = function (newProp, oldProp) {\n this.setOrientation(newProp, this.hdrEle);\n removeClass([this.element], [CLS_VTAB]);\n var newValue = newProp === 'Left' || newProp === 'Right';\n var oldValue = oldProp === 'Left' || oldProp === 'Right';\n if (newValue !== oldValue) {\n this.changeToolbarOrientation();\n }\n if (this.isVertical()) {\n addClass([this.element], [CLS_VTAB]);\n }\n this.updateOrientationAttribute();\n this.setActiveBorder();\n this.focusItem();\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.offsetHeight - 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 setStyle(this.cntEle, { 'height': '100%' });\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 this.clearTemplate(['content']);\n this.templateEle = [];\n this.getContent(ele, this.items[0].content, 'render', 0);\n ele.classList.remove(CLS_ACTIVE);\n }\n setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });\n }\n else {\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n };\n Tab.prototype.getHeight = function (ele) {\n var cs = window.getComputedStyle(ele);\n return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +\n parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));\n };\n Tab.prototype.setActiveBorder = function () {\n var bar;\n var scrollCnt;\n var trgHdrEle = this.getTabHeader();\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);\n if (trg === null) {\n return;\n }\n if (this.isServerRendered && trg.classList.contains(CLS_TB_POPUP)) {\n this.popupHandler(trg);\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 bar = select('.' + CLS_INDICATOR, trgHdrEle);\n 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 setStyle(bar, { 'top': '', 'height': '' });\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)) {\n this.bdrLine.classList.remove(CLS_HIDDEN);\n }\n };\n Tab.prototype.setActive = function (value, skipDataBind) {\n if (skipDataBind === void 0) { skipDataBind = false; }\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n var trg = this.tbItem[value];\n if (this.isServerRendered && trg) {\n value = parseInt(trg.getAttribute('data-index'), 10);\n }\n if (value < 0 || isNaN(value) || this.tbItem.length === 0) {\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 var prev = this.tbItem[this.prevIndex];\n if (!isNOU(prev)) {\n prev.removeAttribute('aria-controls');\n }\n attributes(trg, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass();\n trg.classList.add(CLS_ACTIVE);\n trg.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 attributes(this.element, { 'aria-activedescendant': id });\n if (this.isTemplate) {\n if (select('.' + CLS_CONTENT, this.element).children.length > 0) {\n var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + 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 if (!this.isServerRendered || (this.isServerRendered && this.loadOn === 'Init')) {\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 trg.firstElementChild.focus();\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.isSwipeed\n };\n this.trigger('selected', eventArg);\n }\n };\n Tab.prototype.contentReady = function () {\n var id = this.setActiveContent();\n this.triggerAnimation(id, this.enableAnimation);\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.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.wireEvents = function () {\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 this.keyModule.destroy();\n this.tabKeyModule.destroy();\n if (!isNOU(this.cntEle)) {\n this.touchModule.destroy();\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 (this.isServerRendered && !isNOU(trgParent)) {\n if (parseInt(trgParent.getAttribute('data-index'), 10) !== this.selectedItem) {\n this.select(trgIndex);\n }\n }\n else if (!isNOU(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {\n this.select(trgIndex);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {\n return;\n }\n this.isSwipeed = true;\n if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {\n for (var k = this.selectedItem - 1; k >= 0; k--) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\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.select(i);\n break;\n }\n }\n }\n this.isSwipeed = false;\n };\n Tab.prototype.spaceKeyDown = function (e) {\n if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {\n var clstHead = closest(e.target, '.' + CLS_HEADER);\n if (!isNOU(clstHead)) {\n e.preventDefault();\n }\n }\n };\n Tab.prototype.keyHandler = function (e) {\n if (this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n this.element.classList.add(CLS_FOCUS);\n var trg = e.target;\n var 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 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', '-1');\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n actEle.children.item(0).setAttribute('tabindex', '0');\n break;\n case 'moveLeft':\n case 'moveRight':\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n if (!isNOU(item)) {\n this.refreshItemVisibility(item);\n }\n break;\n case 'openPopup':\n e.preventDefault();\n if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {\n this.popObj.show(this.show);\n }\n break;\n case 'delete':\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n if (this.showCloseButton === true && !isNOU(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstElementChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshActElePosition = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);\n if (!isNOU(activeEle)) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.' + 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.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 if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + index, this.element);\n var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + index, this.element);\n if (property === 'header' || property === '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 ((textVal === '') && (icon === '')) {\n this.removeTab(index);\n }\n else {\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 (property === '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 {\n cntItem.innerHTML = newVal;\n }\n }\n if (property === 'cssClass') {\n if (!isNOU(hdrItem)) {\n hdrItem.classList.remove(oldVal);\n hdrItem.classList.add(newVal);\n }\n if (!isNOU(cntItem)) {\n cntItem.classList.remove(oldVal);\n cntItem.classList.add(newVal);\n }\n }\n if (property === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n if (property === 'visible') {\n this.hideTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n else {\n this.lastIndex = 0;\n if (isNOU(this.tbObj)) {\n this.reRenderItems();\n }\n else {\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 && !isBlazor()) {\n detach(selectElement.firstElementChild);\n }\n this.select(this.selectedItem);\n }\n }\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n * @param {number} index - Index value of target Tab item.\n * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.\n * By default, isEnable is true.\n * @returns void.\n */\n Tab.prototype.enableTab = function (index, value) {\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(tbItems)) {\n return;\n }\n if (value === true) {\n tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstElementChild.setAttribute('tabindex', '-1');\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.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n * @param {TabItemsModel[]} items - An array of item that is added to the Tab.\n * @param {number} index - Number value that determines where the items to be added. By default, index is 0.\n * @returns void.\n\n */\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 };\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 }\n else {\n var itemsCount = selectAll('.' + 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 = 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) ||\n isNOU(textValue_1) || (textValue_1.length === 0) && isNOU(item.header.iconCss))) {\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, 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 }\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n * @param {number} index - Index of target item that is going to be removed.\n * @returns void.\n\n */\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 if (isBlazor() && _this.isServerRendered) {\n // tslint:disable-next-line:no-any\n _this.interopAdaptor.invokeMethodAsync('OnRemoveItem', index);\n return;\n }\n _this.tbObj.removeItems(index);\n _this.items.splice(index, 1);\n _this.itemIndexArray.splice(index, 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 detach(cntTrg);\n }\n _this.trigger('removed', tabRemovingArgs);\n if (trg.classList.contains(CLS_ACTIVE)) {\n // tslint:disable-next-line:max-line-length\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 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 * @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 item.setAttribute('aria-hidden', '' + value);\n if (!this.isServerRendered && this.overflowMode === 'Popup' && this.tbObj) {\n this.tbObj.refreshOverflow();\n }\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @returns void.\n */\n Tab.prototype.select = function (args) {\n 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', '-1');\n }\n var eventArg = {\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.isSwipeed,\n cancel: false\n };\n if (!this.initRender) {\n this.trigger('selecting', eventArg, function (selectArgs) {\n if (!selectArgs.cancel) {\n _this.selectingContent(args);\n }\n });\n }\n else {\n this.selectingContent(args);\n }\n };\n Tab.prototype.selectingContent = function (args) {\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 if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {\n this.setActive(this.popupHandler(this.tbItem[args]));\n }\n else {\n this.setActive(args);\n }\n }\n else {\n this.setActive(0);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args));\n }\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).\n * @returns void.\n */\n Tab.prototype.disable = function (value) {\n this.setCssClass(this.element, CLS_DISABLE, value);\n this.element.setAttribute('aria-disabled', '' + value);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Tab.prototype.getModuleName = function () {\n return 'tab';\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {TabModel} newProp\n * @param {TabModel} oldProp\n * @returns void\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyle(this.element, { width: formatUnit(newProp.width) });\n break;\n case 'height':\n setStyle(this.element, { height: formatUnit(newProp.height) });\n if (!this.isServerRendered) {\n this.setContentHeight(false);\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass !== '') {\n this.setCssClass(this.element, oldProp.cssClass, false);\n this.setCssClass(this.element, newProp.cssClass, true);\n }\n else {\n this.setCssClass(this.element, newProp.cssClass, true);\n }\n break;\n case 'items':\n if (!this.isServerRendered) {\n this.evalOnPropertyChangeItems(newProp, oldProp);\n }\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'selectedItem':\n if (!this.isServerRendered) {\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n }\n break;\n case 'headerPlacement':\n if (this.isServerRendered) {\n this.serverChangeOrientation(newProp.headerPlacement, oldProp.headerPlacement);\n }\n else {\n this.changeOrientation(newProp.headerPlacement);\n }\n break;\n case 'enableRtl':\n this.setRTL(newProp.enableRtl);\n break;\n case 'overflowMode':\n this.tbObj.overflowMode = newProp.overflowMode;\n this.tbObj.dataBind();\n this.refreshActElePosition();\n break;\n case 'heightAdjustMode':\n if (!this.isServerRendered) {\n this.setContentHeight(false);\n this.select(this.selectedItem);\n }\n break;\n case 'scrollStep':\n if (this.tbObj) {\n this.tbObj.scrollStep = this.scrollStep;\n }\n break;\n }\n }\n };\n __decorate([\n Collection([], TabItem)\n ], Tab.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Tab.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tab.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Tab.prototype, \"cssClass\", void 0);\n __decorate([\n Property(0)\n ], Tab.prototype, \"selectedItem\", void 0);\n __decorate([\n Property('Top')\n ], Tab.prototype, \"headerPlacement\", void 0);\n __decorate([\n Property('Content')\n ], Tab.prototype, \"heightAdjustMode\", void 0);\n __decorate([\n Property('Scrollable')\n ], Tab.prototype, \"overflowMode\", void 0);\n __decorate([\n Property('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, \"showCloseButton\", void 0);\n __decorate([\n Property()\n ], Tab.prototype, \"scrollStep\", void 0);\n __decorate([\n Complex({}, TabAnimationSettings)\n ], Tab.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"adding\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"added\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selecting\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"destroyed\", void 0);\n Tab = __decorate([\n NotifyPropertyChanges\n ], Tab);\n return Tab;\n}(Component));\nexport { Tab };\n","/**\n * Toolbar modules\n */\nexport * from './toolbar';\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, append } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { isBlazor } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar BZ_ITEMS = 'e-blazor-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_POPUPOPEN = 'e-popup-open';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_HSCROLLCNT = 'e-hscroll-content';\nvar CLS_VSCROLLCNT = 'e-vscroll-content';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_MULTIROW = 'e-toolbar-multirow';\nvar CLS_MULTIROWPOS = 'e-multirow-pos';\nvar CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';\nvar CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';\nvar CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';\nvar CLS_EXTENDABLECLASS = 'e-toolbar-extended';\nvar CLS_EXTENDPOPUP = 'e-expended-nav';\nvar CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property(true)\n ], Item.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n __decorate([\n Event()\n ], Item.prototype, \"click\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n * @param options - Specifies Toolbar model properties as options.\n * @param element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.resizeContext = _this.resize.bind(_this);\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNOU(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n if (isBlazor() && this.isServerRendered) {\n this.resetServerItems();\n }\n else {\n var subControls = this.element.querySelectorAll('.e-control');\n [].slice.call(subControls).forEach(function (node) {\n var instances = node.ej2_instances;\n if (instances) {\n var instance = instances[0];\n if (instance) {\n instance.destroy();\n }\n }\n });\n }\n while (this.element.lastElementChild && !this.element.lastElementChild.classList.contains(BZ_ITEMS)) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toolbar.prototype.preRender = function () {\n var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };\n this.trigger('beforeCreate', eventArgs);\n this.enableCollision = eventArgs.enableCollision;\n this.scrollStep = eventArgs.scrollStep;\n this.scrollModule = null;\n this.popObj = null;\n this.tempId = [];\n this.tbarItemsCol = this.items;\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n this.isExtendedOpen = false;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resizeContext);\n if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n // tslint:disable-next-line:max-line-length\n clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'FadeOut', duration: 100 };\n switch (e.action) {\n case 'moveRight':\n if (this.isVertical) {\n return;\n }\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (this.isVertical) {\n return;\n }\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n var ele = void 0;\n var nodes = void 0;\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n e.preventDefault();\n var clst;\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n /**\n * Specifies the value to disable/enable the Toolbar component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).\n * @returns void.\n */\n Toolbar.prototype.disable = function (value) {\n var rootEle = this.element;\n value ? rootEle.classList.add(CLS_DISABLE) : rootEle.classList.remove(CLS_DISABLE);\n rootEle.setAttribute('tabindex', !value ? '0' : '-1');\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n // tslint:disable-next-line:max-line-length\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);\n // tslint:enable-next-line:max-line-length\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var clsList = trgt.classList;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')\n && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n var tempItem = this.items[this.tbarEle.indexOf(clst)];\n if (tempItem && isBlazor() && this.isServerRendered) {\n itemObj = {\n id: tempItem.id,\n text: tempItem.text,\n width: tempItem.width,\n cssClass: tempItem.cssClass,\n showAlwaysInPopup: tempItem.showAlwaysInPopup,\n disabled: tempItem.disabled,\n prefixIcon: tempItem.prefixIcon,\n suffixIcon: tempItem.suffixIcon,\n visible: tempItem.visible,\n overflow: tempItem.overflow,\n template: tempItem.template,\n type: tempItem.type,\n showTextOn: tempItem.showTextOn,\n htmlAttributes: tempItem.htmlAttributes,\n tooltipText: tempItem.tooltipText,\n align: tempItem.align,\n click: tempItem.click\n };\n }\n else {\n itemObj = tempItem;\n }\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n if (itemObj && !isNOU(itemObj.click)) {\n this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);\n }\n if (!eventArgs.cancel) {\n this.trigger('clicked', eventArgs, function (clickedArgs) {\n if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&\n clickedArgs.item && clickedArgs.item.type !== 'Input') {\n _this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n });\n }\n };\n ;\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.getElementOffsetY() + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '0px';\n }\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Toolbar.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical',\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0 && (!isBlazor() && !this.isServerRendered)) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n if (isBlazor() && this.isServerRendered) {\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n var itemEleBlaDom = this.element.querySelector('.' + BZ_ITEMS);\n innerItem = itemEleBlaDom.querySelector('.' + CLS_ITEM + '[data-index=\"' + i + '\"]');\n if (!innerItem) {\n continue;\n }\n if (items[i].overflow !== 'Show' && items[i].showAlwaysInPopup && !innerItem.classList.contains(CLS_SEPARATOR)) {\n this.popupPriCount++;\n }\n if (items[i].htmlAttributes) {\n this.setAttr(items[i].htmlAttributes, innerItem);\n }\n if (items[i].type === 'Button') {\n EventHandler.clearEvents(innerItem);\n EventHandler.add(innerItem, 'click', this.itemClick, this);\n }\n }\n else {\n innerItem = this.renderSubComponent(items[i], i);\n }\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n };\n Toolbar.prototype.serverItemsRerender = function () {\n this.destroyMode();\n this.resetServerItems();\n this.serverItemsRefresh();\n };\n Toolbar.prototype.serverItemsRefresh = function () {\n var wrapBlaEleDom = this.element.querySelector('.' + BZ_ITEMS);\n if (wrapBlaEleDom.children.length > 0) {\n this.itemsAlign(this.items, this.element.querySelector('.' + CLS_ITEMS));\n this.renderLayout();\n this.refreshOverflow();\n }\n };\n Toolbar.prototype.resetServerItems = function () {\n var wrapBlaEleDom = this.element.querySelector('.' + BZ_ITEMS);\n var itemEles = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, this.element));\n append(itemEles, wrapBlaEleDom);\n this.clearProperty();\n };\n /** @hidden */\n Toolbar.prototype.changeOrientation = function () {\n var ele = this.element;\n if (this.isVertical) {\n ele.classList.remove(CLS_VERTICAL);\n this.isVertical = false;\n if (this.height === 'auto' || this.height === '100%') {\n ele.style.height = this.height;\n }\n ele.setAttribute('aria-orientation', 'horizontal');\n }\n else {\n ele.classList.add(CLS_VERTICAL);\n this.isVertical = true;\n ele.setAttribute('aria-orientation', 'vertical');\n setStyle(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });\n }\n this.destroyMode();\n this.refreshOverflow();\n };\n Toolbar.prototype.initScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n if (this.isVertical) {\n this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n else {\n this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var _this = this;\n var width = 0;\n var style;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n style = window.getComputedStyle(el);\n width += _this.isVertical ? el.offsetHeight : el.offsetWidth;\n width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);\n width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);\n }\n });\n return width;\n };\n Toolbar.prototype.getScrollCntEle = function (innerItem) {\n var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';\n return innerItem.querySelector(trgClass);\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;\n var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;\n if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {\n itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n var navEleWidth = 0;\n if (popNav) {\n navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;\n }\n else if (scrollNav) {\n navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);\n }\n if (itemWidth > eleWidth - navEleWidth) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Refresh the whole Toolbar component without re-rendering.\n * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.\n * - It will refresh the Toolbar component after loading items dynamically.\n * @returns void.\n */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.toolbarAlign = function (innerItems) {\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n if (Browser.info.name === 'msie' && this.height === 'auto') {\n ele.style.height = '';\n }\n switch (this.overflowMode) {\n case 'Scrollable':\n if (isNOU(this.scrollModule)) {\n this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));\n }\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n break;\n case 'MultiRow':\n this.add(innerItems, CLS_MULTIROW);\n if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {\n this.removePositioning();\n this.add(innerItems, CLS_MULTIROWPOS);\n }\n if (ele.style.overflow === 'hidden') {\n ele.style.overflow = '';\n }\n if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {\n ele.style.height = 'auto';\n }\n break;\n case 'Extended':\n this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n }\n }\n };\n Toolbar.prototype.setOverflowAttributes = function (ele) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var eleInlineItem;\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;\n if (eleInlineItem !== null) {\n if (this.overflowMode === 'MultiRow') {\n eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n for (var i = 0; i <= eleItem.length - 1; i++) {\n if (eleItem[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyle(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyle(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var eleHeight;\n var eleItem;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');\n sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;\n }\n eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {\n ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);\n }\n else {\n var extendEle = this.createElement('div', {\n id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS\n });\n var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n ele = this.overflowMode === 'Extended' ? extendEle : popupEle;\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.getElementOffsetY = function () {\n return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?\n this.element.clientHeight : this.element.offsetHeight);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n setStyle(this.element, { overflow: '' });\n var eleStyles = window.getComputedStyle(this.element);\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n else if (this.isVertical) {\n var tbEleData = this.element.getBoundingClientRect();\n setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n popObj.refreshPosition();\n }\n };\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[i]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n if (itemCount === itemPopCount) {\n var sepEle = inEle[i];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'list');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var dimension;\n if (isVer) {\n dimension = ele.offsetHeight - (popNav.offsetHeight + innerEle.offsetHeight);\n }\n else {\n dimension = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n }\n var popupEleWidth = 0;\n [].slice.call(popupEle.children).forEach(function (el) {\n popupEleWidth += _this.popupEleWidth(el);\n setStyle(el, { 'position': '' });\n });\n if ((dimension + (isVer ? popNav.offsetHeight : popNav.offsetWidth)) > (popupEleWidth) && this.popupPriCount === 0) {\n destroy = true;\n }\n this.popupEleRefresh(dimension, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n ele.setAttribute('aria-haspopup', 'false');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var checkOverflow;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n setStyle(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n var margin;\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n var trgClass = (this.isVertical) ? CLS_VSCROLLCNT : CLS_HSCROLLCNT;\n innerItem = [].slice.call(item.querySelector('.' + trgClass).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n if (this.isVertical) {\n margin = innerItem[0].offsetHeight + innerItem[2].offsetHeight;\n }\n else {\n margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n }\n var tbarWid = this.isVertical ? this.element.offsetHeight : this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth);\n var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';\n innerItem[2].removeAttribute('style');\n if (this.isVertical) {\n this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;\n }\n else {\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;\n }\n else {\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns void.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[a];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[a] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNOU(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[index]) {\n return this.tbarEle[index];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n * @param {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns void.\n\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n this.extendedOpen();\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(itemsDiv)) {\n this.itemsRerender(items);\n return;\n }\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item, index);\n if (this.tbarEle.length >= index && innerItems.length >= 0) {\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns void.\n\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = void 0;\n indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n detach(innerItems[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n var e = void 0;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNOU(tempStr)) {\n this.tempId.push(val);\n }\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var innerEle;\n var dom;\n innerEle = this.createElement('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.overflowMode === 'Popup') {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyScroll();\n var multirowele = ele.querySelector('.' + CLS_ITEMS);\n if (!isNOU(multirowele)) {\n this.remove(multirowele, CLS_MULTIROWPOS);\n if (this.tbarAlign) {\n this.add(multirowele, CLS_TBARPOS);\n }\n }\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.overflowMode === 'Extended') {\n var eleStyles = window.getComputedStyle(this.element);\n this.popObj.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n }\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {ToolbarModel} newProp\n * @param {ToolbarModel} oldProp\n * @returns void\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n this.extendedOpen();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array) && !this.isServerRendered) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var newProperty = Object(newProp.items[index])[property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else if (isBlazor() && this.isServerRendered) {\n this.serverItemsRerender();\n this.notify('onItemsChanged', {});\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n var wid = tEle.offsetWidth;\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns void.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var initIndex;\n var ele;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[eleIndex]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[eleIndex];\n }\n if (ele) {\n value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);\n if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {\n ele.firstElementChild.setAttribute('tabindex', '-1');\n var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n eleIndex = innerItems_2.indexOf(ele);\n }\n var nextEle = innerItems_2[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n nextEle.firstElementChild.removeAttribute('tabindex');\n break;\n }\n nextEle = innerItems_2[++eleIndex];\n }\n }\n }\n else if (isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n initIndex = 0;\n var setFlag = false;\n var removeFlag = false;\n var initELe = innerItems[initIndex];\n while (initELe) {\n if (!initELe.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(initELe.firstElementChild.getAttribute('tabindex'))) {\n initELe.firstElementChild.setAttribute('tabindex', '-1');\n setFlag = true;\n }\n else {\n if (setFlag && removeFlag) {\n break;\n }\n var skipEle = this.eleContains(initELe);\n if (!skipEle) {\n initELe.firstElementChild.removeAttribute('tabindex');\n removeFlag = true;\n }\n initELe = innerItems[++initIndex];\n }\n }\n else {\n initELe = innerItems[++initIndex];\n }\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","/**\n * TreeView modules\n */\nexport * from './treeview';\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, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { rippleEffect, Animation } from '@syncfusion/ej2-base';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { updateBlazorTemplate, resetBlazorTemplate, isBlazor, getElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { isNullOrUndefined as isNOU, Touch, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-treeview';\nvar CONTROL = 'e-control';\nvar COLLAPSIBLE = 'e-icon-collapsible';\nvar EXPANDABLE = 'e-icon-expandable';\nvar LISTITEM = 'e-list-item';\nvar LISTTEXT = 'e-list-text';\nvar LISTICON = 'e-list-icon';\nvar LISTIMG = 'e-list-img';\nvar LISTURL = 'e-list-url';\nvar PARENTITEM = 'e-list-parent';\nvar HOVER = 'e-hover';\nvar ACTIVE = 'e-active';\nvar LOAD = 'e-icons-spinner';\nvar PROCESS = 'e-process';\nvar ICON = 'e-icons';\nvar TEXTWRAP = 'e-text-content';\nvar INPUT = 'e-input';\nvar INPUTGROUP = 'e-input-group';\nvar TREEINPUT = 'e-tree-input';\nvar EDITING = 'e-editing';\nvar RTL = 'e-rtl';\nvar DRAGITEM = 'e-drag-item';\nvar DROPPABLE = 'e-droppable';\nvar DRAGGING = 'e-dragging';\nvar SIBLING = 'e-sibling';\nvar DROPIN = 'e-drop-in';\nvar DROPNEXT = 'e-drop-next';\nvar DROPOUT = 'e-drop-out';\nvar NODROP = 'e-no-drop';\nvar FULLROWWRAP = 'e-fullrow-wrap';\nvar FULLROW = 'e-fullrow';\nvar SELECTED = 'e-selected';\nvar EXPANDED = 'e-expanded';\nvar NODECOLLAPSED = 'e-node-collapsed';\nvar DISABLE = 'e-disable';\nvar CONTENT = 'e-content';\nvar DOWNTAIL = 'e-downtail';\nvar DROPCOUNT = 'e-drop-count';\nvar CHECK = 'e-check';\nvar INDETERMINATE = 'e-stop';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar RIPPLE = 'e-ripple';\nvar RIPPLEELMENT = 'e-ripple-element';\nvar FOCUS = 'e-node-focus';\nvar IMAGE = 'e-list-img';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar CHILD = 'e-has-child';\nvar ITEM_ANIMATION_ACTIVE = 'e-animation-active';\nvar DISABLED = 'e-disabled';\nvar treeAriaAttr = {\n treeRole: 'tree',\n itemRole: 'treeitem',\n listRole: 'group',\n itemText: '',\n wrapperRole: '',\n};\n/**\n * Configures the fields to bind to the properties of node in the TreeView component.\n */\nvar FieldsSettings = /** @class */ (function (_super) {\n __extends(FieldsSettings, _super);\n function FieldsSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('child')\n ], FieldsSettings.prototype, \"child\", void 0);\n __decorate([\n Property([])\n ], FieldsSettings.prototype, \"dataSource\", void 0);\n __decorate([\n Property('expanded')\n ], FieldsSettings.prototype, \"expanded\", void 0);\n __decorate([\n Property('hasChildren')\n ], FieldsSettings.prototype, \"hasChildren\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldsSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldsSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('id')\n ], FieldsSettings.prototype, \"id\", void 0);\n __decorate([\n Property('imageUrl')\n ], FieldsSettings.prototype, \"imageUrl\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldsSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('parentID')\n ], FieldsSettings.prototype, \"parentID\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"query\", void 0);\n __decorate([\n Property('selected')\n ], FieldsSettings.prototype, \"selected\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"tableName\", void 0);\n __decorate([\n Property('text')\n ], FieldsSettings.prototype, \"text\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldsSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('navigateUrl')\n ], FieldsSettings.prototype, \"navigateUrl\", void 0);\n return FieldsSettings;\n}(ChildProperty));\nexport { FieldsSettings };\n/**\n * Configures animation settings for the TreeView component.\n */\nvar ActionSettings = /** @class */ (function (_super) {\n __extends(ActionSettings, _super);\n function ActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], ActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], ActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], ActionSettings.prototype, \"easing\", void 0);\n return ActionSettings;\n}(ChildProperty));\nexport { ActionSettings };\n/**\n * Configures the animation settings for expanding and collapsing nodes in TreeView.\n */\nvar NodeAnimationSettings = /** @class */ (function (_super) {\n __extends(NodeAnimationSettings, _super);\n function NodeAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"expand\", void 0);\n return NodeAnimationSettings;\n}(ChildProperty));\nexport { NodeAnimationSettings };\n/**\n * The TreeView component is used to represent hierarchical data in a tree like structure with advanced\n * functions to perform edit, drag and drop, selection with check-box, and more.\n * ```html\n *
\n * ```\n * ```typescript\n * let treeObj: TreeView = new TreeView();\n * treeObj.appendTo('#tree');\n * ```\n */\nvar TreeView = /** @class */ (function (_super) {\n __extends(TreeView, _super);\n function TreeView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isRefreshed = false;\n _this.preventExpand = false;\n _this.checkedElement = [];\n _this.disableNode = [];\n _this.validArr = [];\n _this.expandChildren = [];\n _this.isFieldChange = false;\n _this.changeDataSource = false;\n _this.mouseDownStatus = false;\n return _this;\n }\n TreeView_1 = TreeView;\n /**\n * Get component name.\n * @returns string\n * @private\n */\n TreeView.prototype.getModuleName = function () {\n return 'treeview';\n };\n /**\n * Initialize the event handler\n */\n TreeView.prototype.preRender = function () {\n var _this = this;\n this.isBlazorPlatform = (isBlazor() && this.isServerRendered);\n this.checkActionNodes = [];\n this.parentNodeCheck = [];\n this.dragStartAction = false;\n this.isAnimate = false;\n this.keyConfigs = {\n escape: 'escape',\n end: 'end',\n enter: 'enter',\n f2: 'f2',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n ctrlA: 'ctrl+A',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space',\n };\n this.listBaseOption = {\n expandCollapse: true,\n showIcon: true,\n expandIconClass: EXPANDABLE,\n ariaAttributes: treeAriaAttr,\n expandIconPosition: 'Left',\n itemCreated: function (e) {\n _this.beforeNodeCreate(e);\n },\n enableHtmlSanitizer: this.enableHtmlSanitizer,\n itemNavigable: this.fullRowNavigable,\n };\n this.updateListProp(this.fields);\n this.aniObj = new Animation({});\n this.treeList = [];\n this.isLoaded = false;\n this.isInitalExpand = false;\n this.expandChildren = [];\n this.index = 0;\n this.setTouchClass();\n if (isNOU(this.selectedNodes)) {\n this.setProperties({ selectedNodes: [] }, true);\n }\n if (isNOU(this.checkedNodes)) {\n this.setProperties({ checkedNodes: [] }, true);\n }\n if (isNOU(this.expandedNodes)) {\n this.setProperties({ expandedNodes: [] }, true);\n }\n else {\n this.isInitalExpand = true;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n * @hidden\n */\n TreeView.prototype.getPersistData = function () {\n var keyEntity = ['selectedNodes', 'checkedNodes', 'expandedNodes'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n TreeView.prototype.render = function () {\n this.initialRender = true;\n this.blazorInitialRender = false;\n this.initialize();\n this.setDataBinding(false);\n this.setDisabledMode();\n this.setExpandOnType();\n if (!this.disabled) {\n this.setRipple();\n }\n this.wireEditingEvents(this.allowEditing);\n this.setDragAndDrop(this.allowDragAndDrop);\n if (!this.disabled) {\n this.wireEvents();\n }\n if (!this.isBlazorPlatform) {\n this.initialRender = false;\n }\n this.renderComplete();\n };\n TreeView.prototype.initialize = function () {\n if (!this.isBlazorPlatform) {\n this.element.setAttribute('role', 'tree');\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n this.setCssClass(null, this.cssClass);\n this.setEnableRtl();\n this.setFullRow(this.fullRowSelect);\n }\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n };\n TreeView.prototype.setDisabledMode = function () {\n if (this.disabled) {\n this.element.classList.add(DISABLED);\n }\n else {\n this.element.classList.remove(DISABLED);\n }\n };\n TreeView.prototype.setEnableRtl = function () {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n };\n TreeView.prototype.setRipple = function () {\n var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;\n var rippleModel = {\n selector: tempStr,\n ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP\n };\n this.rippleFn = rippleEffect(this.element, rippleModel);\n var iconModel = {\n selector: '.' + TEXTWRAP + ' > .' + ICON,\n isCenterRipple: true,\n };\n this.rippleIconFn = rippleEffect(this.element, iconModel);\n };\n TreeView.prototype.setFullRow = function (isEnabled) {\n isEnabled ? addClass([this.element], FULLROWWRAP) : removeClass([this.element], FULLROWWRAP);\n };\n TreeView.prototype.setMultiSelect = function (isEnabled) {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (isEnabled) {\n firstUl.setAttribute('aria-multiselectable', 'true');\n }\n else {\n firstUl.removeAttribute('aria-multiselectable');\n }\n };\n TreeView.prototype.templateComplier = function (template) {\n if (template) {\n var e = void 0;\n try {\n if (document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n };\n TreeView.prototype.setDataBinding = function (changeDataSource) {\n var _this = this;\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager) {\n if (this.fields.dataSource.ready) {\n this.fields.dataSource.ready.then(function (e) {\n if (_this.fields.dataSource instanceof DataManager && _this.fields.dataSource.dataSource.offline) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n _this.renderItems(true);\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n else {\n this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n if (changeDataSource) {\n _this.changeDataSource = true;\n }\n _this.renderItems(true);\n _this.changeDataSource = false;\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n this.treeList.pop();\n if (isNOU(this.fields.dataSource)) {\n this.rootData = this.treeData = [];\n }\n else {\n this.treeData = JSON.parse(JSON.stringify(this.fields.dataSource));\n this.setRootData();\n }\n this.isNumberTypeId = this.getType();\n this.renderItems(false);\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.getQuery = function (mapper, value) {\n if (value === void 0) { value = null; }\n var columns = [];\n var query;\n if (!mapper.query) {\n query = new Query();\n var prop = this.getActualProperties(mapper);\n for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[col]\n && columns.indexOf(mapper[col]) === -1) {\n columns.push(mapper[col]);\n }\n }\n query.select(columns);\n if (prop.hasOwnProperty('tableName')) {\n query.from(mapper.tableName);\n }\n }\n else {\n query = mapper.query.clone();\n }\n ListBase.addSorting(this.sortOrder, mapper.text, query);\n if (!isNOU(value) && !isNOU(mapper.parentID)) {\n query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));\n }\n return query;\n };\n TreeView.prototype.getType = function () {\n return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;\n };\n TreeView.prototype.setRootData = function () {\n this.dataType = this.getDataType(this.treeData, this.fields);\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n var rootItems = this.getChildNodes(this.treeData, undefined, true);\n if (isNOU(rootItems)) {\n this.rootData = [];\n }\n else {\n this.rootData = rootItems;\n }\n }\n else {\n this.rootData = this.treeData;\n }\n };\n TreeView.prototype.renderItems = function (isSorted) {\n // tslint:disable\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) || this.changeDataSource) {\n this.listBaseOption.ariaAttributes.level = 1;\n var sortedData = this.getSortedData(this.rootData);\n this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);\n this.element.appendChild(this.ulElement);\n var rootNodes = this.ulElement.querySelectorAll('.e-list-item');\n if (this.loadOnDemand === false) {\n var i = 0;\n while (i < rootNodes.length) {\n this.renderChildNodes(rootNodes[i], true, null, true);\n i++;\n }\n }\n var parentEle = selectAll('.' + PARENTITEM, this.element);\n if ((parentEle.length === 1 && (rootNodes && rootNodes.length !== 0)) || this.loadOnDemand) {\n this.finalizeNode(this.element);\n }\n }\n this.updateTemplateForBlazor();\n this.parentNodeCheck = [];\n this.parentCheckData = [];\n this.updateCheckedStateFromDS();\n if (this.autoCheck && this.showCheckBox && !this.isLoaded) {\n this.updateParentCheckState();\n }\n };\n TreeView.prototype.updateTemplateForBlazor = function () {\n if (this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\n }\n };\n /**\n * Update the checkedNodes from datasource at initial rendering\n */\n TreeView.prototype.updateCheckedStateFromDS = function (id) {\n if (this.treeData && this.showCheckBox) {\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;\n var resultPId = resultData[i][this.fields.parentID] ? resultData[i][this.fields.parentID].toString() : null;\n if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {\n this.checkedNodes.push(resultId);\n }\n if (resultData[i][this.fields.hasChildren]) {\n var id_1 = resultData[i][this.fields.id];\n var childData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.parentID, 'equal', id_1, false));\n for (var child = 0; child < childData.length; child++) {\n var childId = childData[child][this.fields.id] ? childData[child][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {\n this.checkedNodes.push(childId);\n }\n }\n }\n }\n for (var i = 0; i < this.checkedNodes.length; i++) {\n var mapper_1 = this.fields;\n var checkState = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.id, 'equal', this.checkedNodes[i], true));\n if (checkState[0] && this.autoCheck) {\n this.getCheckedNodeDetails(mapper_1, checkState);\n this.checkIndeterminateState(checkState[0]);\n }\n var checkedData = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper_1.parentID, 'equal', this.checkedNodes[i], true));\n for (var index = 0; index < checkedData.length; index++) {\n var checkedId = checkedData[index][this.fields.id] ? checkedData[index][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedId);\n }\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.fields.dataSource.dataSource.offline)) {\n for (var index = 0; index < this.treeData.length; index++) {\n var fieldId = this.treeData[index][this.fields.id] ? this.treeData[index][this.fields.id].toString() : '';\n if (this.treeData[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {\n this.checkedNodes.push(fieldId);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[index]);\n if (childItems) {\n this.updateChildCheckState(childItems, this.treeData[index]);\n }\n }\n }\n }\n };\n /**\n * To check whether the list data has sub child and to change the parent check state accordingly\n */\n TreeView.prototype.getCheckedNodeDetails = function (mapper, checkNodes) {\n var id = checkNodes[0][this.fields.parentID] ? checkNodes[0][this.fields.parentID].toString() : null;\n var count = 0;\n var element = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.id] + '\"]');\n var parentEle = this.element.querySelector('[data-uid=\"' + checkNodes[0][this.fields.parentID] + '\"]');\n if (!element && !parentEle) {\n var len = this.parentNodeCheck.length;\n if (this.parentNodeCheck.indexOf(id) === -1) {\n this.parentNodeCheck.push(id);\n }\n var childNodes = this.getChildNodes(this.treeData, id);\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n }\n var preElement = new DataManager(this.treeData).\n executeLocal(new Query().where(mapper.id, 'equal', id, true));\n this.getCheckedNodeDetails(mapper, preElement);\n }\n else if (parentEle) {\n var check = select('.' + CHECK, parentEle);\n if (!check) {\n this.changeState(parentEle, 'indeterminate', null, true, true);\n }\n }\n };\n /**\n * Update the checkedNodes and parent state when all the child Nodes are in checkedstate at initial rendering\n */\n TreeView.prototype.updateParentCheckState = function () {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n var childCheckedElement;\n for (var i = 0; i < indeterminate.length; i++) {\n var node = closest(indeterminate[i], '.' + LISTITEM);\n var nodeId = node.getAttribute('data-uid').toString();\n if (this.dataType === 1) {\n childCheckedElement = new DataManager(this.treeData).\n executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));\n }\n else {\n childCheckedElement = this.getChildNodes(this.treeData, nodeId);\n }\n var count = 0;\n if (childCheckedElement) {\n for (var j = 0; j < childCheckedElement.length; j++) {\n var childId = childCheckedElement[j][this.fields.id].toString();\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n if (count === childCheckedElement.length) {\n var nodeCheck = node.getAttribute('data-uid');\n if (this.checkedNodes.indexOf(nodeCheck) === -1) {\n this.checkedNodes.push(nodeCheck);\n }\n this.changeState(node, 'check', null, true, true);\n }\n else if (count === 0 && this.checkedNodes.length === 0) {\n this.changeState(node, 'uncheck', null, true, true);\n }\n }\n }\n };\n /**\n * Change the parent to indeterminate state whenever the child is in checked state which is not rendered in DOM\n */\n TreeView.prototype.checkIndeterminateState = function (data) {\n var element;\n if (this.dataType === 1) {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.parentID] + '\"]');\n }\n else {\n element = this.element.querySelector('[data-uid=\"' + data[this.fields.id] + '\"]');\n }\n if (element) {\n var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');\n if (ariaChecked !== 'true') {\n this.changeState(element, 'indeterminate', null, true, true);\n }\n }\n else if (this.dataType === 2) {\n var len = this.parentNodeCheck.length;\n if (this.parentNodeCheck.indexOf(data[this.fields.id].toString()) === -1) {\n this.parentNodeCheck.push(data[this.fields.id].toString());\n }\n }\n };\n /**\n * Update the checkedNodes for child and subchild from datasource (hierarchical datasource) at initial rendering\n */\n TreeView.prototype.updateChildCheckState = function (childItems, treeData) {\n var count = 0;\n var checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';\n if (childItems[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedChild);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[index]);\n if (subChildItems) {\n this.parentCheckData.push(treeData);\n this.updateChildCheckState(subChildItems, childItems[index]);\n }\n if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {\n this.checkedNodes.push(checkedParent);\n }\n }\n if (count !== 0 && this.autoCheck) {\n this.checkIndeterminateState(treeData);\n for (var len = 0; len < this.parentCheckData.length; len++) {\n if ((treeData !== this.parentCheckData[len]) && (this.parentCheckData[len])) {\n this.checkIndeterminateState(this.parentCheckData[len]);\n }\n }\n }\n this.parentCheckData = [];\n };\n TreeView.prototype.beforeNodeCreate = function (e) {\n if (this.showCheckBox) {\n var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });\n checkboxEle.setAttribute('role', 'checkbox');\n var icon = select('div.' + ICON, e.item);\n var id = e.item.getAttribute('data-uid');\n e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);\n var checkValue = getValue(e.fields.isChecked, e.curData);\n if (this.checkedNodes.indexOf(id) > -1) {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else if (!isNOU(checkValue) && checkValue.toString() === 'true') {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else {\n checkboxEle.setAttribute('aria-checked', 'false');\n }\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);\n EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);\n }\n if (this.fullRowSelect) {\n this.createFullRow(e.item);\n }\n if (this.allowMultiSelection && !e.item.classList.contains(SELECTED)) {\n e.item.setAttribute('aria-selected', 'false');\n }\n var fields = e.fields;\n this.addActionClass(e, fields.selected, SELECTED);\n this.addActionClass(e, fields.expanded, EXPANDED);\n if (!isNOU(this.nodeTemplateFn)) {\n var textEle = e.item.querySelector('.' + LISTTEXT);\n textEle.innerHTML = '';\n var tempArr = this.nodeTemplateFn(e.curData, undefined, undefined, this.element.id + 'nodeTemplate', this.isStringTemplate);\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, textEle);\n }\n var eventArgs = {\n node: e.item,\n nodeData: e.curData,\n text: e.text,\n };\n if (!this.isRefreshed) {\n this.trigger('drawNode', eventArgs);\n }\n };\n TreeView.prototype.frameMouseHandler = function (e) {\n var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);\n rippleMouseHandler(e, rippleSpan);\n };\n TreeView.prototype.addActionClass = function (e, action, cssClass) {\n var data = e.curData;\n var actionValue = getValue(action, data);\n if (!isNOU(actionValue) && actionValue.toString() !== 'false') {\n e.item.classList.add(cssClass);\n }\n };\n TreeView.prototype.getDataType = function (ds, mapper) {\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n for (var i = 0; i < ds.length; i++) {\n if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {\n return 1;\n }\n }\n return 2;\n }\n for (var i = 0, len = ds.length; i < len; i++) {\n if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {\n return 2;\n }\n if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {\n return 1;\n }\n }\n return 1;\n };\n TreeView.prototype.getGroupedData = function (dataSource, groupBy) {\n var cusQuery = new Query().group(groupBy);\n var ds = ListBase.getDataSource(dataSource, cusQuery);\n var grpItem = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n grpItem.push(itemObj);\n }\n return grpItem;\n };\n TreeView.prototype.getSortedData = function (list) {\n if (list && this.sortOrder !== 'None') {\n list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));\n }\n return list;\n };\n TreeView.prototype.finalizeNode = function (element) {\n var iNodes = selectAll('.' + IMAGE, element);\n for (var k = 0; k < iNodes.length; k++) {\n iNodes[k].setAttribute('alt', IMAGE);\n }\n if (this.isLoaded) {\n var sNodes = selectAll('.' + SELECTED, element);\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null);\n break;\n }\n removeClass(sNodes, SELECTED);\n }\n var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);\n for (var j = 0; j < cNodes.length; j++) {\n var icon = select('div.' + ICON, cNodes[j]);\n if (icon && icon.classList.contains(EXPANDABLE)) {\n this.disableExpandAttr(cNodes[j]);\n }\n }\n var eNodes = selectAll('.' + EXPANDED, element);\n if (!this.isInitalExpand) {\n for (var i = 0; i < eNodes.length; i++) {\n this.renderChildNodes(eNodes[i]);\n }\n }\n removeClass(eNodes, EXPANDED);\n this.updateList();\n if (this.isLoaded) {\n this.updateCheckedProp();\n }\n };\n TreeView.prototype.updateCheckedProp = function () {\n if (this.showCheckBox) {\n var nodes = [].concat([], this.checkedNodes);\n this.setProperties({ checkedNodes: nodes }, true);\n }\n };\n TreeView.prototype.ensureIndeterminate = function () {\n if (this.autoCheck) {\n var liElement = selectAll('li', this.element);\n var ulElement = void 0;\n for (var i = 0; i < liElement.length; i++) {\n if (liElement[i].classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, liElement[i]);\n if (ulElement) {\n this.ensureParentCheckState(liElement[i]);\n }\n else {\n this.ensureChildCheckState(liElement[i]);\n }\n }\n }\n }\n else {\n var indeterminate = selectAll('.' + INDETERMINATE, this.element);\n for (var i = 0; i < indeterminate.length; i++) {\n indeterminate[i].classList.remove(INDETERMINATE);\n }\n }\n };\n TreeView.prototype.ensureParentCheckState = function (element) {\n if (!isNOU(element)) {\n if (element.classList.contains(ROOT)) {\n return;\n }\n var ulElement = element;\n if (element.classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, element);\n }\n var checkedNodes = selectAll('.' + CHECK, ulElement);\n var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);\n var nodes = selectAll('.' + LISTITEM, ulElement);\n var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];\n if (nodes.length === checkedNodes.length) {\n this.changeState(checkBoxEle, 'check', null, true, true);\n }\n else if (checkedNodes.length > 0 || indeterminateNodes.length > 0) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedNodes.length === 0) {\n this.changeState(checkBoxEle, 'uncheck', null, true, true);\n }\n var parentUL = closest(element, '.' + PARENTITEM);\n if (!isNOU(parentUL)) {\n var currentParent = closest(parentUL, '.' + LISTITEM);\n this.ensureParentCheckState(currentParent);\n }\n }\n };\n TreeView.prototype.ensureChildCheckState = function (element, e) {\n if (!isNOU(element)) {\n var childElement = select('.' + PARENTITEM, element);\n var checkBoxes = void 0;\n if (!isNOU(childElement)) {\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINATE);\n var childCheck = childElement.querySelectorAll('li');\n var expandState = childElement.parentElement.getAttribute('aria-expanded');\n var checkedState = void 0;\n for (var index = 0; index < checkBoxes.length; index++) {\n var childId = childCheck[index].getAttribute('data-uid');\n if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {\n checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';\n if (this.ele !== -1) {\n checkedState = isChecked ? 'check' : 'uncheck';\n }\n if ((checkedState === 'uncheck') && (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && this.parentNodeCheck.indexOf(childId) !== -1)) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n checkedState = 'indeterminate';\n }\n }\n else {\n var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n if (isChecked) {\n checkedState = 'check';\n }\n else if (isNodeChecked && !this.isLoaded) {\n checkedState = 'check';\n }\n else if (this.checkedNodes.indexOf(childId) !== -1 && this.isLoaded && (parentCheck || isChecked)) {\n checkedState = 'check';\n }\n else if (childCheck[index].classList.contains(CHILD) && (!isUndefined(this.parentNodeCheck) && this.autoCheck\n && (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else if (this.dataType === 1 && (!isUndefined(this.parentNodeCheck) && this.autoCheck &&\n (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {\n checkedState = 'indeterminate';\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);\n }\n else {\n checkedState = 'uncheck';\n }\n }\n this.changeState(checkBoxes[index], checkedState, e, true, true);\n }\n }\n if (this.autoCheck && this.isLoaded) {\n this.updateParentCheckState();\n }\n }\n };\n TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {\n var li = selectAll('.' + LISTITEM, this.element);\n if (!isNOU(nodes)) {\n for (var len = nodes.length; len >= 0; len--) {\n var liEle = void 0;\n if (nodes.length === 1) {\n liEle = this.getElement(nodes[len - 1]);\n }\n else {\n liEle = this.getElement(nodes[len]);\n }\n if (isNOU(liEle)) {\n var node = void 0;\n node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString() : nodes[len] ? nodes[len].toString() : null;\n if (node !== '' && doCheck && node) {\n this.setValidCheckedNode(node);\n this.dynamicCheckState(node, doCheck);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && node !== '' && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(node), 1);\n var childItems = this.getChildNodes(this.treeData, node);\n if (childItems) {\n for (var i = 0; i < childItems.length; i++) {\n var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n }\n }\n if (this.parentNodeCheck.indexOf(node) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(node), 1);\n }\n }\n if (node) {\n this.dynamicCheckState(node, doCheck);\n }\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n continue;\n }\n var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);\n this.validateCheckNode(checkBox, !doCheck, liEle, null);\n }\n }\n else {\n var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);\n if (this.loadOnDemand) {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[index], doCheck);\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);\n }\n }\n else {\n for (var index = 0; index < checkBoxes.length; index++) {\n this.updateFieldChecked(checkBoxes[index], doCheck);\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');\n }\n }\n }\n if (nodes) {\n for (var j = 0; j < nodes.length; j++) {\n var node = nodes[j] ? nodes[j].toString() : '';\n if (!doCheck) {\n this.updateField(this.treeData, this.fields, node, 'isChecked', null);\n }\n }\n }\n if (this.autoCheck) {\n this.updateParentCheckState();\n }\n };\n TreeView.prototype.updateFieldChecked = function (checkbox, doCheck) {\n var currLi = closest(checkbox, '.' + LISTITEM);\n var id = currLi.getAttribute('data-uid');\n var nodeDetails = this.getNodeData(currLi);\n if (nodeDetails.isChecked === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n };\n /**\n * Changes the parent and child check state while changing the checkedNodes via setmodel\n */\n TreeView.prototype.dynamicCheckState = function (node, doCheck) {\n if (this.dataType === 1) {\n var count = 0;\n var resultId = new DataManager(this.treeData).executeLocal(new Query().where(this.fields.id, 'equal', node, true));\n if (resultId[0]) {\n var id = resultId[0][this.fields.id] ? resultId[0][this.fields.id].toString() : null;\n var parent_1 = resultId[0][this.fields.parentID] ? resultId[0][this.fields.parentID].toString() : null;\n var parentElement = this.element.querySelector('[data-uid=\"' + parent_1 + '\"]');\n var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;\n var check = parentElement ? select('.' + CHECK, parentElement) : null;\n var element = this.element.querySelector('[data-uid=\"' + id + '\"]');\n var childNodes = this.getChildNodes(this.treeData, parent_1);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (id === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (id === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) !== -1 && element && (id === node) && doCheck) {\n this.changeState(element, 'check', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck\n && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!element && !parentElement && (id === node) && this.autoCheck) {\n this.updateIndeterminate(node, doCheck);\n }\n }\n }\n else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&\n this.fields.dataSource.dataSource.offline)) {\n var id = void 0;\n var parentElement = void 0;\n var check = void 0;\n for (var i = 0; i < this.treeData.length; i++) {\n id = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : '';\n parentElement = this.element.querySelector('[data-uid=\"' + id + '\"]');\n check = parentElement ? select('.' + CHECK, parentElement) : null;\n if (this.checkedNodes.indexOf(id) === -1 && parentElement && check && !doCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n var subChild = getValue(this.fields.child.toString(), this.treeData[i]);\n if (subChild) {\n this.updateChildIndeterminate(subChild, id, node, doCheck, id);\n }\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for listData\n */\n TreeView.prototype.updateIndeterminate = function (node, doCheck) {\n var indeterminateData = this.getTreeData(node);\n var count = 0;\n var parent;\n if (this.dataType === 1) {\n parent = indeterminateData[0][this.fields.parentID] ? indeterminateData[0][this.fields.parentID].toString() : null;\n }\n var childNodes = this.getChildNodes(this.treeData, parent);\n if (childNodes) {\n for (var i = 0; i < childNodes.length; i++) {\n var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n if (parentElement && doCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (!doCheck && parentElement && this.parentNodeCheck.indexOf(parent) === -1 && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (!parentElement) {\n if (!doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent), 1);\n }\n else if (doCheck && this.checkedNodes.indexOf(parent) === -1 && this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n else if (!doCheck && this.checkedNodes.indexOf(parent) !== -1 && this.parentNodeCheck.indexOf(parent) === -1\n && count !== 0) {\n this.parentNodeCheck.push(parent);\n }\n this.updateIndeterminate(parent, doCheck);\n if (this.checkedNodes.indexOf(parent) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(parent), 1);\n }\n }\n };\n /**\n * updates the parent and child check state while changing the checkedNodes via setmodel for hierarchical data\n */\n TreeView.prototype.updateChildIndeterminate = function (subChild, parent, node, doCheck, child) {\n var count = 0;\n for (var j = 0; j < subChild.length; j++) {\n var subId = subChild[j][this.fields.id] ? subChild[j][this.fields.id].toString() : '';\n if (this.checkedNodes.indexOf(subId) !== -1) {\n count++;\n }\n var parentElement = this.element.querySelector('[data-uid=\"' + parent + '\"]');\n var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;\n var check = parentElement ? select('.' + CHECK, parentElement) : null;\n var element = this.element.querySelector('[data-uid=\"' + subId + '\"]');\n var childElementCheck = element ? select('.' + CHECK, element) : null;\n if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (subId === node) && this.autoCheck) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && parentElement && !element && (subId === node) && !doCheck) {\n if (this.autoCheck) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else {\n if (count !== 0) {\n this.changeState(parentElement, 'indeterminate', null);\n }\n else {\n this.changeState(parentElement, 'uncheck', null);\n }\n }\n }\n else if (this.checkedNodes.indexOf(node) === -1 && element && (subId === node) && !doCheck) {\n this.changeState(element, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && indeterminate && (subId === node) && this.autoCheck && count === 0\n && !doCheck) {\n indeterminate.classList.remove(INDETERMINATE);\n }\n else if (this.checkedNodes.indexOf(node) === -1 && !element && check && (subId === node) && count === 0) {\n this.changeState(parentElement, 'uncheck', null);\n }\n else if (this.checkedNodes.indexOf(subId) === -1 && element && childElementCheck && count === 0) {\n this.changeState(element, 'uncheck', null);\n }\n else if (!element && !parentElement && (subId === node) || (this.parentNodeCheck.indexOf(parent) !== -1) && this.autoCheck) {\n var childElement = this.element.querySelector('[data-uid=\"' + child + '\"]');\n if (doCheck && count !== 0) {\n this.changeState(childElement, 'indeterminate', null);\n }\n else if (doCheck && count === subChild.length && this.checkedNodes.indexOf(parent) === -1) {\n this.checkedNodes.push(parent);\n }\n else if (!doCheck && count === 0 && this.parentNodeCheck.indexOf(parent) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(parent));\n }\n if (this.parentNodeCheck.indexOf(parent) === -1) {\n this.parentNodeCheck.push(parent);\n }\n }\n var innerChild = getValue(this.fields.child.toString(), subChild[j]);\n if (innerChild) {\n this.updateChildIndeterminate(innerChild, subId, node, doCheck, child);\n }\n }\n };\n TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd, doCheck) {\n var _this = this;\n var eventArgs;\n var currLi = closest(wrapper, '.' + LISTITEM);\n if (!isPrevent) {\n this.checkActionNodes = [];\n eventArgs = this.getCheckEvent(currLi, state, e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckAction(wrapper, state, currLi, observedArgs, e, isPrevent, isAdd, doCheck);\n }\n });\n }\n else {\n this.nodeCheckAction(wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck);\n }\n };\n TreeView.prototype.nodeCheckAction = function (wrapper, state, currLi, eventArgs, e, isPrevent, isAdd, doCheck) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n this.addCheck(currLi);\n ariaState = 'true';\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n this.removeCheck(currLi);\n ariaState = 'false';\n }\n else if (state === 'indeterminate' && !frameSpan.classList.contains(INDETERMINATE) && this.autoCheck) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n this.removeCheck(currLi);\n ariaState = 'mixed';\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n if (isAdd) {\n var data = [].concat([], this.checkActionNodes);\n eventArgs = this.getCheckEvent(currLi, state, e);\n if (isUndefined(isPrevent)) {\n eventArgs.data = data;\n }\n }\n if (doCheck !== undefined) {\n this.ensureStateChange(currLi, doCheck);\n }\n if (!isPrevent) {\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n this.allowServerDataBinding = true;\n this.updateServerProperties(\"check\");\n this.allowServerDataBinding = false;\n eventArgs.data[0].checked = ariaState;\n this.trigger('nodeChecked', eventArgs);\n this.checkActionNodes = [];\n }\n }\n };\n TreeView.prototype.addCheck = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n };\n TreeView.prototype.removeCheck = function (liEle) {\n var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.checkedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.getCheckEvent = function (currLi, action, e) {\n this.checkActionNodes.push(this.getNodeData(currLi));\n var nodeData = this.checkActionNodes;\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, data: nodeData };\n };\n TreeView.prototype.finalize = function () {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (!isNullOrUndefined(firstUl)) {\n firstUl.setAttribute('role', treeAriaAttr.treeRole);\n this.setMultiSelect(this.allowMultiSelection);\n var firstNode = select('.' + LISTITEM, this.element);\n if (firstNode) {\n addClass([firstNode], FOCUS);\n this.updateIdAttr(null, firstNode);\n }\n this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;\n this.doExpandAction();\n }\n };\n TreeView.prototype.doExpandAction = function () {\n var eUids = this.expandedNodes;\n if (this.isInitalExpand && eUids.length > 0) {\n this.setProperties({ expandedNodes: [] }, true);\n if (this.isBlazorPlatform && !this.initialRender) {\n return;\n }\n // tslint:disable\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n this.expandGivenNodes(eUids);\n }\n else {\n for (var i = 0; i < eUids.length; i++) {\n var eNode = select('[data-uid=\"' + eUids[i] + '\"]', this.element);\n if (!isNOU(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNOU(icon)) {\n this.expandAction(eNode, icon, null);\n }\n }\n else {\n if (eUids[i] && this.expandChildren.indexOf(eUids[i]) === -1) {\n this.expandChildren.push(eUids[i].toString());\n }\n continue;\n }\n }\n this.afterFinalized();\n }\n }\n else {\n this.afterFinalized();\n }\n };\n TreeView.prototype.expandGivenNodes = function (arr) {\n var proxy = this;\n this.expandCallback(arr[this.index], function () {\n proxy.index++;\n if (proxy.index < arr.length) {\n proxy.expandGivenNodes(arr);\n }\n else {\n proxy.afterFinalized();\n }\n });\n };\n TreeView.prototype.expandCallback = function (eUid, callback) {\n var eNode = select('[data-uid=\"' + eUid + '\"]', this.element);\n if (!isNOU(eNode)) {\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));\n if (!isNOU(icon)) {\n this.expandAction(eNode, icon, null, false, callback);\n }\n else {\n callback();\n }\n }\n else {\n callback();\n }\n };\n TreeView.prototype.afterFinalized = function () {\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\n this.doSelectionAction();\n }\n this.updateCheckedProp();\n if (this.isBlazorPlatform) {\n if (this.initialRender) {\n this.setCheckedNodes(this.checkedNodes);\n }\n this.updateInstance();\n this.initialRender = false;\n }\n this.isAnimate = true;\n this.isInitalExpand = false;\n if (!this.isLoaded || this.isFieldChange) {\n var eventArgs = { data: this.treeData };\n this.trigger('dataBound', eventArgs);\n }\n this.isLoaded = true;\n };\n TreeView.prototype.doSelectionAction = function () {\n var sNodes = selectAll('.' + SELECTED, this.element);\n var sUids = this.selectedNodes;\n if (sUids.length > 0) {\n this.setProperties({ selectedNodes: [] }, true);\n for (var i = 0; i < sUids.length; i++) {\n var sNode = select('[data-uid=\"' + sUids[i] + '\"]', this.element);\n if (sNode && !(sNode.classList.contains('e-active'))) {\n this.selectNode(sNode, null, true);\n }\n else {\n this.selectedNodes.push(sUids[i]);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n }\n else {\n this.selectGivenNodes(sNodes);\n }\n removeClass(sNodes, SELECTED);\n };\n TreeView.prototype.selectGivenNodes = function (sNodes) {\n for (var i = 0; i < sNodes.length; i++) {\n if (!sNodes[i].classList.contains('e-disable')) {\n this.selectNode(sNodes[i], null, true);\n }\n if (!this.allowMultiSelection) {\n break;\n }\n }\n };\n TreeView.prototype.clickHandler = function (event) {\n var target = event.originalEvent.target;\n EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);\n if (!target || this.dragStartAction) {\n return;\n }\n else {\n var classList = target.classList;\n var li = closest(target, '.' + LISTITEM);\n if (!li) {\n return;\n }\n else if (event.originalEvent.which !== 3) {\n var rippleElement = select('.' + RIPPLEELMENT, li);\n var rippleIcons = select('.' + ICON, li);\n this.removeHover();\n this.setFocusElement(li);\n if (this.showCheckBox && !li.classList.contains('e-disable')) {\n var checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNOU(checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);\n this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);\n this.triggerClickEvent(event.originalEvent, li);\n return;\n }\n }\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(li, target, event);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, target, event);\n }\n else if (rippleElement && rippleIcons) {\n if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(EXPANDABLE)) {\n this.expandAction(li, rippleIcons, event);\n }\n else if (rippleIcons.classList.contains(RIPPLE) && rippleIcons.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, rippleIcons, event);\n }\n else if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n else {\n if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n }\n this.triggerClickEvent(event.originalEvent, li);\n }\n };\n TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);\n eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);\n this.trigger('nodeChecked', eventArgs);\n };\n TreeView.prototype.triggerClickEvent = function (e, li) {\n var eventArgs = {\n event: e,\n node: li,\n };\n this.trigger('nodeClicked', eventArgs);\n };\n TreeView.prototype.expandNode = function (currLi, icon, loaded) {\n var _this = this;\n if (icon.classList.contains(LOAD)) {\n this.hideSpinner(icon);\n }\n if (!this.initialRender) {\n icon.classList.add('interaction');\n }\n if (loaded !== true || (loaded === true && currLi.classList.contains('e-expanded'))) {\n if (this.preventExpand !== true) {\n removeClass([icon], EXPANDABLE);\n addClass([icon], COLLAPSIBLE);\n var start_1 = 0;\n var end_1 = 0;\n var proxy_1 = this;\n var ul_1 = select('.' + PARENTITEM, currLi);\n var liEle_1 = currLi;\n this.setHeight(liEle_1, ul_1);\n var activeElement_1 = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n if (this.isAnimate && !this.isRefreshed) {\n this.aniObj.animate(ul_1, {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing,\n begin: function (args) {\n liEle_1.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start_1 = liEle_1.offsetHeight;\n end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;\n },\n progress: function (args) {\n args.element.style.display = 'block';\n proxy_1.animateHeight(args, start_1, end_1);\n },\n end: function (args) {\n args.element.style.display = 'block';\n if (!isNullOrUndefined(activeElement_1) && activeElement_1 instanceof HTMLElement) {\n activeElement_1.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.expandedNode(liEle_1, ul_1, icon);\n }\n });\n }\n else {\n this.expandedNode(liEle_1, ul_1, icon);\n }\n }\n }\n else {\n var ul = select('.' + PARENTITEM, currLi);\n ul.style.display = 'none';\n if (this.fields.dataSource instanceof DataManager === true) {\n this.preventExpand = false;\n }\n }\n if (this.initialRender) {\n icon.classList.add('interaction');\n }\n };\n TreeView.prototype.expandedNode = function (currLi, ul, icon) {\n ul.style.display = 'block';\n currLi.style.display = 'block';\n currLi.style.overflow = '';\n currLi.style.height = '';\n removeClass([icon], PROCESS);\n this.addExpand(currLi);\n this.allowServerDataBinding = true;\n this.updateServerProperties(\"expand\");\n this.allowServerDataBinding = false;\n if (this.isLoaded && this.expandArgs && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, null);\n this.trigger('nodeExpanded', this.expandArgs);\n }\n };\n TreeView.prototype.addExpand = function (liEle) {\n liEle.setAttribute('aria-expanded', 'true');\n removeClass([liEle], NODECOLLAPSED);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.expandedNodes.indexOf(id) === -1) {\n this.expandedNodes.push(id);\n }\n };\n TreeView.prototype.collapseNode = function (currLi, icon, e) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n var colArgs;\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeCollapsing', colArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeCollapseAction(currLi, icon, observedArgs);\n }\n });\n }\n else {\n this.nodeCollapseAction(currLi, icon, colArgs);\n }\n };\n TreeView.prototype.nodeCollapseAction = function (currLi, icon, colArgs) {\n var _this = this;\n removeClass([icon], COLLAPSIBLE);\n addClass([icon], EXPANDABLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n var activeElement = select('.' + LISTITEM + '.' + ACTIVE, currLi);\n if (this.isAnimate) {\n this.aniObj.animate(ul, {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.add(ITEM_ANIMATION_ACTIVE);\n }\n start = select('.' + TEXTWRAP, currLi).offsetHeight;\n end = liEle.offsetHeight;\n },\n progress: function (args) {\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n args.element.style.display = 'none';\n if (!isNullOrUndefined(activeElement) && activeElement instanceof HTMLElement) {\n activeElement.classList.remove(ITEM_ANIMATION_ACTIVE);\n }\n _this.collapsedNode(liEle, ul, icon, colArgs);\n }\n });\n }\n else {\n this.collapsedNode(liEle, ul, icon, colArgs);\n }\n };\n TreeView.prototype.collapsedNode = function (liEle, ul, icon, colArgs) {\n ul.style.display = 'none';\n liEle.style.overflow = '';\n liEle.style.height = '';\n removeClass([icon], PROCESS);\n this.removeExpand(liEle);\n if (this.isLoaded) {\n this.trigger('nodeCollapsed', colArgs);\n }\n };\n TreeView.prototype.removeExpand = function (liEle, toRemove) {\n if (toRemove) {\n liEle.removeAttribute('aria-expanded');\n }\n else {\n this.disableExpandAttr(liEle);\n }\n var index = this.expandedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.expandedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.disableExpandAttr = function (liEle) {\n liEle.setAttribute('aria-expanded', 'false');\n addClass([liEle], NODECOLLAPSED);\n };\n TreeView.prototype.setHeight = function (currLi, ul) {\n ul.style.display = 'block';\n ul.style.visibility = 'hidden';\n currLi.style.height = currLi.offsetHeight + 'px';\n ul.style.display = 'none';\n ul.style.visibility = '';\n };\n TreeView.prototype.animateHeight = function (args, start, end) {\n var remaining = (args.duration - args.timeStamp) / args.duration;\n var currentHeight = (end - start) * remaining + start;\n args.element.parentElement.style.height = currentHeight + 'px';\n };\n TreeView.prototype.renderChildNodes = function (parentLi, expandChild, callback, loaded) {\n var _this = this;\n var eicon = select('div.' + ICON, parentLi);\n if (isNOU(eicon)) {\n return;\n }\n this.showSpinner(eicon);\n var childItems;\n // tslint:disable\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n var level = this.parents(parentLi, '.' + PARENTITEM).length;\n var mapper_2 = this.getChildFields(this.fields, level, 1);\n if (isNOU(mapper_2) || isNOU(mapper_2.dataSource)) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n return;\n }\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.dataSource.offline)) {\n this.treeList.pop();\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n this.updateTemplateForBlazor();\n }\n else {\n mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {\n _this.treeList.pop();\n childItems = e.result;\n if (_this.dataType === 1) {\n _this.dataType = 2;\n }\n _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);\n _this.updateTemplateForBlazor();\n }).catch(function (e) {\n _this.trigger('actionFailure', { error: e });\n });\n }\n }\n else {\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n return;\n }\n else {\n if (!this.isBlazorPlatform || !this.initialRender) {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, this.getSortedData(childItems), this.listBaseOption));\n }\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n if (this.loadOnDemand && this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\n }\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded);\n }\n }\n };\n TreeView.prototype.loadChild = function (childItems, mapper, eicon, parentLi, expandChild, callback, loaded) {\n this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n this.removeExpand(parentLi, true);\n }\n else {\n this.updateListProp(mapper);\n if (this.fields.dataSource instanceof DataManager && !this.fields.dataSource.dataSource.offline) {\n var id = parentLi.getAttribute('data-uid');\n var nodeData = this.getNodeObject(id);\n setValue('child', childItems, nodeData);\n }\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.createElement, childItems, this.listBaseOption));\n this.expandNode(parentLi, eicon, loaded);\n this.setSelectionForChildNodes(childItems);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.disableTreeNodes(childItems);\n this.renderSubChild(parentLi, expandChild, loaded);\n }\n if (callback) {\n callback();\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.disableTreeNodes = function (childItems) {\n var i = 0;\n while (i < childItems.length) {\n var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n if (this.disableNode !== undefined && this.disableNode.indexOf(id) !== -1) {\n this.doDisableAction([id]);\n }\n i++;\n }\n };\n /**\n * Sets the child Item in selectedState while rendering the child node\n */\n TreeView.prototype.setSelectionForChildNodes = function (nodes) {\n var i;\n for (i = 0; i < nodes.length; i++) {\n var id = nodes[i][this.fields.id] ? nodes[i][this.fields.id].toString() : null;\n if (this.selectedNodes !== undefined && this.selectedNodes.indexOf(id) !== -1) {\n this.doSelectionAction();\n }\n }\n };\n TreeView.prototype.ensureCheckNode = function (element) {\n if (this.showCheckBox) {\n this.ele = (this.checkedElement) ? this.checkedElement.indexOf(element.getAttribute('data-uid')) : null;\n if (this.autoCheck) {\n this.ensureChildCheckState(element);\n this.ensureParentCheckState(element);\n }\n }\n this.currentLoadData = null;\n };\n TreeView.prototype.getFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return mapper;\n }\n else {\n return this.getFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildFields = function (mapper, nodeLevel, dataLevel) {\n var childData;\n if (nodeLevel === dataLevel) {\n return this.getChildMapper(mapper);\n }\n else {\n return this.getChildFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildMapper = function (mapper) {\n return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;\n };\n TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {\n if (isRoot === void 0) { isRoot = false; }\n var childNodes;\n if (isNOU(obj)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n return this.getChildGroup(this.groupedData, parentId, isRoot);\n }\n else {\n if (typeof this.fields.child === 'string') {\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, obj[i]);\n if (dataId && dataId.toString() === parentId) {\n return getValue(this.fields.child, obj[i]);\n }\n else if (!isNOU(getValue(this.fields.child, obj[i]))) {\n childNodes = this.getChildNodes(getValue(this.fields.child, obj[i]), parentId);\n if (childNodes !== undefined) {\n break;\n }\n }\n }\n }\n }\n return childNodes;\n };\n TreeView.prototype.getChildGroup = function (data, parentId, isRoot) {\n var childNodes;\n if (isNOU(data)) {\n return childNodes;\n }\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n if (!isNOU(data[i][0]) && !isNOU(getValue(this.fields.parentID, data[i][0]))) {\n if (getValue(this.fields.parentID, data[i][0]).toString() === parentId) {\n return data[i];\n }\n }\n else if (isRoot) {\n return data[i];\n }\n else {\n return [];\n }\n }\n return childNodes;\n };\n TreeView.prototype.renderSubChild = function (element, expandChild, loaded) {\n if (expandChild) {\n var cIcons = selectAll('.' + EXPANDABLE, element);\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n if (element.querySelector('.e-icons') !== cIcons[i]) {\n var curLi = closest(icon, '.' + LISTITEM);\n this.expandArgs = this.getExpandEvent(curLi, null);\n if (loaded !== true) {\n this.trigger('nodeExpanding', this.expandArgs);\n }\n this.renderChildNodes(curLi, expandChild, null, loaded);\n }\n }\n }\n };\n TreeView.prototype.toggleSelect = function (li, e, multiSelect) {\n if (!li.classList.contains('e-disable')) {\n if (this.allowMultiSelection && ((e && e.ctrlKey) || multiSelect) && this.isActive(li)) {\n this.unselectNode(li, e);\n }\n else {\n this.selectNode(li, e, multiSelect);\n }\n }\n };\n TreeView.prototype.isActive = function (li) {\n return li.classList.contains(ACTIVE) ? true : false;\n };\n TreeView.prototype.selectNode = function (li, e, multiSelect) {\n var _this = this;\n if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {\n this.setFocusElement(li);\n return;\n }\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeSelectAction(li, e, observedArgs, multiSelect);\n }\n });\n }\n else {\n this.nodeSelectAction(li, e, eventArgs, multiSelect);\n }\n };\n TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {\n if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {\n this.removeSelectAll();\n }\n if (this.allowMultiSelection && e && e.shiftKey) {\n if (!this.startNode) {\n this.startNode = li;\n }\n var startIndex = this.liList.indexOf(this.startNode);\n var endIndex = this.liList.indexOf(li);\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex; i <= endIndex; i++) {\n var currNode = this.liList[i];\n if (isVisible(currNode) && !currNode.classList.contains('e-disable')) {\n this.addSelect(currNode);\n }\n }\n }\n else {\n this.startNode = li;\n this.addSelect(li);\n }\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.allowServerDataBinding = true;\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = false;\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.unselectNode = function (li, e) {\n var _this = this;\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'un-select', e);\n this.trigger('nodeSelecting', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.allowServerDataBinding = true;\n _this.updateServerProperties(\"select\");\n _this.allowServerDataBinding = false;\n _this.nodeUnselectAction(li, observedArgs);\n }\n });\n }\n else {\n this.nodeUnselectAction(li, eventArgs);\n }\n };\n TreeView.prototype.nodeUnselectAction = function (li, eventArgs) {\n this.removeSelect(li);\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.allowServerDataBinding = true;\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = false;\n eventArgs.nodeData = this.getNodeData(li);\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.setFocusElement = function (li) {\n if (!isNOU(li)) {\n var focusedNode = this.getFocusedNode();\n if (focusedNode) {\n removeClass([focusedNode], FOCUS);\n }\n addClass([li], FOCUS);\n this.updateIdAttr(focusedNode, li);\n }\n };\n TreeView.prototype.addSelect = function (liEle) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n };\n TreeView.prototype.removeSelect = function (liEle) {\n if (this.allowMultiSelection) {\n liEle.setAttribute('aria-selected', 'false');\n }\n else {\n liEle.removeAttribute('aria-selected');\n }\n removeClass([liEle], ACTIVE);\n var index = this.selectedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.selectedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.removeSelectAll = function () {\n var selectedLI = this.element.querySelectorAll('.' + ACTIVE);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.allowMultiSelection) {\n ele.setAttribute('aria-selected', 'false');\n }\n else {\n ele.removeAttribute('aria-selected');\n }\n }\n removeClass(selectedLI, ACTIVE);\n this.setProperties({ selectedNodes: [] }, true);\n };\n TreeView.prototype.getSelectEvent = function (currLi, action, e) {\n var nodeData = this.getNodeData(currLi);\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData };\n };\n TreeView.prototype.setExpandOnType = function () {\n this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;\n };\n TreeView.prototype.expandHandler = function (e) {\n var target = e.originalEvent.target;\n if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||\n target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||\n target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {\n return;\n }\n else {\n this.expandCollapseAction(closest(target, '.' + LISTITEM), e);\n }\n };\n TreeView.prototype.expandCollapseAction = function (currLi, e) {\n var icon = select('div.' + ICON, currLi);\n if (!icon || icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n var classList = icon.classList;\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(currLi, icon, e);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(currLi, icon, e);\n }\n }\n };\n TreeView.prototype.expandAction = function (currLi, icon, e, expandChild, callback) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n if (this.isLoaded && !this.isRefreshed) {\n this.expandArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeExpanding', this.expandArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n removeClass([icon], PROCESS);\n }\n else {\n _this.nodeExpandAction(currLi, icon, expandChild, callback);\n }\n });\n }\n else {\n this.nodeExpandAction(currLi, icon, expandChild, callback);\n }\n };\n TreeView.prototype.nodeExpandAction = function (currLi, icon, expandChild, callback) {\n var ul = select('.' + PARENTITEM, currLi);\n if (ul && ul.nodeName === 'UL') {\n this.expandNode(currLi, icon);\n }\n else {\n this.renderChildNodes(currLi, expandChild, callback);\n var liEles = selectAll('.' + LISTITEM, currLi);\n for (var i = 0; i < liEles.length; i++) {\n var id = this.getId(liEles[i]);\n if (this.expandChildren.indexOf(id) !== -1 && this.expandChildren !== undefined) {\n var icon_1 = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEles[i]));\n if (!isNOU(icon_1)) {\n this.expandAction(liEles[i], icon_1, null);\n }\n this.expandChildren.splice(this.expandChildren.indexOf(id), 1);\n }\n }\n }\n };\n TreeView.prototype.keyActionHandler = function (e) {\n var _this = this;\n var target = e.target;\n var focusedNode = this.getFocusedNode();\n if (target && target.classList.contains(INPUT)) {\n var inpEle = target;\n if (e.action === 'enter') {\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n else if (e.action === 'escape') {\n inpEle.value = this.oldText;\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n return;\n }\n e.preventDefault();\n var eventArgs = {\n cancel: false,\n event: e,\n node: focusedNode,\n };\n this.trigger('keyPress', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n switch (e.action) {\n case 'space':\n if (_this.showCheckBox) {\n _this.checkNode(e);\n }\n break;\n case 'moveRight':\n _this.openNode(_this.enableRtl ? false : true, e);\n break;\n case 'moveLeft':\n _this.openNode(_this.enableRtl ? true : false, e);\n break;\n case 'shiftDown':\n _this.shiftKeySelect(true, e);\n break;\n case 'moveDown':\n case 'ctrlDown':\n case 'csDown':\n _this.navigateNode(true);\n break;\n case 'shiftUp':\n _this.shiftKeySelect(false, e);\n break;\n case 'moveUp':\n case 'ctrlUp':\n case 'csUp':\n _this.navigateNode(false);\n break;\n case 'home':\n case 'shiftHome':\n case 'ctrlHome':\n case 'csHome':\n _this.navigateRootNode(true);\n break;\n case 'end':\n case 'shiftEnd':\n case 'ctrlEnd':\n case 'csEnd':\n _this.navigateRootNode(false);\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n _this.toggleSelect(focusedNode, e);\n break;\n case 'f2':\n if (_this.allowEditing && !focusedNode.classList.contains('e-disable')) {\n _this.createTextbox(focusedNode, e);\n }\n break;\n case 'ctrlA':\n if (_this.allowMultiSelection) {\n var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', _this.element);\n _this.selectGivenNodes(sNodes);\n }\n break;\n }\n }\n });\n };\n TreeView.prototype.navigateToFocus = function (isUp) {\n var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);\n var pos = focusNode.getBoundingClientRect();\n var parent = this.getScrollParent(this.element);\n if (!isNOU(parent)) {\n var parentPos = parent.getBoundingClientRect();\n if (pos.bottom > parentPos.bottom) {\n parent.scrollTop += pos.bottom - parentPos.bottom;\n }\n else if (pos.top < parentPos.top) {\n parent.scrollTop -= parentPos.top - pos.top;\n }\n }\n var isVisible = this.isVisibleInViewport(focusNode);\n if (!isVisible) {\n focusNode.scrollIntoView(isUp);\n }\n };\n TreeView.prototype.isVisibleInViewport = function (txtWrap) {\n var pos = txtWrap.getBoundingClientRect();\n return (pos.top >= 0 && pos.left >= 0 && pos.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n pos.right <= (window.innerWidth || document.documentElement.clientWidth));\n };\n TreeView.prototype.getScrollParent = function (node) {\n if (isNOU(node)) {\n return null;\n }\n return (node.scrollHeight > node.clientHeight) ? node : this.getScrollParent(node.parentElement);\n };\n TreeView.prototype.shiftKeySelect = function (isTowards, e) {\n if (this.allowMultiSelection) {\n var focusedNode = this.getFocusedNode();\n var nextNode = isTowards ? this.getNextNode(focusedNode) : this.getPrevNode(focusedNode);\n this.removeHover();\n this.setFocusElement(nextNode);\n this.toggleSelect(nextNode, e, false);\n this.navigateToFocus(!isTowards);\n }\n else {\n this.navigateNode(isTowards);\n }\n };\n TreeView.prototype.checkNode = function (e) {\n var focusedNode = this.getFocusedNode();\n var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);\n var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);\n if (!focusedNode.classList.contains('e-disable')) {\n if (focusedNode.getElementsByClassName(\"e-checkbox-disabled\").length == 0) {\n this.validateCheckNode(checkWrap, isChecked, focusedNode, e);\n }\n }\n };\n TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {\n var _this = this;\n var currLi = closest(checkWrap, '.' + LISTITEM);\n this.checkActionNodes = [];\n var ariaState = !isCheck ? 'true' : 'false';\n if (!isNOU(ariaState)) {\n checkWrap.setAttribute('aria-checked', ariaState);\n }\n var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);\n this.trigger('nodeChecking', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.nodeCheckingAction(checkWrap, isCheck, li, observedArgs, e);\n }\n });\n };\n TreeView.prototype.nodeCheckingAction = function (checkWrap, isCheck, li, eventArgs, e) {\n if (this.checkedElement.indexOf(li.getAttribute('data-uid')) === -1) {\n this.checkedElement.push(li.getAttribute('data-uid'));\n var child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));\n (child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;\n }\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);\n if (this.autoCheck) {\n this.ensureChildCheckState(li);\n this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));\n var doCheck = void 0;\n if (eventArgs.action === 'check') {\n doCheck = true;\n }\n else if (eventArgs.action === 'uncheck') {\n doCheck = false;\n }\n this.ensureStateChange(li, doCheck);\n }\n this.allowServerDataBinding = true;\n this.updateServerProperties(\"check\");\n this.allowServerDataBinding = false;\n this.nodeCheckedEvent(checkWrap, isCheck, e);\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM\n */\n TreeView.prototype.ensureStateChange = function (li, doCheck) {\n var childElement = select('.' + PARENTITEM, li);\n var parentIndex = li.getAttribute('data-uid');\n var mapper = this.fields;\n if (this.dataType === 1 && this.autoCheck) {\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.parentID, 'equal', parentIndex, true));\n for (var i = 0; i < resultData.length; i++) {\n var resultId = resultData[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;\n var isCheck = resultData[i][this.fields.isChecked] ? resultData[i][this.fields.isChecked].toString() : null;\n if (this.checkedNodes.indexOf(parentIndex) !== -1 && this.checkedNodes.indexOf(resultId) === -1) {\n this.checkedNodes.push(resultId);\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null &&\n this.checkedNodes.indexOf(resultId) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(resultId), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, resultId, 'isChecked', null);\n }\n if (this.checkedNodes.indexOf(parentIndex) === -1 && childElement === null ||\n this.parentNodeCheck.indexOf(resultId) !== -1) {\n var childNodes = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childNodes, doCheck);\n if (this.parentNodeCheck.indexOf(resultId) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(resultId), 1);\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, resultId);\n this.getChildItems(childItems, doCheck);\n }\n }\n }\n else if (this.dataType === 1 && !this.autoCheck) {\n if (!doCheck) {\n var checkedData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));\n for (var i = 0; i < checkedData.length; i++) {\n var id = checkedData[i][this.fields.id] ? checkedData[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(id) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);\n }\n this.updateField(this.treeData, this.fields, id, 'isChecked', null);\n }\n this.checkedNodes = [];\n }\n else {\n for (var i = 0; i < this.treeData.length; i++) {\n var checkedId = this.treeData[i][this.fields.id] ? this.treeData[i][this.fields.id].toString() : null;\n if (this.checkedNodes.indexOf(checkedId) === -1) {\n this.checkedNodes.push(checkedId);\n }\n }\n }\n }\n else {\n var childItems = this.getChildNodes(this.treeData, parentIndex);\n if (childItems) {\n this.childStateChange(childItems, parentIndex, childElement, doCheck);\n }\n }\n };\n TreeView.prototype.getChildItems = function (childItems, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var childId = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;\n var childIsCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() :\n null;\n if (this.checkedNodes.indexOf(childId) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(childId), 1);\n }\n if (this.checkedNodes.indexOf(childId) === -1 && doCheck) {\n this.checkedNodes.push(childId);\n }\n if (childIsCheck === 'true' && !doCheck) {\n this.updateField(this.treeData, this.fields, childId, 'isChecked', null);\n }\n var subChildItems = this.getChildNodes(this.treeData, childId);\n if (subChildItems.length > 0) {\n this.getChildItems(subChildItems, doCheck);\n }\n }\n };\n /**\n * Update checkedNodes when UI interaction happens before the child node renders in DOM for hierarchical DS\n */\n TreeView.prototype.childStateChange = function (childItems, parent, childElement, doCheck) {\n for (var i = 0; i < childItems.length; i++) {\n var checkedChild = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : '';\n var isCheck = childItems[i][this.fields.isChecked] ? childItems[i][this.fields.isChecked].toString() : null;\n if (this.autoCheck) {\n if (this.checkedNodes.indexOf(parent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n if (this.parentNodeCheck.indexOf(checkedChild) !== -1) {\n this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(checkedChild), 1);\n }\n }\n else if (this.checkedNodes.indexOf(parent) === -1 && this.checkedNodes.indexOf(checkedChild) !== -1 && !doCheck) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n if (isCheck === 'true') {\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n }\n }\n }\n else if (!this.autoCheck) {\n if (!doCheck) {\n if (this.checkedNodes.indexOf(checkedChild) !== -1) {\n this.checkedNodes.splice(this.checkedNodes.indexOf(checkedChild), 1);\n }\n this.updateField(this.treeData, this.fields, checkedChild, 'isChecked', null);\n this.checkedNodes = [];\n }\n else {\n if (this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n }\n }\n var subChild = this.getChildNodes([childItems[i]], checkedChild);\n if (subChild) {\n this.childStateChange(subChild, parent, childElement, doCheck);\n }\n }\n };\n //This method can be used to get all child nodes of a parent by passing the children of a parent along with 'validateCheck' set to false\n TreeView.prototype.allCheckNode = function (child, newCheck, checked, childCheck, validateCheck) {\n if (child) {\n for (var length_1 = 0; length_1 < child.length; length_1++) {\n var childId = getValue(this.fields.id, child[length_1]);\n var check = this.element.querySelector('[data-uid=\"' + childId + '\"]');\n //Validates isChecked case while no UI interaction has been performed on the node or it's parent\n if (validateCheck !== false && this.checkedElement.indexOf(childId.toString()) === -1) {\n if (((check === null && !isNOU(child[length_1][this.fields.isChecked]) && newCheck.indexOf(childId.toString()) === -1)\n || childCheck === 0 || checked === 2)) {\n (child[length_1][this.fields.isChecked] !== false || checked === 2) ? newCheck.push(childId.toString())\n : childCheck = null;\n childCheck = (child[length_1][this.fields.isChecked] !== false || checked === 2) ? 0 : null;\n }\n }\n //Pushes child checked node done thro' UI interaction\n if (newCheck.indexOf(childId.toString()) === -1 && isNOU(checked)) {\n newCheck.push(childId.toString());\n }\n //Gets if any next level children are available for child nodes\n if (getValue(this.fields.hasChildren, child[length_1]) === true ||\n getValue(this.fields.child.toString(), child[length_1])) {\n var id = getValue(this.fields.id, child[length_1]);\n var childId_1 = this.getChildNodes(this.treeData, id.toString());\n if (childId_1) {\n (isNOU(validateCheck)) ? this.allCheckNode(childId_1, newCheck, checked, childCheck) :\n this.allCheckNode(childId_1, newCheck, checked, childCheck, validateCheck);\n childCheck = null;\n }\n }\n childCheck = null;\n }\n }\n };\n TreeView.prototype.openNode = function (toBeOpened, e) {\n var focusedNode = this.getFocusedNode();\n var icon = select('div.' + ICON, focusedNode);\n if (toBeOpened) {\n if (!icon) {\n return;\n }\n else if (icon.classList.contains(EXPANDABLE)) {\n this.expandAction(focusedNode, icon, e);\n }\n else {\n this.focusNextNode(focusedNode, true);\n }\n }\n else {\n if (icon && icon.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(focusedNode, icon, e);\n }\n else {\n var parentLi = closest(closest(focusedNode, '.' + PARENTITEM), '.' + LISTITEM);\n if (!parentLi) {\n return;\n }\n else {\n if (!parentLi.classList.contains('e-disable')) {\n this.setFocus(focusedNode, parentLi);\n this.navigateToFocus(true);\n }\n }\n }\n }\n };\n TreeView.prototype.navigateNode = function (isTowards) {\n var focusedNode = this.getFocusedNode();\n this.focusNextNode(focusedNode, isTowards);\n };\n TreeView.prototype.navigateRootNode = function (isBackwards) {\n var focusedNode = this.getFocusedNode();\n var rootNode = isBackwards ? this.getRootNode() : this.getEndNode();\n if (!rootNode.classList.contains('e-disable')) {\n this.setFocus(focusedNode, rootNode);\n this.navigateToFocus(isBackwards);\n }\n };\n TreeView.prototype.getFocusedNode = function () {\n var selectedItem;\n var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);\n if (isNOU(fNode)) {\n selectedItem = select('.' + LISTITEM, this.element);\n }\n return isNOU(fNode) ? (isNOU(selectedItem) ? this.element.firstElementChild : selectedItem) : fNode;\n };\n TreeView.prototype.focusNextNode = function (li, isTowards) {\n var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);\n this.setFocus(li, nextNode);\n this.navigateToFocus(!isTowards);\n if (nextNode.classList.contains('e-disable')) {\n var lastChild = nextNode.lastChild;\n if (nextNode.previousSibling == null && nextNode.classList.contains('e-level-1')) {\n this.focusNextNode(nextNode, true);\n }\n else if (nextNode.nextSibling == null && nextNode.classList.contains('e-node-collapsed')) {\n this.focusNextNode(nextNode, false);\n }\n else if (nextNode.nextSibling == null && lastChild.classList.contains('e-text-content')) {\n this.focusNextNode(nextNode, false);\n }\n else {\n this.focusNextNode(nextNode, isTowards);\n }\n }\n };\n TreeView.prototype.getNextNode = function (li) {\n var index = this.liList.indexOf(li);\n var nextNode;\n do {\n index++;\n nextNode = this.liList[index];\n if (isNOU(nextNode)) {\n return li;\n }\n } while (!isVisible(nextNode));\n return nextNode;\n };\n TreeView.prototype.getPrevNode = function (li) {\n var index = this.liList.indexOf(li);\n var prevNode;\n do {\n index--;\n prevNode = this.liList[index];\n if (isNOU(prevNode)) {\n return li;\n }\n } while (!isVisible(prevNode));\n return prevNode;\n };\n TreeView.prototype.getRootNode = function () {\n var index = 0;\n var rootNode;\n do {\n rootNode = this.liList[index];\n index++;\n } while (!isVisible(rootNode));\n return rootNode;\n };\n TreeView.prototype.getEndNode = function () {\n var index = this.liList.length - 1;\n var endNode;\n do {\n endNode = this.liList[index];\n index--;\n } while (!isVisible(endNode));\n return endNode;\n };\n TreeView.prototype.setFocus = function (preNode, nextNode) {\n removeClass([preNode], [HOVER, FOCUS]);\n if (!nextNode.classList.contains('e-disable')) {\n addClass([nextNode], [HOVER, FOCUS]);\n this.updateIdAttr(preNode, nextNode);\n }\n };\n TreeView.prototype.updateIdAttr = function (preNode, nextNode) {\n this.element.removeAttribute('aria-activedescendant');\n if (preNode) {\n preNode.removeAttribute('id');\n }\n nextNode.setAttribute('id', this.element.id + '_active');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n };\n TreeView.prototype.focusIn = function () {\n if (!this.mouseDownStatus) {\n addClass([this.getFocusedNode()], HOVER);\n }\n this.mouseDownStatus = false;\n };\n TreeView.prototype.focusOut = function () {\n removeClass([this.getFocusedNode()], HOVER);\n };\n TreeView.prototype.onMouseOver = function (e) {\n var target = e.target;\n var classList = target.classList;\n var currentLi = closest(target, '.' + LISTITEM);\n if (!currentLi || classList.contains(PARENTITEM) || classList.contains(LISTITEM)) {\n this.removeHover();\n return;\n }\n else {\n if (currentLi && !currentLi.classList.contains('e-disable')) {\n this.setHover(currentLi);\n }\n }\n };\n TreeView.prototype.setHover = function (li) {\n if (!li.classList.contains(HOVER)) {\n this.removeHover();\n addClass([li], HOVER);\n }\n };\n ;\n TreeView.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n TreeView.prototype.removeHover = function () {\n var hoveredNode = selectAll('.' + HOVER, this.element);\n if (hoveredNode && hoveredNode.length) {\n removeClass(hoveredNode, HOVER);\n }\n };\n ;\n TreeView.prototype.getNodeData = function (currLi, fromDS) {\n if (!isNOU(currLi) && currLi.classList.contains(LISTITEM) &&\n !isNOU(closest(currLi, '.' + CONTROL)) && closest(currLi, '.' + CONTROL).classList.contains(ROOT)) {\n var id = currLi.getAttribute('data-uid');\n var text = this.getText(currLi, fromDS);\n var pNode = closest(currLi.parentNode, '.' + LISTITEM);\n var pid = pNode ? pNode.getAttribute('data-uid') : null;\n var selected = currLi.classList.contains(ACTIVE);\n var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;\n var hasChildren = (currLi.getAttribute('aria-expanded') === null) ? false : true;\n var checked = null;\n if (this.showCheckBox) {\n checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');\n }\n return {\n id: id, text: text, parentID: pid, selected: selected, expanded: expanded,\n isChecked: checked, hasChildren: hasChildren\n };\n }\n return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };\n };\n TreeView.prototype.getText = function (currLi, fromDS) {\n if (fromDS) {\n var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));\n var level = parseFloat(currLi.getAttribute('aria-level'));\n var nodeFields = this.getFields(this.fields, level, 1);\n return getValue(nodeFields.text, nodeData);\n }\n return select('.' + LISTTEXT, currLi).textContent;\n };\n TreeView.prototype.getExpandEvent = function (currLi, e) {\n var nodeData = this.getNodeData(currLi);\n return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };\n };\n TreeView.prototype.destroyTemplate = function (nodeTemplate) {\n this.clearTemplate(['nodeTemplate']);\n };\n TreeView.prototype.reRenderNodes = function () {\n resetBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate');\n if (this.isBlazorPlatform) {\n this.ulElement = this.element.querySelector('.e-list-parent.e-ul');\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n else {\n this.element.innerHTML = '';\n }\n if (!isNOU(this.nodeTemplateFn)) {\n this.destroyTemplate(this.nodeTemplate);\n }\n this.setTouchClass();\n this.setProperties({ selectedNodes: [], checkedNodes: [], expandedNodes: [] }, true);\n this.checkedElement = [];\n this.isLoaded = false;\n this.setDataBinding(true);\n };\n TreeView.prototype.setCssClass = function (oldClass, newClass) {\n if (!isNOU(oldClass) && oldClass !== '') {\n removeClass([this.element], oldClass.split(' '));\n }\n if (!isNOU(newClass) && newClass !== '') {\n addClass([this.element], newClass.split(' '));\n }\n };\n TreeView.prototype.editingHandler = function (e) {\n var target = e.target;\n if (!target || target.classList.contains(ROOT) || target.classList.contains(PARENTITEM) ||\n target.classList.contains(LISTITEM) || target.classList.contains(ICON) ||\n target.classList.contains(INPUT) || target.classList.contains(INPUTGROUP)) {\n return;\n }\n else {\n var liEle = closest(target, '.' + LISTITEM);\n this.createTextbox(liEle, e);\n }\n };\n TreeView.prototype.createTextbox = function (liEle, e) {\n var _this = this;\n var oldInpEle = select('.' + TREEINPUT, this.element);\n if (oldInpEle) {\n oldInpEle.blur();\n }\n var textEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var innerEle = this.createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });\n var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var inpWidth = textEle.offsetWidth + 5;\n var style = 'width:' + inpWidth + 'px';\n addClass([liEle], EDITING);\n textEle.innerHTML = eventArgs.innerHtml;\n var inpEle = select('.' + TREEINPUT, textEle);\n _this.inputObj = Input.createInput({\n element: inpEle,\n properties: {\n enableRtl: _this.enableRtl,\n }\n }, _this.createElement);\n _this.inputObj.container.setAttribute('style', style);\n inpEle.focus();\n var inputEle = inpEle;\n inputEle.setSelectionRange(0, inputEle.value.length);\n _this.wireInputEvents(inpEle);\n }\n });\n };\n TreeView.prototype.updateOldText = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n this.editData = this.getNodeObject(id);\n var level = parseFloat(liEle.getAttribute('aria-level'));\n this.editFields = this.getFields(this.fields, level, 1);\n this.oldText = getValue(this.editFields.text, this.editData);\n };\n TreeView.prototype.inputFocusOut = function (e) {\n if (!select('.' + TREEINPUT, this.element)) {\n return;\n }\n var target = e.target;\n var newText = target.value;\n var txtEle = closest(target, '.' + LISTTEXT);\n var liEle = closest(target, '.' + LISTITEM);\n detach(this.inputObj.container);\n if (this.fields.dataSource instanceof DataManager && !(this.fields.dataSource.dataSource.offline) && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n this.crudOperation('update', null, liEle, newText, null, null, true);\n }\n else {\n this.appendNewText(liEle, txtEle, newText, true);\n }\n };\n TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {\n var _this = this;\n var eventArgs = this.getEditEvent(liEle, newText, null);\n this.trigger('nodeEdited', eventArgs, function (observedArgs) {\n newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;\n var newData = setValue(_this.editFields.text, newText, _this.editData);\n if (!isNOU(_this.nodeTemplateFn)) {\n txtEle.innerText = '';\n var tempArr = _this.nodeTemplateFn(newData, undefined, undefined, _this.element.id + 'nodeTemplate', _this.isStringTemplate);\n tempArr = Array.prototype.slice.call(tempArr);\n append(tempArr, txtEle);\n _this.updateBlazorTemplate();\n }\n else {\n txtEle.innerText = newText;\n }\n if (isInput) {\n removeClass([liEle], EDITING);\n txtEle.focus();\n }\n if (observedArgs.oldText !== newText) {\n _this.triggerEvent();\n }\n });\n };\n TreeView.prototype.getElement = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return this.element.querySelector('[data-uid=\"' + ele + '\"]');\n }\n else if (typeof ele === 'object') {\n return getElement(ele);\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getId = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return ele;\n }\n else if (typeof ele === 'object') {\n return (getElement(ele)).getAttribute('data-uid');\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getEditEvent = function (liEle, newText, inpEle) {\n var data = this.getNodeData(liEle);\n return { cancel: false, newText: newText, node: liEle, nodeData: data, oldText: this.oldText, innerHtml: inpEle };\n };\n TreeView.prototype.getNodeObject = function (id) {\n var childNodes;\n if (isNOU(id)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n for (var i = 0, objlen = this.treeData.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, this.treeData[i]);\n if (!isNOU(this.treeData[i]) && !isNOU(dataId) && dataId.toString() === id) {\n return this.treeData[i];\n }\n }\n }\n else {\n return this.getChildNodeObject(this.treeData, this.fields, id);\n }\n return childNodes;\n };\n TreeView.prototype.getChildNodeObject = function (obj, mapper, id) {\n var newList;\n if (isNOU(obj)) {\n return newList;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(mapper.id, obj[i]);\n if (obj[i] && dataId && dataId.toString() === id) {\n return obj[i];\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var child = 'child';\n newList = this.getChildNodeObject(getValue(child, obj[i]), this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n }\n return newList;\n };\n TreeView.prototype.setDragAndDrop = function (toBind) {\n if (toBind && !this.disabled) {\n this.initializeDrag();\n }\n else {\n this.destroyDrag();\n }\n };\n // tslint:disable-next-line:max-func-body-length\n TreeView.prototype.initializeDrag = function () {\n var _this = this;\n var virtualEle;\n var proxy = this;\n this.dragObj = new Draggable(this.element, {\n enableTailMode: true, enableAutoScroll: true,\n dragArea: this.dragArea,\n dragTarget: '.' + TEXTWRAP,\n helper: function (e) {\n _this.dragTarget = e.sender.target;\n var dragRoot = closest(_this.dragTarget, '.' + ROOT);\n var dragWrap = closest(_this.dragTarget, '.' + TEXTWRAP);\n _this.dragLi = closest(_this.dragTarget, '.' + LISTITEM);\n if (_this.fullRowSelect && !dragWrap && _this.dragTarget.classList.contains(FULLROW)) {\n dragWrap = _this.dragTarget.nextElementSibling;\n }\n if (!_this.dragTarget || !e.element.isSameNode(dragRoot) || !dragWrap ||\n _this.dragTarget.classList.contains(ROOT) || _this.dragTarget.classList.contains(PARENTITEM) ||\n _this.dragTarget.classList.contains(LISTITEM) || _this.dragLi.classList.contains('e-disable')) {\n return false;\n }\n var cloneEle = (dragWrap.cloneNode(true));\n if (isNOU(select('div.' + ICON, cloneEle))) {\n var icon = proxy.createElement('div', { className: ICON + ' ' + EXPANDABLE });\n cloneEle.insertBefore(icon, cloneEle.children[0]);\n }\n var cssClass = DRAGITEM + ' ' + ROOT + ' ' + _this.cssClass + ' ' + (_this.enableRtl ? RTL : '');\n virtualEle = proxy.createElement('div', { className: cssClass });\n virtualEle.appendChild(cloneEle);\n var nLen = _this.selectedNodes.length;\n if (nLen > 1 && _this.allowMultiSelection && _this.dragLi.classList.contains(ACTIVE)) {\n var cNode = proxy.createElement('span', { className: DROPCOUNT, innerHTML: '' + nLen });\n virtualEle.appendChild(cNode);\n }\n document.body.appendChild(virtualEle);\n document.body.style.cursor = '';\n _this.dragData = _this.getNodeData(_this.dragLi);\n return virtualEle;\n },\n dragStart: function (e) {\n addClass([_this.element], DRAGGING);\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);\n if (eventArgs.draggedNode.classList.contains(EDITING)) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {\n if (observedArgs.cancel) {\n _this.dragObj.intDestroy(e.event);\n _this.dragCancelAction(virtualEle);\n }\n else {\n _this.dragStartAction = true;\n }\n if (isBlazor()) {\n e.bindEvents(getElement(e.dragElement));\n }\n });\n }\n },\n drag: function (e) {\n _this.dragObj.setProperties({ cursorAt: { top: (!isNOU(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n _this.dragAction(e, virtualEle);\n },\n dragStop: function (e) {\n removeClass([_this.element], DRAGGING);\n _this.removeVirtualEle();\n var dropTarget = e.target;\n var preventTargetExpand = false;\n var dropRoot = (closest(dropTarget, '.' + DROPPABLE));\n if (!dropTarget || !dropRoot) {\n detach(e.helper);\n document.body.style.cursor = '';\n }\n var listItem = closest(dropTarget, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget, null, e.helper, level);\n eventArgs.preventTargetExpand = preventTargetExpand;\n if ((_this.isBlazorPlatform && _this.dragStartAction) || !_this.isBlazorPlatform) {\n _this.trigger('nodeDragStop', eventArgs, function (observedArgs) {\n _this.dragParent = observedArgs.draggedParentNode;\n _this.preventExpand = observedArgs.preventTargetExpand;\n if (observedArgs.cancel) {\n if (e.helper.parentNode) {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n }\n _this.dragStartAction = false;\n if (_this.isBlazorPlatform) {\n _this.dropAction(e, true);\n }\n });\n }\n }\n });\n this.dropObj = new Droppable(this.element, {\n out: function (e) {\n if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {\n document.body.style.cursor = 'not-allowed';\n }\n },\n over: function (e) {\n document.body.style.cursor = '';\n },\n drop: function (e) {\n if (!_this.isBlazorPlatform) {\n _this.dropAction(e);\n }\n }\n });\n };\n TreeView.prototype.dragCancelAction = function (virtualEle) {\n detach(virtualEle);\n removeClass([this.element], DRAGGING);\n this.dragStartAction = false;\n };\n TreeView.prototype.dragAction = function (e, virtualEle) {\n var dropRoot = closest(e.target, '.' + DROPPABLE);\n var dropWrap = closest(e.target, '.' + TEXTWRAP);\n var icon = select('div.' + ICON, virtualEle);\n removeClass([icon], [DROPIN, DROPNEXT, DROPOUT, NODROP]);\n this.removeVirtualEle();\n document.body.style.cursor = '';\n var classList = e.target.classList;\n if (this.fullRowSelect && !dropWrap && !isNOU(classList) && classList.contains(FULLROW)) {\n dropWrap = e.target.nextElementSibling;\n }\n if (dropRoot) {\n var dropLi = closest(e.target, '.' + LISTITEM);\n var checkWrapper = closest(e.target, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dropRoot.classList.contains(ROOT) || (dropWrap &&\n (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {\n if ((dropLi && e && (!expand && !collapse) && (e.event.offsetY < 7) && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {\n addClass([icon], DROPNEXT);\n var virEle = this.createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (1) : (0);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else if ((dropLi && e && (!expand && !collapse) && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) || (((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19)))) {\n addClass([icon], DROPNEXT);\n var virEle = this.createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (2) : (1);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else {\n addClass([icon], DROPIN);\n }\n }\n else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {\n addClass([icon], DROPNEXT);\n this.renderVirtualEle(e);\n }\n else if (e.target.classList.contains(SIBLING)) {\n addClass([icon], DROPNEXT);\n }\n else {\n addClass([icon], DROPOUT);\n }\n }\n else {\n addClass([icon], NODROP);\n document.body.style.cursor = 'not-allowed';\n }\n var listItem = closest(e.target, '.e-list-item');\n var level;\n if (listItem) {\n level = parseInt(listItem.getAttribute('aria-level'), 10);\n }\n var eventArgs = this.getDragEvent(e.event, this, e.target, e.target, null, virtualEle, level);\n if (eventArgs.dropIndicator) {\n removeClass([icon], eventArgs.dropIndicator);\n }\n this.trigger('nodeDragging', eventArgs);\n if (eventArgs.dropIndicator) {\n addClass([icon], eventArgs.dropIndicator);\n }\n };\n // tslint:disable\n TreeView.prototype.dropAction = function (e, isBlazorDrop) {\n var offsetY = e.event.offsetY;\n var dropTarget = e.target;\n var dragObj;\n var level;\n var drop = false;\n var dragInstance;\n if (!isBlazorDrop) {\n dragInstance = e.dragData.draggable;\n }\n else {\n dragInstance = e.element;\n }\n for (var i = 0; i < dragInstance.ej2_instances.length; i++) {\n if (dragInstance.ej2_instances[i] instanceof TreeView_1) {\n dragObj = dragInstance.ej2_instances[i];\n break;\n }\n }\n if (dragObj && dragObj.dragTarget) {\n var dragTarget = dragObj.dragTarget;\n var dragLi = (closest(dragTarget, '.' + LISTITEM));\n var dropLi = (closest(dropTarget, '.' + LISTITEM));\n if (dropLi == null && dropTarget.classList.contains(ROOT)) {\n dropLi = dropTarget.firstElementChild;\n }\n if (!isBlazorDrop) {\n detach(e.droppedElement);\n }\n else {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n if (!dropLi || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n return;\n }\n if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {\n var sNodes = selectAll('.' + ACTIVE, dragObj.element);\n if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {\n for (var i = sNodes.length - 1; i >= 0; i--) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n else {\n for (var i = 0; i < sNodes.length; i++) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n }\n else {\n this.appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY);\n }\n level = parseInt(dragLi.getAttribute('aria-level'), 10);\n drop = true;\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n if (!isBlazorDrop) {\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));\n }\n else {\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.element, null, level, drop));\n }\n this.triggerEvent();\n };\n TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {\n var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);\n var collapse = closest(e.target, '.' + COLLAPSIBLE);\n var expand = closest(e.target, '.' + EXPANDABLE);\n if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {\n if (dropTarget.nodeName === 'LI') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else if (dropTarget.firstElementChild && dropTarget.classList.contains(ROOT)) {\n if (dropTarget.firstElementChild.nodeName === 'UL') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n }\n else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);\n }\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);\n }\n };\n TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {\n var dropUl = closest(dropLi, '.' + PARENTITEM);\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var pre;\n if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {\n if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {\n pre = true;\n }\n else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {\n pre = false;\n }\n }\n if ((e.target.classList.contains('e-icon-expandable')) || (e.target.classList.contains('e-icon-collapsible'))) {\n var target = e.target.closest('li');\n dropUl.insertBefore(dragLi, pre ? target : target.nextElementSibling);\n }\n else {\n dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);\n }\n this.moveData(dragLi, dropLi, dropUl, pre, dragObj);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos, isCheck) {\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var dropParentUl = closest(dropLi, '.' + PARENTITEM);\n if (e && (pos < 7) && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi);\n this.moveData(dragLi, dropLi, dropParentUl, true, dragObj);\n }\n else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10)) && !isCheck) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n this.moveData(dragLi, dropLi, dropParentUl, false, dragObj);\n }\n else {\n var dropUl = this.expandParent(dropLi);\n var childLi = dropUl.childNodes[index];\n dropUl.insertBefore(dragLi, childLi);\n this.moveData(dragLi, childLi, dropUl, true, dragObj);\n }\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.moveData = function (dragLi, dropLi, dropUl, pre, dragObj) {\n var dropParentLi = closest(dropUl, '.' + LISTITEM);\n var id = this.getId(dragLi);\n var removedData = dragObj.updateChildField(dragObj.treeData, dragObj.fields, id, null, null, true);\n var refId = this.getId(dropLi);\n var index = this.getDataPos(this.treeData, this.fields, refId);\n var parentId = this.getId(dropParentLi);\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', true);\n var pos = isNOU(index) ? this.treeData.length : (pre ? index : index + 1);\n if (isNOU(parentId) && !this.hasPid) {\n delete removedData[0][this.fields.parentID];\n }\n else {\n var currPid = this.isNumberTypeId ? parseFloat(parentId) : parentId;\n setValue(this.fields.parentID, currPid, removedData[0]);\n }\n this.treeData.splice(pos, 0, removedData[0]);\n if (dragObj.element.id !== this.element.id) {\n var childData = dragObj.removeChildNodes(id);\n pos++;\n for (var i = 0, len = childData.length; i < len; i++) {\n this.treeData.splice(pos, 0, childData[i]);\n pos++;\n }\n dragObj.groupedData = dragObj.getGroupedData(dragObj.treeData, dragObj.fields.parentID);\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.addChildData(this.treeData, this.fields, parentId, removedData, pre ? index : index + 1);\n }\n };\n TreeView.prototype.expandParent = function (dropLi) {\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && this.preventExpand !== true) {\n this.expandAction(dropLi, dropIcon, null);\n }\n var dropUl = select('.' + PARENTITEM, dropLi);\n if (this.preventExpand === true && !dropUl && dropIcon) {\n this.renderChildNodes(dropLi);\n }\n dropUl = select('.' + PARENTITEM, dropLi);\n if (!isNOU(dropUl) && this.preventExpand === true) {\n dropUl.style.display = 'none';\n }\n if (!isNOU(dropUl) && this.preventExpand === false) {\n dropUl.style.display = 'block';\n }\n if (isNOU(dropUl) && this.preventExpand === true) {\n if (isNOU(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n var icon = select('div.' + ICON, dropLi);\n if (icon) {\n icon.classList.add('e-icon-expandable');\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n if (icon) {\n removeClass([icon], COLLAPSIBLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);\n }\n dropLi.setAttribute('aria-expanded', 'false');\n dropUl.style.display = 'none';\n }\n if (isNOU(dropUl)) {\n this.trigger('nodeExpanding', this.getExpandEvent(dropLi, null));\n if (isNOU(dropIcon)) {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n }\n var icon = select('div.' + ICON, dropLi);\n if (icon) {\n removeClass([icon], EXPANDABLE);\n }\n else {\n ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);\n icon = select('div.' + ICON, dropLi);\n removeClass([icon], EXPANDABLE);\n }\n dropUl = ListBase.generateUL(this.createElement, [], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n this.addExpand(dropLi);\n this.trigger('nodeExpanded', this.getExpandEvent(dropLi, null));\n }\n return dropUl;\n };\n TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {\n if (dragParentLi && dragParentUl.childElementCount === 0) {\n var dragIcon = select('div.' + ICON, dragParentLi);\n detach(dragParentUl);\n detach(dragIcon);\n var parentId = this.getId(dragParentLi);\n this.updateField(this.treeData, this.fields, parentId, 'hasChildren', false);\n this.removeExpand(dragParentLi, true);\n }\n };\n TreeView.prototype.updateAriaLevel = function (dragLi) {\n var level = this.parents(dragLi, '.' + PARENTITEM).length;\n dragLi.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, dragLi), level + 1);\n };\n TreeView.prototype.updateChildAriaLevel = function (element, level) {\n if (!isNOU(element)) {\n var cNodes = element.childNodes;\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n liEle.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, liEle), level + 1);\n }\n }\n };\n TreeView.prototype.renderVirtualEle = function (e) {\n var pre;\n if (e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n var virEle = this.createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (pre ? 1 : 2) : (pre ? 0 : 1);\n e.target.insertBefore(virEle, e.target.children[index]);\n };\n TreeView.prototype.removeVirtualEle = function () {\n var sibEle = select('.' + SIBLING);\n if (sibEle) {\n detach(sibEle);\n }\n };\n TreeView.prototype.destroyDrag = function () {\n if (this.dragObj && this.dropObj) {\n this.dragObj.destroy();\n this.dropObj.destroy();\n }\n };\n TreeView.prototype.getDragEvent = function (event, obj, dropTarget, target, dragNode, cloneEle, level, drop) {\n var dropLi = dropTarget ? closest(dropTarget, '.' + LISTITEM) : null;\n var dropData = dropLi ? this.getNodeData(dropLi) : null;\n var draggedNode = obj ? obj.dragLi : dragNode;\n var draggedNodeData = obj ? obj.dragData : null;\n var newParent = dropTarget ? this.parents(dropTarget, '.' + LISTITEM) : null;\n var dragLiParent = obj.dragLi.parentElement;\n var dragParent = obj.dragLi ? closest(dragLiParent, '.' + LISTITEM) : null;\n var targetParent = null;\n var indexValue = null;\n var iconCss = [DROPNEXT, DROPIN, DROPOUT, NODROP];\n var iconClass = null;\n var node = (drop === true) ? draggedNode : dropLi;\n var index = node ? closest(node, '.e-list-parent') : null;\n var i = 0;\n dragParent = (obj.dragLi && dragParent === null) ? closest(dragLiParent, '.' + ROOT) : dragParent;\n dragParent = (drop === true) ? this.dragParent : dragParent;\n if (cloneEle) {\n while (i < 4) {\n if (select('.' + ICON, cloneEle).classList.contains(iconCss[i])) {\n iconClass = iconCss[i];\n break;\n }\n i++;\n }\n }\n if (index) {\n var dropTar = 0;\n for (i = 0; i < index.childElementCount; i++) {\n dropTar = (drop !== true && index.children[i] === draggedNode && dropLi !== draggedNode) ? ++dropTar : dropTar;\n if ((drop !== true && index.children[i].classList.contains('e-hover'))) {\n indexValue = (event.offsetY >= 23) ? i + 1 : i;\n break;\n }\n else if (index.children[i] === node) {\n indexValue = (event.offsetY >= 23) ? i : i;\n break;\n }\n }\n indexValue = (dropTar !== 0) ? --indexValue : indexValue;\n }\n if (dropTarget) {\n if (newParent.length === 0) {\n targetParent = null;\n }\n else if (dropTarget.classList.contains(LISTITEM)) {\n targetParent = newParent[0];\n }\n else {\n targetParent = newParent[1];\n }\n }\n if (dropLi === draggedNode) {\n targetParent = dropLi;\n }\n if (dropTarget && target.offsetHeight <= 33 && event.offsetY < target.offsetHeight - 10 && event.offsetY > 6) {\n targetParent = dropLi;\n if (drop !== true) {\n level = ++level;\n var parent_2 = targetParent ? select('.e-list-parent', targetParent) : null;\n indexValue = (parent_2) ? parent_2.children.length : 0;\n if (!(this.fields.dataSource instanceof DataManager) && parent_2 === null && targetParent) {\n var parent_3 = targetParent.hasAttribute('data-uid') ?\n this.getChildNodes(this.fields.dataSource, targetParent.getAttribute('data-uid').toString()) : null;\n indexValue = (parent_3) ? parent_3.length : 0;\n }\n }\n }\n return {\n cancel: false,\n clonedNode: cloneEle,\n event: event,\n draggedNode: draggedNode,\n draggedNodeData: draggedNodeData,\n droppedNode: dropLi,\n droppedNodeData: dropData,\n dropIndex: indexValue,\n dropLevel: level,\n draggedParentNode: dragParent,\n dropTarget: targetParent,\n dropIndicator: iconClass,\n target: target,\n };\n };\n TreeView.prototype.addFullRow = function (toAdd) {\n var len = this.liList.length;\n if (toAdd) {\n for (var i = 0; i < len; i++) {\n this.createFullRow(this.liList[i]);\n }\n }\n else {\n for (var i = 0; i < len; i++) {\n var rowDiv = select('.' + FULLROW, this.liList[i]);\n detach(rowDiv);\n }\n }\n };\n TreeView.prototype.createFullRow = function (item) {\n var rowDiv = this.createElement('div', { className: FULLROW });\n item.insertBefore(rowDiv, item.childNodes[0]);\n };\n TreeView.prototype.addMultiSelect = function (toAdd) {\n if (toAdd) {\n var liEles = selectAll('.' + LISTITEM + ':not([aria-selected=\"true\"])', this.element);\n for (var _i = 0, liEles_1 = liEles; _i < liEles_1.length; _i++) {\n var ele = liEles_1[_i];\n ele.setAttribute('aria-selected', 'false');\n }\n }\n else {\n var liEles = selectAll('.' + LISTITEM + '[aria-selected=\"false\"]', this.element);\n for (var _a = 0, liEles_2 = liEles; _a < liEles_2.length; _a++) {\n var ele = liEles_2[_a];\n ele.removeAttribute('aria-selected');\n }\n }\n };\n TreeView.prototype.collapseByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var cNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n var icon = select('.' + COLLAPSIBLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.collapseNode(liEle, icon, null);\n }\n this.collapseByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.collapseAllNodes = function (excludeHiddenNodes) {\n var cIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + COLLAPSIBLE, this.element));\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.collapseNode(liEle, icon, null);\n }\n };\n TreeView.prototype.expandByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var eNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n var liEle = eNodes[i];\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.expandAction(liEle, icon, null);\n }\n this.expandByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.expandAllNodes = function (excludeHiddenNodes) {\n var eIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + EXPANDABLE, this.element));\n for (var i = 0, len = eIcons.length; i < len; i++) {\n var icon = eIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.expandAction(liEle, icon, null, true);\n }\n };\n TreeView.prototype.getVisibleNodes = function (excludeHiddenNodes, nodes) {\n var vNodes = Array.prototype.slice.call(nodes);\n if (excludeHiddenNodes) {\n for (var i = 0; i < vNodes.length; i++) {\n if (!isVisible(vNodes[i])) {\n vNodes.splice(i, 1);\n i--;\n }\n }\n }\n return vNodes;\n };\n TreeView.prototype.removeNode = function (node) {\n var dragParentUl = closest(node, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n detach(node);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateInstance();\n this.removeData(node);\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n this.updateExpandedNodes();\n this.allowServerDataBinding = false;\n this.updateServerProperties(\"expand\");\n this.updateServerProperties(\"check\");\n this.updateServerProperties(\"select\");\n this.allowServerDataBinding = true;\n };\n TreeView.prototype.updateServerProperties = function (action) {\n if (this.isBlazorPlatform) {\n if (action == \"expand\") {\n this.setProperties({ expandedNodes: [] }, true);\n }\n else if (action == \"check\") {\n this.setProperties({ checkedNodes: this.checkedNodes }, true);\n }\n else {\n this.setProperties({ selectedNodes: this.selectedNodes }, true);\n }\n }\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n }\n else if (this.isBlazorPlatform && this.initialRender) {\n var sNodes = selectAll('.' + ACTIVE, this.element);\n for (var a = 0; a < sNodes.length; a++) {\n var id = sNodes[a].getAttribute(\"data-uid\").toString();\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n }\n }\n };\n TreeView.prototype.updateExpandedNodes = function () {\n if (!this.isBlazorPlatform || (this.isBlazorPlatform && !this.initialRender)) {\n this.setProperties({ expandedNodes: [] }, true);\n var eNodes = selectAll('[aria-expanded=\"true\"]', this.element);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n this.addExpand(eNodes[i]);\n }\n }\n else if (this.isBlazorPlatform && this.initialRender) {\n var eNodes = selectAll('[aria-expanded=\"true\"]', this.element);\n for (var a = 0; a < eNodes.length; a++) {\n var id = eNodes[a].getAttribute(\"data-uid\").toString();\n if (!isNOU(id) && this.expandedNodes.indexOf(id) === -1) {\n this.expandedNodes.push(id);\n }\n }\n }\n };\n TreeView.prototype.removeData = function (node) {\n if (this.dataType === 1) {\n var dm = new DataManager(this.treeData);\n var id = this.getId(node);\n var data = {};\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = newId;\n dm.remove(this.fields.id, data);\n this.removeChildNodes(id);\n }\n else {\n var id = this.getId(node);\n this.updateChildField(this.treeData, this.fields, id, null, null, true);\n }\n };\n TreeView.prototype.removeChildNodes = function (parentId) {\n var cNodes = this.getChildGroup(this.groupedData, parentId, false);\n var childData = [];\n if (cNodes) {\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var dm = new DataManager(this.treeData);\n var id = getValue(this.fields.id, cNodes[i]).toString();\n var data = {};\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n data[this.fields.id] = currId;\n var nodeData = dm.remove(this.fields.id, data);\n childData.push(nodeData[0]);\n this.removeChildNodes(id);\n }\n }\n return childData;\n };\n TreeView.prototype.doGivenAction = function (nodes, selector, toExpand) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var icon = select('.' + selector, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n toExpand ? this.expandAction(liEle, icon, null) : this.collapseNode(liEle, icon, null);\n }\n }\n };\n TreeView.prototype.addGivenNodes = function (nodes, dropLi, index, isRemote, dropEle) {\n if (nodes.length === 0) {\n return;\n }\n var sNodes = this.getSortedData(nodes);\n var level = dropLi ? parseFloat(dropLi.getAttribute('aria-level')) + 1 : 1;\n if (isRemote) {\n this.updateMapper(level);\n }\n var li = ListBase.createListItemFromJson(this.createElement, sNodes, this.listBaseOption, level);\n var dropUl;\n if (!dropEle) {\n dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);\n }\n else {\n dropUl = dropEle;\n }\n var refNode = dropUl.childNodes[index];\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[i], refNode);\n }\n if (this.nodeTemplate && this.isBlazorPlatform && !this.isStringTemplate) {\n this.updateBlazorTemplate();\n }\n var id = this.getId(dropLi);\n if (this.dataType === 1) {\n this.updateField(this.treeData, this.fields, id, 'hasChildren', true);\n var refId = this.getId(refNode);\n var pos = isNOU(refId) ? this.treeData.length : this.getDataPos(this.treeData, this.fields, refId);\n for (var j = 0; j < nodes.length; j++) {\n if (!isNOU(id)) {\n var currId = this.isNumberTypeId ? parseFloat(id) : id;\n setValue(this.fields.parentID, currId, nodes[j]);\n }\n this.treeData.splice(pos, 0, nodes[j]);\n pos++;\n }\n }\n else {\n this.addChildData(this.treeData, this.fields, id, nodes, index);\n }\n this.finalizeNode(dropUl);\n };\n TreeView.prototype.updateMapper = function (level) {\n var mapper = (level === 1) ? this.fields : this.getChildFields(this.fields, level - 1, 1);\n this.updateListProp(mapper);\n };\n TreeView.prototype.updateListProp = function (mapper) {\n var prop = this.getActualProperties(mapper);\n this.listBaseOption.fields = prop;\n this.listBaseOption.fields.url = prop.hasOwnProperty('navigateUrl') ? prop.navigateUrl : 'navigateUrl';\n };\n TreeView.prototype.getDataPos = function (obj, mapper, id) {\n var pos = null;\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n return i;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var data = getValue(mapper.child, obj[i]);\n pos = this.getDataPos(data, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var items = getValue('child', obj[i]);\n pos = this.getDataPos(items, this.getChildMapper(mapper), id);\n if (pos !== null) {\n break;\n }\n }\n }\n return pos;\n };\n TreeView.prototype.addChildData = function (obj, mapper, id, data, index) {\n var updated;\n if (isNOU(id)) {\n index = isNOU(index) ? obj.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n obj.splice(index, 0, data[k]);\n index++;\n }\n return updated;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n if ((typeof mapper.child === 'string' && obj[i].hasOwnProperty(mapper.child)) ||\n (this.fields.dataSource instanceof DataManager && obj[i].hasOwnProperty('child'))) {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n var childData = getValue(key, obj[i]);\n if (isNOU(childData)) {\n childData = [];\n }\n index = isNOU(index) ? childData.length : index;\n for (var k = 0, len = data.length; k < len; k++) {\n childData.splice(index, 0, data[k]);\n index++;\n }\n }\n else {\n var key = (typeof mapper.child === 'string') ? mapper.child : 'child';\n obj[i][key] = data;\n }\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childObj = getValue(mapper.child, obj[i]);\n updated = this.addChildData(childObj, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var childData = getValue('child', obj[i]);\n updated = this.addChildData(childData, this.getChildMapper(mapper), id, data, index);\n if (updated !== undefined) {\n break;\n }\n }\n }\n return updated;\n };\n TreeView.prototype.doDisableAction = function (nodes) {\n var validNodes = this.nodeType(nodes);\n var validID = this.checkValidId(validNodes);\n this.validArr = [];\n for (var i = 0, len = validID.length; i < len; i++) {\n var id = validID[i][this.fields.id].toString();\n if (id && this.disableNode.indexOf(id) === -1) {\n this.disableNode.push(id);\n }\n var liEle = this.getElement(id);\n if (liEle) {\n liEle.setAttribute('aria-disabled', 'true');\n addClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.doEnableAction = function (nodes) {\n var strNodes = this.nodeType(nodes);\n for (var i = 0, len = strNodes.length; i < len; i++) {\n var liEle = this.getElement(strNodes[i]);\n var id = strNodes[i];\n if (id && this.disableNode.indexOf(id) !== -1) {\n this.disableNode.splice(this.disableNode.indexOf(id), 1);\n }\n if (liEle) {\n liEle.removeAttribute('aria-disabled');\n removeClass([liEle], DISABLE);\n }\n }\n };\n TreeView.prototype.nodeType = function (nodes) {\n var validID = [];\n for (var i = 0, len = nodes.length; i < len; i++) {\n var id = void 0;\n if (typeof nodes[i] == \"string\") {\n id = (nodes[i]) ? nodes[i].toString() : null;\n }\n else if (typeof nodes[i] === \"object\") {\n id = nodes[i] ? nodes[i].getAttribute(\"data-uid\").toString() : null;\n }\n if (validID.indexOf(id) == -1) {\n validID.push(id);\n }\n }\n return validID;\n };\n TreeView.prototype.checkValidId = function (node) {\n var _this = this;\n if (this.dataType === 1) {\n this.validArr = this.treeData.filter(function (data) {\n return node.indexOf(data[_this.fields.id] ? data[_this.fields.id].toString() : null) !== -1;\n });\n }\n else if (this.dataType === 2) {\n for (var k = 0; k < this.treeData.length; k++) {\n var id = this.treeData[k][this.fields.id] ? this.treeData[k][this.fields.id].toString() : null;\n if (node.indexOf(id) !== -1) {\n this.validArr.push(this.treeData[k]);\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[k]);\n if (childItems) {\n this.filterNestedChild(childItems, node);\n }\n }\n }\n return this.validArr;\n };\n TreeView.prototype.filterNestedChild = function (treeData, nodes) {\n for (var k = 0; k < treeData.length; k++) {\n var id = treeData[k][this.fields.id] ? treeData[k][this.fields.id].toString() : null;\n if (nodes.indexOf(id) !== -1) {\n this.validArr.push(treeData[k]);\n }\n var childItems = getValue(this.fields.child.toString(), treeData[k]);\n if (childItems) {\n this.filterNestedChild(childItems, nodes);\n }\n }\n };\n TreeView.prototype.setTouchClass = function () {\n var ele = closest(this.element, '.' + BIGGER);\n this.touchClass = isNOU(ele) ? '' : SMALL;\n };\n TreeView.prototype.updatePersistProp = function () {\n this.removeField(this.treeData, this.fields, ['selected', 'expanded']);\n var sleNodes = this.selectedNodes;\n for (var l = 0, slelen = sleNodes.length; l < slelen; l++) {\n this.updateField(this.treeData, this.fields, sleNodes[l], 'selected', true);\n }\n var enodes = this.expandedNodes;\n for (var k = 0, nodelen = enodes.length; k < nodelen; k++) {\n this.updateField(this.treeData, this.fields, enodes[k], 'expanded', true);\n }\n if (this.showCheckBox) {\n this.removeField(this.treeData, this.fields, ['isChecked']);\n var cnodes = this.checkedNodes;\n for (var m = 0, nodelen = cnodes.length; m < nodelen; m++) {\n this.updateField(this.treeData, this.fields, cnodes[m], 'isChecked', true);\n }\n }\n };\n TreeView.prototype.removeField = function (obj, mapper, names) {\n if (isNOU(obj) || isNOU(mapper)) {\n return;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n for (var j = 0; j < names.length; j++) {\n var field = this.getMapperProp(mapper, names[j]);\n if (!isNOU(obj[i][field])) {\n delete obj[i][field];\n }\n }\n if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n this.removeField(getValue(mapper.child, obj[i]), this.getChildMapper(mapper), names);\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n this.removeField(getValue('child', obj[i]), this.getChildMapper(mapper), names);\n }\n }\n };\n TreeView.prototype.getMapperProp = function (mapper, fieldName) {\n switch (fieldName) {\n case 'selected':\n return !isNOU(mapper.selected) ? mapper.selected : 'selected';\n case 'expanded':\n return !isNOU(mapper.expanded) ? mapper.expanded : 'expanded';\n case 'isChecked':\n return !isNOU(mapper.isChecked) ? mapper.isChecked : 'isChecked';\n case 'hasChildren':\n return !isNOU(mapper.hasChildren) ? mapper.hasChildren : 'hasChildren';\n default:\n return fieldName;\n }\n };\n TreeView.prototype.updateField = function (obj, mapper, id, key, value) {\n var childNodes;\n if (isNOU(id)) {\n return;\n }\n else if (this.dataType === 1) {\n var newId = this.isNumberTypeId ? parseFloat(id) : id;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', newId, false));\n setValue(this.getMapperProp(mapper, key), value, resultData[0]);\n }\n else {\n this.updateChildField(obj, mapper, id, key, value);\n }\n };\n TreeView.prototype.updateChildField = function (obj, mapper, id, key, value, remove) {\n var removedData;\n if (isNOU(obj)) {\n return removedData;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, obj[i]);\n if (obj[i] && nodeId && nodeId.toString() === id) {\n if (remove) {\n removedData = obj.splice(i, 1);\n }\n else {\n setValue(this.getMapperProp(mapper, key), value, obj[i]);\n removedData = [];\n }\n return removedData;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n removedData = this.updateChildField(childData, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var childItems = getValue('child', obj[i]);\n removedData = this.updateChildField(childItems, this.getChildMapper(mapper), id, key, value, remove);\n if (removedData !== undefined) {\n break;\n }\n }\n }\n return removedData;\n };\n TreeView.prototype.triggerEvent = function () {\n this.updateTemplateForBlazor();\n var eventArgs = { data: this.treeData };\n this.trigger('dataSourceChanged', eventArgs);\n };\n TreeView.prototype.updateBlazorTemplate = function () {\n updateBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate', this, false);\n };\n TreeView.prototype.clientUpdateInitial = function () {\n this.blazorInitialRender = true;\n };\n TreeView.prototype.wireInputEvents = function (inpEle) {\n EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);\n };\n TreeView.prototype.wireEditingEvents = function (toBind) {\n if (toBind && !this.disabled) {\n var proxy_2 = this;\n this.touchEditObj = new Touch(this.element, {\n tap: function (e) {\n if (e.tapCount === 2) {\n e.originalEvent.preventDefault();\n proxy_2.editingHandler(e.originalEvent);\n }\n }\n });\n }\n else {\n if (this.touchEditObj) {\n this.touchEditObj.destroy();\n }\n }\n };\n TreeView.prototype.wireClickEvent = function (toBind) {\n if (toBind) {\n var proxy_3 = this;\n this.touchClickObj = new Touch(this.element, {\n tap: function (e) {\n proxy_3.clickHandler(e);\n }\n });\n }\n else {\n if (this.touchClickObj) {\n this.touchClickObj.destroy();\n }\n }\n };\n TreeView.prototype.wireExpandOnEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n var proxy_4 = this;\n this.touchExpandObj = new Touch(this.element, {\n tap: function (e) {\n if ((_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && e.tapCount === 2))\n && e.originalEvent.which !== 3) {\n proxy_4.expandHandler(e);\n }\n }\n });\n }\n else {\n if (this.touchExpandObj) {\n this.touchExpandObj.destroy();\n }\n }\n };\n TreeView.prototype.mouseDownHandler = function (e) {\n this.mouseDownStatus = true;\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (e.ctrlKey && this.allowMultiSelection) {\n EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);\n }\n };\n ;\n TreeView.prototype.preventContextMenu = function (e) {\n e.preventDefault();\n };\n TreeView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);\n this.wireClickEvent(true);\n if (this.expandOnType !== 'None') {\n this.wireExpandOnEvent(true);\n }\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, this);\n EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n };\n TreeView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);\n this.wireClickEvent(false);\n this.wireExpandOnEvent(false);\n EventHandler.remove(this.element, 'focus', this.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\n EventHandler.remove(this.element, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);\n if (!this.disabled) {\n this.keyboardModule.destroy();\n }\n };\n TreeView.prototype.parents = function (element, selector) {\n var matched = [];\n var el = element.parentNode;\n while (!isNOU(el)) {\n if (matches(el, selector)) {\n matched.push(el);\n }\n el = el.parentNode;\n }\n return matched;\n };\n TreeView.prototype.isDescendant = function (parent, child) {\n var node = child.parentNode;\n while (!isNOU(node)) {\n if (node === parent) {\n return true;\n }\n node = node.parentNode;\n }\n return false;\n };\n TreeView.prototype.showSpinner = function (element) {\n addClass([element], LOAD);\n createSpinner({\n target: element,\n width: Browser.isDevice ? 16 : 14\n }, this.createElement);\n showSpinner(element);\n };\n TreeView.prototype.hideSpinner = function (element) {\n hideSpinner(element);\n element.innerHTML = '';\n removeClass([element], LOAD);\n };\n TreeView.prototype.setCheckedNodes = function (nodes) {\n nodes = JSON.parse(JSON.stringify(nodes));\n this.uncheckAll(this.checkedNodes);\n this.setIndeterminate(nodes);\n if (nodes.length > 0) {\n this.checkAll(nodes);\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel\n */\n TreeView.prototype.setValidCheckedNode = function (node) {\n if (this.dataType === 1) {\n var mapper = this.fields;\n var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.id, 'equal', node, true));\n if (resultData[0]) {\n this.setChildCheckState(resultData, node, resultData[0]);\n if (this.autoCheck) {\n var parent_4 = resultData[0][this.fields.parentID] ? resultData[0][this.fields.parentID].toString() : null;\n var childNodes = this.getChildNodes(this.treeData, parent_4);\n var count = 0;\n for (var len = 0; len < childNodes.length; len++) {\n var childId = childNodes[len][this.fields.id].toString();\n if (this.checkedNodes.indexOf(childId) !== -1) {\n count++;\n }\n }\n if (count === childNodes.length && this.checkedNodes.indexOf(parent_4) === -1 && parent_4) {\n this.checkedNodes.push(parent_4);\n }\n }\n }\n }\n else if (this.dataType === 2) {\n for (var a = 0; a < this.treeData.length; a++) {\n var index = this.treeData[a][this.fields.id] ? this.treeData[a][this.fields.id].toString() : '';\n if (index === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n break;\n }\n var childItems = getValue(this.fields.child.toString(), this.treeData[a]);\n if (childItems) {\n this.setChildCheckState(childItems, node, this.treeData[a]);\n }\n }\n }\n };\n /**\n * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)\n */\n TreeView.prototype.setChildCheckState = function (childItems, node, treeData) {\n var checkedParent;\n var count = 0;\n if (this.dataType === 1) {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : null;\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkNode = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : null;\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkNode) === -1) {\n this.checkedNodes.push(checkNode);\n }\n }\n if (checkNode === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n }\n var subChildItems = this.getChildNodes(this.treeData, checkNode);\n if (subChildItems) {\n this.setChildCheckState(subChildItems, node, treeData);\n }\n }\n }\n else {\n if (treeData) {\n checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';\n }\n for (var index = 0; index < childItems.length; index++) {\n var checkedChild = childItems[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';\n if (treeData && checkedParent && this.autoCheck) {\n if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1) {\n this.checkedNodes.push(checkedChild);\n }\n }\n if (checkedChild === node && this.checkedNodes.indexOf(node) === -1) {\n this.checkedNodes.push(node);\n }\n var subChildItems = getValue(this.fields.child.toString(), childItems[index]);\n if (subChildItems) {\n this.setChildCheckState(subChildItems, node, childItems[index]);\n }\n if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {\n count++;\n }\n if (count === childItems.length && this.checkedNodes.indexOf(checkedParent) === -1 && this.autoCheck) {\n this.checkedNodes.push(checkedParent);\n }\n }\n }\n };\n TreeView.prototype.setIndeterminate = function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n this.setValidCheckedNode(nodes[i]);\n }\n };\n TreeView.prototype.updatePosition = function (id, newData, isRefreshChild, childValue) {\n if (this.dataType === 1) {\n var pos = this.getDataPos(this.treeData, this.fields, id);\n this.treeData.splice(pos, 1, newData);\n if (isRefreshChild) {\n this.removeChildNodes(id);\n for (var j = 0; j < childValue.length; j++) {\n this.treeData.splice(pos, 0, childValue[j]);\n pos++;\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n else {\n this.updateChildPosition(this.treeData, this.fields, id, [newData], undefined);\n }\n };\n TreeView.prototype.updateChildPosition = function (treeData, mapper, currID, newData, index) {\n var found;\n for (var i = 0, objlen = treeData.length; i < objlen; i++) {\n var nodeId = getValue(mapper.id, treeData[i]);\n if (treeData[i] && nodeId && nodeId.toString() === currID) {\n treeData[i] = newData[0];\n return true;\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, treeData[i]))) {\n var childObj = getValue(mapper.child, treeData[i]);\n found = this.updateChildPosition(childObj, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', treeData[i]))) {\n var childData = getValue('child', treeData[i]);\n found = this.updateChildPosition(childData, this.getChildMapper(mapper), currID, newData, index);\n if (found !== undefined) {\n break;\n }\n }\n }\n return found;\n };\n TreeView.prototype.dynamicState = function () {\n this.setDragAndDrop(this.allowDragAndDrop);\n this.wireEditingEvents(this.allowEditing);\n if (!this.disabled) {\n this.wireEvents();\n this.setRipple();\n }\n else {\n this.unWireEvents();\n this.rippleFn();\n this.rippleIconFn();\n }\n };\n TreeView.prototype.crudOperation = function (operation, nodes, target, newText, newNode, index, prevent) {\n var _this = this;\n var data = this.fields.dataSource;\n var matchedArr = [];\n var query = this.getQuery(this.fields);\n var key = this.fields.id;\n var crud;\n var changes = {\n addedRecords: [],\n deletedRecords: [],\n changedRecords: []\n };\n var nodesID = [];\n if (nodes) {\n nodesID = this.nodeType(nodes);\n }\n else if (target) {\n if (typeof target == \"string\") {\n nodesID[0] = target.toString();\n }\n else if (typeof target === \"object\") {\n nodesID[0] = target.getAttribute(\"data-uid\").toString();\n }\n }\n for (var i = 0, len = nodesID.length; i < len; i++) {\n var liEle = this.getElement(nodesID[i]);\n if (isNullOrUndefined(liEle)) {\n continue;\n }\n var removedData = this.getNodeObject(nodesID[i]);\n matchedArr.push(removedData);\n }\n switch (operation) {\n case 'delete':\n if (nodes.length == 1) {\n crud = data.remove(key, matchedArr[0], query.fromTable, query);\n }\n else {\n changes.deletedRecords = matchedArr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function (e) { return _this.deleteSuccess(nodesID); })\n .catch(function (e) { return _this.dmFailure(e); });\n break;\n case 'update':\n matchedArr[0][this.fields.text] = newText;\n crud = data.update(key, matchedArr[0], query.fromTable, query);\n crud.then(function (e) { return _this.editSucess(target, newText, prevent); })\n .catch(function (e) { return _this.dmFailure(e); });\n break;\n case 'insert':\n if (newNode.length == 1) {\n crud = data.insert(newNode[0], query.fromTable, query);\n }\n else {\n var arr = [];\n for (var i = 0, len = newNode.length; i < len; i++) {\n arr.push(newNode[i]);\n }\n changes.addedRecords = arr;\n crud = data.saveChanges(changes, key, query.fromTable, query);\n }\n crud.then(function (e) {\n var dropLi = _this.getElement(target);\n _this.addSuccess(newNode, dropLi, index);\n _this.preventExpand = false;\n }).catch(function (e) { return _this.dmFailure(e); });\n break;\n }\n };\n TreeView.prototype.deleteSuccess = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n this.removeNode(liEle);\n }\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n this.triggerEvent();\n };\n TreeView.prototype.editSucess = function (target, newText, prevent) {\n var liEle = this.getElement(target);\n var txtEle = select('.' + LISTTEXT, liEle);\n this.appendNewText(liEle, txtEle, newText, prevent);\n };\n TreeView.prototype.addSuccess = function (nodes, dropLi, index) {\n var dropUl;\n var icon = dropLi ? dropLi.querySelector('.' + ICON) : null;\n var proxy = this;\n if (dropLi && icon && icon.classList.contains(EXPANDABLE) &&\n dropLi.querySelector('.' + PARENTITEM) === null) {\n proxy.renderChildNodes(dropLi, null, function () {\n dropUl = dropLi.querySelector('.' + PARENTITEM);\n proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);\n proxy.triggerEvent();\n });\n }\n else {\n this.addGivenNodes(nodes, dropLi, index, true);\n this.triggerEvent();\n }\n };\n TreeView.prototype.dmFailure = function (e) {\n this.trigger('actionFailure', { error: e });\n };\n /**\n * Called internally if any of the property value changed.\n * @param {TreeView} newProp\n * @param {TreeView} oldProp\n * @returns void\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n TreeView.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowDragAndDrop':\n this.setDragAndDrop(this.allowDragAndDrop);\n break;\n case 'dragArea':\n if (this.allowDragAndDrop) {\n this.dragObj.dragArea = this.dragArea;\n }\n break;\n case 'allowEditing':\n this.wireEditingEvents(this.allowEditing);\n break;\n case 'allowMultiSelection':\n if (this.selectedNodes.length > 1) {\n var sNode = this.getElement(this.selectedNodes[0]);\n this.isLoaded = false;\n this.removeSelectAll();\n this.selectNode(sNode, null);\n this.isLoaded = true;\n }\n this.setMultiSelect(this.allowMultiSelection);\n this.addMultiSelect(this.allowMultiSelection);\n break;\n case 'checkedNodes':\n if (this.showCheckBox) {\n this.checkedNodes = oldProp.checkedNodes;\n this.setCheckedNodes(newProp.checkedNodes);\n }\n break;\n case 'autoCheck':\n if (this.showCheckBox) {\n this.autoCheck = newProp.autoCheck;\n this.ensureIndeterminate();\n }\n break;\n case 'cssClass':\n this.setCssClass(oldProp.cssClass, newProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'expandedNodes':\n this.isAnimate = false;\n if (!this.isBlazorPlatform) {\n this.setProperties({ expandedNodes: [] }, true);\n }\n this.collapseAll();\n this.isInitalExpand = true;\n if (!this.isBlazorPlatform) {\n this.setProperties({ expandedNodes: isNOU(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);\n }\n this.doExpandAction();\n this.isInitalExpand = false;\n this.isAnimate = true;\n break;\n case 'expandOn':\n this.wireExpandOnEvent(false);\n this.setExpandOnType();\n if (this.expandOnType !== 'None' && !this.disabled) {\n this.wireExpandOnEvent(true);\n }\n break;\n case 'disabled':\n this.setDisabledMode();\n this.dynamicState();\n break;\n case 'fields':\n this.isAnimate = false;\n this.isFieldChange = true;\n this.initialRender = true;\n this.updateListProp(this.fields);\n if (!this.blazorInitialRender) {\n this.reRenderNodes();\n }\n this.blazorInitialRender = false;\n this.initialRender = false;\n this.isAnimate = true;\n this.isFieldChange = false;\n break;\n case 'fullRowSelect':\n this.setFullRow(this.fullRowSelect);\n this.addFullRow(this.fullRowSelect);\n break;\n case 'loadOnDemand':\n if (this.loadOnDemand === false && !this.onLoaded) {\n var nodes = this.element.querySelectorAll('li');\n var i = 0;\n while (i < nodes.length) {\n if (nodes[i].getAttribute('aria-expanded') !== 'true') {\n this.renderChildNodes(nodes[i], true, null, true);\n }\n i++;\n }\n this.onLoaded = true;\n }\n break;\n case 'nodeTemplate':\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n this.reRenderNodes();\n break;\n case 'selectedNodes':\n this.removeSelectAll();\n this.setProperties({ selectedNodes: newProp.selectedNodes }, true);\n this.doSelectionAction();\n break;\n case 'showCheckBox':\n this.reRenderNodes();\n break;\n case 'sortOrder':\n this.reRenderNodes();\n break;\n case 'fullRowNavigable':\n this.setProperties({ fullRowNavigable: newProp.fullRowNavigable }, true);\n this.listBaseOption.itemNavigable = newProp.fullRowNavigable;\n this.reRenderNodes();\n break;\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n */\n TreeView.prototype.destroy = function () {\n resetBlazorTemplate(this.element.id + 'nodeTemplate', 'NodeTemplate');\n this.element.removeAttribute('aria-activedescendant');\n this.element.removeAttribute('tabindex');\n this.unWireEvents();\n this.wireEditingEvents(false);\n if (!this.disabled) {\n this.rippleFn();\n this.rippleIconFn();\n }\n this.setCssClass(this.cssClass, null);\n this.setDragAndDrop(false);\n this.setFullRow(false);\n if (this.isBlazorPlatform) {\n this.ulElement = this.element.querySelector('.e-list-parent.e-ul');\n }\n if (this.ulElement && this.ulElement.parentElement) {\n this.ulElement.parentElement.removeChild(this.ulElement);\n }\n if (!this.isBlazorPlatform) {\n _super.prototype.destroy.call(this);\n }\n };\n /**\n * Adds the collection of TreeView nodes based on target and index position. If target node is not specified,\n * then the nodes are added as children of the given parentID or in the root level of TreeView.\n * @param { { [key: string]: Object }[] } nodes - Specifies the array of JSON data that has to be added.\n * @param { string | Element } target - Specifies ID of TreeView node/TreeView node as target element.\n * @param { number } index - Specifies the index to place the newly added nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n */\n TreeView.prototype.addNodes = function (nodes, target, index, preventTargetExpand) {\n if (isNOU(nodes)) {\n return;\n }\n nodes = JSON.parse(JSON.stringify(nodes));\n var dropLi = this.getElement(target);\n this.preventExpand = preventTargetExpand;\n if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n if (!(this.fields.dataSource.dataSource.offline)) {\n this.crudOperation('insert', null, target, null, nodes, index, this.preventExpand);\n }\n else {\n this.addSuccess(nodes, dropLi, index);\n }\n }\n else if (this.dataType === 2) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n if (dropLi) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n nodes = this.getSortedData(nodes);\n for (var i = 0; i < nodes.length; i++) {\n var pid = getValue(this.fields.parentID, nodes[i]);\n dropLi = pid ? this.getElement(pid.toString()) : pid;\n this.addGivenNodes([nodes[i]], dropLi, index);\n }\n }\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n }\n if (this.showCheckBox && dropLi) {\n this.ensureParentCheckState(dropLi);\n }\n if ((this.fields.dataSource instanceof DataManager === false) || (this.fields.dataSource instanceof DataManager) && (this.fields.dataSource.adaptorName === 'BlazorAdaptor')) {\n this.preventExpand = false;\n this.triggerEvent();\n }\n };\n /**\n * Instead of clicking on the TreeView node for editing, we can enable it by using\n * `beginEdit` property. On passing the node ID or element through this property, the edit textBox\n * will be created for the particular node thus allowing us to edit it.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.beginEdit = function (node) {\n var ele = this.getElement(node);\n if (isNOU(ele) || this.disabled) {\n return;\n }\n this.createTextbox(ele, null);\n };\n /**\n * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.checkAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, true);\n }\n };\n /**\n * Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.\n * You can also collapse all the nodes excluding the hidden nodes by setting **excludeHiddenNodes** to true. If you want to collapse\n * a specific level of nodes, set **level** as argument to collapseAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/ array of TreeView node.\n * @param {number} level - TreeView nodes will collapse up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.\n */\n TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, COLLAPSIBLE, false);\n }\n else {\n if (level > 0) {\n this.collapseByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.collapseAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Disables the collection of nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.disableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doDisableAction(nodes);\n }\n };\n /**\n * Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.enableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doEnableAction(nodes);\n }\n };\n /**\n * Ensures visibility of the TreeView node by using node ID or node element.\n * When many TreeView nodes are present and we need to find a particular node, `ensureVisible` property\n * helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView nodes.\n */\n TreeView.prototype.ensureVisible = function (node) {\n var liEle = this.getElement(node);\n if (isNOU(liEle)) {\n return;\n }\n var parents = this.parents(liEle, '.' + LISTITEM);\n this.expandAll(parents);\n setTimeout(function () { liEle.scrollIntoView(true); }, 450);\n };\n /**\n * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes\n * as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting\n * **excludeHiddenNodes** to true to this method. To expand a specific level of nodes, set **level** as argument to expandAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @param {number} level - TreeView nodes will expand up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes when expanding all nodes.\n */\n TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, EXPANDABLE, true);\n }\n else {\n if (level > 0) {\n this.expandByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.expandAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Gets all the checked nodes including child, whether it is loaded or not.\n */\n TreeView.prototype.getAllCheckedNodes = function () {\n var checkNodes = this.checkedNodes;\n return checkNodes;\n };\n /**\n * Gets all the disabled nodes including child, whether it is loaded or not.\n */\n TreeView.prototype.getDisabledNodes = function () {\n var disabledNodes = this.disableNode;\n return disabledNodes;\n };\n /**\n * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @BlazorType NodeData\n */\n TreeView.prototype.getNode = function (node) {\n var ele = this.getElement(node);\n return this.getNodeData(ele, true);\n };\n /**\n * To get the updated data source of TreeView after performing some operation like drag and drop, node editing,\n * node selecting/unSelecting, node expanding/collapsing, node checking/unChecking, adding and removing node.\n * * If you pass the ID of TreeView node as arguments for this method then it will return the updated data source\n * of the corresponding node otherwise it will return the entire updated data source of TreeView.\n * * The updated data source also contains custom attributes if you specified in data source.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n * @isGenericType true\n */\n TreeView.prototype.getTreeData = function (node) {\n var id = this.getId(node);\n this.updatePersistProp();\n if (isNOU(id)) {\n return this.treeData;\n }\n else {\n var data = this.getNodeObject(id);\n return isNOU(data) ? [] : [data];\n }\n };\n /**\n * Moves the collection of nodes within the same TreeView based on target or its index position.\n * @param {string[] | Element[]} sourceNodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {number} index - Specifies the index to place the moved nodes in the target element.\n * @param { boolean } preventTargetExpand - If set to true, the target parent node will be prevented from auto expanding.\n */\n TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {\n var dropLi = this.getElement(target);\n if (isNOU(dropLi)) {\n return;\n }\n for (var i = 0; i < sourceNodes.length; i++) {\n var dragLi = this.getElement(sourceNodes[i]);\n if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n continue;\n }\n this.preventExpand = preventTargetExpand;\n this.dropAsChildNode(dragLi, dropLi, this, index);\n }\n if (this.fields.dataSource instanceof DataManager === false) {\n this.preventExpand = false;\n }\n this.triggerEvent();\n };\n /**\n * Refreshes a particular node of the TreeView.\n * @param {string | Element} target - Specifies the ID of TreeView node or TreeView node as target element.\n * @param {{ [key: string]: Object }[]} newData - Specifies the new data of TreeView node.\n */\n TreeView.prototype.refreshNode = function (target, newData) {\n if (isNOU(target) || isNOU(newData)) {\n return;\n }\n var id;\n var isRefreshChild = false;\n if (this.dataType == 1 && newData.length > 1) {\n isRefreshChild = true;\n }\n else if (this.dataType == 2 && newData.length === 1) {\n var updatedChildValue = getValue(this.fields.child.toString(), newData[0]);\n if (!isNOU(updatedChildValue)) {\n isRefreshChild = true;\n }\n }\n var liEle = this.getElement(target);\n id = liEle ? liEle.getAttribute('data-uid') : ((target) ? target.toString() : null);\n this.refreshData = this.getNodeObject(id);\n newData = JSON.parse(JSON.stringify(newData));\n // tslint:disable\n var newNodeData;\n var parentData;\n if (this.dataType == 1 && isRefreshChild) {\n for (var k = 0; k < newData.length; k++) {\n if (isNOU(newData[k][this.fields.parentID])) {\n parentData = newData[k];\n newData.splice(k, 1);\n break;\n }\n }\n newNodeData = extend({}, this.refreshData, parentData);\n }\n else {\n newNodeData = extend({}, this.refreshData, newData[0]);\n }\n if (isNOU(liEle)) {\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n return;\n }\n this.isRefreshed = true;\n var level = parseFloat(liEle.getAttribute('aria-level'));\n var newliEle = ListBase.createListItemFromJson(this.createElement, [newNodeData], this.listBaseOption, level);\n var ul = select('.' + PARENTITEM, liEle);\n var childItems = getValue(this.fields.child.toString(), newNodeData);\n if ((isRefreshChild && ul) || (isRefreshChild && !isNOU(childItems))) {\n liEle.innerHTML = newliEle[0].innerHTML;\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n if (isRefreshChild && ul) {\n this.expandAll([id]);\n }\n }\n else {\n var txtEle = select('.' + TEXTWRAP, liEle);\n var newTextEle = select('.' + TEXTWRAP, newliEle[0]);\n var icon = select('div.' + ICON, txtEle);\n var newIcon = select('div.' + ICON, newTextEle);\n if (icon && newIcon) {\n if (newIcon.classList.contains(EXPANDABLE) && icon.classList.contains(COLLAPSIBLE)) {\n removeClass([newIcon], EXPANDABLE);\n addClass([newIcon], COLLAPSIBLE);\n }\n else if (newIcon.classList.contains(COLLAPSIBLE) && icon.classList.contains(EXPANDABLE)) {\n removeClass([newIcon], COLLAPSIBLE);\n addClass([newIcon], EXPANDABLE);\n }\n else if (icon.classList.contains('interaction')) {\n addClass([newIcon], 'interaction');\n }\n }\n txtEle.innerHTML = newTextEle.innerHTML;\n this.updatePosition(id, newNodeData, isRefreshChild, newData);\n }\n if (newNodeData[this.fields.tooltip]) {\n liEle.setAttribute(\"title\", newNodeData[this.fields.tooltip]);\n }\n if (newNodeData.hasOwnProperty(this.fields.htmlAttributes) && newNodeData[this.fields.htmlAttributes]) {\n var attr = {};\n merge(attr, newNodeData[this.fields.htmlAttributes]);\n if (attr.class) {\n addClass([liEle], attr.class.split(' '));\n delete attr.class;\n }\n else {\n attributes(liEle, attr);\n }\n }\n this.isRefreshed = false;\n this.triggerEvent();\n };\n /**\n * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.removeNodes = function (nodes) {\n if (!isNOU(nodes)) {\n if (this.fields.dataSource instanceof DataManager && !(this.fields.dataSource.dataSource.offline) && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n this.crudOperation('delete', nodes);\n }\n else {\n this.deleteSuccess(nodes);\n }\n }\n };\n /**\n * Replaces the text of the TreeView node with the given text.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {string} newText - Specifies the new text of TreeView node.\n */\n TreeView.prototype.updateNode = function (target, newText) {\n var _this = this;\n if (isNOU(target) || isNOU(newText) || !this.allowEditing) {\n return;\n }\n var liEle = this.getElement(target);\n if (isNOU(liEle)) {\n return;\n }\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var eventArgs = this.getEditEvent(liEle, null, null);\n this.trigger('nodeEditing', eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.fields.dataSource instanceof DataManager && !(_this.fields.dataSource.dataSource.offline) && (_this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {\n _this.crudOperation('update', null, target, newText, null, null, false);\n }\n else {\n _this.appendNewText(liEle, txtEle, newText, false);\n }\n }\n });\n };\n /**\n * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.uncheckAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, false);\n }\n };\n var TreeView_1;\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowMultiSelection\", void 0);\n __decorate([\n Complex({}, NodeAnimationSettings)\n ], TreeView.prototype, \"animation\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"checkedNodes\", void 0);\n __decorate([\n Property('')\n ], TreeView.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"disabled\", void 0);\n __decorate([\n Property(null)\n ], TreeView.prototype, \"dragArea\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"expandedNodes\", void 0);\n __decorate([\n Property('Auto')\n ], TreeView.prototype, \"expandOn\", void 0);\n __decorate([\n Complex({}, FieldsSettings)\n ], TreeView.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"fullRowSelect\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"loadOnDemand\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"locale\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"nodeTemplate\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"selectedNodes\", void 0);\n __decorate([\n Property('None')\n ], TreeView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"autoCheck\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"fullRowNavigable\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataSourceChanged\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"drawNode\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"keyPress\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecking\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeClicked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragging\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStart\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStop\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDropped\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEdited\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEditing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanded\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanding\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelected\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelecting\", void 0);\n TreeView = TreeView_1 = __decorate([\n NotifyPropertyChanges\n ], TreeView);\n return TreeView;\n}(Component));\nexport { TreeView };\n","/*!\n * Chart.js v2.9.3\n * https://www.chartjs.org\n * (c) 2019 Chart.js Contributors\n * Released under the MIT License\n */\n(function (global, factory) {\ntypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(function() { try { return require('moment'); } catch(e) { } }()) :\ntypeof define === 'function' && define.amd ? define(['require'], function(require) { return factory(function() { try { return require('moment'); } catch(e) { } }()); }) :\n(global = global || self, global.Chart = factory(global.moment));\n}(this, (function (moment) { 'use strict';\n\nmoment = moment && moment.hasOwnProperty('default') ? moment['default'] : moment;\n\nfunction createCommonjsModule(fn, module) {\n\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\n}\n\nfunction getCjsExportFromNamespace (n) {\n\treturn n && n['default'] || n;\n}\n\nvar colorName = {\r\n\t\"aliceblue\": [240, 248, 255],\r\n\t\"antiquewhite\": [250, 235, 215],\r\n\t\"aqua\": [0, 255, 255],\r\n\t\"aquamarine\": [127, 255, 212],\r\n\t\"azure\": [240, 255, 255],\r\n\t\"beige\": [245, 245, 220],\r\n\t\"bisque\": [255, 228, 196],\r\n\t\"black\": [0, 0, 0],\r\n\t\"blanchedalmond\": [255, 235, 205],\r\n\t\"blue\": [0, 0, 255],\r\n\t\"blueviolet\": [138, 43, 226],\r\n\t\"brown\": [165, 42, 42],\r\n\t\"burlywood\": [222, 184, 135],\r\n\t\"cadetblue\": [95, 158, 160],\r\n\t\"chartreuse\": [127, 255, 0],\r\n\t\"chocolate\": [210, 105, 30],\r\n\t\"coral\": [255, 127, 80],\r\n\t\"cornflowerblue\": [100, 149, 237],\r\n\t\"cornsilk\": [255, 248, 220],\r\n\t\"crimson\": [220, 20, 60],\r\n\t\"cyan\": [0, 255, 255],\r\n\t\"darkblue\": [0, 0, 139],\r\n\t\"darkcyan\": [0, 139, 139],\r\n\t\"darkgoldenrod\": [184, 134, 11],\r\n\t\"darkgray\": [169, 169, 169],\r\n\t\"darkgreen\": [0, 100, 0],\r\n\t\"darkgrey\": [169, 169, 169],\r\n\t\"darkkhaki\": [189, 183, 107],\r\n\t\"darkmagenta\": [139, 0, 139],\r\n\t\"darkolivegreen\": [85, 107, 47],\r\n\t\"darkorange\": [255, 140, 0],\r\n\t\"darkorchid\": [153, 50, 204],\r\n\t\"darkred\": [139, 0, 0],\r\n\t\"darksalmon\": [233, 150, 122],\r\n\t\"darkseagreen\": [143, 188, 143],\r\n\t\"darkslateblue\": [72, 61, 139],\r\n\t\"darkslategray\": [47, 79, 79],\r\n\t\"darkslategrey\": [47, 79, 79],\r\n\t\"darkturquoise\": [0, 206, 209],\r\n\t\"darkviolet\": [148, 0, 211],\r\n\t\"deeppink\": [255, 20, 147],\r\n\t\"deepskyblue\": [0, 191, 255],\r\n\t\"dimgray\": [105, 105, 105],\r\n\t\"dimgrey\": [105, 105, 105],\r\n\t\"dodgerblue\": [30, 144, 255],\r\n\t\"firebrick\": [178, 34, 34],\r\n\t\"floralwhite\": [255, 250, 240],\r\n\t\"forestgreen\": [34, 139, 34],\r\n\t\"fuchsia\": [255, 0, 255],\r\n\t\"gainsboro\": [220, 220, 220],\r\n\t\"ghostwhite\": [248, 248, 255],\r\n\t\"gold\": [255, 215, 0],\r\n\t\"goldenrod\": [218, 165, 32],\r\n\t\"gray\": [128, 128, 128],\r\n\t\"green\": [0, 128, 0],\r\n\t\"greenyellow\": [173, 255, 47],\r\n\t\"grey\": [128, 128, 128],\r\n\t\"honeydew\": [240, 255, 240],\r\n\t\"hotpink\": [255, 105, 180],\r\n\t\"indianred\": [205, 92, 92],\r\n\t\"indigo\": [75, 0, 130],\r\n\t\"ivory\": [255, 255, 240],\r\n\t\"khaki\": [240, 230, 140],\r\n\t\"lavender\": [230, 230, 250],\r\n\t\"lavenderblush\": [255, 240, 245],\r\n\t\"lawngreen\": [124, 252, 0],\r\n\t\"lemonchiffon\": [255, 250, 205],\r\n\t\"lightblue\": [173, 216, 230],\r\n\t\"lightcoral\": [240, 128, 128],\r\n\t\"lightcyan\": [224, 255, 255],\r\n\t\"lightgoldenrodyellow\": [250, 250, 210],\r\n\t\"lightgray\": [211, 211, 211],\r\n\t\"lightgreen\": [144, 238, 144],\r\n\t\"lightgrey\": [211, 211, 211],\r\n\t\"lightpink\": [255, 182, 193],\r\n\t\"lightsalmon\": [255, 160, 122],\r\n\t\"lightseagreen\": [32, 178, 170],\r\n\t\"lightskyblue\": [135, 206, 250],\r\n\t\"lightslategray\": [119, 136, 153],\r\n\t\"lightslategrey\": [119, 136, 153],\r\n\t\"lightsteelblue\": [176, 196, 222],\r\n\t\"lightyellow\": [255, 255, 224],\r\n\t\"lime\": [0, 255, 0],\r\n\t\"limegreen\": [50, 205, 50],\r\n\t\"linen\": [250, 240, 230],\r\n\t\"magenta\": [255, 0, 255],\r\n\t\"maroon\": [128, 0, 0],\r\n\t\"mediumaquamarine\": [102, 205, 170],\r\n\t\"mediumblue\": [0, 0, 205],\r\n\t\"mediumorchid\": [186, 85, 211],\r\n\t\"mediumpurple\": [147, 112, 219],\r\n\t\"mediumseagreen\": [60, 179, 113],\r\n\t\"mediumslateblue\": [123, 104, 238],\r\n\t\"mediumspringgreen\": [0, 250, 154],\r\n\t\"mediumturquoise\": [72, 209, 204],\r\n\t\"mediumvioletred\": [199, 21, 133],\r\n\t\"midnightblue\": [25, 25, 112],\r\n\t\"mintcream\": [245, 255, 250],\r\n\t\"mistyrose\": [255, 228, 225],\r\n\t\"moccasin\": [255, 228, 181],\r\n\t\"navajowhite\": [255, 222, 173],\r\n\t\"navy\": [0, 0, 128],\r\n\t\"oldlace\": [253, 245, 230],\r\n\t\"olive\": [128, 128, 0],\r\n\t\"olivedrab\": [107, 142, 35],\r\n\t\"orange\": [255, 165, 0],\r\n\t\"orangered\": [255, 69, 0],\r\n\t\"orchid\": [218, 112, 214],\r\n\t\"palegoldenrod\": [238, 232, 170],\r\n\t\"palegreen\": [152, 251, 152],\r\n\t\"paleturquoise\": [175, 238, 238],\r\n\t\"palevioletred\": [219, 112, 147],\r\n\t\"papayawhip\": [255, 239, 213],\r\n\t\"peachpuff\": [255, 218, 185],\r\n\t\"peru\": [205, 133, 63],\r\n\t\"pink\": [255, 192, 203],\r\n\t\"plum\": [221, 160, 221],\r\n\t\"powderblue\": [176, 224, 230],\r\n\t\"purple\": [128, 0, 128],\r\n\t\"rebeccapurple\": [102, 51, 153],\r\n\t\"red\": [255, 0, 0],\r\n\t\"rosybrown\": [188, 143, 143],\r\n\t\"royalblue\": [65, 105, 225],\r\n\t\"saddlebrown\": [139, 69, 19],\r\n\t\"salmon\": [250, 128, 114],\r\n\t\"sandybrown\": [244, 164, 96],\r\n\t\"seagreen\": [46, 139, 87],\r\n\t\"seashell\": [255, 245, 238],\r\n\t\"sienna\": [160, 82, 45],\r\n\t\"silver\": [192, 192, 192],\r\n\t\"skyblue\": [135, 206, 235],\r\n\t\"slateblue\": [106, 90, 205],\r\n\t\"slategray\": [112, 128, 144],\r\n\t\"slategrey\": [112, 128, 144],\r\n\t\"snow\": [255, 250, 250],\r\n\t\"springgreen\": [0, 255, 127],\r\n\t\"steelblue\": [70, 130, 180],\r\n\t\"tan\": [210, 180, 140],\r\n\t\"teal\": [0, 128, 128],\r\n\t\"thistle\": [216, 191, 216],\r\n\t\"tomato\": [255, 99, 71],\r\n\t\"turquoise\": [64, 224, 208],\r\n\t\"violet\": [238, 130, 238],\r\n\t\"wheat\": [245, 222, 179],\r\n\t\"white\": [255, 255, 255],\r\n\t\"whitesmoke\": [245, 245, 245],\r\n\t\"yellow\": [255, 255, 0],\r\n\t\"yellowgreen\": [154, 205, 50]\r\n};\n\nvar conversions = createCommonjsModule(function (module) {\n/* MIT license */\n\n\n// NOTE: conversions should only return primitive values (i.e. arrays, or\n// values that give correct `typeof` results).\n// do not use box values types (i.e. Number(), String(), etc.)\n\nvar reverseKeywords = {};\nfor (var key in colorName) {\n\tif (colorName.hasOwnProperty(key)) {\n\t\treverseKeywords[colorName[key]] = key;\n\t}\n}\n\nvar convert = module.exports = {\n\trgb: {channels: 3, labels: 'rgb'},\n\thsl: {channels: 3, labels: 'hsl'},\n\thsv: {channels: 3, labels: 'hsv'},\n\thwb: {channels: 3, labels: 'hwb'},\n\tcmyk: {channels: 4, labels: 'cmyk'},\n\txyz: {channels: 3, labels: 'xyz'},\n\tlab: {channels: 3, labels: 'lab'},\n\tlch: {channels: 3, labels: 'lch'},\n\thex: {channels: 1, labels: ['hex']},\n\tkeyword: {channels: 1, labels: ['keyword']},\n\tansi16: {channels: 1, labels: ['ansi16']},\n\tansi256: {channels: 1, labels: ['ansi256']},\n\thcg: {channels: 3, labels: ['h', 'c', 'g']},\n\tapple: {channels: 3, labels: ['r16', 'g16', 'b16']},\n\tgray: {channels: 1, labels: ['gray']}\n};\n\n// hide .channels and .labels properties\nfor (var model in convert) {\n\tif (convert.hasOwnProperty(model)) {\n\t\tif (!('channels' in convert[model])) {\n\t\t\tthrow new Error('missing channels property: ' + model);\n\t\t}\n\n\t\tif (!('labels' in convert[model])) {\n\t\t\tthrow new Error('missing channel labels property: ' + model);\n\t\t}\n\n\t\tif (convert[model].labels.length !== convert[model].channels) {\n\t\t\tthrow new Error('channel and label counts mismatch: ' + model);\n\t\t}\n\n\t\tvar channels = convert[model].channels;\n\t\tvar labels = convert[model].labels;\n\t\tdelete convert[model].channels;\n\t\tdelete convert[model].labels;\n\t\tObject.defineProperty(convert[model], 'channels', {value: channels});\n\t\tObject.defineProperty(convert[model], 'labels', {value: labels});\n\t}\n}\n\nconvert.rgb.hsl = function (rgb) {\n\tvar r = rgb[0] / 255;\n\tvar g = rgb[1] / 255;\n\tvar b = rgb[2] / 255;\n\tvar min = Math.min(r, g, b);\n\tvar max = Math.max(r, g, b);\n\tvar delta = max - min;\n\tvar h;\n\tvar s;\n\tvar l;\n\n\tif (max === min) {\n\t\th = 0;\n\t} else if (r === max) {\n\t\th = (g - b) / delta;\n\t} else if (g === max) {\n\t\th = 2 + (b - r) / delta;\n\t} else if (b === max) {\n\t\th = 4 + (r - g) / delta;\n\t}\n\n\th = Math.min(h * 60, 360);\n\n\tif (h < 0) {\n\t\th += 360;\n\t}\n\n\tl = (min + max) / 2;\n\n\tif (max === min) {\n\t\ts = 0;\n\t} else if (l <= 0.5) {\n\t\ts = delta / (max + min);\n\t} else {\n\t\ts = delta / (2 - max - min);\n\t}\n\n\treturn [h, s * 100, l * 100];\n};\n\nconvert.rgb.hsv = function (rgb) {\n\tvar rdif;\n\tvar gdif;\n\tvar bdif;\n\tvar h;\n\tvar s;\n\n\tvar r = rgb[0] / 255;\n\tvar g = rgb[1] / 255;\n\tvar b = rgb[2] / 255;\n\tvar v = Math.max(r, g, b);\n\tvar diff = v - Math.min(r, g, b);\n\tvar diffc = function (c) {\n\t\treturn (v - c) / 6 / diff + 1 / 2;\n\t};\n\n\tif (diff === 0) {\n\t\th = s = 0;\n\t} else {\n\t\ts = diff / v;\n\t\trdif = diffc(r);\n\t\tgdif = diffc(g);\n\t\tbdif = diffc(b);\n\n\t\tif (r === v) {\n\t\t\th = bdif - gdif;\n\t\t} else if (g === v) {\n\t\t\th = (1 / 3) + rdif - bdif;\n\t\t} else if (b === v) {\n\t\t\th = (2 / 3) + gdif - rdif;\n\t\t}\n\t\tif (h < 0) {\n\t\t\th += 1;\n\t\t} else if (h > 1) {\n\t\t\th -= 1;\n\t\t}\n\t}\n\n\treturn [\n\t\th * 360,\n\t\ts * 100,\n\t\tv * 100\n\t];\n};\n\nconvert.rgb.hwb = function (rgb) {\n\tvar r = rgb[0];\n\tvar g = rgb[1];\n\tvar b = rgb[2];\n\tvar h = convert.rgb.hsl(rgb)[0];\n\tvar w = 1 / 255 * Math.min(r, Math.min(g, b));\n\n\tb = 1 - 1 / 255 * Math.max(r, Math.max(g, b));\n\n\treturn [h, w * 100, b * 100];\n};\n\nconvert.rgb.cmyk = function (rgb) {\n\tvar r = rgb[0] / 255;\n\tvar g = rgb[1] / 255;\n\tvar b = rgb[2] / 255;\n\tvar c;\n\tvar m;\n\tvar y;\n\tvar k;\n\n\tk = Math.min(1 - r, 1 - g, 1 - b);\n\tc = (1 - r - k) / (1 - k) || 0;\n\tm = (1 - g - k) / (1 - k) || 0;\n\ty = (1 - b - k) / (1 - k) || 0;\n\n\treturn [c * 100, m * 100, y * 100, k * 100];\n};\n\n/**\n * See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance\n * */\nfunction comparativeDistance(x, y) {\n\treturn (\n\t\tMath.pow(x[0] - y[0], 2) +\n\t\tMath.pow(x[1] - y[1], 2) +\n\t\tMath.pow(x[2] - y[2], 2)\n\t);\n}\n\nconvert.rgb.keyword = function (rgb) {\n\tvar reversed = reverseKeywords[rgb];\n\tif (reversed) {\n\t\treturn reversed;\n\t}\n\n\tvar currentClosestDistance = Infinity;\n\tvar currentClosestKeyword;\n\n\tfor (var keyword in colorName) {\n\t\tif (colorName.hasOwnProperty(keyword)) {\n\t\t\tvar value = colorName[keyword];\n\n\t\t\t// Compute comparative distance\n\t\t\tvar distance = comparativeDistance(rgb, value);\n\n\t\t\t// Check if its less, if so set as closest\n\t\t\tif (distance < currentClosestDistance) {\n\t\t\t\tcurrentClosestDistance = distance;\n\t\t\t\tcurrentClosestKeyword = keyword;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn currentClosestKeyword;\n};\n\nconvert.keyword.rgb = function (keyword) {\n\treturn colorName[keyword];\n};\n\nconvert.rgb.xyz = function (rgb) {\n\tvar r = rgb[0] / 255;\n\tvar g = rgb[1] / 255;\n\tvar b = rgb[2] / 255;\n\n\t// assume sRGB\n\tr = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);\n\tg = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);\n\tb = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);\n\n\tvar x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);\n\tvar y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);\n\tvar z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);\n\n\treturn [x * 100, y * 100, z * 100];\n};\n\nconvert.rgb.lab = function (rgb) {\n\tvar xyz = convert.rgb.xyz(rgb);\n\tvar x = xyz[0];\n\tvar y = xyz[1];\n\tvar z = xyz[2];\n\tvar l;\n\tvar a;\n\tvar b;\n\n\tx /= 95.047;\n\ty /= 100;\n\tz /= 108.883;\n\n\tx = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);\n\ty = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);\n\tz = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);\n\n\tl = (116 * y) - 16;\n\ta = 500 * (x - y);\n\tb = 200 * (y - z);\n\n\treturn [l, a, b];\n};\n\nconvert.hsl.rgb = function (hsl) {\n\tvar h = hsl[0] / 360;\n\tvar s = hsl[1] / 100;\n\tvar l = hsl[2] / 100;\n\tvar t1;\n\tvar t2;\n\tvar t3;\n\tvar rgb;\n\tvar val;\n\n\tif (s === 0) {\n\t\tval = l * 255;\n\t\treturn [val, val, val];\n\t}\n\n\tif (l < 0.5) {\n\t\tt2 = l * (1 + s);\n\t} else {\n\t\tt2 = l + s - l * s;\n\t}\n\n\tt1 = 2 * l - t2;\n\n\trgb = [0, 0, 0];\n\tfor (var i = 0; i < 3; i++) {\n\t\tt3 = h + 1 / 3 * -(i - 1);\n\t\tif (t3 < 0) {\n\t\t\tt3++;\n\t\t}\n\t\tif (t3 > 1) {\n\t\t\tt3--;\n\t\t}\n\n\t\tif (6 * t3 < 1) {\n\t\t\tval = t1 + (t2 - t1) * 6 * t3;\n\t\t} else if (2 * t3 < 1) {\n\t\t\tval = t2;\n\t\t} else if (3 * t3 < 2) {\n\t\t\tval = t1 + (t2 - t1) * (2 / 3 - t3) * 6;\n\t\t} else {\n\t\t\tval = t1;\n\t\t}\n\n\t\trgb[i] = val * 255;\n\t}\n\n\treturn rgb;\n};\n\nconvert.hsl.hsv = function (hsl) {\n\tvar h = hsl[0];\n\tvar s = hsl[1] / 100;\n\tvar l = hsl[2] / 100;\n\tvar smin = s;\n\tvar lmin = Math.max(l, 0.01);\n\tvar sv;\n\tvar v;\n\n\tl *= 2;\n\ts *= (l <= 1) ? l : 2 - l;\n\tsmin *= lmin <= 1 ? lmin : 2 - lmin;\n\tv = (l + s) / 2;\n\tsv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);\n\n\treturn [h, sv * 100, v * 100];\n};\n\nconvert.hsv.rgb = function (hsv) {\n\tvar h = hsv[0] / 60;\n\tvar s = hsv[1] / 100;\n\tvar v = hsv[2] / 100;\n\tvar hi = Math.floor(h) % 6;\n\n\tvar f = h - Math.floor(h);\n\tvar p = 255 * v * (1 - s);\n\tvar q = 255 * v * (1 - (s * f));\n\tvar t = 255 * v * (1 - (s * (1 - f)));\n\tv *= 255;\n\n\tswitch (hi) {\n\t\tcase 0:\n\t\t\treturn [v, t, p];\n\t\tcase 1:\n\t\t\treturn [q, v, p];\n\t\tcase 2:\n\t\t\treturn [p, v, t];\n\t\tcase 3:\n\t\t\treturn [p, q, v];\n\t\tcase 4:\n\t\t\treturn [t, p, v];\n\t\tcase 5:\n\t\t\treturn [v, p, q];\n\t}\n};\n\nconvert.hsv.hsl = function (hsv) {\n\tvar h = hsv[0];\n\tvar s = hsv[1] / 100;\n\tvar v = hsv[2] / 100;\n\tvar vmin = Math.max(v, 0.01);\n\tvar lmin;\n\tvar sl;\n\tvar l;\n\n\tl = (2 - s) * v;\n\tlmin = (2 - s) * vmin;\n\tsl = s * vmin;\n\tsl /= (lmin <= 1) ? lmin : 2 - lmin;\n\tsl = sl || 0;\n\tl /= 2;\n\n\treturn [h, sl * 100, l * 100];\n};\n\n// http://dev.w3.org/csswg/css-color/#hwb-to-rgb\nconvert.hwb.rgb = function (hwb) {\n\tvar h = hwb[0] / 360;\n\tvar wh = hwb[1] / 100;\n\tvar bl = hwb[2] / 100;\n\tvar ratio = wh + bl;\n\tvar i;\n\tvar v;\n\tvar f;\n\tvar n;\n\n\t// wh + bl cant be > 1\n\tif (ratio > 1) {\n\t\twh /= ratio;\n\t\tbl /= ratio;\n\t}\n\n\ti = Math.floor(6 * h);\n\tv = 1 - bl;\n\tf = 6 * h - i;\n\n\tif ((i & 0x01) !== 0) {\n\t\tf = 1 - f;\n\t}\n\n\tn = wh + f * (v - wh); // linear interpolation\n\n\tvar r;\n\tvar g;\n\tvar b;\n\tswitch (i) {\n\t\tdefault:\n\t\tcase 6:\n\t\tcase 0: r = v; g = n; b = wh; break;\n\t\tcase 1: r = n; g = v; b = wh; break;\n\t\tcase 2: r = wh; g = v; b = n; break;\n\t\tcase 3: r = wh; g = n; b = v; break;\n\t\tcase 4: r = n; g = wh; b = v; break;\n\t\tcase 5: r = v; g = wh; b = n; break;\n\t}\n\n\treturn [r * 255, g * 255, b * 255];\n};\n\nconvert.cmyk.rgb = function (cmyk) {\n\tvar c = cmyk[0] / 100;\n\tvar m = cmyk[1] / 100;\n\tvar y = cmyk[2] / 100;\n\tvar k = cmyk[3] / 100;\n\tvar r;\n\tvar g;\n\tvar b;\n\n\tr = 1 - Math.min(1, c * (1 - k) + k);\n\tg = 1 - Math.min(1, m * (1 - k) + k);\n\tb = 1 - Math.min(1, y * (1 - k) + k);\n\n\treturn [r * 255, g * 255, b * 255];\n};\n\nconvert.xyz.rgb = function (xyz) {\n\tvar x = xyz[0] / 100;\n\tvar y = xyz[1] / 100;\n\tvar z = xyz[2] / 100;\n\tvar r;\n\tvar g;\n\tvar b;\n\n\tr = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);\n\tg = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);\n\tb = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);\n\n\t// assume sRGB\n\tr = r > 0.0031308\n\t\t? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)\n\t\t: r * 12.92;\n\n\tg = g > 0.0031308\n\t\t? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)\n\t\t: g * 12.92;\n\n\tb = b > 0.0031308\n\t\t? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)\n\t\t: b * 12.92;\n\n\tr = Math.min(Math.max(0, r), 1);\n\tg = Math.min(Math.max(0, g), 1);\n\tb = Math.min(Math.max(0, b), 1);\n\n\treturn [r * 255, g * 255, b * 255];\n};\n\nconvert.xyz.lab = function (xyz) {\n\tvar x = xyz[0];\n\tvar y = xyz[1];\n\tvar z = xyz[2];\n\tvar l;\n\tvar a;\n\tvar b;\n\n\tx /= 95.047;\n\ty /= 100;\n\tz /= 108.883;\n\n\tx = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);\n\ty = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);\n\tz = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);\n\n\tl = (116 * y) - 16;\n\ta = 500 * (x - y);\n\tb = 200 * (y - z);\n\n\treturn [l, a, b];\n};\n\nconvert.lab.xyz = function (lab) {\n\tvar l = lab[0];\n\tvar a = lab[1];\n\tvar b = lab[2];\n\tvar x;\n\tvar y;\n\tvar z;\n\n\ty = (l + 16) / 116;\n\tx = a / 500 + y;\n\tz = y - b / 200;\n\n\tvar y2 = Math.pow(y, 3);\n\tvar x2 = Math.pow(x, 3);\n\tvar z2 = Math.pow(z, 3);\n\ty = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787;\n\tx = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787;\n\tz = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787;\n\n\tx *= 95.047;\n\ty *= 100;\n\tz *= 108.883;\n\n\treturn [x, y, z];\n};\n\nconvert.lab.lch = function (lab) {\n\tvar l = lab[0];\n\tvar a = lab[1];\n\tvar b = lab[2];\n\tvar hr;\n\tvar h;\n\tvar c;\n\n\thr = Math.atan2(b, a);\n\th = hr * 360 / 2 / Math.PI;\n\n\tif (h < 0) {\n\t\th += 360;\n\t}\n\n\tc = Math.sqrt(a * a + b * b);\n\n\treturn [l, c, h];\n};\n\nconvert.lch.lab = function (lch) {\n\tvar l = lch[0];\n\tvar c = lch[1];\n\tvar h = lch[2];\n\tvar a;\n\tvar b;\n\tvar hr;\n\n\thr = h / 360 * 2 * Math.PI;\n\ta = c * Math.cos(hr);\n\tb = c * Math.sin(hr);\n\n\treturn [l, a, b];\n};\n\nconvert.rgb.ansi16 = function (args) {\n\tvar r = args[0];\n\tvar g = args[1];\n\tvar b = args[2];\n\tvar value = 1 in arguments ? arguments[1] : convert.rgb.hsv(args)[2]; // hsv -> ansi16 optimization\n\n\tvalue = Math.round(value / 50);\n\n\tif (value === 0) {\n\t\treturn 30;\n\t}\n\n\tvar ansi = 30\n\t\t+ ((Math.round(b / 255) << 2)\n\t\t| (Math.round(g / 255) << 1)\n\t\t| Math.round(r / 255));\n\n\tif (value === 2) {\n\t\tansi += 60;\n\t}\n\n\treturn ansi;\n};\n\nconvert.hsv.ansi16 = function (args) {\n\t// optimization here; we already know the value and don't need to get\n\t// it converted for us.\n\treturn convert.rgb.ansi16(convert.hsv.rgb(args), args[2]);\n};\n\nconvert.rgb.ansi256 = function (args) {\n\tvar r = args[0];\n\tvar g = args[1];\n\tvar b = args[2];\n\n\t// we use the extended greyscale palette here, with the exception of\n\t// black and white. normal palette only has 4 greyscale shades.\n\tif (r === g && g === b) {\n\t\tif (r < 8) {\n\t\t\treturn 16;\n\t\t}\n\n\t\tif (r > 248) {\n\t\t\treturn 231;\n\t\t}\n\n\t\treturn Math.round(((r - 8) / 247) * 24) + 232;\n\t}\n\n\tvar ansi = 16\n\t\t+ (36 * Math.round(r / 255 * 5))\n\t\t+ (6 * Math.round(g / 255 * 5))\n\t\t+ Math.round(b / 255 * 5);\n\n\treturn ansi;\n};\n\nconvert.ansi16.rgb = function (args) {\n\tvar color = args % 10;\n\n\t// handle greyscale\n\tif (color === 0 || color === 7) {\n\t\tif (args > 50) {\n\t\t\tcolor += 3.5;\n\t\t}\n\n\t\tcolor = color / 10.5 * 255;\n\n\t\treturn [color, color, color];\n\t}\n\n\tvar mult = (~~(args > 50) + 1) * 0.5;\n\tvar r = ((color & 1) * mult) * 255;\n\tvar g = (((color >> 1) & 1) * mult) * 255;\n\tvar b = (((color >> 2) & 1) * mult) * 255;\n\n\treturn [r, g, b];\n};\n\nconvert.ansi256.rgb = function (args) {\n\t// handle greyscale\n\tif (args >= 232) {\n\t\tvar c = (args - 232) * 10 + 8;\n\t\treturn [c, c, c];\n\t}\n\n\targs -= 16;\n\n\tvar rem;\n\tvar r = Math.floor(args / 36) / 5 * 255;\n\tvar g = Math.floor((rem = args % 36) / 6) / 5 * 255;\n\tvar b = (rem % 6) / 5 * 255;\n\n\treturn [r, g, b];\n};\n\nconvert.rgb.hex = function (args) {\n\tvar integer = ((Math.round(args[0]) & 0xFF) << 16)\n\t\t+ ((Math.round(args[1]) & 0xFF) << 8)\n\t\t+ (Math.round(args[2]) & 0xFF);\n\n\tvar string = integer.toString(16).toUpperCase();\n\treturn '000000'.substring(string.length) + string;\n};\n\nconvert.hex.rgb = function (args) {\n\tvar match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);\n\tif (!match) {\n\t\treturn [0, 0, 0];\n\t}\n\n\tvar colorString = match[0];\n\n\tif (match[0].length === 3) {\n\t\tcolorString = colorString.split('').map(function (char) {\n\t\t\treturn char + char;\n\t\t}).join('');\n\t}\n\n\tvar integer = parseInt(colorString, 16);\n\tvar r = (integer >> 16) & 0xFF;\n\tvar g = (integer >> 8) & 0xFF;\n\tvar b = integer & 0xFF;\n\n\treturn [r, g, b];\n};\n\nconvert.rgb.hcg = function (rgb) {\n\tvar r = rgb[0] / 255;\n\tvar g = rgb[1] / 255;\n\tvar b = rgb[2] / 255;\n\tvar max = Math.max(Math.max(r, g), b);\n\tvar min = Math.min(Math.min(r, g), b);\n\tvar chroma = (max - min);\n\tvar grayscale;\n\tvar hue;\n\n\tif (chroma < 1) {\n\t\tgrayscale = min / (1 - chroma);\n\t} else {\n\t\tgrayscale = 0;\n\t}\n\n\tif (chroma <= 0) {\n\t\thue = 0;\n\t} else\n\tif (max === r) {\n\t\thue = ((g - b) / chroma) % 6;\n\t} else\n\tif (max === g) {\n\t\thue = 2 + (b - r) / chroma;\n\t} else {\n\t\thue = 4 + (r - g) / chroma + 4;\n\t}\n\n\thue /= 6;\n\thue %= 1;\n\n\treturn [hue * 360, chroma * 100, grayscale * 100];\n};\n\nconvert.hsl.hcg = function (hsl) {\n\tvar s = hsl[1] / 100;\n\tvar l = hsl[2] / 100;\n\tvar c = 1;\n\tvar f = 0;\n\n\tif (l < 0.5) {\n\t\tc = 2.0 * s * l;\n\t} else {\n\t\tc = 2.0 * s * (1.0 - l);\n\t}\n\n\tif (c < 1.0) {\n\t\tf = (l - 0.5 * c) / (1.0 - c);\n\t}\n\n\treturn [hsl[0], c * 100, f * 100];\n};\n\nconvert.hsv.hcg = function (hsv) {\n\tvar s = hsv[1] / 100;\n\tvar v = hsv[2] / 100;\n\n\tvar c = s * v;\n\tvar f = 0;\n\n\tif (c < 1.0) {\n\t\tf = (v - c) / (1 - c);\n\t}\n\n\treturn [hsv[0], c * 100, f * 100];\n};\n\nconvert.hcg.rgb = function (hcg) {\n\tvar h = hcg[0] / 360;\n\tvar c = hcg[1] / 100;\n\tvar g = hcg[2] / 100;\n\n\tif (c === 0.0) {\n\t\treturn [g * 255, g * 255, g * 255];\n\t}\n\n\tvar pure = [0, 0, 0];\n\tvar hi = (h % 1) * 6;\n\tvar v = hi % 1;\n\tvar w = 1 - v;\n\tvar mg = 0;\n\n\tswitch (Math.floor(hi)) {\n\t\tcase 0:\n\t\t\tpure[0] = 1; pure[1] = v; pure[2] = 0; break;\n\t\tcase 1:\n\t\t\tpure[0] = w; pure[1] = 1; pure[2] = 0; break;\n\t\tcase 2:\n\t\t\tpure[0] = 0; pure[1] = 1; pure[2] = v; break;\n\t\tcase 3:\n\t\t\tpure[0] = 0; pure[1] = w; pure[2] = 1; break;\n\t\tcase 4:\n\t\t\tpure[0] = v; pure[1] = 0; pure[2] = 1; break;\n\t\tdefault:\n\t\t\tpure[0] = 1; pure[1] = 0; pure[2] = w;\n\t}\n\n\tmg = (1.0 - c) * g;\n\n\treturn [\n\t\t(c * pure[0] + mg) * 255,\n\t\t(c * pure[1] + mg) * 255,\n\t\t(c * pure[2] + mg) * 255\n\t];\n};\n\nconvert.hcg.hsv = function (hcg) {\n\tvar c = hcg[1] / 100;\n\tvar g = hcg[2] / 100;\n\n\tvar v = c + g * (1.0 - c);\n\tvar f = 0;\n\n\tif (v > 0.0) {\n\t\tf = c / v;\n\t}\n\n\treturn [hcg[0], f * 100, v * 100];\n};\n\nconvert.hcg.hsl = function (hcg) {\n\tvar c = hcg[1] / 100;\n\tvar g = hcg[2] / 100;\n\n\tvar l = g * (1.0 - c) + 0.5 * c;\n\tvar s = 0;\n\n\tif (l > 0.0 && l < 0.5) {\n\t\ts = c / (2 * l);\n\t} else\n\tif (l >= 0.5 && l < 1.0) {\n\t\ts = c / (2 * (1 - l));\n\t}\n\n\treturn [hcg[0], s * 100, l * 100];\n};\n\nconvert.hcg.hwb = function (hcg) {\n\tvar c = hcg[1] / 100;\n\tvar g = hcg[2] / 100;\n\tvar v = c + g * (1.0 - c);\n\treturn [hcg[0], (v - c) * 100, (1 - v) * 100];\n};\n\nconvert.hwb.hcg = function (hwb) {\n\tvar w = hwb[1] / 100;\n\tvar b = hwb[2] / 100;\n\tvar v = 1 - b;\n\tvar c = v - w;\n\tvar g = 0;\n\n\tif (c < 1) {\n\t\tg = (v - c) / (1 - c);\n\t}\n\n\treturn [hwb[0], c * 100, g * 100];\n};\n\nconvert.apple.rgb = function (apple) {\n\treturn [(apple[0] / 65535) * 255, (apple[1] / 65535) * 255, (apple[2] / 65535) * 255];\n};\n\nconvert.rgb.apple = function (rgb) {\n\treturn [(rgb[0] / 255) * 65535, (rgb[1] / 255) * 65535, (rgb[2] / 255) * 65535];\n};\n\nconvert.gray.rgb = function (args) {\n\treturn [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];\n};\n\nconvert.gray.hsl = convert.gray.hsv = function (args) {\n\treturn [0, 0, args[0]];\n};\n\nconvert.gray.hwb = function (gray) {\n\treturn [0, 100, gray[0]];\n};\n\nconvert.gray.cmyk = function (gray) {\n\treturn [0, 0, 0, gray[0]];\n};\n\nconvert.gray.lab = function (gray) {\n\treturn [gray[0], 0, 0];\n};\n\nconvert.gray.hex = function (gray) {\n\tvar val = Math.round(gray[0] / 100 * 255) & 0xFF;\n\tvar integer = (val << 16) + (val << 8) + val;\n\n\tvar string = integer.toString(16).toUpperCase();\n\treturn '000000'.substring(string.length) + string;\n};\n\nconvert.rgb.gray = function (rgb) {\n\tvar val = (rgb[0] + rgb[1] + rgb[2]) / 3;\n\treturn [val / 255 * 100];\n};\n});\nvar conversions_1 = conversions.rgb;\nvar conversions_2 = conversions.hsl;\nvar conversions_3 = conversions.hsv;\nvar conversions_4 = conversions.hwb;\nvar conversions_5 = conversions.cmyk;\nvar conversions_6 = conversions.xyz;\nvar conversions_7 = conversions.lab;\nvar conversions_8 = conversions.lch;\nvar conversions_9 = conversions.hex;\nvar conversions_10 = conversions.keyword;\nvar conversions_11 = conversions.ansi16;\nvar conversions_12 = conversions.ansi256;\nvar conversions_13 = conversions.hcg;\nvar conversions_14 = conversions.apple;\nvar conversions_15 = conversions.gray;\n\n/*\n\tthis function routes a model to all other models.\n\n\tall functions that are routed have a property `.conversion` attached\n\tto the returned synthetic function. This property is an array\n\tof strings, each with the steps in between the 'from' and 'to'\n\tcolor models (inclusive).\n\n\tconversions that are not possible simply are not included.\n*/\n\nfunction buildGraph() {\n\tvar graph = {};\n\t// https://jsperf.com/object-keys-vs-for-in-with-closure/3\n\tvar models = Object.keys(conversions);\n\n\tfor (var len = models.length, i = 0; i < len; i++) {\n\t\tgraph[models[i]] = {\n\t\t\t// http://jsperf.com/1-vs-infinity\n\t\t\t// micro-opt, but this is simple.\n\t\t\tdistance: -1,\n\t\t\tparent: null\n\t\t};\n\t}\n\n\treturn graph;\n}\n\n// https://en.wikipedia.org/wiki/Breadth-first_search\nfunction deriveBFS(fromModel) {\n\tvar graph = buildGraph();\n\tvar queue = [fromModel]; // unshift -> queue -> pop\n\n\tgraph[fromModel].distance = 0;\n\n\twhile (queue.length) {\n\t\tvar current = queue.pop();\n\t\tvar adjacents = Object.keys(conversions[current]);\n\n\t\tfor (var len = adjacents.length, i = 0; i < len; i++) {\n\t\t\tvar adjacent = adjacents[i];\n\t\t\tvar node = graph[adjacent];\n\n\t\t\tif (node.distance === -1) {\n\t\t\t\tnode.distance = graph[current].distance + 1;\n\t\t\t\tnode.parent = current;\n\t\t\t\tqueue.unshift(adjacent);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn graph;\n}\n\nfunction link(from, to) {\n\treturn function (args) {\n\t\treturn to(from(args));\n\t};\n}\n\nfunction wrapConversion(toModel, graph) {\n\tvar path = [graph[toModel].parent, toModel];\n\tvar fn = conversions[graph[toModel].parent][toModel];\n\n\tvar cur = graph[toModel].parent;\n\twhile (graph[cur].parent) {\n\t\tpath.unshift(graph[cur].parent);\n\t\tfn = link(conversions[graph[cur].parent][cur], fn);\n\t\tcur = graph[cur].parent;\n\t}\n\n\tfn.conversion = path;\n\treturn fn;\n}\n\nvar route = function (fromModel) {\n\tvar graph = deriveBFS(fromModel);\n\tvar conversion = {};\n\n\tvar models = Object.keys(graph);\n\tfor (var len = models.length, i = 0; i < len; i++) {\n\t\tvar toModel = models[i];\n\t\tvar node = graph[toModel];\n\n\t\tif (node.parent === null) {\n\t\t\t// no possible conversion, or this node is the source model.\n\t\t\tcontinue;\n\t\t}\n\n\t\tconversion[toModel] = wrapConversion(toModel, graph);\n\t}\n\n\treturn conversion;\n};\n\nvar convert = {};\n\nvar models = Object.keys(conversions);\n\nfunction wrapRaw(fn) {\n\tvar wrappedFn = function (args) {\n\t\tif (args === undefined || args === null) {\n\t\t\treturn args;\n\t\t}\n\n\t\tif (arguments.length > 1) {\n\t\t\targs = Array.prototype.slice.call(arguments);\n\t\t}\n\n\t\treturn fn(args);\n\t};\n\n\t// preserve .conversion property if there is one\n\tif ('conversion' in fn) {\n\t\twrappedFn.conversion = fn.conversion;\n\t}\n\n\treturn wrappedFn;\n}\n\nfunction wrapRounded(fn) {\n\tvar wrappedFn = function (args) {\n\t\tif (args === undefined || args === null) {\n\t\t\treturn args;\n\t\t}\n\n\t\tif (arguments.length > 1) {\n\t\t\targs = Array.prototype.slice.call(arguments);\n\t\t}\n\n\t\tvar result = fn(args);\n\n\t\t// we're assuming the result is an array here.\n\t\t// see notice in conversions.js; don't use box types\n\t\t// in conversion functions.\n\t\tif (typeof result === 'object') {\n\t\t\tfor (var len = result.length, i = 0; i < len; i++) {\n\t\t\t\tresult[i] = Math.round(result[i]);\n\t\t\t}\n\t\t}\n\n\t\treturn result;\n\t};\n\n\t// preserve .conversion property if there is one\n\tif ('conversion' in fn) {\n\t\twrappedFn.conversion = fn.conversion;\n\t}\n\n\treturn wrappedFn;\n}\n\nmodels.forEach(function (fromModel) {\n\tconvert[fromModel] = {};\n\n\tObject.defineProperty(convert[fromModel], 'channels', {value: conversions[fromModel].channels});\n\tObject.defineProperty(convert[fromModel], 'labels', {value: conversions[fromModel].labels});\n\n\tvar routes = route(fromModel);\n\tvar routeModels = Object.keys(routes);\n\n\trouteModels.forEach(function (toModel) {\n\t\tvar fn = routes[toModel];\n\n\t\tconvert[fromModel][toModel] = wrapRounded(fn);\n\t\tconvert[fromModel][toModel].raw = wrapRaw(fn);\n\t});\n});\n\nvar colorConvert = convert;\n\nvar colorName$1 = {\r\n\t\"aliceblue\": [240, 248, 255],\r\n\t\"antiquewhite\": [250, 235, 215],\r\n\t\"aqua\": [0, 255, 255],\r\n\t\"aquamarine\": [127, 255, 212],\r\n\t\"azure\": [240, 255, 255],\r\n\t\"beige\": [245, 245, 220],\r\n\t\"bisque\": [255, 228, 196],\r\n\t\"black\": [0, 0, 0],\r\n\t\"blanchedalmond\": [255, 235, 205],\r\n\t\"blue\": [0, 0, 255],\r\n\t\"blueviolet\": [138, 43, 226],\r\n\t\"brown\": [165, 42, 42],\r\n\t\"burlywood\": [222, 184, 135],\r\n\t\"cadetblue\": [95, 158, 160],\r\n\t\"chartreuse\": [127, 255, 0],\r\n\t\"chocolate\": [210, 105, 30],\r\n\t\"coral\": [255, 127, 80],\r\n\t\"cornflowerblue\": [100, 149, 237],\r\n\t\"cornsilk\": [255, 248, 220],\r\n\t\"crimson\": [220, 20, 60],\r\n\t\"cyan\": [0, 255, 255],\r\n\t\"darkblue\": [0, 0, 139],\r\n\t\"darkcyan\": [0, 139, 139],\r\n\t\"darkgoldenrod\": [184, 134, 11],\r\n\t\"darkgray\": [169, 169, 169],\r\n\t\"darkgreen\": [0, 100, 0],\r\n\t\"darkgrey\": [169, 169, 169],\r\n\t\"darkkhaki\": [189, 183, 107],\r\n\t\"darkmagenta\": [139, 0, 139],\r\n\t\"darkolivegreen\": [85, 107, 47],\r\n\t\"darkorange\": [255, 140, 0],\r\n\t\"darkorchid\": [153, 50, 204],\r\n\t\"darkred\": [139, 0, 0],\r\n\t\"darksalmon\": [233, 150, 122],\r\n\t\"darkseagreen\": [143, 188, 143],\r\n\t\"darkslateblue\": [72, 61, 139],\r\n\t\"darkslategray\": [47, 79, 79],\r\n\t\"darkslategrey\": [47, 79, 79],\r\n\t\"darkturquoise\": [0, 206, 209],\r\n\t\"darkviolet\": [148, 0, 211],\r\n\t\"deeppink\": [255, 20, 147],\r\n\t\"deepskyblue\": [0, 191, 255],\r\n\t\"dimgray\": [105, 105, 105],\r\n\t\"dimgrey\": [105, 105, 105],\r\n\t\"dodgerblue\": [30, 144, 255],\r\n\t\"firebrick\": [178, 34, 34],\r\n\t\"floralwhite\": [255, 250, 240],\r\n\t\"forestgreen\": [34, 139, 34],\r\n\t\"fuchsia\": [255, 0, 255],\r\n\t\"gainsboro\": [220, 220, 220],\r\n\t\"ghostwhite\": [248, 248, 255],\r\n\t\"gold\": [255, 215, 0],\r\n\t\"goldenrod\": [218, 165, 32],\r\n\t\"gray\": [128, 128, 128],\r\n\t\"green\": [0, 128, 0],\r\n\t\"greenyellow\": [173, 255, 47],\r\n\t\"grey\": [128, 128, 128],\r\n\t\"honeydew\": [240, 255, 240],\r\n\t\"hotpink\": [255, 105, 180],\r\n\t\"indianred\": [205, 92, 92],\r\n\t\"indigo\": [75, 0, 130],\r\n\t\"ivory\": [255, 255, 240],\r\n\t\"khaki\": [240, 230, 140],\r\n\t\"lavender\": [230, 230, 250],\r\n\t\"lavenderblush\": [255, 240, 245],\r\n\t\"lawngreen\": [124, 252, 0],\r\n\t\"lemonchiffon\": [255, 250, 205],\r\n\t\"lightblue\": [173, 216, 230],\r\n\t\"lightcoral\": [240, 128, 128],\r\n\t\"lightcyan\": [224, 255, 255],\r\n\t\"lightgoldenrodyellow\": [250, 250, 210],\r\n\t\"lightgray\": [211, 211, 211],\r\n\t\"lightgreen\": [144, 238, 144],\r\n\t\"lightgrey\": [211, 211, 211],\r\n\t\"lightpink\": [255, 182, 193],\r\n\t\"lightsalmon\": [255, 160, 122],\r\n\t\"lightseagreen\": [32, 178, 170],\r\n\t\"lightskyblue\": [135, 206, 250],\r\n\t\"lightslategray\": [119, 136, 153],\r\n\t\"lightslategrey\": [119, 136, 153],\r\n\t\"lightsteelblue\": [176, 196, 222],\r\n\t\"lightyellow\": [255, 255, 224],\r\n\t\"lime\": [0, 255, 0],\r\n\t\"limegreen\": [50, 205, 50],\r\n\t\"linen\": [250, 240, 230],\r\n\t\"magenta\": [255, 0, 255],\r\n\t\"maroon\": [128, 0, 0],\r\n\t\"mediumaquamarine\": [102, 205, 170],\r\n\t\"mediumblue\": [0, 0, 205],\r\n\t\"mediumorchid\": [186, 85, 211],\r\n\t\"mediumpurple\": [147, 112, 219],\r\n\t\"mediumseagreen\": [60, 179, 113],\r\n\t\"mediumslateblue\": [123, 104, 238],\r\n\t\"mediumspringgreen\": [0, 250, 154],\r\n\t\"mediumturquoise\": [72, 209, 204],\r\n\t\"mediumvioletred\": [199, 21, 133],\r\n\t\"midnightblue\": [25, 25, 112],\r\n\t\"mintcream\": [245, 255, 250],\r\n\t\"mistyrose\": [255, 228, 225],\r\n\t\"moccasin\": [255, 228, 181],\r\n\t\"navajowhite\": [255, 222, 173],\r\n\t\"navy\": [0, 0, 128],\r\n\t\"oldlace\": [253, 245, 230],\r\n\t\"olive\": [128, 128, 0],\r\n\t\"olivedrab\": [107, 142, 35],\r\n\t\"orange\": [255, 165, 0],\r\n\t\"orangered\": [255, 69, 0],\r\n\t\"orchid\": [218, 112, 214],\r\n\t\"palegoldenrod\": [238, 232, 170],\r\n\t\"palegreen\": [152, 251, 152],\r\n\t\"paleturquoise\": [175, 238, 238],\r\n\t\"palevioletred\": [219, 112, 147],\r\n\t\"papayawhip\": [255, 239, 213],\r\n\t\"peachpuff\": [255, 218, 185],\r\n\t\"peru\": [205, 133, 63],\r\n\t\"pink\": [255, 192, 203],\r\n\t\"plum\": [221, 160, 221],\r\n\t\"powderblue\": [176, 224, 230],\r\n\t\"purple\": [128, 0, 128],\r\n\t\"rebeccapurple\": [102, 51, 153],\r\n\t\"red\": [255, 0, 0],\r\n\t\"rosybrown\": [188, 143, 143],\r\n\t\"royalblue\": [65, 105, 225],\r\n\t\"saddlebrown\": [139, 69, 19],\r\n\t\"salmon\": [250, 128, 114],\r\n\t\"sandybrown\": [244, 164, 96],\r\n\t\"seagreen\": [46, 139, 87],\r\n\t\"seashell\": [255, 245, 238],\r\n\t\"sienna\": [160, 82, 45],\r\n\t\"silver\": [192, 192, 192],\r\n\t\"skyblue\": [135, 206, 235],\r\n\t\"slateblue\": [106, 90, 205],\r\n\t\"slategray\": [112, 128, 144],\r\n\t\"slategrey\": [112, 128, 144],\r\n\t\"snow\": [255, 250, 250],\r\n\t\"springgreen\": [0, 255, 127],\r\n\t\"steelblue\": [70, 130, 180],\r\n\t\"tan\": [210, 180, 140],\r\n\t\"teal\": [0, 128, 128],\r\n\t\"thistle\": [216, 191, 216],\r\n\t\"tomato\": [255, 99, 71],\r\n\t\"turquoise\": [64, 224, 208],\r\n\t\"violet\": [238, 130, 238],\r\n\t\"wheat\": [245, 222, 179],\r\n\t\"white\": [255, 255, 255],\r\n\t\"whitesmoke\": [245, 245, 245],\r\n\t\"yellow\": [255, 255, 0],\r\n\t\"yellowgreen\": [154, 205, 50]\r\n};\n\n/* MIT license */\n\n\nvar colorString = {\n getRgba: getRgba,\n getHsla: getHsla,\n getRgb: getRgb,\n getHsl: getHsl,\n getHwb: getHwb,\n getAlpha: getAlpha,\n\n hexString: hexString,\n rgbString: rgbString,\n rgbaString: rgbaString,\n percentString: percentString,\n percentaString: percentaString,\n hslString: hslString,\n hslaString: hslaString,\n hwbString: hwbString,\n keyword: keyword\n};\n\nfunction getRgba(string) {\n if (!string) {\n return;\n }\n var abbr = /^#([a-fA-F0-9]{3,4})$/i,\n hex = /^#([a-fA-F0-9]{6}([a-fA-F0-9]{2})?)$/i,\n rgba = /^rgba?\\(\\s*([+-]?\\d+)\\s*,\\s*([+-]?\\d+)\\s*,\\s*([+-]?\\d+)\\s*(?:,\\s*([+-]?[\\d\\.]+)\\s*)?\\)$/i,\n per = /^rgba?\\(\\s*([+-]?[\\d\\.]+)\\%\\s*,\\s*([+-]?[\\d\\.]+)\\%\\s*,\\s*([+-]?[\\d\\.]+)\\%\\s*(?:,\\s*([+-]?[\\d\\.]+)\\s*)?\\)$/i,\n keyword = /(\\w+)/;\n\n var rgb = [0, 0, 0],\n a = 1,\n match = string.match(abbr),\n hexAlpha = \"\";\n if (match) {\n match = match[1];\n hexAlpha = match[3];\n for (var i = 0; i < rgb.length; i++) {\n rgb[i] = parseInt(match[i] + match[i], 16);\n }\n if (hexAlpha) {\n a = Math.round((parseInt(hexAlpha + hexAlpha, 16) / 255) * 100) / 100;\n }\n }\n else if (match = string.match(hex)) {\n hexAlpha = match[2];\n match = match[1];\n for (var i = 0; i < rgb.length; i++) {\n rgb[i] = parseInt(match.slice(i * 2, i * 2 + 2), 16);\n }\n if (hexAlpha) {\n a = Math.round((parseInt(hexAlpha, 16) / 255) * 100) / 100;\n }\n }\n else if (match = string.match(rgba)) {\n for (var i = 0; i < rgb.length; i++) {\n rgb[i] = parseInt(match[i + 1]);\n }\n a = parseFloat(match[4]);\n }\n else if (match = string.match(per)) {\n for (var i = 0; i < rgb.length; i++) {\n rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);\n }\n a = parseFloat(match[4]);\n }\n else if (match = string.match(keyword)) {\n if (match[1] == \"transparent\") {\n return [0, 0, 0, 0];\n }\n rgb = colorName$1[match[1]];\n if (!rgb) {\n return;\n }\n }\n\n for (var i = 0; i < rgb.length; i++) {\n rgb[i] = scale(rgb[i], 0, 255);\n }\n if (!a && a != 0) {\n a = 1;\n }\n else {\n a = scale(a, 0, 1);\n }\n rgb[3] = a;\n return rgb;\n}\n\nfunction getHsla(string) {\n if (!string) {\n return;\n }\n var hsl = /^hsla?\\(\\s*([+-]?\\d+)(?:deg)?\\s*,\\s*([+-]?[\\d\\.]+)%\\s*,\\s*([+-]?[\\d\\.]+)%\\s*(?:,\\s*([+-]?[\\d\\.]+)\\s*)?\\)/;\n var match = string.match(hsl);\n if (match) {\n var alpha = parseFloat(match[4]);\n var h = scale(parseInt(match[1]), 0, 360),\n s = scale(parseFloat(match[2]), 0, 100),\n l = scale(parseFloat(match[3]), 0, 100),\n a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);\n return [h, s, l, a];\n }\n}\n\nfunction getHwb(string) {\n if (!string) {\n return;\n }\n var hwb = /^hwb\\(\\s*([+-]?\\d+)(?:deg)?\\s*,\\s*([+-]?[\\d\\.]+)%\\s*,\\s*([+-]?[\\d\\.]+)%\\s*(?:,\\s*([+-]?[\\d\\.]+)\\s*)?\\)/;\n var match = string.match(hwb);\n if (match) {\n var alpha = parseFloat(match[4]);\n var h = scale(parseInt(match[1]), 0, 360),\n w = scale(parseFloat(match[2]), 0, 100),\n b = scale(parseFloat(match[3]), 0, 100),\n a = scale(isNaN(alpha) ? 1 : alpha, 0, 1);\n return [h, w, b, a];\n }\n}\n\nfunction getRgb(string) {\n var rgba = getRgba(string);\n return rgba && rgba.slice(0, 3);\n}\n\nfunction getHsl(string) {\n var hsla = getHsla(string);\n return hsla && hsla.slice(0, 3);\n}\n\nfunction getAlpha(string) {\n var vals = getRgba(string);\n if (vals) {\n return vals[3];\n }\n else if (vals = getHsla(string)) {\n return vals[3];\n }\n else if (vals = getHwb(string)) {\n return vals[3];\n }\n}\n\n// generators\nfunction hexString(rgba, a) {\n var a = (a !== undefined && rgba.length === 3) ? a : rgba[3];\n return \"#\" + hexDouble(rgba[0]) \n + hexDouble(rgba[1])\n + hexDouble(rgba[2])\n + (\n (a >= 0 && a < 1)\n ? hexDouble(Math.round(a * 255))\n : \"\"\n );\n}\n\nfunction rgbString(rgba, alpha) {\n if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {\n return rgbaString(rgba, alpha);\n }\n return \"rgb(\" + rgba[0] + \", \" + rgba[1] + \", \" + rgba[2] + \")\";\n}\n\nfunction rgbaString(rgba, alpha) {\n if (alpha === undefined) {\n alpha = (rgba[3] !== undefined ? rgba[3] : 1);\n }\n return \"rgba(\" + rgba[0] + \", \" + rgba[1] + \", \" + rgba[2]\n + \", \" + alpha + \")\";\n}\n\nfunction percentString(rgba, alpha) {\n if (alpha < 1 || (rgba[3] && rgba[3] < 1)) {\n return percentaString(rgba, alpha);\n }\n var r = Math.round(rgba[0]/255 * 100),\n g = Math.round(rgba[1]/255 * 100),\n b = Math.round(rgba[2]/255 * 100);\n\n return \"rgb(\" + r + \"%, \" + g + \"%, \" + b + \"%)\";\n}\n\nfunction percentaString(rgba, alpha) {\n var r = Math.round(rgba[0]/255 * 100),\n g = Math.round(rgba[1]/255 * 100),\n b = Math.round(rgba[2]/255 * 100);\n return \"rgba(\" + r + \"%, \" + g + \"%, \" + b + \"%, \" + (alpha || rgba[3] || 1) + \")\";\n}\n\nfunction hslString(hsla, alpha) {\n if (alpha < 1 || (hsla[3] && hsla[3] < 1)) {\n return hslaString(hsla, alpha);\n }\n return \"hsl(\" + hsla[0] + \", \" + hsla[1] + \"%, \" + hsla[2] + \"%)\";\n}\n\nfunction hslaString(hsla, alpha) {\n if (alpha === undefined) {\n alpha = (hsla[3] !== undefined ? hsla[3] : 1);\n }\n return \"hsla(\" + hsla[0] + \", \" + hsla[1] + \"%, \" + hsla[2] + \"%, \"\n + alpha + \")\";\n}\n\n// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax\n// (hwb have alpha optional & 1 is default value)\nfunction hwbString(hwb, alpha) {\n if (alpha === undefined) {\n alpha = (hwb[3] !== undefined ? hwb[3] : 1);\n }\n return \"hwb(\" + hwb[0] + \", \" + hwb[1] + \"%, \" + hwb[2] + \"%\"\n + (alpha !== undefined && alpha !== 1 ? \", \" + alpha : \"\") + \")\";\n}\n\nfunction keyword(rgb) {\n return reverseNames[rgb.slice(0, 3)];\n}\n\n// helpers\nfunction scale(num, min, max) {\n return Math.min(Math.max(min, num), max);\n}\n\nfunction hexDouble(num) {\n var str = num.toString(16).toUpperCase();\n return (str.length < 2) ? \"0\" + str : str;\n}\n\n\n//create a list of reverse color names\nvar reverseNames = {};\nfor (var name in colorName$1) {\n reverseNames[colorName$1[name]] = name;\n}\n\n/* MIT license */\n\n\n\nvar Color = function (obj) {\n\tif (obj instanceof Color) {\n\t\treturn obj;\n\t}\n\tif (!(this instanceof Color)) {\n\t\treturn new Color(obj);\n\t}\n\n\tthis.valid = false;\n\tthis.values = {\n\t\trgb: [0, 0, 0],\n\t\thsl: [0, 0, 0],\n\t\thsv: [0, 0, 0],\n\t\thwb: [0, 0, 0],\n\t\tcmyk: [0, 0, 0, 0],\n\t\talpha: 1\n\t};\n\n\t// parse Color() argument\n\tvar vals;\n\tif (typeof obj === 'string') {\n\t\tvals = colorString.getRgba(obj);\n\t\tif (vals) {\n\t\t\tthis.setValues('rgb', vals);\n\t\t} else if (vals = colorString.getHsla(obj)) {\n\t\t\tthis.setValues('hsl', vals);\n\t\t} else if (vals = colorString.getHwb(obj)) {\n\t\t\tthis.setValues('hwb', vals);\n\t\t}\n\t} else if (typeof obj === 'object') {\n\t\tvals = obj;\n\t\tif (vals.r !== undefined || vals.red !== undefined) {\n\t\t\tthis.setValues('rgb', vals);\n\t\t} else if (vals.l !== undefined || vals.lightness !== undefined) {\n\t\t\tthis.setValues('hsl', vals);\n\t\t} else if (vals.v !== undefined || vals.value !== undefined) {\n\t\t\tthis.setValues('hsv', vals);\n\t\t} else if (vals.w !== undefined || vals.whiteness !== undefined) {\n\t\t\tthis.setValues('hwb', vals);\n\t\t} else if (vals.c !== undefined || vals.cyan !== undefined) {\n\t\t\tthis.setValues('cmyk', vals);\n\t\t}\n\t}\n};\n\nColor.prototype = {\n\tisValid: function () {\n\t\treturn this.valid;\n\t},\n\trgb: function () {\n\t\treturn this.setSpace('rgb', arguments);\n\t},\n\thsl: function () {\n\t\treturn this.setSpace('hsl', arguments);\n\t},\n\thsv: function () {\n\t\treturn this.setSpace('hsv', arguments);\n\t},\n\thwb: function () {\n\t\treturn this.setSpace('hwb', arguments);\n\t},\n\tcmyk: function () {\n\t\treturn this.setSpace('cmyk', arguments);\n\t},\n\n\trgbArray: function () {\n\t\treturn this.values.rgb;\n\t},\n\thslArray: function () {\n\t\treturn this.values.hsl;\n\t},\n\thsvArray: function () {\n\t\treturn this.values.hsv;\n\t},\n\thwbArray: function () {\n\t\tvar values = this.values;\n\t\tif (values.alpha !== 1) {\n\t\t\treturn values.hwb.concat([values.alpha]);\n\t\t}\n\t\treturn values.hwb;\n\t},\n\tcmykArray: function () {\n\t\treturn this.values.cmyk;\n\t},\n\trgbaArray: function () {\n\t\tvar values = this.values;\n\t\treturn values.rgb.concat([values.alpha]);\n\t},\n\thslaArray: function () {\n\t\tvar values = this.values;\n\t\treturn values.hsl.concat([values.alpha]);\n\t},\n\talpha: function (val) {\n\t\tif (val === undefined) {\n\t\t\treturn this.values.alpha;\n\t\t}\n\t\tthis.setValues('alpha', val);\n\t\treturn this;\n\t},\n\n\tred: function (val) {\n\t\treturn this.setChannel('rgb', 0, val);\n\t},\n\tgreen: function (val) {\n\t\treturn this.setChannel('rgb', 1, val);\n\t},\n\tblue: function (val) {\n\t\treturn this.setChannel('rgb', 2, val);\n\t},\n\thue: function (val) {\n\t\tif (val) {\n\t\t\tval %= 360;\n\t\t\tval = val < 0 ? 360 + val : val;\n\t\t}\n\t\treturn this.setChannel('hsl', 0, val);\n\t},\n\tsaturation: function (val) {\n\t\treturn this.setChannel('hsl', 1, val);\n\t},\n\tlightness: function (val) {\n\t\treturn this.setChannel('hsl', 2, val);\n\t},\n\tsaturationv: function (val) {\n\t\treturn this.setChannel('hsv', 1, val);\n\t},\n\twhiteness: function (val) {\n\t\treturn this.setChannel('hwb', 1, val);\n\t},\n\tblackness: function (val) {\n\t\treturn this.setChannel('hwb', 2, val);\n\t},\n\tvalue: function (val) {\n\t\treturn this.setChannel('hsv', 2, val);\n\t},\n\tcyan: function (val) {\n\t\treturn this.setChannel('cmyk', 0, val);\n\t},\n\tmagenta: function (val) {\n\t\treturn this.setChannel('cmyk', 1, val);\n\t},\n\tyellow: function (val) {\n\t\treturn this.setChannel('cmyk', 2, val);\n\t},\n\tblack: function (val) {\n\t\treturn this.setChannel('cmyk', 3, val);\n\t},\n\n\thexString: function () {\n\t\treturn colorString.hexString(this.values.rgb);\n\t},\n\trgbString: function () {\n\t\treturn colorString.rgbString(this.values.rgb, this.values.alpha);\n\t},\n\trgbaString: function () {\n\t\treturn colorString.rgbaString(this.values.rgb, this.values.alpha);\n\t},\n\tpercentString: function () {\n\t\treturn colorString.percentString(this.values.rgb, this.values.alpha);\n\t},\n\thslString: function () {\n\t\treturn colorString.hslString(this.values.hsl, this.values.alpha);\n\t},\n\thslaString: function () {\n\t\treturn colorString.hslaString(this.values.hsl, this.values.alpha);\n\t},\n\thwbString: function () {\n\t\treturn colorString.hwbString(this.values.hwb, this.values.alpha);\n\t},\n\tkeyword: function () {\n\t\treturn colorString.keyword(this.values.rgb, this.values.alpha);\n\t},\n\n\trgbNumber: function () {\n\t\tvar rgb = this.values.rgb;\n\t\treturn (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];\n\t},\n\n\tluminosity: function () {\n\t\t// http://www.w3.org/TR/WCAG20/#relativeluminancedef\n\t\tvar rgb = this.values.rgb;\n\t\tvar lum = [];\n\t\tfor (var i = 0; i < rgb.length; i++) {\n\t\t\tvar chan = rgb[i] / 255;\n\t\t\tlum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);\n\t\t}\n\t\treturn 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];\n\t},\n\n\tcontrast: function (color2) {\n\t\t// http://www.w3.org/TR/WCAG20/#contrast-ratiodef\n\t\tvar lum1 = this.luminosity();\n\t\tvar lum2 = color2.luminosity();\n\t\tif (lum1 > lum2) {\n\t\t\treturn (lum1 + 0.05) / (lum2 + 0.05);\n\t\t}\n\t\treturn (lum2 + 0.05) / (lum1 + 0.05);\n\t},\n\n\tlevel: function (color2) {\n\t\tvar contrastRatio = this.contrast(color2);\n\t\tif (contrastRatio >= 7.1) {\n\t\t\treturn 'AAA';\n\t\t}\n\n\t\treturn (contrastRatio >= 4.5) ? 'AA' : '';\n\t},\n\n\tdark: function () {\n\t\t// YIQ equation from http://24ways.org/2010/calculating-color-contrast\n\t\tvar rgb = this.values.rgb;\n\t\tvar yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n\t\treturn yiq < 128;\n\t},\n\n\tlight: function () {\n\t\treturn !this.dark();\n\t},\n\n\tnegate: function () {\n\t\tvar rgb = [];\n\t\tfor (var i = 0; i < 3; i++) {\n\t\t\trgb[i] = 255 - this.values.rgb[i];\n\t\t}\n\t\tthis.setValues('rgb', rgb);\n\t\treturn this;\n\t},\n\n\tlighten: function (ratio) {\n\t\tvar hsl = this.values.hsl;\n\t\thsl[2] += hsl[2] * ratio;\n\t\tthis.setValues('hsl', hsl);\n\t\treturn this;\n\t},\n\n\tdarken: function (ratio) {\n\t\tvar hsl = this.values.hsl;\n\t\thsl[2] -= hsl[2] * ratio;\n\t\tthis.setValues('hsl', hsl);\n\t\treturn this;\n\t},\n\n\tsaturate: function (ratio) {\n\t\tvar hsl = this.values.hsl;\n\t\thsl[1] += hsl[1] * ratio;\n\t\tthis.setValues('hsl', hsl);\n\t\treturn this;\n\t},\n\n\tdesaturate: function (ratio) {\n\t\tvar hsl = this.values.hsl;\n\t\thsl[1] -= hsl[1] * ratio;\n\t\tthis.setValues('hsl', hsl);\n\t\treturn this;\n\t},\n\n\twhiten: function (ratio) {\n\t\tvar hwb = this.values.hwb;\n\t\thwb[1] += hwb[1] * ratio;\n\t\tthis.setValues('hwb', hwb);\n\t\treturn this;\n\t},\n\n\tblacken: function (ratio) {\n\t\tvar hwb = this.values.hwb;\n\t\thwb[2] += hwb[2] * ratio;\n\t\tthis.setValues('hwb', hwb);\n\t\treturn this;\n\t},\n\n\tgreyscale: function () {\n\t\tvar rgb = this.values.rgb;\n\t\t// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale\n\t\tvar val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;\n\t\tthis.setValues('rgb', [val, val, val]);\n\t\treturn this;\n\t},\n\n\tclearer: function (ratio) {\n\t\tvar alpha = this.values.alpha;\n\t\tthis.setValues('alpha', alpha - (alpha * ratio));\n\t\treturn this;\n\t},\n\n\topaquer: function (ratio) {\n\t\tvar alpha = this.values.alpha;\n\t\tthis.setValues('alpha', alpha + (alpha * ratio));\n\t\treturn this;\n\t},\n\n\trotate: function (degrees) {\n\t\tvar hsl = this.values.hsl;\n\t\tvar hue = (hsl[0] + degrees) % 360;\n\t\thsl[0] = hue < 0 ? 360 + hue : hue;\n\t\tthis.setValues('hsl', hsl);\n\t\treturn this;\n\t},\n\n\t/**\n\t * Ported from sass implementation in C\n\t * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209\n\t */\n\tmix: function (mixinColor, weight) {\n\t\tvar color1 = this;\n\t\tvar color2 = mixinColor;\n\t\tvar p = weight === undefined ? 0.5 : weight;\n\n\t\tvar w = 2 * p - 1;\n\t\tvar a = color1.alpha() - color2.alpha();\n\n\t\tvar w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;\n\t\tvar w2 = 1 - w1;\n\n\t\treturn this\n\t\t\t.rgb(\n\t\t\t\tw1 * color1.red() + w2 * color2.red(),\n\t\t\t\tw1 * color1.green() + w2 * color2.green(),\n\t\t\t\tw1 * color1.blue() + w2 * color2.blue()\n\t\t\t)\n\t\t\t.alpha(color1.alpha() * p + color2.alpha() * (1 - p));\n\t},\n\n\ttoJSON: function () {\n\t\treturn this.rgb();\n\t},\n\n\tclone: function () {\n\t\t// NOTE(SB): using node-clone creates a dependency to Buffer when using browserify,\n\t\t// making the final build way to big to embed in Chart.js. So let's do it manually,\n\t\t// assuming that values to clone are 1 dimension arrays containing only numbers,\n\t\t// except 'alpha' which is a number.\n\t\tvar result = new Color();\n\t\tvar source = this.values;\n\t\tvar target = result.values;\n\t\tvar value, type;\n\n\t\tfor (var prop in source) {\n\t\t\tif (source.hasOwnProperty(prop)) {\n\t\t\t\tvalue = source[prop];\n\t\t\t\ttype = ({}).toString.call(value);\n\t\t\t\tif (type === '[object Array]') {\n\t\t\t\t\ttarget[prop] = value.slice(0);\n\t\t\t\t} else if (type === '[object Number]') {\n\t\t\t\t\ttarget[prop] = value;\n\t\t\t\t} else {\n\t\t\t\t\tconsole.error('unexpected color value:', value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn result;\n\t}\n};\n\nColor.prototype.spaces = {\n\trgb: ['red', 'green', 'blue'],\n\thsl: ['hue', 'saturation', 'lightness'],\n\thsv: ['hue', 'saturation', 'value'],\n\thwb: ['hue', 'whiteness', 'blackness'],\n\tcmyk: ['cyan', 'magenta', 'yellow', 'black']\n};\n\nColor.prototype.maxes = {\n\trgb: [255, 255, 255],\n\thsl: [360, 100, 100],\n\thsv: [360, 100, 100],\n\thwb: [360, 100, 100],\n\tcmyk: [100, 100, 100, 100]\n};\n\nColor.prototype.getValues = function (space) {\n\tvar values = this.values;\n\tvar vals = {};\n\n\tfor (var i = 0; i < space.length; i++) {\n\t\tvals[space.charAt(i)] = values[space][i];\n\t}\n\n\tif (values.alpha !== 1) {\n\t\tvals.a = values.alpha;\n\t}\n\n\t// {r: 255, g: 255, b: 255, a: 0.4}\n\treturn vals;\n};\n\nColor.prototype.setValues = function (space, vals) {\n\tvar values = this.values;\n\tvar spaces = this.spaces;\n\tvar maxes = this.maxes;\n\tvar alpha = 1;\n\tvar i;\n\n\tthis.valid = true;\n\n\tif (space === 'alpha') {\n\t\talpha = vals;\n\t} else if (vals.length) {\n\t\t// [10, 10, 10]\n\t\tvalues[space] = vals.slice(0, space.length);\n\t\talpha = vals[space.length];\n\t} else if (vals[space.charAt(0)] !== undefined) {\n\t\t// {r: 10, g: 10, b: 10}\n\t\tfor (i = 0; i < space.length; i++) {\n\t\t\tvalues[space][i] = vals[space.charAt(i)];\n\t\t}\n\n\t\talpha = vals.a;\n\t} else if (vals[spaces[space][0]] !== undefined) {\n\t\t// {red: 10, green: 10, blue: 10}\n\t\tvar chans = spaces[space];\n\n\t\tfor (i = 0; i < space.length; i++) {\n\t\t\tvalues[space][i] = vals[chans[i]];\n\t\t}\n\n\t\talpha = vals.alpha;\n\t}\n\n\tvalues.alpha = Math.max(0, Math.min(1, (alpha === undefined ? values.alpha : alpha)));\n\n\tif (space === 'alpha') {\n\t\treturn false;\n\t}\n\n\tvar capped;\n\n\t// cap values of the space prior converting all values\n\tfor (i = 0; i < space.length; i++) {\n\t\tcapped = Math.max(0, Math.min(maxes[space][i], values[space][i]));\n\t\tvalues[space][i] = Math.round(capped);\n\t}\n\n\t// convert to all the other color spaces\n\tfor (var sname in spaces) {\n\t\tif (sname !== space) {\n\t\t\tvalues[sname] = colorConvert[space][sname](values[space]);\n\t\t}\n\t}\n\n\treturn true;\n};\n\nColor.prototype.setSpace = function (space, args) {\n\tvar vals = args[0];\n\n\tif (vals === undefined) {\n\t\t// color.rgb()\n\t\treturn this.getValues(space);\n\t}\n\n\t// color.rgb(10, 10, 10)\n\tif (typeof vals === 'number') {\n\t\tvals = Array.prototype.slice.call(args);\n\t}\n\n\tthis.setValues(space, vals);\n\treturn this;\n};\n\nColor.prototype.setChannel = function (space, index, val) {\n\tvar svalues = this.values[space];\n\tif (val === undefined) {\n\t\t// color.red()\n\t\treturn svalues[index];\n\t} else if (val === svalues[index]) {\n\t\t// color.red(color.red())\n\t\treturn this;\n\t}\n\n\t// color.red(100)\n\tsvalues[index] = val;\n\tthis.setValues(space, svalues);\n\n\treturn this;\n};\n\nif (typeof window !== 'undefined') {\n\twindow.Color = Color;\n}\n\nvar chartjsColor = Color;\n\n/**\n * @namespace Chart.helpers\n */\nvar helpers = {\n\t/**\n\t * An empty function that can be used, for example, for optional callback.\n\t */\n\tnoop: function() {},\n\n\t/**\n\t * Returns a unique id, sequentially generated from a global variable.\n\t * @returns {number}\n\t * @function\n\t */\n\tuid: (function() {\n\t\tvar id = 0;\n\t\treturn function() {\n\t\t\treturn id++;\n\t\t};\n\t}()),\n\n\t/**\n\t * Returns true if `value` is neither null nor undefined, else returns false.\n\t * @param {*} value - The value to test.\n\t * @returns {boolean}\n\t * @since 2.7.0\n\t */\n\tisNullOrUndef: function(value) {\n\t\treturn value === null || typeof value === 'undefined';\n\t},\n\n\t/**\n\t * Returns true if `value` is an array (including typed arrays), else returns false.\n\t * @param {*} value - The value to test.\n\t * @returns {boolean}\n\t * @function\n\t */\n\tisArray: function(value) {\n\t\tif (Array.isArray && Array.isArray(value)) {\n\t\t\treturn true;\n\t\t}\n\t\tvar type = Object.prototype.toString.call(value);\n\t\tif (type.substr(0, 7) === '[object' && type.substr(-6) === 'Array]') {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t},\n\n\t/**\n\t * Returns true if `value` is an object (excluding null), else returns false.\n\t * @param {*} value - The value to test.\n\t * @returns {boolean}\n\t * @since 2.7.0\n\t */\n\tisObject: function(value) {\n\t\treturn value !== null && Object.prototype.toString.call(value) === '[object Object]';\n\t},\n\n\t/**\n\t * Returns true if `value` is a finite number, else returns false\n\t * @param {*} value - The value to test.\n\t * @returns {boolean}\n\t */\n\tisFinite: function(value) {\n\t\treturn (typeof value === 'number' || value instanceof Number) && isFinite(value);\n\t},\n\n\t/**\n\t * Returns `value` if defined, else returns `defaultValue`.\n\t * @param {*} value - The value to return if defined.\n\t * @param {*} defaultValue - The value to return if `value` is undefined.\n\t * @returns {*}\n\t */\n\tvalueOrDefault: function(value, defaultValue) {\n\t\treturn typeof value === 'undefined' ? defaultValue : value;\n\t},\n\n\t/**\n\t * Returns value at the given `index` in array if defined, else returns `defaultValue`.\n\t * @param {Array} value - The array to lookup for value at `index`.\n\t * @param {number} index - The index in `value` to lookup for value.\n\t * @param {*} defaultValue - The value to return if `value[index]` is undefined.\n\t * @returns {*}\n\t */\n\tvalueAtIndexOrDefault: function(value, index, defaultValue) {\n\t\treturn helpers.valueOrDefault(helpers.isArray(value) ? value[index] : value, defaultValue);\n\t},\n\n\t/**\n\t * Calls `fn` with the given `args` in the scope defined by `thisArg` and returns the\n\t * value returned by `fn`. If `fn` is not a function, this method returns undefined.\n\t * @param {function} fn - The function to call.\n\t * @param {Array|undefined|null} args - The arguments with which `fn` should be called.\n\t * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.\n\t * @returns {*}\n\t */\n\tcallback: function(fn, args, thisArg) {\n\t\tif (fn && typeof fn.call === 'function') {\n\t\t\treturn fn.apply(thisArg, args);\n\t\t}\n\t},\n\n\t/**\n\t * Note(SB) for performance sake, this method should only be used when loopable type\n\t * is unknown or in none intensive code (not called often and small loopable). Else\n\t * it's preferable to use a regular for() loop and save extra function calls.\n\t * @param {object|Array} loopable - The object or array to be iterated.\n\t * @param {function} fn - The function to call for each item.\n\t * @param {object} [thisArg] - The value of `this` provided for the call to `fn`.\n\t * @param {boolean} [reverse] - If true, iterates backward on the loopable.\n\t */\n\teach: function(loopable, fn, thisArg, reverse) {\n\t\tvar i, len, keys;\n\t\tif (helpers.isArray(loopable)) {\n\t\t\tlen = loopable.length;\n\t\t\tif (reverse) {\n\t\t\t\tfor (i = len - 1; i >= 0; i--) {\n\t\t\t\t\tfn.call(thisArg, loopable[i], i);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (i = 0; i < len; i++) {\n\t\t\t\t\tfn.call(thisArg, loopable[i], i);\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (helpers.isObject(loopable)) {\n\t\t\tkeys = Object.keys(loopable);\n\t\t\tlen = keys.length;\n\t\t\tfor (i = 0; i < len; i++) {\n\t\t\t\tfn.call(thisArg, loopable[keys[i]], keys[i]);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * Returns true if the `a0` and `a1` arrays have the same content, else returns false.\n\t * @see https://stackoverflow.com/a/14853974\n\t * @param {Array} a0 - The array to compare\n\t * @param {Array} a1 - The array to compare\n\t * @returns {boolean}\n\t */\n\tarrayEquals: function(a0, a1) {\n\t\tvar i, ilen, v0, v1;\n\n\t\tif (!a0 || !a1 || a0.length !== a1.length) {\n\t\t\treturn false;\n\t\t}\n\n\t\tfor (i = 0, ilen = a0.length; i < ilen; ++i) {\n\t\t\tv0 = a0[i];\n\t\t\tv1 = a1[i];\n\n\t\t\tif (v0 instanceof Array && v1 instanceof Array) {\n\t\t\t\tif (!helpers.arrayEquals(v0, v1)) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t} else if (v0 !== v1) {\n\t\t\t\t// NOTE: two different object instances will never be equal: {x:20} != {x:20}\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\treturn true;\n\t},\n\n\t/**\n\t * Returns a deep copy of `source` without keeping references on objects and arrays.\n\t * @param {*} source - The value to clone.\n\t * @returns {*}\n\t */\n\tclone: function(source) {\n\t\tif (helpers.isArray(source)) {\n\t\t\treturn source.map(helpers.clone);\n\t\t}\n\n\t\tif (helpers.isObject(source)) {\n\t\t\tvar target = {};\n\t\t\tvar keys = Object.keys(source);\n\t\t\tvar klen = keys.length;\n\t\t\tvar k = 0;\n\n\t\t\tfor (; k < klen; ++k) {\n\t\t\t\ttarget[keys[k]] = helpers.clone(source[keys[k]]);\n\t\t\t}\n\n\t\t\treturn target;\n\t\t}\n\n\t\treturn source;\n\t},\n\n\t/**\n\t * The default merger when Chart.helpers.merge is called without merger option.\n\t * Note(SB): also used by mergeConfig and mergeScaleConfig as fallback.\n\t * @private\n\t */\n\t_merger: function(key, target, source, options) {\n\t\tvar tval = target[key];\n\t\tvar sval = source[key];\n\n\t\tif (helpers.isObject(tval) && helpers.isObject(sval)) {\n\t\t\thelpers.merge(tval, sval, options);\n\t\t} else {\n\t\t\ttarget[key] = helpers.clone(sval);\n\t\t}\n\t},\n\n\t/**\n\t * Merges source[key] in target[key] only if target[key] is undefined.\n\t * @private\n\t */\n\t_mergerIf: function(key, target, source) {\n\t\tvar tval = target[key];\n\t\tvar sval = source[key];\n\n\t\tif (helpers.isObject(tval) && helpers.isObject(sval)) {\n\t\t\thelpers.mergeIf(tval, sval);\n\t\t} else if (!target.hasOwnProperty(key)) {\n\t\t\ttarget[key] = helpers.clone(sval);\n\t\t}\n\t},\n\n\t/**\n\t * Recursively deep copies `source` properties into `target` with the given `options`.\n\t * IMPORTANT: `target` is not cloned and will be updated with `source` properties.\n\t * @param {object} target - The target object in which all sources are merged into.\n\t * @param {object|object[]} source - Object(s) to merge into `target`.\n\t * @param {object} [options] - Merging options:\n\t * @param {function} [options.merger] - The merge method (key, target, source, options)\n\t * @returns {object} The `target` object.\n\t */\n\tmerge: function(target, source, options) {\n\t\tvar sources = helpers.isArray(source) ? source : [source];\n\t\tvar ilen = sources.length;\n\t\tvar merge, i, keys, klen, k;\n\n\t\tif (!helpers.isObject(target)) {\n\t\t\treturn target;\n\t\t}\n\n\t\toptions = options || {};\n\t\tmerge = options.merger || helpers._merger;\n\n\t\tfor (i = 0; i < ilen; ++i) {\n\t\t\tsource = sources[i];\n\t\t\tif (!helpers.isObject(source)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tkeys = Object.keys(source);\n\t\t\tfor (k = 0, klen = keys.length; k < klen; ++k) {\n\t\t\t\tmerge(keys[k], target, source, options);\n\t\t\t}\n\t\t}\n\n\t\treturn target;\n\t},\n\n\t/**\n\t * Recursively deep copies `source` properties into `target` *only* if not defined in target.\n\t * IMPORTANT: `target` is not cloned and will be updated with `source` properties.\n\t * @param {object} target - The target object in which all sources are merged into.\n\t * @param {object|object[]} source - Object(s) to merge into `target`.\n\t * @returns {object} The `target` object.\n\t */\n\tmergeIf: function(target, source) {\n\t\treturn helpers.merge(target, source, {merger: helpers._mergerIf});\n\t},\n\n\t/**\n\t * Applies the contents of two or more objects together into the first object.\n\t * @param {object} target - The target object in which all objects are merged into.\n\t * @param {object} arg1 - Object containing additional properties to merge in target.\n\t * @param {object} argN - Additional objects containing properties to merge in target.\n\t * @returns {object} The `target` object.\n\t */\n\textend: Object.assign || function(target) {\n\t\treturn helpers.merge(target, [].slice.call(arguments, 1), {\n\t\t\tmerger: function(key, dst, src) {\n\t\t\t\tdst[key] = src[key];\n\t\t\t}\n\t\t});\n\t},\n\n\t/**\n\t * Basic javascript inheritance based on the model created in Backbone.js\n\t */\n\tinherits: function(extensions) {\n\t\tvar me = this;\n\t\tvar ChartElement = (extensions && extensions.hasOwnProperty('constructor')) ? extensions.constructor : function() {\n\t\t\treturn me.apply(this, arguments);\n\t\t};\n\n\t\tvar Surrogate = function() {\n\t\t\tthis.constructor = ChartElement;\n\t\t};\n\n\t\tSurrogate.prototype = me.prototype;\n\t\tChartElement.prototype = new Surrogate();\n\t\tChartElement.extend = helpers.inherits;\n\n\t\tif (extensions) {\n\t\t\thelpers.extend(ChartElement.prototype, extensions);\n\t\t}\n\n\t\tChartElement.__super__ = me.prototype;\n\t\treturn ChartElement;\n\t},\n\n\t_deprecated: function(scope, value, previous, current) {\n\t\tif (value !== undefined) {\n\t\t\tconsole.warn(scope + ': \"' + previous +\n\t\t\t\t'\" is deprecated. Please use \"' + current + '\" instead');\n\t\t}\n\t}\n};\n\nvar helpers_core = helpers;\n\n// DEPRECATIONS\n\n/**\n * Provided for backward compatibility, use Chart.helpers.callback instead.\n * @function Chart.helpers.callCallback\n * @deprecated since version 2.6.0\n * @todo remove at version 3\n * @private\n */\nhelpers.callCallback = helpers.callback;\n\n/**\n * Provided for backward compatibility, use Array.prototype.indexOf instead.\n * Array.prototype.indexOf compatibility: Chrome, Opera, Safari, FF1.5+, IE9+\n * @function Chart.helpers.indexOf\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers.indexOf = function(array, item, fromIndex) {\n\treturn Array.prototype.indexOf.call(array, item, fromIndex);\n};\n\n/**\n * Provided for backward compatibility, use Chart.helpers.valueOrDefault instead.\n * @function Chart.helpers.getValueOrDefault\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers.getValueOrDefault = helpers.valueOrDefault;\n\n/**\n * Provided for backward compatibility, use Chart.helpers.valueAtIndexOrDefault instead.\n * @function Chart.helpers.getValueAtIndexOrDefault\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers.getValueAtIndexOrDefault = helpers.valueAtIndexOrDefault;\n\n/**\n * Easing functions adapted from Robert Penner's easing equations.\n * @namespace Chart.helpers.easingEffects\n * @see http://www.robertpenner.com/easing/\n */\nvar effects = {\n\tlinear: function(t) {\n\t\treturn t;\n\t},\n\n\teaseInQuad: function(t) {\n\t\treturn t * t;\n\t},\n\n\teaseOutQuad: function(t) {\n\t\treturn -t * (t - 2);\n\t},\n\n\teaseInOutQuad: function(t) {\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * t * t;\n\t\t}\n\t\treturn -0.5 * ((--t) * (t - 2) - 1);\n\t},\n\n\teaseInCubic: function(t) {\n\t\treturn t * t * t;\n\t},\n\n\teaseOutCubic: function(t) {\n\t\treturn (t = t - 1) * t * t + 1;\n\t},\n\n\teaseInOutCubic: function(t) {\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * t * t * t;\n\t\t}\n\t\treturn 0.5 * ((t -= 2) * t * t + 2);\n\t},\n\n\teaseInQuart: function(t) {\n\t\treturn t * t * t * t;\n\t},\n\n\teaseOutQuart: function(t) {\n\t\treturn -((t = t - 1) * t * t * t - 1);\n\t},\n\n\teaseInOutQuart: function(t) {\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * t * t * t * t;\n\t\t}\n\t\treturn -0.5 * ((t -= 2) * t * t * t - 2);\n\t},\n\n\teaseInQuint: function(t) {\n\t\treturn t * t * t * t * t;\n\t},\n\n\teaseOutQuint: function(t) {\n\t\treturn (t = t - 1) * t * t * t * t + 1;\n\t},\n\n\teaseInOutQuint: function(t) {\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * t * t * t * t * t;\n\t\t}\n\t\treturn 0.5 * ((t -= 2) * t * t * t * t + 2);\n\t},\n\n\teaseInSine: function(t) {\n\t\treturn -Math.cos(t * (Math.PI / 2)) + 1;\n\t},\n\n\teaseOutSine: function(t) {\n\t\treturn Math.sin(t * (Math.PI / 2));\n\t},\n\n\teaseInOutSine: function(t) {\n\t\treturn -0.5 * (Math.cos(Math.PI * t) - 1);\n\t},\n\n\teaseInExpo: function(t) {\n\t\treturn (t === 0) ? 0 : Math.pow(2, 10 * (t - 1));\n\t},\n\n\teaseOutExpo: function(t) {\n\t\treturn (t === 1) ? 1 : -Math.pow(2, -10 * t) + 1;\n\t},\n\n\teaseInOutExpo: function(t) {\n\t\tif (t === 0) {\n\t\t\treturn 0;\n\t\t}\n\t\tif (t === 1) {\n\t\t\treturn 1;\n\t\t}\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * Math.pow(2, 10 * (t - 1));\n\t\t}\n\t\treturn 0.5 * (-Math.pow(2, -10 * --t) + 2);\n\t},\n\n\teaseInCirc: function(t) {\n\t\tif (t >= 1) {\n\t\t\treturn t;\n\t\t}\n\t\treturn -(Math.sqrt(1 - t * t) - 1);\n\t},\n\n\teaseOutCirc: function(t) {\n\t\treturn Math.sqrt(1 - (t = t - 1) * t);\n\t},\n\n\teaseInOutCirc: function(t) {\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn -0.5 * (Math.sqrt(1 - t * t) - 1);\n\t\t}\n\t\treturn 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);\n\t},\n\n\teaseInElastic: function(t) {\n\t\tvar s = 1.70158;\n\t\tvar p = 0;\n\t\tvar a = 1;\n\t\tif (t === 0) {\n\t\t\treturn 0;\n\t\t}\n\t\tif (t === 1) {\n\t\t\treturn 1;\n\t\t}\n\t\tif (!p) {\n\t\t\tp = 0.3;\n\t\t}\n\t\tif (a < 1) {\n\t\t\ta = 1;\n\t\t\ts = p / 4;\n\t\t} else {\n\t\t\ts = p / (2 * Math.PI) * Math.asin(1 / a);\n\t\t}\n\t\treturn -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));\n\t},\n\n\teaseOutElastic: function(t) {\n\t\tvar s = 1.70158;\n\t\tvar p = 0;\n\t\tvar a = 1;\n\t\tif (t === 0) {\n\t\t\treturn 0;\n\t\t}\n\t\tif (t === 1) {\n\t\t\treturn 1;\n\t\t}\n\t\tif (!p) {\n\t\t\tp = 0.3;\n\t\t}\n\t\tif (a < 1) {\n\t\t\ta = 1;\n\t\t\ts = p / 4;\n\t\t} else {\n\t\t\ts = p / (2 * Math.PI) * Math.asin(1 / a);\n\t\t}\n\t\treturn a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;\n\t},\n\n\teaseInOutElastic: function(t) {\n\t\tvar s = 1.70158;\n\t\tvar p = 0;\n\t\tvar a = 1;\n\t\tif (t === 0) {\n\t\t\treturn 0;\n\t\t}\n\t\tif ((t /= 0.5) === 2) {\n\t\t\treturn 1;\n\t\t}\n\t\tif (!p) {\n\t\t\tp = 0.45;\n\t\t}\n\t\tif (a < 1) {\n\t\t\ta = 1;\n\t\t\ts = p / 4;\n\t\t} else {\n\t\t\ts = p / (2 * Math.PI) * Math.asin(1 / a);\n\t\t}\n\t\tif (t < 1) {\n\t\t\treturn -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));\n\t\t}\n\t\treturn a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p) * 0.5 + 1;\n\t},\n\teaseInBack: function(t) {\n\t\tvar s = 1.70158;\n\t\treturn t * t * ((s + 1) * t - s);\n\t},\n\n\teaseOutBack: function(t) {\n\t\tvar s = 1.70158;\n\t\treturn (t = t - 1) * t * ((s + 1) * t + s) + 1;\n\t},\n\n\teaseInOutBack: function(t) {\n\t\tvar s = 1.70158;\n\t\tif ((t /= 0.5) < 1) {\n\t\t\treturn 0.5 * (t * t * (((s *= (1.525)) + 1) * t - s));\n\t\t}\n\t\treturn 0.5 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);\n\t},\n\n\teaseInBounce: function(t) {\n\t\treturn 1 - effects.easeOutBounce(1 - t);\n\t},\n\n\teaseOutBounce: function(t) {\n\t\tif (t < (1 / 2.75)) {\n\t\t\treturn 7.5625 * t * t;\n\t\t}\n\t\tif (t < (2 / 2.75)) {\n\t\t\treturn 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75;\n\t\t}\n\t\tif (t < (2.5 / 2.75)) {\n\t\t\treturn 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;\n\t\t}\n\t\treturn 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;\n\t},\n\n\teaseInOutBounce: function(t) {\n\t\tif (t < 0.5) {\n\t\t\treturn effects.easeInBounce(t * 2) * 0.5;\n\t\t}\n\t\treturn effects.easeOutBounce(t * 2 - 1) * 0.5 + 0.5;\n\t}\n};\n\nvar helpers_easing = {\n\teffects: effects\n};\n\n// DEPRECATIONS\n\n/**\n * Provided for backward compatibility, use Chart.helpers.easing.effects instead.\n * @function Chart.helpers.easingEffects\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers_core.easingEffects = effects;\n\nvar PI = Math.PI;\nvar RAD_PER_DEG = PI / 180;\nvar DOUBLE_PI = PI * 2;\nvar HALF_PI = PI / 2;\nvar QUARTER_PI = PI / 4;\nvar TWO_THIRDS_PI = PI * 2 / 3;\n\n/**\n * @namespace Chart.helpers.canvas\n */\nvar exports$1 = {\n\t/**\n\t * Clears the entire canvas associated to the given `chart`.\n\t * @param {Chart} chart - The chart for which to clear the canvas.\n\t */\n\tclear: function(chart) {\n\t\tchart.ctx.clearRect(0, 0, chart.width, chart.height);\n\t},\n\n\t/**\n\t * Creates a \"path\" for a rectangle with rounded corners at position (x, y) with a\n\t * given size (width, height) and the same `radius` for all corners.\n\t * @param {CanvasRenderingContext2D} ctx - The canvas 2D Context.\n\t * @param {number} x - The x axis of the coordinate for the rectangle starting point.\n\t * @param {number} y - The y axis of the coordinate for the rectangle starting point.\n\t * @param {number} width - The rectangle's width.\n\t * @param {number} height - The rectangle's height.\n\t * @param {number} radius - The rounded amount (in pixels) for the four corners.\n\t * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object?\n\t */\n\troundedRect: function(ctx, x, y, width, height, radius) {\n\t\tif (radius) {\n\t\t\tvar r = Math.min(radius, height / 2, width / 2);\n\t\t\tvar left = x + r;\n\t\t\tvar top = y + r;\n\t\t\tvar right = x + width - r;\n\t\t\tvar bottom = y + height - r;\n\n\t\t\tctx.moveTo(x, top);\n\t\t\tif (left < right && top < bottom) {\n\t\t\t\tctx.arc(left, top, r, -PI, -HALF_PI);\n\t\t\t\tctx.arc(right, top, r, -HALF_PI, 0);\n\t\t\t\tctx.arc(right, bottom, r, 0, HALF_PI);\n\t\t\t\tctx.arc(left, bottom, r, HALF_PI, PI);\n\t\t\t} else if (left < right) {\n\t\t\t\tctx.moveTo(left, y);\n\t\t\t\tctx.arc(right, top, r, -HALF_PI, HALF_PI);\n\t\t\t\tctx.arc(left, top, r, HALF_PI, PI + HALF_PI);\n\t\t\t} else if (top < bottom) {\n\t\t\t\tctx.arc(left, top, r, -PI, 0);\n\t\t\t\tctx.arc(left, bottom, r, 0, PI);\n\t\t\t} else {\n\t\t\t\tctx.arc(left, top, r, -PI, PI);\n\t\t\t}\n\t\t\tctx.closePath();\n\t\t\tctx.moveTo(x, y);\n\t\t} else {\n\t\t\tctx.rect(x, y, width, height);\n\t\t}\n\t},\n\n\tdrawPoint: function(ctx, style, radius, x, y, rotation) {\n\t\tvar type, xOffset, yOffset, size, cornerRadius;\n\t\tvar rad = (rotation || 0) * RAD_PER_DEG;\n\n\t\tif (style && typeof style === 'object') {\n\t\t\ttype = style.toString();\n\t\t\tif (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') {\n\t\t\t\tctx.save();\n\t\t\t\tctx.translate(x, y);\n\t\t\t\tctx.rotate(rad);\n\t\t\t\tctx.drawImage(style, -style.width / 2, -style.height / 2, style.width, style.height);\n\t\t\t\tctx.restore();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tif (isNaN(radius) || radius <= 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tctx.beginPath();\n\n\t\tswitch (style) {\n\t\t// Default includes circle\n\t\tdefault:\n\t\t\tctx.arc(x, y, radius, 0, DOUBLE_PI);\n\t\t\tctx.closePath();\n\t\t\tbreak;\n\t\tcase 'triangle':\n\t\t\tctx.moveTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);\n\t\t\trad += TWO_THIRDS_PI;\n\t\t\tctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);\n\t\t\trad += TWO_THIRDS_PI;\n\t\t\tctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);\n\t\t\tctx.closePath();\n\t\t\tbreak;\n\t\tcase 'rectRounded':\n\t\t\t// NOTE: the rounded rect implementation changed to use `arc` instead of\n\t\t\t// `quadraticCurveTo` since it generates better results when rect is\n\t\t\t// almost a circle. 0.516 (instead of 0.5) produces results with visually\n\t\t\t// closer proportion to the previous impl and it is inscribed in the\n\t\t\t// circle with `radius`. For more details, see the following PRs:\n\t\t\t// https://github.com/chartjs/Chart.js/issues/5597\n\t\t\t// https://github.com/chartjs/Chart.js/issues/5858\n\t\t\tcornerRadius = radius * 0.516;\n\t\t\tsize = radius - cornerRadius;\n\t\t\txOffset = Math.cos(rad + QUARTER_PI) * size;\n\t\t\tyOffset = Math.sin(rad + QUARTER_PI) * size;\n\t\t\tctx.arc(x - xOffset, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);\n\t\t\tctx.arc(x + yOffset, y - xOffset, cornerRadius, rad - HALF_PI, rad);\n\t\t\tctx.arc(x + xOffset, y + yOffset, cornerRadius, rad, rad + HALF_PI);\n\t\t\tctx.arc(x - yOffset, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);\n\t\t\tctx.closePath();\n\t\t\tbreak;\n\t\tcase 'rect':\n\t\t\tif (!rotation) {\n\t\t\t\tsize = Math.SQRT1_2 * radius;\n\t\t\t\tctx.rect(x - size, y - size, 2 * size, 2 * size);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\trad += QUARTER_PI;\n\t\t\t/* falls through */\n\t\tcase 'rectRot':\n\t\t\txOffset = Math.cos(rad) * radius;\n\t\t\tyOffset = Math.sin(rad) * radius;\n\t\t\tctx.moveTo(x - xOffset, y - yOffset);\n\t\t\tctx.lineTo(x + yOffset, y - xOffset);\n\t\t\tctx.lineTo(x + xOffset, y + yOffset);\n\t\t\tctx.lineTo(x - yOffset, y + xOffset);\n\t\t\tctx.closePath();\n\t\t\tbreak;\n\t\tcase 'crossRot':\n\t\t\trad += QUARTER_PI;\n\t\t\t/* falls through */\n\t\tcase 'cross':\n\t\t\txOffset = Math.cos(rad) * radius;\n\t\t\tyOffset = Math.sin(rad) * radius;\n\t\t\tctx.moveTo(x - xOffset, y - yOffset);\n\t\t\tctx.lineTo(x + xOffset, y + yOffset);\n\t\t\tctx.moveTo(x + yOffset, y - xOffset);\n\t\t\tctx.lineTo(x - yOffset, y + xOffset);\n\t\t\tbreak;\n\t\tcase 'star':\n\t\t\txOffset = Math.cos(rad) * radius;\n\t\t\tyOffset = Math.sin(rad) * radius;\n\t\t\tctx.moveTo(x - xOffset, y - yOffset);\n\t\t\tctx.lineTo(x + xOffset, y + yOffset);\n\t\t\tctx.moveTo(x + yOffset, y - xOffset);\n\t\t\tctx.lineTo(x - yOffset, y + xOffset);\n\t\t\trad += QUARTER_PI;\n\t\t\txOffset = Math.cos(rad) * radius;\n\t\t\tyOffset = Math.sin(rad) * radius;\n\t\t\tctx.moveTo(x - xOffset, y - yOffset);\n\t\t\tctx.lineTo(x + xOffset, y + yOffset);\n\t\t\tctx.moveTo(x + yOffset, y - xOffset);\n\t\t\tctx.lineTo(x - yOffset, y + xOffset);\n\t\t\tbreak;\n\t\tcase 'line':\n\t\t\txOffset = Math.cos(rad) * radius;\n\t\t\tyOffset = Math.sin(rad) * radius;\n\t\t\tctx.moveTo(x - xOffset, y - yOffset);\n\t\t\tctx.lineTo(x + xOffset, y + yOffset);\n\t\t\tbreak;\n\t\tcase 'dash':\n\t\t\tctx.moveTo(x, y);\n\t\t\tctx.lineTo(x + Math.cos(rad) * radius, y + Math.sin(rad) * radius);\n\t\t\tbreak;\n\t\t}\n\n\t\tctx.fill();\n\t\tctx.stroke();\n\t},\n\n\t/**\n\t * Returns true if the point is inside the rectangle\n\t * @param {object} point - The point to test\n\t * @param {object} area - The rectangle\n\t * @returns {boolean}\n\t * @private\n\t */\n\t_isPointInArea: function(point, area) {\n\t\tvar epsilon = 1e-6; // 1e-6 is margin in pixels for accumulated error.\n\n\t\treturn point.x > area.left - epsilon && point.x < area.right + epsilon &&\n\t\t\tpoint.y > area.top - epsilon && point.y < area.bottom + epsilon;\n\t},\n\n\tclipArea: function(ctx, area) {\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(area.left, area.top, area.right - area.left, area.bottom - area.top);\n\t\tctx.clip();\n\t},\n\n\tunclipArea: function(ctx) {\n\t\tctx.restore();\n\t},\n\n\tlineTo: function(ctx, previous, target, flip) {\n\t\tvar stepped = target.steppedLine;\n\t\tif (stepped) {\n\t\t\tif (stepped === 'middle') {\n\t\t\t\tvar midpoint = (previous.x + target.x) / 2.0;\n\t\t\t\tctx.lineTo(midpoint, flip ? target.y : previous.y);\n\t\t\t\tctx.lineTo(midpoint, flip ? previous.y : target.y);\n\t\t\t} else if ((stepped === 'after' && !flip) || (stepped !== 'after' && flip)) {\n\t\t\t\tctx.lineTo(previous.x, target.y);\n\t\t\t} else {\n\t\t\t\tctx.lineTo(target.x, previous.y);\n\t\t\t}\n\t\t\tctx.lineTo(target.x, target.y);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!target.tension) {\n\t\t\tctx.lineTo(target.x, target.y);\n\t\t\treturn;\n\t\t}\n\n\t\tctx.bezierCurveTo(\n\t\t\tflip ? previous.controlPointPreviousX : previous.controlPointNextX,\n\t\t\tflip ? previous.controlPointPreviousY : previous.controlPointNextY,\n\t\t\tflip ? target.controlPointNextX : target.controlPointPreviousX,\n\t\t\tflip ? target.controlPointNextY : target.controlPointPreviousY,\n\t\t\ttarget.x,\n\t\t\ttarget.y);\n\t}\n};\n\nvar helpers_canvas = exports$1;\n\n// DEPRECATIONS\n\n/**\n * Provided for backward compatibility, use Chart.helpers.canvas.clear instead.\n * @namespace Chart.helpers.clear\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers_core.clear = exports$1.clear;\n\n/**\n * Provided for backward compatibility, use Chart.helpers.canvas.roundedRect instead.\n * @namespace Chart.helpers.drawRoundedRectangle\n * @deprecated since version 2.7.0\n * @todo remove at version 3\n * @private\n */\nhelpers_core.drawRoundedRectangle = function(ctx) {\n\tctx.beginPath();\n\texports$1.roundedRect.apply(exports$1, arguments);\n};\n\nvar defaults = {\n\t/**\n\t * @private\n\t */\n\t_set: function(scope, values) {\n\t\treturn helpers_core.merge(this[scope] || (this[scope] = {}), values);\n\t}\n};\n\n// TODO(v3): remove 'global' from namespace. all default are global and\n// there's inconsistency around which options are under 'global'\ndefaults._set('global', {\n\tdefaultColor: 'rgba(0,0,0,0.1)',\n\tdefaultFontColor: '#666',\n\tdefaultFontFamily: \"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\",\n\tdefaultFontSize: 12,\n\tdefaultFontStyle: 'normal',\n\tdefaultLineHeight: 1.2,\n\tshowLines: true\n});\n\nvar core_defaults = defaults;\n\nvar valueOrDefault = helpers_core.valueOrDefault;\n\n/**\n * Converts the given font object into a CSS font string.\n * @param {object} font - A font object.\n * @return {string} The CSS font string. See https://developer.mozilla.org/en-US/docs/Web/CSS/font\n * @private\n */\nfunction toFontString(font) {\n\tif (!font || helpers_core.isNullOrUndef(font.size) || helpers_core.isNullOrUndef(font.family)) {\n\t\treturn null;\n\t}\n\n\treturn (font.style ? font.style + ' ' : '')\n\t\t+ (font.weight ? font.weight + ' ' : '')\n\t\t+ font.size + 'px '\n\t\t+ font.family;\n}\n\n/**\n * @alias Chart.helpers.options\n * @namespace\n */\nvar helpers_options = {\n\t/**\n\t * Converts the given line height `value` in pixels for a specific font `size`.\n\t * @param {number|string} value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em').\n\t * @param {number} size - The font size (in pixels) used to resolve relative `value`.\n\t * @returns {number} The effective line height in pixels (size * 1.2 if value is invalid).\n\t * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height\n\t * @since 2.7.0\n\t */\n\ttoLineHeight: function(value, size) {\n\t\tvar matches = ('' + value).match(/^(normal|(\\d+(?:\\.\\d+)?)(px|em|%)?)$/);\n\t\tif (!matches || matches[1] === 'normal') {\n\t\t\treturn size * 1.2;\n\t\t}\n\n\t\tvalue = +matches[2];\n\n\t\tswitch (matches[3]) {\n\t\tcase 'px':\n\t\t\treturn value;\n\t\tcase '%':\n\t\t\tvalue /= 100;\n\t\t\tbreak;\n\t\t}\n\n\t\treturn size * value;\n\t},\n\n\t/**\n\t * Converts the given value into a padding object with pre-computed width/height.\n\t * @param {number|object} value - If a number, set the value to all TRBL component,\n\t * else, if and object, use defined properties and sets undefined ones to 0.\n\t * @returns {object} The padding values (top, right, bottom, left, width, height)\n\t * @since 2.7.0\n\t */\n\ttoPadding: function(value) {\n\t\tvar t, r, b, l;\n\n\t\tif (helpers_core.isObject(value)) {\n\t\t\tt = +value.top || 0;\n\t\t\tr = +value.right || 0;\n\t\t\tb = +value.bottom || 0;\n\t\t\tl = +value.left || 0;\n\t\t} else {\n\t\t\tt = r = b = l = +value || 0;\n\t\t}\n\n\t\treturn {\n\t\t\ttop: t,\n\t\t\tright: r,\n\t\t\tbottom: b,\n\t\t\tleft: l,\n\t\t\theight: t + b,\n\t\t\twidth: l + r\n\t\t};\n\t},\n\n\t/**\n\t * Parses font options and returns the font object.\n\t * @param {object} options - A object that contains font options to be parsed.\n\t * @return {object} The font object.\n\t * @todo Support font.* options and renamed to toFont().\n\t * @private\n\t */\n\t_parseFont: function(options) {\n\t\tvar globalDefaults = core_defaults.global;\n\t\tvar size = valueOrDefault(options.fontSize, globalDefaults.defaultFontSize);\n\t\tvar font = {\n\t\t\tfamily: valueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily),\n\t\t\tlineHeight: helpers_core.options.toLineHeight(valueOrDefault(options.lineHeight, globalDefaults.defaultLineHeight), size),\n\t\t\tsize: size,\n\t\t\tstyle: valueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle),\n\t\t\tweight: null,\n\t\t\tstring: ''\n\t\t};\n\n\t\tfont.string = toFontString(font);\n\t\treturn font;\n\t},\n\n\t/**\n\t * Evaluates the given `inputs` sequentially and returns the first defined value.\n\t * @param {Array} inputs - An array of values, falling back to the last value.\n\t * @param {object} [context] - If defined and the current value is a function, the value\n\t * is called with `context` as first argument and the result becomes the new input.\n\t * @param {number} [index] - If defined and the current value is an array, the value\n\t * at `index` become the new input.\n\t * @param {object} [info] - object to return information about resolution in\n\t * @param {boolean} [info.cacheable] - Will be set to `false` if option is not cacheable.\n\t * @since 2.7.0\n\t */\n\tresolve: function(inputs, context, index, info) {\n\t\tvar cacheable = true;\n\t\tvar i, ilen, value;\n\n\t\tfor (i = 0, ilen = inputs.length; i < ilen; ++i) {\n\t\t\tvalue = inputs[i];\n\t\t\tif (value === undefined) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (context !== undefined && typeof value === 'function') {\n\t\t\t\tvalue = value(context);\n\t\t\t\tcacheable = false;\n\t\t\t}\n\t\t\tif (index !== undefined && helpers_core.isArray(value)) {\n\t\t\t\tvalue = value[index];\n\t\t\t\tcacheable = false;\n\t\t\t}\n\t\t\tif (value !== undefined) {\n\t\t\t\tif (info && !cacheable) {\n\t\t\t\t\tinfo.cacheable = false;\n\t\t\t\t}\n\t\t\t\treturn value;\n\t\t\t}\n\t\t}\n\t}\n};\n\n/**\n * @alias Chart.helpers.math\n * @namespace\n */\nvar exports$2 = {\n\t/**\n\t * Returns an array of factors sorted from 1 to sqrt(value)\n\t * @private\n\t */\n\t_factorize: function(value) {\n\t\tvar result = [];\n\t\tvar sqrt = Math.sqrt(value);\n\t\tvar i;\n\n\t\tfor (i = 1; i < sqrt; i++) {\n\t\t\tif (value % i === 0) {\n\t\t\t\tresult.push(i);\n\t\t\t\tresult.push(value / i);\n\t\t\t}\n\t\t}\n\t\tif (sqrt === (sqrt | 0)) { // if value is a square number\n\t\t\tresult.push(sqrt);\n\t\t}\n\n\t\tresult.sort(function(a, b) {\n\t\t\treturn a - b;\n\t\t}).pop();\n\t\treturn result;\n\t},\n\n\tlog10: Math.log10 || function(x) {\n\t\tvar exponent = Math.log(x) * Math.LOG10E; // Math.LOG10E = 1 / Math.LN10.\n\t\t// Check for whole powers of 10,\n\t\t// which due to floating point rounding error should be corrected.\n\t\tvar powerOf10 = Math.round(exponent);\n\t\tvar isPowerOf10 = x === Math.pow(10, powerOf10);\n\n\t\treturn isPowerOf10 ? powerOf10 : exponent;\n\t}\n};\n\nvar helpers_math = exports$2;\n\n// DEPRECATIONS\n\n/**\n * Provided for backward compatibility, use Chart.helpers.math.log10 instead.\n * @namespace Chart.helpers.log10\n * @deprecated since version 2.9.0\n * @todo remove at version 3\n * @private\n */\nhelpers_core.log10 = exports$2.log10;\n\nvar getRtlAdapter = function(rectX, width) {\n\treturn {\n\t\tx: function(x) {\n\t\t\treturn rectX + rectX + width - x;\n\t\t},\n\t\tsetWidth: function(w) {\n\t\t\twidth = w;\n\t\t},\n\t\ttextAlign: function(align) {\n\t\t\tif (align === 'center') {\n\t\t\t\treturn align;\n\t\t\t}\n\t\t\treturn align === 'right' ? 'left' : 'right';\n\t\t},\n\t\txPlus: function(x, value) {\n\t\t\treturn x - value;\n\t\t},\n\t\tleftForLtr: function(x, itemWidth) {\n\t\t\treturn x - itemWidth;\n\t\t},\n\t};\n};\n\nvar getLtrAdapter = function() {\n\treturn {\n\t\tx: function(x) {\n\t\t\treturn x;\n\t\t},\n\t\tsetWidth: function(w) { // eslint-disable-line no-unused-vars\n\t\t},\n\t\ttextAlign: function(align) {\n\t\t\treturn align;\n\t\t},\n\t\txPlus: function(x, value) {\n\t\t\treturn x + value;\n\t\t},\n\t\tleftForLtr: function(x, _itemWidth) { // eslint-disable-line no-unused-vars\n\t\t\treturn x;\n\t\t},\n\t};\n};\n\nvar getAdapter = function(rtl, rectX, width) {\n\treturn rtl ? getRtlAdapter(rectX, width) : getLtrAdapter();\n};\n\nvar overrideTextDirection = function(ctx, direction) {\n\tvar style, original;\n\tif (direction === 'ltr' || direction === 'rtl') {\n\t\tstyle = ctx.canvas.style;\n\t\toriginal = [\n\t\t\tstyle.getPropertyValue('direction'),\n\t\t\tstyle.getPropertyPriority('direction'),\n\t\t];\n\n\t\tstyle.setProperty('direction', direction, 'important');\n\t\tctx.prevTextDirection = original;\n\t}\n};\n\nvar restoreTextDirection = function(ctx) {\n\tvar original = ctx.prevTextDirection;\n\tif (original !== undefined) {\n\t\tdelete ctx.prevTextDirection;\n\t\tctx.canvas.style.setProperty('direction', original[0], original[1]);\n\t}\n};\n\nvar helpers_rtl = {\n\tgetRtlAdapter: getAdapter,\n\toverrideTextDirection: overrideTextDirection,\n\trestoreTextDirection: restoreTextDirection,\n};\n\nvar helpers$1 = helpers_core;\nvar easing = helpers_easing;\nvar canvas = helpers_canvas;\nvar options = helpers_options;\nvar math = helpers_math;\nvar rtl = helpers_rtl;\nhelpers$1.easing = easing;\nhelpers$1.canvas = canvas;\nhelpers$1.options = options;\nhelpers$1.math = math;\nhelpers$1.rtl = rtl;\n\nfunction interpolate(start, view, model, ease) {\n\tvar keys = Object.keys(model);\n\tvar i, ilen, key, actual, origin, target, type, c0, c1;\n\n\tfor (i = 0, ilen = keys.length; i < ilen; ++i) {\n\t\tkey = keys[i];\n\n\t\ttarget = model[key];\n\n\t\t// if a value is added to the model after pivot() has been called, the view\n\t\t// doesn't contain it, so let's initialize the view to the target value.\n\t\tif (!view.hasOwnProperty(key)) {\n\t\t\tview[key] = target;\n\t\t}\n\n\t\tactual = view[key];\n\n\t\tif (actual === target || key[0] === '_') {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (!start.hasOwnProperty(key)) {\n\t\t\tstart[key] = actual;\n\t\t}\n\n\t\torigin = start[key];\n\n\t\ttype = typeof target;\n\n\t\tif (type === typeof origin) {\n\t\t\tif (type === 'string') {\n\t\t\t\tc0 = chartjsColor(origin);\n\t\t\t\tif (c0.valid) {\n\t\t\t\t\tc1 = chartjsColor(target);\n\t\t\t\t\tif (c1.valid) {\n\t\t\t\t\t\tview[key] = c1.mix(c0, ease).rgbString();\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (helpers$1.isFinite(origin) && helpers$1.isFinite(target)) {\n\t\t\t\tview[key] = origin + (target - origin) * ease;\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t}\n\n\t\tview[key] = target;\n\t}\n}\n\nvar Element = function(configuration) {\n\thelpers$1.extend(this, configuration);\n\tthis.initialize.apply(this, arguments);\n};\n\nhelpers$1.extend(Element.prototype, {\n\t_type: undefined,\n\n\tinitialize: function() {\n\t\tthis.hidden = false;\n\t},\n\n\tpivot: function() {\n\t\tvar me = this;\n\t\tif (!me._view) {\n\t\t\tme._view = helpers$1.extend({}, me._model);\n\t\t}\n\t\tme._start = {};\n\t\treturn me;\n\t},\n\n\ttransition: function(ease) {\n\t\tvar me = this;\n\t\tvar model = me._model;\n\t\tvar start = me._start;\n\t\tvar view = me._view;\n\n\t\t// No animation -> No Transition\n\t\tif (!model || ease === 1) {\n\t\t\tme._view = helpers$1.extend({}, model);\n\t\t\tme._start = null;\n\t\t\treturn me;\n\t\t}\n\n\t\tif (!view) {\n\t\t\tview = me._view = {};\n\t\t}\n\n\t\tif (!start) {\n\t\t\tstart = me._start = {};\n\t\t}\n\n\t\tinterpolate(start, view, model, ease);\n\n\t\treturn me;\n\t},\n\n\ttooltipPosition: function() {\n\t\treturn {\n\t\t\tx: this._model.x,\n\t\t\ty: this._model.y\n\t\t};\n\t},\n\n\thasValue: function() {\n\t\treturn helpers$1.isNumber(this._model.x) && helpers$1.isNumber(this._model.y);\n\t}\n});\n\nElement.extend = helpers$1.inherits;\n\nvar core_element = Element;\n\nvar exports$3 = core_element.extend({\n\tchart: null, // the animation associated chart instance\n\tcurrentStep: 0, // the current animation step\n\tnumSteps: 60, // default number of steps\n\teasing: '', // the easing to use for this animation\n\trender: null, // render function used by the animation service\n\n\tonAnimationProgress: null, // user specified callback to fire on each step of the animation\n\tonAnimationComplete: null, // user specified callback to fire when the animation finishes\n});\n\nvar core_animation = exports$3;\n\n// DEPRECATIONS\n\n/**\n * Provided for backward compatibility, use Chart.Animation instead\n * @prop Chart.Animation#animationObject\n * @deprecated since version 2.6.0\n * @todo remove at version 3\n */\nObject.defineProperty(exports$3.prototype, 'animationObject', {\n\tget: function() {\n\t\treturn this;\n\t}\n});\n\n/**\n * Provided for backward compatibility, use Chart.Animation#chart instead\n * @prop Chart.Animation#chartInstance\n * @deprecated since version 2.6.0\n * @todo remove at version 3\n */\nObject.defineProperty(exports$3.prototype, 'chartInstance', {\n\tget: function() {\n\t\treturn this.chart;\n\t},\n\tset: function(value) {\n\t\tthis.chart = value;\n\t}\n});\n\ncore_defaults._set('global', {\n\tanimation: {\n\t\tduration: 1000,\n\t\teasing: 'easeOutQuart',\n\t\tonProgress: helpers$1.noop,\n\t\tonComplete: helpers$1.noop\n\t}\n});\n\nvar core_animations = {\n\tanimations: [],\n\trequest: null,\n\n\t/**\n\t * @param {Chart} chart - The chart to animate.\n\t * @param {Chart.Animation} animation - The animation that we will animate.\n\t * @param {number} duration - The animation duration in ms.\n\t * @param {boolean} lazy - if true, the chart is not marked as animating to enable more responsive interactions\n\t */\n\taddAnimation: function(chart, animation, duration, lazy) {\n\t\tvar animations = this.animations;\n\t\tvar i, ilen;\n\n\t\tanimation.chart = chart;\n\t\tanimation.startTime = Date.now();\n\t\tanimation.duration = duration;\n\n\t\tif (!lazy) {\n\t\t\tchart.animating = true;\n\t\t}\n\n\t\tfor (i = 0, ilen = animations.length; i < ilen; ++i) {\n\t\t\tif (animations[i].chart === chart) {\n\t\t\t\tanimations[i] = animation;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tanimations.push(animation);\n\n\t\t// If there are no animations queued, manually kickstart a digest, for lack of a better word\n\t\tif (animations.length === 1) {\n\t\t\tthis.requestAnimationFrame();\n\t\t}\n\t},\n\n\tcancelAnimation: function(chart) {\n\t\tvar index = helpers$1.findIndex(this.animations, function(animation) {\n\t\t\treturn animation.chart === chart;\n\t\t});\n\n\t\tif (index !== -1) {\n\t\t\tthis.animations.splice(index, 1);\n\t\t\tchart.animating = false;\n\t\t}\n\t},\n\n\trequestAnimationFrame: function() {\n\t\tvar me = this;\n\t\tif (me.request === null) {\n\t\t\t// Skip animation frame requests until the active one is executed.\n\t\t\t// This can happen when processing mouse events, e.g. 'mousemove'\n\t\t\t// and 'mouseout' events will trigger multiple renders.\n\t\t\tme.request = helpers$1.requestAnimFrame.call(window, function() {\n\t\t\t\tme.request = null;\n\t\t\t\tme.startDigest();\n\t\t\t});\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\tstartDigest: function() {\n\t\tvar me = this;\n\n\t\tme.advance();\n\n\t\t// Do we have more stuff to animate?\n\t\tif (me.animations.length > 0) {\n\t\t\tme.requestAnimationFrame();\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\tadvance: function() {\n\t\tvar animations = this.animations;\n\t\tvar animation, chart, numSteps, nextStep;\n\t\tvar i = 0;\n\n\t\t// 1 animation per chart, so we are looping charts here\n\t\twhile (i < animations.length) {\n\t\t\tanimation = animations[i];\n\t\t\tchart = animation.chart;\n\t\t\tnumSteps = animation.numSteps;\n\n\t\t\t// Make sure that currentStep starts at 1\n\t\t\t// https://github.com/chartjs/Chart.js/issues/6104\n\t\t\tnextStep = Math.floor((Date.now() - animation.startTime) / animation.duration * numSteps) + 1;\n\t\t\tanimation.currentStep = Math.min(nextStep, numSteps);\n\n\t\t\thelpers$1.callback(animation.render, [chart, animation], chart);\n\t\t\thelpers$1.callback(animation.onAnimationProgress, [animation], chart);\n\n\t\t\tif (animation.currentStep >= numSteps) {\n\t\t\t\thelpers$1.callback(animation.onAnimationComplete, [animation], chart);\n\t\t\t\tchart.animating = false;\n\t\t\t\tanimations.splice(i, 1);\n\t\t\t} else {\n\t\t\t\t++i;\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar resolve = helpers$1.options.resolve;\n\nvar arrayEvents = ['push', 'pop', 'shift', 'splice', 'unshift'];\n\n/**\n * Hooks the array methods that add or remove values ('push', pop', 'shift', 'splice',\n * 'unshift') and notify the listener AFTER the array has been altered. Listeners are\n * called on the 'onData*' callbacks (e.g. onDataPush, etc.) with same arguments.\n */\nfunction listenArrayEvents(array, listener) {\n\tif (array._chartjs) {\n\t\tarray._chartjs.listeners.push(listener);\n\t\treturn;\n\t}\n\n\tObject.defineProperty(array, '_chartjs', {\n\t\tconfigurable: true,\n\t\tenumerable: false,\n\t\tvalue: {\n\t\t\tlisteners: [listener]\n\t\t}\n\t});\n\n\tarrayEvents.forEach(function(key) {\n\t\tvar method = 'onData' + key.charAt(0).toUpperCase() + key.slice(1);\n\t\tvar base = array[key];\n\n\t\tObject.defineProperty(array, key, {\n\t\t\tconfigurable: true,\n\t\t\tenumerable: false,\n\t\t\tvalue: function() {\n\t\t\t\tvar args = Array.prototype.slice.call(arguments);\n\t\t\t\tvar res = base.apply(this, args);\n\n\t\t\t\thelpers$1.each(array._chartjs.listeners, function(object) {\n\t\t\t\t\tif (typeof object[method] === 'function') {\n\t\t\t\t\t\tobject[method].apply(object, args);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\treturn res;\n\t\t\t}\n\t\t});\n\t});\n}\n\n/**\n * Removes the given array event listener and cleanup extra attached properties (such as\n * the _chartjs stub and overridden methods) if array doesn't have any more listeners.\n */\nfunction unlistenArrayEvents(array, listener) {\n\tvar stub = array._chartjs;\n\tif (!stub) {\n\t\treturn;\n\t}\n\n\tvar listeners = stub.listeners;\n\tvar index = listeners.indexOf(listener);\n\tif (index !== -1) {\n\t\tlisteners.splice(index, 1);\n\t}\n\n\tif (listeners.length > 0) {\n\t\treturn;\n\t}\n\n\tarrayEvents.forEach(function(key) {\n\t\tdelete array[key];\n\t});\n\n\tdelete array._chartjs;\n}\n\n// Base class for all dataset controllers (line, bar, etc)\nvar DatasetController = function(chart, datasetIndex) {\n\tthis.initialize(chart, datasetIndex);\n};\n\nhelpers$1.extend(DatasetController.prototype, {\n\n\t/**\n\t * Element type used to generate a meta dataset (e.g. Chart.element.Line).\n\t * @type {Chart.core.element}\n\t */\n\tdatasetElementType: null,\n\n\t/**\n\t * Element type used to generate a meta data (e.g. Chart.element.Point).\n\t * @type {Chart.core.element}\n\t */\n\tdataElementType: null,\n\n\t/**\n\t * Dataset element option keys to be resolved in _resolveDatasetElementOptions.\n\t * A derived controller may override this to resolve controller-specific options.\n\t * The keys defined here are for backward compatibility for legend styles.\n\t * @private\n\t */\n\t_datasetElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderCapStyle',\n\t\t'borderColor',\n\t\t'borderDash',\n\t\t'borderDashOffset',\n\t\t'borderJoinStyle',\n\t\t'borderWidth'\n\t],\n\n\t/**\n\t * Data element option keys to be resolved in _resolveDataElementOptions.\n\t * A derived controller may override this to resolve controller-specific options.\n\t * The keys defined here are for backward compatibility for legend styles.\n\t * @private\n\t */\n\t_dataElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderColor',\n\t\t'borderWidth',\n\t\t'pointStyle'\n\t],\n\n\tinitialize: function(chart, datasetIndex) {\n\t\tvar me = this;\n\t\tme.chart = chart;\n\t\tme.index = datasetIndex;\n\t\tme.linkScales();\n\t\tme.addElements();\n\t\tme._type = me.getMeta().type;\n\t},\n\n\tupdateIndex: function(datasetIndex) {\n\t\tthis.index = datasetIndex;\n\t},\n\n\tlinkScales: function() {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar chart = me.chart;\n\t\tvar scales = chart.scales;\n\t\tvar dataset = me.getDataset();\n\t\tvar scalesOpts = chart.options.scales;\n\n\t\tif (meta.xAxisID === null || !(meta.xAxisID in scales) || dataset.xAxisID) {\n\t\t\tmeta.xAxisID = dataset.xAxisID || scalesOpts.xAxes[0].id;\n\t\t}\n\t\tif (meta.yAxisID === null || !(meta.yAxisID in scales) || dataset.yAxisID) {\n\t\t\tmeta.yAxisID = dataset.yAxisID || scalesOpts.yAxes[0].id;\n\t\t}\n\t},\n\n\tgetDataset: function() {\n\t\treturn this.chart.data.datasets[this.index];\n\t},\n\n\tgetMeta: function() {\n\t\treturn this.chart.getDatasetMeta(this.index);\n\t},\n\n\tgetScaleForId: function(scaleID) {\n\t\treturn this.chart.scales[scaleID];\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getValueScaleId: function() {\n\t\treturn this.getMeta().yAxisID;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getIndexScaleId: function() {\n\t\treturn this.getMeta().xAxisID;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getValueScale: function() {\n\t\treturn this.getScaleForId(this._getValueScaleId());\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getIndexScale: function() {\n\t\treturn this.getScaleForId(this._getIndexScaleId());\n\t},\n\n\treset: function() {\n\t\tthis._update(true);\n\t},\n\n\t/**\n\t * @private\n\t */\n\tdestroy: function() {\n\t\tif (this._data) {\n\t\t\tunlistenArrayEvents(this._data, this);\n\t\t}\n\t},\n\n\tcreateMetaDataset: function() {\n\t\tvar me = this;\n\t\tvar type = me.datasetElementType;\n\t\treturn type && new type({\n\t\t\t_chart: me.chart,\n\t\t\t_datasetIndex: me.index\n\t\t});\n\t},\n\n\tcreateMetaData: function(index) {\n\t\tvar me = this;\n\t\tvar type = me.dataElementType;\n\t\treturn type && new type({\n\t\t\t_chart: me.chart,\n\t\t\t_datasetIndex: me.index,\n\t\t\t_index: index\n\t\t});\n\t},\n\n\taddElements: function() {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar data = me.getDataset().data || [];\n\t\tvar metaData = meta.data;\n\t\tvar i, ilen;\n\n\t\tfor (i = 0, ilen = data.length; i < ilen; ++i) {\n\t\t\tmetaData[i] = metaData[i] || me.createMetaData(i);\n\t\t}\n\n\t\tmeta.dataset = meta.dataset || me.createMetaDataset();\n\t},\n\n\taddElementAndReset: function(index) {\n\t\tvar element = this.createMetaData(index);\n\t\tthis.getMeta().data.splice(index, 0, element);\n\t\tthis.updateElement(element, index, true);\n\t},\n\n\tbuildOrUpdateElements: function() {\n\t\tvar me = this;\n\t\tvar dataset = me.getDataset();\n\t\tvar data = dataset.data || (dataset.data = []);\n\n\t\t// In order to correctly handle data addition/deletion animation (an thus simulate\n\t\t// real-time charts), we need to monitor these data modifications and synchronize\n\t\t// the internal meta data accordingly.\n\t\tif (me._data !== data) {\n\t\t\tif (me._data) {\n\t\t\t\t// This case happens when the user replaced the data array instance.\n\t\t\t\tunlistenArrayEvents(me._data, me);\n\t\t\t}\n\n\t\t\tif (data && Object.isExtensible(data)) {\n\t\t\t\tlistenArrayEvents(data, me);\n\t\t\t}\n\t\t\tme._data = data;\n\t\t}\n\n\t\t// Re-sync meta data in case the user replaced the data array or if we missed\n\t\t// any updates and so make sure that we handle number of datapoints changing.\n\t\tme.resyncElements();\n\t},\n\n\t/**\n\t * Returns the merged user-supplied and default dataset-level options\n\t * @private\n\t */\n\t_configure: function() {\n\t\tvar me = this;\n\t\tme._config = helpers$1.merge({}, [\n\t\t\tme.chart.options.datasets[me._type],\n\t\t\tme.getDataset(),\n\t\t], {\n\t\t\tmerger: function(key, target, source) {\n\t\t\t\tif (key !== '_meta' && key !== 'data') {\n\t\t\t\t\thelpers$1._merger(key, target, source);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t},\n\n\t_update: function(reset) {\n\t\tvar me = this;\n\t\tme._configure();\n\t\tme._cachedDataOpts = null;\n\t\tme.update(reset);\n\t},\n\n\tupdate: helpers$1.noop,\n\n\ttransition: function(easingValue) {\n\t\tvar meta = this.getMeta();\n\t\tvar elements = meta.data || [];\n\t\tvar ilen = elements.length;\n\t\tvar i = 0;\n\n\t\tfor (; i < ilen; ++i) {\n\t\t\telements[i].transition(easingValue);\n\t\t}\n\n\t\tif (meta.dataset) {\n\t\t\tmeta.dataset.transition(easingValue);\n\t\t}\n\t},\n\n\tdraw: function() {\n\t\tvar meta = this.getMeta();\n\t\tvar elements = meta.data || [];\n\t\tvar ilen = elements.length;\n\t\tvar i = 0;\n\n\t\tif (meta.dataset) {\n\t\t\tmeta.dataset.draw();\n\t\t}\n\n\t\tfor (; i < ilen; ++i) {\n\t\t\telements[i].draw();\n\t\t}\n\t},\n\n\t/**\n\t * Returns a set of predefined style properties that should be used to represent the dataset\n\t * or the data if the index is specified\n\t * @param {number} index - data index\n\t * @return {IStyleInterface} style object\n\t */\n\tgetStyle: function(index) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar dataset = meta.dataset;\n\t\tvar style;\n\n\t\tme._configure();\n\t\tif (dataset && index === undefined) {\n\t\t\tstyle = me._resolveDatasetElementOptions(dataset || {});\n\t\t} else {\n\t\t\tindex = index || 0;\n\t\t\tstyle = me._resolveDataElementOptions(meta.data[index] || {}, index);\n\t\t}\n\n\t\tif (style.fill === false || style.fill === null) {\n\t\t\tstyle.backgroundColor = style.borderColor;\n\t\t}\n\n\t\treturn style;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDatasetElementOptions: function(element, hover) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar datasetOpts = me._config;\n\t\tvar custom = element.custom || {};\n\t\tvar options = chart.options.elements[me.datasetElementType.prototype._type] || {};\n\t\tvar elementOptions = me._datasetElementOptions;\n\t\tvar values = {};\n\t\tvar i, ilen, key, readKey;\n\n\t\t// Scriptable options\n\t\tvar context = {\n\t\t\tchart: chart,\n\t\t\tdataset: me.getDataset(),\n\t\t\tdatasetIndex: me.index,\n\t\t\thover: hover\n\t\t};\n\n\t\tfor (i = 0, ilen = elementOptions.length; i < ilen; ++i) {\n\t\t\tkey = elementOptions[i];\n\t\t\treadKey = hover ? 'hover' + key.charAt(0).toUpperCase() + key.slice(1) : key;\n\t\t\tvalues[key] = resolve([\n\t\t\t\tcustom[readKey],\n\t\t\t\tdatasetOpts[readKey],\n\t\t\t\toptions[readKey]\n\t\t\t], context);\n\t\t}\n\n\t\treturn values;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDataElementOptions: function(element, index) {\n\t\tvar me = this;\n\t\tvar custom = element && element.custom;\n\t\tvar cached = me._cachedDataOpts;\n\t\tif (cached && !custom) {\n\t\t\treturn cached;\n\t\t}\n\t\tvar chart = me.chart;\n\t\tvar datasetOpts = me._config;\n\t\tvar options = chart.options.elements[me.dataElementType.prototype._type] || {};\n\t\tvar elementOptions = me._dataElementOptions;\n\t\tvar values = {};\n\n\t\t// Scriptable options\n\t\tvar context = {\n\t\t\tchart: chart,\n\t\t\tdataIndex: index,\n\t\t\tdataset: me.getDataset(),\n\t\t\tdatasetIndex: me.index\n\t\t};\n\n\t\t// `resolve` sets cacheable to `false` if any option is indexed or scripted\n\t\tvar info = {cacheable: !custom};\n\n\t\tvar keys, i, ilen, key;\n\n\t\tcustom = custom || {};\n\n\t\tif (helpers$1.isArray(elementOptions)) {\n\t\t\tfor (i = 0, ilen = elementOptions.length; i < ilen; ++i) {\n\t\t\t\tkey = elementOptions[i];\n\t\t\t\tvalues[key] = resolve([\n\t\t\t\t\tcustom[key],\n\t\t\t\t\tdatasetOpts[key],\n\t\t\t\t\toptions[key]\n\t\t\t\t], context, index, info);\n\t\t\t}\n\t\t} else {\n\t\t\tkeys = Object.keys(elementOptions);\n\t\t\tfor (i = 0, ilen = keys.length; i < ilen; ++i) {\n\t\t\t\tkey = keys[i];\n\t\t\t\tvalues[key] = resolve([\n\t\t\t\t\tcustom[key],\n\t\t\t\t\tdatasetOpts[elementOptions[key]],\n\t\t\t\t\tdatasetOpts[key],\n\t\t\t\t\toptions[key]\n\t\t\t\t], context, index, info);\n\t\t\t}\n\t\t}\n\n\t\tif (info.cacheable) {\n\t\t\tme._cachedDataOpts = Object.freeze(values);\n\t\t}\n\n\t\treturn values;\n\t},\n\n\tremoveHoverStyle: function(element) {\n\t\thelpers$1.merge(element._model, element.$previousStyle || {});\n\t\tdelete element.$previousStyle;\n\t},\n\n\tsetHoverStyle: function(element) {\n\t\tvar dataset = this.chart.data.datasets[element._datasetIndex];\n\t\tvar index = element._index;\n\t\tvar custom = element.custom || {};\n\t\tvar model = element._model;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\n\t\telement.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth\n\t\t};\n\n\t\tmodel.backgroundColor = resolve([custom.hoverBackgroundColor, dataset.hoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index);\n\t\tmodel.borderColor = resolve([custom.hoverBorderColor, dataset.hoverBorderColor, getHoverColor(model.borderColor)], undefined, index);\n\t\tmodel.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_removeDatasetHoverStyle: function() {\n\t\tvar element = this.getMeta().dataset;\n\n\t\tif (element) {\n\t\t\tthis.removeHoverStyle(element);\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_setDatasetHoverStyle: function() {\n\t\tvar element = this.getMeta().dataset;\n\t\tvar prev = {};\n\t\tvar i, ilen, key, keys, hoverOptions, model;\n\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tmodel = element._model;\n\t\thoverOptions = this._resolveDatasetElementOptions(element, true);\n\n\t\tkeys = Object.keys(hoverOptions);\n\t\tfor (i = 0, ilen = keys.length; i < ilen; ++i) {\n\t\t\tkey = keys[i];\n\t\t\tprev[key] = model[key];\n\t\t\tmodel[key] = hoverOptions[key];\n\t\t}\n\n\t\telement.$previousStyle = prev;\n\t},\n\n\t/**\n\t * @private\n\t */\n\tresyncElements: function() {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar data = me.getDataset().data;\n\t\tvar numMeta = meta.data.length;\n\t\tvar numData = data.length;\n\n\t\tif (numData < numMeta) {\n\t\t\tmeta.data.splice(numData, numMeta - numData);\n\t\t} else if (numData > numMeta) {\n\t\t\tme.insertElements(numMeta, numData - numMeta);\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\tinsertElements: function(start, count) {\n\t\tfor (var i = 0; i < count; ++i) {\n\t\t\tthis.addElementAndReset(start + i);\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\tonDataPush: function() {\n\t\tvar count = arguments.length;\n\t\tthis.insertElements(this.getDataset().data.length - count, count);\n\t},\n\n\t/**\n\t * @private\n\t */\n\tonDataPop: function() {\n\t\tthis.getMeta().data.pop();\n\t},\n\n\t/**\n\t * @private\n\t */\n\tonDataShift: function() {\n\t\tthis.getMeta().data.shift();\n\t},\n\n\t/**\n\t * @private\n\t */\n\tonDataSplice: function(start, count) {\n\t\tthis.getMeta().data.splice(start, count);\n\t\tthis.insertElements(start, arguments.length - 2);\n\t},\n\n\t/**\n\t * @private\n\t */\n\tonDataUnshift: function() {\n\t\tthis.insertElements(0, arguments.length);\n\t}\n});\n\nDatasetController.extend = helpers$1.inherits;\n\nvar core_datasetController = DatasetController;\n\nvar TAU = Math.PI * 2;\n\ncore_defaults._set('global', {\n\telements: {\n\t\tarc: {\n\t\t\tbackgroundColor: core_defaults.global.defaultColor,\n\t\t\tborderColor: '#fff',\n\t\t\tborderWidth: 2,\n\t\t\tborderAlign: 'center'\n\t\t}\n\t}\n});\n\nfunction clipArc(ctx, arc) {\n\tvar startAngle = arc.startAngle;\n\tvar endAngle = arc.endAngle;\n\tvar pixelMargin = arc.pixelMargin;\n\tvar angleMargin = pixelMargin / arc.outerRadius;\n\tvar x = arc.x;\n\tvar y = arc.y;\n\n\t// Draw an inner border by cliping the arc and drawing a double-width border\n\t// Enlarge the clipping arc by 0.33 pixels to eliminate glitches between borders\n\tctx.beginPath();\n\tctx.arc(x, y, arc.outerRadius, startAngle - angleMargin, endAngle + angleMargin);\n\tif (arc.innerRadius > pixelMargin) {\n\t\tangleMargin = pixelMargin / arc.innerRadius;\n\t\tctx.arc(x, y, arc.innerRadius - pixelMargin, endAngle + angleMargin, startAngle - angleMargin, true);\n\t} else {\n\t\tctx.arc(x, y, pixelMargin, endAngle + Math.PI / 2, startAngle - Math.PI / 2);\n\t}\n\tctx.closePath();\n\tctx.clip();\n}\n\nfunction drawFullCircleBorders(ctx, vm, arc, inner) {\n\tvar endAngle = arc.endAngle;\n\tvar i;\n\n\tif (inner) {\n\t\tarc.endAngle = arc.startAngle + TAU;\n\t\tclipArc(ctx, arc);\n\t\tarc.endAngle = endAngle;\n\t\tif (arc.endAngle === arc.startAngle && arc.fullCircles) {\n\t\t\tarc.endAngle += TAU;\n\t\t\tarc.fullCircles--;\n\t\t}\n\t}\n\n\tctx.beginPath();\n\tctx.arc(arc.x, arc.y, arc.innerRadius, arc.startAngle + TAU, arc.startAngle, true);\n\tfor (i = 0; i < arc.fullCircles; ++i) {\n\t\tctx.stroke();\n\t}\n\n\tctx.beginPath();\n\tctx.arc(arc.x, arc.y, vm.outerRadius, arc.startAngle, arc.startAngle + TAU);\n\tfor (i = 0; i < arc.fullCircles; ++i) {\n\t\tctx.stroke();\n\t}\n}\n\nfunction drawBorder(ctx, vm, arc) {\n\tvar inner = vm.borderAlign === 'inner';\n\n\tif (inner) {\n\t\tctx.lineWidth = vm.borderWidth * 2;\n\t\tctx.lineJoin = 'round';\n\t} else {\n\t\tctx.lineWidth = vm.borderWidth;\n\t\tctx.lineJoin = 'bevel';\n\t}\n\n\tif (arc.fullCircles) {\n\t\tdrawFullCircleBorders(ctx, vm, arc, inner);\n\t}\n\n\tif (inner) {\n\t\tclipArc(ctx, arc);\n\t}\n\n\tctx.beginPath();\n\tctx.arc(arc.x, arc.y, vm.outerRadius, arc.startAngle, arc.endAngle);\n\tctx.arc(arc.x, arc.y, arc.innerRadius, arc.endAngle, arc.startAngle, true);\n\tctx.closePath();\n\tctx.stroke();\n}\n\nvar element_arc = core_element.extend({\n\t_type: 'arc',\n\n\tinLabelRange: function(mouseX) {\n\t\tvar vm = this._view;\n\n\t\tif (vm) {\n\t\t\treturn (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));\n\t\t}\n\t\treturn false;\n\t},\n\n\tinRange: function(chartX, chartY) {\n\t\tvar vm = this._view;\n\n\t\tif (vm) {\n\t\t\tvar pointRelativePosition = helpers$1.getAngleFromPoint(vm, {x: chartX, y: chartY});\n\t\t\tvar angle = pointRelativePosition.angle;\n\t\t\tvar distance = pointRelativePosition.distance;\n\n\t\t\t// Sanitise angle range\n\t\t\tvar startAngle = vm.startAngle;\n\t\t\tvar endAngle = vm.endAngle;\n\t\t\twhile (endAngle < startAngle) {\n\t\t\t\tendAngle += TAU;\n\t\t\t}\n\t\t\twhile (angle > endAngle) {\n\t\t\t\tangle -= TAU;\n\t\t\t}\n\t\t\twhile (angle < startAngle) {\n\t\t\t\tangle += TAU;\n\t\t\t}\n\n\t\t\t// Check if within the range of the open/close angle\n\t\t\tvar betweenAngles = (angle >= startAngle && angle <= endAngle);\n\t\t\tvar withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius);\n\n\t\t\treturn (betweenAngles && withinRadius);\n\t\t}\n\t\treturn false;\n\t},\n\n\tgetCenterPoint: function() {\n\t\tvar vm = this._view;\n\t\tvar halfAngle = (vm.startAngle + vm.endAngle) / 2;\n\t\tvar halfRadius = (vm.innerRadius + vm.outerRadius) / 2;\n\t\treturn {\n\t\t\tx: vm.x + Math.cos(halfAngle) * halfRadius,\n\t\t\ty: vm.y + Math.sin(halfAngle) * halfRadius\n\t\t};\n\t},\n\n\tgetArea: function() {\n\t\tvar vm = this._view;\n\t\treturn Math.PI * ((vm.endAngle - vm.startAngle) / (2 * Math.PI)) * (Math.pow(vm.outerRadius, 2) - Math.pow(vm.innerRadius, 2));\n\t},\n\n\ttooltipPosition: function() {\n\t\tvar vm = this._view;\n\t\tvar centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2);\n\t\tvar rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;\n\n\t\treturn {\n\t\t\tx: vm.x + (Math.cos(centreAngle) * rangeFromCentre),\n\t\t\ty: vm.y + (Math.sin(centreAngle) * rangeFromCentre)\n\t\t};\n\t},\n\n\tdraw: function() {\n\t\tvar ctx = this._chart.ctx;\n\t\tvar vm = this._view;\n\t\tvar pixelMargin = (vm.borderAlign === 'inner') ? 0.33 : 0;\n\t\tvar arc = {\n\t\t\tx: vm.x,\n\t\t\ty: vm.y,\n\t\t\tinnerRadius: vm.innerRadius,\n\t\t\touterRadius: Math.max(vm.outerRadius - pixelMargin, 0),\n\t\t\tpixelMargin: pixelMargin,\n\t\t\tstartAngle: vm.startAngle,\n\t\t\tendAngle: vm.endAngle,\n\t\t\tfullCircles: Math.floor(vm.circumference / TAU)\n\t\t};\n\t\tvar i;\n\n\t\tctx.save();\n\n\t\tctx.fillStyle = vm.backgroundColor;\n\t\tctx.strokeStyle = vm.borderColor;\n\n\t\tif (arc.fullCircles) {\n\t\t\tarc.endAngle = arc.startAngle + TAU;\n\t\t\tctx.beginPath();\n\t\t\tctx.arc(arc.x, arc.y, arc.outerRadius, arc.startAngle, arc.endAngle);\n\t\t\tctx.arc(arc.x, arc.y, arc.innerRadius, arc.endAngle, arc.startAngle, true);\n\t\t\tctx.closePath();\n\t\t\tfor (i = 0; i < arc.fullCircles; ++i) {\n\t\t\t\tctx.fill();\n\t\t\t}\n\t\t\tarc.endAngle = arc.startAngle + vm.circumference % TAU;\n\t\t}\n\n\t\tctx.beginPath();\n\t\tctx.arc(arc.x, arc.y, arc.outerRadius, arc.startAngle, arc.endAngle);\n\t\tctx.arc(arc.x, arc.y, arc.innerRadius, arc.endAngle, arc.startAngle, true);\n\t\tctx.closePath();\n\t\tctx.fill();\n\n\t\tif (vm.borderWidth) {\n\t\t\tdrawBorder(ctx, vm, arc);\n\t\t}\n\n\t\tctx.restore();\n\t}\n});\n\nvar valueOrDefault$1 = helpers$1.valueOrDefault;\n\nvar defaultColor = core_defaults.global.defaultColor;\n\ncore_defaults._set('global', {\n\telements: {\n\t\tline: {\n\t\t\ttension: 0.4,\n\t\t\tbackgroundColor: defaultColor,\n\t\t\tborderWidth: 3,\n\t\t\tborderColor: defaultColor,\n\t\t\tborderCapStyle: 'butt',\n\t\t\tborderDash: [],\n\t\t\tborderDashOffset: 0.0,\n\t\t\tborderJoinStyle: 'miter',\n\t\t\tcapBezierPoints: true,\n\t\t\tfill: true, // do we fill in the area between the line and its base axis\n\t\t}\n\t}\n});\n\nvar element_line = core_element.extend({\n\t_type: 'line',\n\n\tdraw: function() {\n\t\tvar me = this;\n\t\tvar vm = me._view;\n\t\tvar ctx = me._chart.ctx;\n\t\tvar spanGaps = vm.spanGaps;\n\t\tvar points = me._children.slice(); // clone array\n\t\tvar globalDefaults = core_defaults.global;\n\t\tvar globalOptionLineElements = globalDefaults.elements.line;\n\t\tvar lastDrawnIndex = -1;\n\t\tvar closePath = me._loop;\n\t\tvar index, previous, currentVM;\n\n\t\tif (!points.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (me._loop) {\n\t\t\tfor (index = 0; index < points.length; ++index) {\n\t\t\t\tprevious = helpers$1.previousItem(points, index);\n\t\t\t\t// If the line has an open path, shift the point array\n\t\t\t\tif (!points[index]._view.skip && previous._view.skip) {\n\t\t\t\t\tpoints = points.slice(index).concat(points.slice(0, index));\n\t\t\t\t\tclosePath = spanGaps;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\t// If the line has a close path, add the first point again\n\t\t\tif (closePath) {\n\t\t\t\tpoints.push(points[0]);\n\t\t\t}\n\t\t}\n\n\t\tctx.save();\n\n\t\t// Stroke Line Options\n\t\tctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;\n\n\t\t// IE 9 and 10 do not support line dash\n\t\tif (ctx.setLineDash) {\n\t\t\tctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash);\n\t\t}\n\n\t\tctx.lineDashOffset = valueOrDefault$1(vm.borderDashOffset, globalOptionLineElements.borderDashOffset);\n\t\tctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;\n\t\tctx.lineWidth = valueOrDefault$1(vm.borderWidth, globalOptionLineElements.borderWidth);\n\t\tctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;\n\n\t\t// Stroke Line\n\t\tctx.beginPath();\n\n\t\t// First point moves to it's starting position no matter what\n\t\tcurrentVM = points[0]._view;\n\t\tif (!currentVM.skip) {\n\t\t\tctx.moveTo(currentVM.x, currentVM.y);\n\t\t\tlastDrawnIndex = 0;\n\t\t}\n\n\t\tfor (index = 1; index < points.length; ++index) {\n\t\t\tcurrentVM = points[index]._view;\n\t\t\tprevious = lastDrawnIndex === -1 ? helpers$1.previousItem(points, index) : points[lastDrawnIndex];\n\n\t\t\tif (!currentVM.skip) {\n\t\t\t\tif ((lastDrawnIndex !== (index - 1) && !spanGaps) || lastDrawnIndex === -1) {\n\t\t\t\t\t// There was a gap and this is the first point after the gap\n\t\t\t\t\tctx.moveTo(currentVM.x, currentVM.y);\n\t\t\t\t} else {\n\t\t\t\t\t// Line to next point\n\t\t\t\t\thelpers$1.canvas.lineTo(ctx, previous._view, currentVM);\n\t\t\t\t}\n\t\t\t\tlastDrawnIndex = index;\n\t\t\t}\n\t\t}\n\n\t\tif (closePath) {\n\t\t\tctx.closePath();\n\t\t}\n\n\t\tctx.stroke();\n\t\tctx.restore();\n\t}\n});\n\nvar valueOrDefault$2 = helpers$1.valueOrDefault;\n\nvar defaultColor$1 = core_defaults.global.defaultColor;\n\ncore_defaults._set('global', {\n\telements: {\n\t\tpoint: {\n\t\t\tradius: 3,\n\t\t\tpointStyle: 'circle',\n\t\t\tbackgroundColor: defaultColor$1,\n\t\t\tborderColor: defaultColor$1,\n\t\t\tborderWidth: 1,\n\t\t\t// Hover\n\t\t\thitRadius: 1,\n\t\t\thoverRadius: 4,\n\t\t\thoverBorderWidth: 1\n\t\t}\n\t}\n});\n\nfunction xRange(mouseX) {\n\tvar vm = this._view;\n\treturn vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false;\n}\n\nfunction yRange(mouseY) {\n\tvar vm = this._view;\n\treturn vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false;\n}\n\nvar element_point = core_element.extend({\n\t_type: 'point',\n\n\tinRange: function(mouseX, mouseY) {\n\t\tvar vm = this._view;\n\t\treturn vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false;\n\t},\n\n\tinLabelRange: xRange,\n\tinXRange: xRange,\n\tinYRange: yRange,\n\n\tgetCenterPoint: function() {\n\t\tvar vm = this._view;\n\t\treturn {\n\t\t\tx: vm.x,\n\t\t\ty: vm.y\n\t\t};\n\t},\n\n\tgetArea: function() {\n\t\treturn Math.PI * Math.pow(this._view.radius, 2);\n\t},\n\n\ttooltipPosition: function() {\n\t\tvar vm = this._view;\n\t\treturn {\n\t\t\tx: vm.x,\n\t\t\ty: vm.y,\n\t\t\tpadding: vm.radius + vm.borderWidth\n\t\t};\n\t},\n\n\tdraw: function(chartArea) {\n\t\tvar vm = this._view;\n\t\tvar ctx = this._chart.ctx;\n\t\tvar pointStyle = vm.pointStyle;\n\t\tvar rotation = vm.rotation;\n\t\tvar radius = vm.radius;\n\t\tvar x = vm.x;\n\t\tvar y = vm.y;\n\t\tvar globalDefaults = core_defaults.global;\n\t\tvar defaultColor = globalDefaults.defaultColor; // eslint-disable-line no-shadow\n\n\t\tif (vm.skip) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clipping for Points.\n\t\tif (chartArea === undefined || helpers$1.canvas._isPointInArea(vm, chartArea)) {\n\t\t\tctx.strokeStyle = vm.borderColor || defaultColor;\n\t\t\tctx.lineWidth = valueOrDefault$2(vm.borderWidth, globalDefaults.elements.point.borderWidth);\n\t\t\tctx.fillStyle = vm.backgroundColor || defaultColor;\n\t\t\thelpers$1.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation);\n\t\t}\n\t}\n});\n\nvar defaultColor$2 = core_defaults.global.defaultColor;\n\ncore_defaults._set('global', {\n\telements: {\n\t\trectangle: {\n\t\t\tbackgroundColor: defaultColor$2,\n\t\t\tborderColor: defaultColor$2,\n\t\t\tborderSkipped: 'bottom',\n\t\t\tborderWidth: 0\n\t\t}\n\t}\n});\n\nfunction isVertical(vm) {\n\treturn vm && vm.width !== undefined;\n}\n\n/**\n * Helper function to get the bounds of the bar regardless of the orientation\n * @param bar {Chart.Element.Rectangle} the bar\n * @return {Bounds} bounds of the bar\n * @private\n */\nfunction getBarBounds(vm) {\n\tvar x1, x2, y1, y2, half;\n\n\tif (isVertical(vm)) {\n\t\thalf = vm.width / 2;\n\t\tx1 = vm.x - half;\n\t\tx2 = vm.x + half;\n\t\ty1 = Math.min(vm.y, vm.base);\n\t\ty2 = Math.max(vm.y, vm.base);\n\t} else {\n\t\thalf = vm.height / 2;\n\t\tx1 = Math.min(vm.x, vm.base);\n\t\tx2 = Math.max(vm.x, vm.base);\n\t\ty1 = vm.y - half;\n\t\ty2 = vm.y + half;\n\t}\n\n\treturn {\n\t\tleft: x1,\n\t\ttop: y1,\n\t\tright: x2,\n\t\tbottom: y2\n\t};\n}\n\nfunction swap(orig, v1, v2) {\n\treturn orig === v1 ? v2 : orig === v2 ? v1 : orig;\n}\n\nfunction parseBorderSkipped(vm) {\n\tvar edge = vm.borderSkipped;\n\tvar res = {};\n\n\tif (!edge) {\n\t\treturn res;\n\t}\n\n\tif (vm.horizontal) {\n\t\tif (vm.base > vm.x) {\n\t\t\tedge = swap(edge, 'left', 'right');\n\t\t}\n\t} else if (vm.base < vm.y) {\n\t\tedge = swap(edge, 'bottom', 'top');\n\t}\n\n\tres[edge] = true;\n\treturn res;\n}\n\nfunction parseBorderWidth(vm, maxW, maxH) {\n\tvar value = vm.borderWidth;\n\tvar skip = parseBorderSkipped(vm);\n\tvar t, r, b, l;\n\n\tif (helpers$1.isObject(value)) {\n\t\tt = +value.top || 0;\n\t\tr = +value.right || 0;\n\t\tb = +value.bottom || 0;\n\t\tl = +value.left || 0;\n\t} else {\n\t\tt = r = b = l = +value || 0;\n\t}\n\n\treturn {\n\t\tt: skip.top || (t < 0) ? 0 : t > maxH ? maxH : t,\n\t\tr: skip.right || (r < 0) ? 0 : r > maxW ? maxW : r,\n\t\tb: skip.bottom || (b < 0) ? 0 : b > maxH ? maxH : b,\n\t\tl: skip.left || (l < 0) ? 0 : l > maxW ? maxW : l\n\t};\n}\n\nfunction boundingRects(vm) {\n\tvar bounds = getBarBounds(vm);\n\tvar width = bounds.right - bounds.left;\n\tvar height = bounds.bottom - bounds.top;\n\tvar border = parseBorderWidth(vm, width / 2, height / 2);\n\n\treturn {\n\t\touter: {\n\t\t\tx: bounds.left,\n\t\t\ty: bounds.top,\n\t\t\tw: width,\n\t\t\th: height\n\t\t},\n\t\tinner: {\n\t\t\tx: bounds.left + border.l,\n\t\t\ty: bounds.top + border.t,\n\t\t\tw: width - border.l - border.r,\n\t\t\th: height - border.t - border.b\n\t\t}\n\t};\n}\n\nfunction inRange(vm, x, y) {\n\tvar skipX = x === null;\n\tvar skipY = y === null;\n\tvar bounds = !vm || (skipX && skipY) ? false : getBarBounds(vm);\n\n\treturn bounds\n\t\t&& (skipX || x >= bounds.left && x <= bounds.right)\n\t\t&& (skipY || y >= bounds.top && y <= bounds.bottom);\n}\n\nvar element_rectangle = core_element.extend({\n\t_type: 'rectangle',\n\n\tdraw: function() {\n\t\tvar ctx = this._chart.ctx;\n\t\tvar vm = this._view;\n\t\tvar rects = boundingRects(vm);\n\t\tvar outer = rects.outer;\n\t\tvar inner = rects.inner;\n\n\t\tctx.fillStyle = vm.backgroundColor;\n\t\tctx.fillRect(outer.x, outer.y, outer.w, outer.h);\n\n\t\tif (outer.w === inner.w && outer.h === inner.h) {\n\t\t\treturn;\n\t\t}\n\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(outer.x, outer.y, outer.w, outer.h);\n\t\tctx.clip();\n\t\tctx.fillStyle = vm.borderColor;\n\t\tctx.rect(inner.x, inner.y, inner.w, inner.h);\n\t\tctx.fill('evenodd');\n\t\tctx.restore();\n\t},\n\n\theight: function() {\n\t\tvar vm = this._view;\n\t\treturn vm.base - vm.y;\n\t},\n\n\tinRange: function(mouseX, mouseY) {\n\t\treturn inRange(this._view, mouseX, mouseY);\n\t},\n\n\tinLabelRange: function(mouseX, mouseY) {\n\t\tvar vm = this._view;\n\t\treturn isVertical(vm)\n\t\t\t? inRange(vm, mouseX, null)\n\t\t\t: inRange(vm, null, mouseY);\n\t},\n\n\tinXRange: function(mouseX) {\n\t\treturn inRange(this._view, mouseX, null);\n\t},\n\n\tinYRange: function(mouseY) {\n\t\treturn inRange(this._view, null, mouseY);\n\t},\n\n\tgetCenterPoint: function() {\n\t\tvar vm = this._view;\n\t\tvar x, y;\n\t\tif (isVertical(vm)) {\n\t\t\tx = vm.x;\n\t\t\ty = (vm.y + vm.base) / 2;\n\t\t} else {\n\t\t\tx = (vm.x + vm.base) / 2;\n\t\t\ty = vm.y;\n\t\t}\n\n\t\treturn {x: x, y: y};\n\t},\n\n\tgetArea: function() {\n\t\tvar vm = this._view;\n\n\t\treturn isVertical(vm)\n\t\t\t? vm.width * Math.abs(vm.y - vm.base)\n\t\t\t: vm.height * Math.abs(vm.x - vm.base);\n\t},\n\n\ttooltipPosition: function() {\n\t\tvar vm = this._view;\n\t\treturn {\n\t\t\tx: vm.x,\n\t\t\ty: vm.y\n\t\t};\n\t}\n});\n\nvar elements = {};\nvar Arc = element_arc;\nvar Line = element_line;\nvar Point = element_point;\nvar Rectangle = element_rectangle;\nelements.Arc = Arc;\nelements.Line = Line;\nelements.Point = Point;\nelements.Rectangle = Rectangle;\n\nvar deprecated = helpers$1._deprecated;\nvar valueOrDefault$3 = helpers$1.valueOrDefault;\n\ncore_defaults._set('bar', {\n\thover: {\n\t\tmode: 'label'\n\t},\n\n\tscales: {\n\t\txAxes: [{\n\t\t\ttype: 'category',\n\t\t\toffset: true,\n\t\t\tgridLines: {\n\t\t\t\toffsetGridLines: true\n\t\t\t}\n\t\t}],\n\n\t\tyAxes: [{\n\t\t\ttype: 'linear'\n\t\t}]\n\t}\n});\n\ncore_defaults._set('global', {\n\tdatasets: {\n\t\tbar: {\n\t\t\tcategoryPercentage: 0.8,\n\t\t\tbarPercentage: 0.9\n\t\t}\n\t}\n});\n\n/**\n * Computes the \"optimal\" sample size to maintain bars equally sized while preventing overlap.\n * @private\n */\nfunction computeMinSampleSize(scale, pixels) {\n\tvar min = scale._length;\n\tvar prev, curr, i, ilen;\n\n\tfor (i = 1, ilen = pixels.length; i < ilen; ++i) {\n\t\tmin = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));\n\t}\n\n\tfor (i = 0, ilen = scale.getTicks().length; i < ilen; ++i) {\n\t\tcurr = scale.getPixelForTick(i);\n\t\tmin = i > 0 ? Math.min(min, Math.abs(curr - prev)) : min;\n\t\tprev = curr;\n\t}\n\n\treturn min;\n}\n\n/**\n * Computes an \"ideal\" category based on the absolute bar thickness or, if undefined or null,\n * uses the smallest interval (see computeMinSampleSize) that prevents bar overlapping. This\n * mode currently always generates bars equally sized (until we introduce scriptable options?).\n * @private\n */\nfunction computeFitCategoryTraits(index, ruler, options) {\n\tvar thickness = options.barThickness;\n\tvar count = ruler.stackCount;\n\tvar curr = ruler.pixels[index];\n\tvar min = helpers$1.isNullOrUndef(thickness)\n\t\t? computeMinSampleSize(ruler.scale, ruler.pixels)\n\t\t: -1;\n\tvar size, ratio;\n\n\tif (helpers$1.isNullOrUndef(thickness)) {\n\t\tsize = min * options.categoryPercentage;\n\t\tratio = options.barPercentage;\n\t} else {\n\t\t// When bar thickness is enforced, category and bar percentages are ignored.\n\t\t// Note(SB): we could add support for relative bar thickness (e.g. barThickness: '50%')\n\t\t// and deprecate barPercentage since this value is ignored when thickness is absolute.\n\t\tsize = thickness * count;\n\t\tratio = 1;\n\t}\n\n\treturn {\n\t\tchunk: size / count,\n\t\tratio: ratio,\n\t\tstart: curr - (size / 2)\n\t};\n}\n\n/**\n * Computes an \"optimal\" category that globally arranges bars side by side (no gap when\n * percentage options are 1), based on the previous and following categories. This mode\n * generates bars with different widths when data are not evenly spaced.\n * @private\n */\nfunction computeFlexCategoryTraits(index, ruler, options) {\n\tvar pixels = ruler.pixels;\n\tvar curr = pixels[index];\n\tvar prev = index > 0 ? pixels[index - 1] : null;\n\tvar next = index < pixels.length - 1 ? pixels[index + 1] : null;\n\tvar percent = options.categoryPercentage;\n\tvar start, size;\n\n\tif (prev === null) {\n\t\t// first data: its size is double based on the next point or,\n\t\t// if it's also the last data, we use the scale size.\n\t\tprev = curr - (next === null ? ruler.end - ruler.start : next - curr);\n\t}\n\n\tif (next === null) {\n\t\t// last data: its size is also double based on the previous point.\n\t\tnext = curr + curr - prev;\n\t}\n\n\tstart = curr - (curr - Math.min(prev, next)) / 2 * percent;\n\tsize = Math.abs(next - prev) / 2 * percent;\n\n\treturn {\n\t\tchunk: size / ruler.stackCount,\n\t\tratio: options.barPercentage,\n\t\tstart: start\n\t};\n}\n\nvar controller_bar = core_datasetController.extend({\n\n\tdataElementType: elements.Rectangle,\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderColor',\n\t\t'borderSkipped',\n\t\t'borderWidth',\n\t\t'barPercentage',\n\t\t'barThickness',\n\t\t'categoryPercentage',\n\t\t'maxBarThickness',\n\t\t'minBarLength'\n\t],\n\n\tinitialize: function() {\n\t\tvar me = this;\n\t\tvar meta, scaleOpts;\n\n\t\tcore_datasetController.prototype.initialize.apply(me, arguments);\n\n\t\tmeta = me.getMeta();\n\t\tmeta.stack = me.getDataset().stack;\n\t\tmeta.bar = true;\n\n\t\tscaleOpts = me._getIndexScale().options;\n\t\tdeprecated('bar chart', scaleOpts.barPercentage, 'scales.[x/y]Axes.barPercentage', 'dataset.barPercentage');\n\t\tdeprecated('bar chart', scaleOpts.barThickness, 'scales.[x/y]Axes.barThickness', 'dataset.barThickness');\n\t\tdeprecated('bar chart', scaleOpts.categoryPercentage, 'scales.[x/y]Axes.categoryPercentage', 'dataset.categoryPercentage');\n\t\tdeprecated('bar chart', me._getValueScale().options.minBarLength, 'scales.[x/y]Axes.minBarLength', 'dataset.minBarLength');\n\t\tdeprecated('bar chart', scaleOpts.maxBarThickness, 'scales.[x/y]Axes.maxBarThickness', 'dataset.maxBarThickness');\n\t},\n\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar rects = me.getMeta().data;\n\t\tvar i, ilen;\n\n\t\tme._ruler = me.getRuler();\n\n\t\tfor (i = 0, ilen = rects.length; i < ilen; ++i) {\n\t\t\tme.updateElement(rects[i], i, reset);\n\t\t}\n\t},\n\n\tupdateElement: function(rectangle, index, reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar dataset = me.getDataset();\n\t\tvar options = me._resolveDataElementOptions(rectangle, index);\n\n\t\trectangle._xScale = me.getScaleForId(meta.xAxisID);\n\t\trectangle._yScale = me.getScaleForId(meta.yAxisID);\n\t\trectangle._datasetIndex = me.index;\n\t\trectangle._index = index;\n\t\trectangle._model = {\n\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\tborderColor: options.borderColor,\n\t\t\tborderSkipped: options.borderSkipped,\n\t\t\tborderWidth: options.borderWidth,\n\t\t\tdatasetLabel: dataset.label,\n\t\t\tlabel: me.chart.data.labels[index]\n\t\t};\n\n\t\tif (helpers$1.isArray(dataset.data[index])) {\n\t\t\trectangle._model.borderSkipped = null;\n\t\t}\n\n\t\tme._updateElementGeometry(rectangle, index, reset, options);\n\n\t\trectangle.pivot();\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_updateElementGeometry: function(rectangle, index, reset, options) {\n\t\tvar me = this;\n\t\tvar model = rectangle._model;\n\t\tvar vscale = me._getValueScale();\n\t\tvar base = vscale.getBasePixel();\n\t\tvar horizontal = vscale.isHorizontal();\n\t\tvar ruler = me._ruler || me.getRuler();\n\t\tvar vpixels = me.calculateBarValuePixels(me.index, index, options);\n\t\tvar ipixels = me.calculateBarIndexPixels(me.index, index, ruler, options);\n\n\t\tmodel.horizontal = horizontal;\n\t\tmodel.base = reset ? base : vpixels.base;\n\t\tmodel.x = horizontal ? reset ? base : vpixels.head : ipixels.center;\n\t\tmodel.y = horizontal ? ipixels.center : reset ? base : vpixels.head;\n\t\tmodel.height = horizontal ? ipixels.size : undefined;\n\t\tmodel.width = horizontal ? undefined : ipixels.size;\n\t},\n\n\t/**\n\t * Returns the stacks based on groups and bar visibility.\n\t * @param {number} [last] - The dataset index\n\t * @returns {string[]} The list of stack IDs\n\t * @private\n\t */\n\t_getStacks: function(last) {\n\t\tvar me = this;\n\t\tvar scale = me._getIndexScale();\n\t\tvar metasets = scale._getMatchingVisibleMetas(me._type);\n\t\tvar stacked = scale.options.stacked;\n\t\tvar ilen = metasets.length;\n\t\tvar stacks = [];\n\t\tvar i, meta;\n\n\t\tfor (i = 0; i < ilen; ++i) {\n\t\t\tmeta = metasets[i];\n\t\t\t// stacked | meta.stack\n\t\t\t// | found | not found | undefined\n\t\t\t// false | x | x | x\n\t\t\t// true | | x |\n\t\t\t// undefined | | x | x\n\t\t\tif (stacked === false || stacks.indexOf(meta.stack) === -1 ||\n\t\t\t\t(stacked === undefined && meta.stack === undefined)) {\n\t\t\t\tstacks.push(meta.stack);\n\t\t\t}\n\t\t\tif (meta.index === last) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn stacks;\n\t},\n\n\t/**\n\t * Returns the effective number of stacks based on groups and bar visibility.\n\t * @private\n\t */\n\tgetStackCount: function() {\n\t\treturn this._getStacks().length;\n\t},\n\n\t/**\n\t * Returns the stack index for the given dataset based on groups and bar visibility.\n\t * @param {number} [datasetIndex] - The dataset index\n\t * @param {string} [name] - The stack name to find\n\t * @returns {number} The stack index\n\t * @private\n\t */\n\tgetStackIndex: function(datasetIndex, name) {\n\t\tvar stacks = this._getStacks(datasetIndex);\n\t\tvar index = (name !== undefined)\n\t\t\t? stacks.indexOf(name)\n\t\t\t: -1; // indexOf returns -1 if element is not present\n\n\t\treturn (index === -1)\n\t\t\t? stacks.length - 1\n\t\t\t: index;\n\t},\n\n\t/**\n\t * @private\n\t */\n\tgetRuler: function() {\n\t\tvar me = this;\n\t\tvar scale = me._getIndexScale();\n\t\tvar pixels = [];\n\t\tvar i, ilen;\n\n\t\tfor (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {\n\t\t\tpixels.push(scale.getPixelForValue(null, i, me.index));\n\t\t}\n\n\t\treturn {\n\t\t\tpixels: pixels,\n\t\t\tstart: scale._startPixel,\n\t\t\tend: scale._endPixel,\n\t\t\tstackCount: me.getStackCount(),\n\t\t\tscale: scale\n\t\t};\n\t},\n\n\t/**\n\t * Note: pixel values are not clamped to the scale area.\n\t * @private\n\t */\n\tcalculateBarValuePixels: function(datasetIndex, index, options) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar scale = me._getValueScale();\n\t\tvar isHorizontal = scale.isHorizontal();\n\t\tvar datasets = chart.data.datasets;\n\t\tvar metasets = scale._getMatchingVisibleMetas(me._type);\n\t\tvar value = scale._parseValue(datasets[datasetIndex].data[index]);\n\t\tvar minBarLength = options.minBarLength;\n\t\tvar stacked = scale.options.stacked;\n\t\tvar stack = me.getMeta().stack;\n\t\tvar start = value.start === undefined ? 0 : value.max >= 0 && value.min >= 0 ? value.min : value.max;\n\t\tvar length = value.start === undefined ? value.end : value.max >= 0 && value.min >= 0 ? value.max - value.min : value.min - value.max;\n\t\tvar ilen = metasets.length;\n\t\tvar i, imeta, ivalue, base, head, size, stackLength;\n\n\t\tif (stacked || (stacked === undefined && stack !== undefined)) {\n\t\t\tfor (i = 0; i < ilen; ++i) {\n\t\t\t\timeta = metasets[i];\n\n\t\t\t\tif (imeta.index === datasetIndex) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif (imeta.stack === stack) {\n\t\t\t\t\tstackLength = scale._parseValue(datasets[imeta.index].data[index]);\n\t\t\t\t\tivalue = stackLength.start === undefined ? stackLength.end : stackLength.min >= 0 && stackLength.max >= 0 ? stackLength.max : stackLength.min;\n\n\t\t\t\t\tif ((value.min < 0 && ivalue < 0) || (value.max >= 0 && ivalue > 0)) {\n\t\t\t\t\t\tstart += ivalue;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tbase = scale.getPixelForValue(start);\n\t\thead = scale.getPixelForValue(start + length);\n\t\tsize = head - base;\n\n\t\tif (minBarLength !== undefined && Math.abs(size) < minBarLength) {\n\t\t\tsize = minBarLength;\n\t\t\tif (length >= 0 && !isHorizontal || length < 0 && isHorizontal) {\n\t\t\t\thead = base - minBarLength;\n\t\t\t} else {\n\t\t\t\thead = base + minBarLength;\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tsize: size,\n\t\t\tbase: base,\n\t\t\thead: head,\n\t\t\tcenter: head + size / 2\n\t\t};\n\t},\n\n\t/**\n\t * @private\n\t */\n\tcalculateBarIndexPixels: function(datasetIndex, index, ruler, options) {\n\t\tvar me = this;\n\t\tvar range = options.barThickness === 'flex'\n\t\t\t? computeFlexCategoryTraits(index, ruler, options)\n\t\t\t: computeFitCategoryTraits(index, ruler, options);\n\n\t\tvar stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);\n\t\tvar center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);\n\t\tvar size = Math.min(\n\t\t\tvalueOrDefault$3(options.maxBarThickness, Infinity),\n\t\t\trange.chunk * range.ratio);\n\n\t\treturn {\n\t\t\tbase: center - size / 2,\n\t\t\thead: center + size / 2,\n\t\t\tcenter: center,\n\t\t\tsize: size\n\t\t};\n\t},\n\n\tdraw: function() {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar scale = me._getValueScale();\n\t\tvar rects = me.getMeta().data;\n\t\tvar dataset = me.getDataset();\n\t\tvar ilen = rects.length;\n\t\tvar i = 0;\n\n\t\thelpers$1.canvas.clipArea(chart.ctx, chart.chartArea);\n\n\t\tfor (; i < ilen; ++i) {\n\t\t\tvar val = scale._parseValue(dataset.data[i]);\n\t\t\tif (!isNaN(val.min) && !isNaN(val.max)) {\n\t\t\t\trects[i].draw();\n\t\t\t}\n\t\t}\n\n\t\thelpers$1.canvas.unclipArea(chart.ctx);\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDataElementOptions: function() {\n\t\tvar me = this;\n\t\tvar values = helpers$1.extend({}, core_datasetController.prototype._resolveDataElementOptions.apply(me, arguments));\n\t\tvar indexOpts = me._getIndexScale().options;\n\t\tvar valueOpts = me._getValueScale().options;\n\n\t\tvalues.barPercentage = valueOrDefault$3(indexOpts.barPercentage, values.barPercentage);\n\t\tvalues.barThickness = valueOrDefault$3(indexOpts.barThickness, values.barThickness);\n\t\tvalues.categoryPercentage = valueOrDefault$3(indexOpts.categoryPercentage, values.categoryPercentage);\n\t\tvalues.maxBarThickness = valueOrDefault$3(indexOpts.maxBarThickness, values.maxBarThickness);\n\t\tvalues.minBarLength = valueOrDefault$3(valueOpts.minBarLength, values.minBarLength);\n\n\t\treturn values;\n\t}\n\n});\n\nvar valueOrDefault$4 = helpers$1.valueOrDefault;\nvar resolve$1 = helpers$1.options.resolve;\n\ncore_defaults._set('bubble', {\n\thover: {\n\t\tmode: 'single'\n\t},\n\n\tscales: {\n\t\txAxes: [{\n\t\t\ttype: 'linear', // bubble should probably use a linear scale by default\n\t\t\tposition: 'bottom',\n\t\t\tid: 'x-axis-0' // need an ID so datasets can reference the scale\n\t\t}],\n\t\tyAxes: [{\n\t\t\ttype: 'linear',\n\t\t\tposition: 'left',\n\t\t\tid: 'y-axis-0'\n\t\t}]\n\t},\n\n\ttooltips: {\n\t\tcallbacks: {\n\t\t\ttitle: function() {\n\t\t\t\t// Title doesn't make sense for scatter since we format the data as a point\n\t\t\t\treturn '';\n\t\t\t},\n\t\t\tlabel: function(item, data) {\n\t\t\t\tvar datasetLabel = data.datasets[item.datasetIndex].label || '';\n\t\t\t\tvar dataPoint = data.datasets[item.datasetIndex].data[item.index];\n\t\t\t\treturn datasetLabel + ': (' + item.xLabel + ', ' + item.yLabel + ', ' + dataPoint.r + ')';\n\t\t\t}\n\t\t}\n\t}\n});\n\nvar controller_bubble = core_datasetController.extend({\n\t/**\n\t * @protected\n\t */\n\tdataElementType: elements.Point,\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderColor',\n\t\t'borderWidth',\n\t\t'hoverBackgroundColor',\n\t\t'hoverBorderColor',\n\t\t'hoverBorderWidth',\n\t\t'hoverRadius',\n\t\t'hitRadius',\n\t\t'pointStyle',\n\t\t'rotation'\n\t],\n\n\t/**\n\t * @protected\n\t */\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar points = meta.data;\n\n\t\t// Update Points\n\t\thelpers$1.each(points, function(point, index) {\n\t\t\tme.updateElement(point, index, reset);\n\t\t});\n\t},\n\n\t/**\n\t * @protected\n\t */\n\tupdateElement: function(point, index, reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar custom = point.custom || {};\n\t\tvar xScale = me.getScaleForId(meta.xAxisID);\n\t\tvar yScale = me.getScaleForId(meta.yAxisID);\n\t\tvar options = me._resolveDataElementOptions(point, index);\n\t\tvar data = me.getDataset().data[index];\n\t\tvar dsIndex = me.index;\n\n\t\tvar x = reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex);\n\t\tvar y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex);\n\n\t\tpoint._xScale = xScale;\n\t\tpoint._yScale = yScale;\n\t\tpoint._options = options;\n\t\tpoint._datasetIndex = dsIndex;\n\t\tpoint._index = index;\n\t\tpoint._model = {\n\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\tborderColor: options.borderColor,\n\t\t\tborderWidth: options.borderWidth,\n\t\t\thitRadius: options.hitRadius,\n\t\t\tpointStyle: options.pointStyle,\n\t\t\trotation: options.rotation,\n\t\t\tradius: reset ? 0 : options.radius,\n\t\t\tskip: custom.skip || isNaN(x) || isNaN(y),\n\t\t\tx: x,\n\t\t\ty: y,\n\t\t};\n\n\t\tpoint.pivot();\n\t},\n\n\t/**\n\t * @protected\n\t */\n\tsetHoverStyle: function(point) {\n\t\tvar model = point._model;\n\t\tvar options = point._options;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\n\t\tpoint.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth,\n\t\t\tradius: model.radius\n\t\t};\n\n\t\tmodel.backgroundColor = valueOrDefault$4(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));\n\t\tmodel.borderColor = valueOrDefault$4(options.hoverBorderColor, getHoverColor(options.borderColor));\n\t\tmodel.borderWidth = valueOrDefault$4(options.hoverBorderWidth, options.borderWidth);\n\t\tmodel.radius = options.radius + options.hoverRadius;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDataElementOptions: function(point, index) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar dataset = me.getDataset();\n\t\tvar custom = point.custom || {};\n\t\tvar data = dataset.data[index] || {};\n\t\tvar values = core_datasetController.prototype._resolveDataElementOptions.apply(me, arguments);\n\n\t\t// Scriptable options\n\t\tvar context = {\n\t\t\tchart: chart,\n\t\t\tdataIndex: index,\n\t\t\tdataset: dataset,\n\t\t\tdatasetIndex: me.index\n\t\t};\n\n\t\t// In case values were cached (and thus frozen), we need to clone the values\n\t\tif (me._cachedDataOpts === values) {\n\t\t\tvalues = helpers$1.extend({}, values);\n\t\t}\n\n\t\t// Custom radius resolution\n\t\tvalues.radius = resolve$1([\n\t\t\tcustom.radius,\n\t\t\tdata.r,\n\t\t\tme._config.radius,\n\t\t\tchart.options.elements.point.radius\n\t\t], context, index);\n\n\t\treturn values;\n\t}\n});\n\nvar valueOrDefault$5 = helpers$1.valueOrDefault;\n\nvar PI$1 = Math.PI;\nvar DOUBLE_PI$1 = PI$1 * 2;\nvar HALF_PI$1 = PI$1 / 2;\n\ncore_defaults._set('doughnut', {\n\tanimation: {\n\t\t// Boolean - Whether we animate the rotation of the Doughnut\n\t\tanimateRotate: true,\n\t\t// Boolean - Whether we animate scaling the Doughnut from the centre\n\t\tanimateScale: false\n\t},\n\thover: {\n\t\tmode: 'single'\n\t},\n\tlegendCallback: function(chart) {\n\t\tvar list = document.createElement('ul');\n\t\tvar data = chart.data;\n\t\tvar datasets = data.datasets;\n\t\tvar labels = data.labels;\n\t\tvar i, ilen, listItem, listItemSpan;\n\n\t\tlist.setAttribute('class', chart.id + '-legend');\n\t\tif (datasets.length) {\n\t\t\tfor (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {\n\t\t\t\tlistItem = list.appendChild(document.createElement('li'));\n\t\t\t\tlistItemSpan = listItem.appendChild(document.createElement('span'));\n\t\t\t\tlistItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];\n\t\t\t\tif (labels[i]) {\n\t\t\t\t\tlistItem.appendChild(document.createTextNode(labels[i]));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn list.outerHTML;\n\t},\n\tlegend: {\n\t\tlabels: {\n\t\t\tgenerateLabels: function(chart) {\n\t\t\t\tvar data = chart.data;\n\t\t\t\tif (data.labels.length && data.datasets.length) {\n\t\t\t\t\treturn data.labels.map(function(label, i) {\n\t\t\t\t\t\tvar meta = chart.getDatasetMeta(0);\n\t\t\t\t\t\tvar style = meta.controller.getStyle(i);\n\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\ttext: label,\n\t\t\t\t\t\t\tfillStyle: style.backgroundColor,\n\t\t\t\t\t\t\tstrokeStyle: style.borderColor,\n\t\t\t\t\t\t\tlineWidth: style.borderWidth,\n\t\t\t\t\t\t\thidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,\n\n\t\t\t\t\t\t\t// Extra data used for toggling the correct item\n\t\t\t\t\t\t\tindex: i\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\treturn [];\n\t\t\t}\n\t\t},\n\n\t\tonClick: function(e, legendItem) {\n\t\t\tvar index = legendItem.index;\n\t\t\tvar chart = this.chart;\n\t\t\tvar i, ilen, meta;\n\n\t\t\tfor (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {\n\t\t\t\tmeta = chart.getDatasetMeta(i);\n\t\t\t\t// toggle visibility of index if exists\n\t\t\t\tif (meta.data[index]) {\n\t\t\t\t\tmeta.data[index].hidden = !meta.data[index].hidden;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tchart.update();\n\t\t}\n\t},\n\n\t// The percentage of the chart that we cut out of the middle.\n\tcutoutPercentage: 50,\n\n\t// The rotation of the chart, where the first data arc begins.\n\trotation: -HALF_PI$1,\n\n\t// The total circumference of the chart.\n\tcircumference: DOUBLE_PI$1,\n\n\t// Need to override these to give a nice default\n\ttooltips: {\n\t\tcallbacks: {\n\t\t\ttitle: function() {\n\t\t\t\treturn '';\n\t\t\t},\n\t\t\tlabel: function(tooltipItem, data) {\n\t\t\t\tvar dataLabel = data.labels[tooltipItem.index];\n\t\t\t\tvar value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n\n\t\t\t\tif (helpers$1.isArray(dataLabel)) {\n\t\t\t\t\t// show value on first line of multiline label\n\t\t\t\t\t// need to clone because we are changing the value\n\t\t\t\t\tdataLabel = dataLabel.slice();\n\t\t\t\t\tdataLabel[0] += value;\n\t\t\t\t} else {\n\t\t\t\t\tdataLabel += value;\n\t\t\t\t}\n\n\t\t\t\treturn dataLabel;\n\t\t\t}\n\t\t}\n\t}\n});\n\nvar controller_doughnut = core_datasetController.extend({\n\n\tdataElementType: elements.Arc,\n\n\tlinkScales: helpers$1.noop,\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderColor',\n\t\t'borderWidth',\n\t\t'borderAlign',\n\t\t'hoverBackgroundColor',\n\t\t'hoverBorderColor',\n\t\t'hoverBorderWidth',\n\t],\n\n\t// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly\n\tgetRingIndex: function(datasetIndex) {\n\t\tvar ringIndex = 0;\n\n\t\tfor (var j = 0; j < datasetIndex; ++j) {\n\t\t\tif (this.chart.isDatasetVisible(j)) {\n\t\t\t\t++ringIndex;\n\t\t\t}\n\t\t}\n\n\t\treturn ringIndex;\n\t},\n\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar chartArea = chart.chartArea;\n\t\tvar opts = chart.options;\n\t\tvar ratioX = 1;\n\t\tvar ratioY = 1;\n\t\tvar offsetX = 0;\n\t\tvar offsetY = 0;\n\t\tvar meta = me.getMeta();\n\t\tvar arcs = meta.data;\n\t\tvar cutout = opts.cutoutPercentage / 100 || 0;\n\t\tvar circumference = opts.circumference;\n\t\tvar chartWeight = me._getRingWeight(me.index);\n\t\tvar maxWidth, maxHeight, i, ilen;\n\n\t\t// If the chart's circumference isn't a full circle, calculate size as a ratio of the width/height of the arc\n\t\tif (circumference < DOUBLE_PI$1) {\n\t\t\tvar startAngle = opts.rotation % DOUBLE_PI$1;\n\t\t\tstartAngle += startAngle >= PI$1 ? -DOUBLE_PI$1 : startAngle < -PI$1 ? DOUBLE_PI$1 : 0;\n\t\t\tvar endAngle = startAngle + circumference;\n\t\t\tvar startX = Math.cos(startAngle);\n\t\t\tvar startY = Math.sin(startAngle);\n\t\t\tvar endX = Math.cos(endAngle);\n\t\t\tvar endY = Math.sin(endAngle);\n\t\t\tvar contains0 = (startAngle <= 0 && endAngle >= 0) || endAngle >= DOUBLE_PI$1;\n\t\t\tvar contains90 = (startAngle <= HALF_PI$1 && endAngle >= HALF_PI$1) || endAngle >= DOUBLE_PI$1 + HALF_PI$1;\n\t\t\tvar contains180 = startAngle === -PI$1 || endAngle >= PI$1;\n\t\t\tvar contains270 = (startAngle <= -HALF_PI$1 && endAngle >= -HALF_PI$1) || endAngle >= PI$1 + HALF_PI$1;\n\t\t\tvar minX = contains180 ? -1 : Math.min(startX, startX * cutout, endX, endX * cutout);\n\t\t\tvar minY = contains270 ? -1 : Math.min(startY, startY * cutout, endY, endY * cutout);\n\t\t\tvar maxX = contains0 ? 1 : Math.max(startX, startX * cutout, endX, endX * cutout);\n\t\t\tvar maxY = contains90 ? 1 : Math.max(startY, startY * cutout, endY, endY * cutout);\n\t\t\tratioX = (maxX - minX) / 2;\n\t\t\tratioY = (maxY - minY) / 2;\n\t\t\toffsetX = -(maxX + minX) / 2;\n\t\t\toffsetY = -(maxY + minY) / 2;\n\t\t}\n\n\t\tfor (i = 0, ilen = arcs.length; i < ilen; ++i) {\n\t\t\tarcs[i]._options = me._resolveDataElementOptions(arcs[i], i);\n\t\t}\n\n\t\tchart.borderWidth = me.getMaxBorderWidth();\n\t\tmaxWidth = (chartArea.right - chartArea.left - chart.borderWidth) / ratioX;\n\t\tmaxHeight = (chartArea.bottom - chartArea.top - chart.borderWidth) / ratioY;\n\t\tchart.outerRadius = Math.max(Math.min(maxWidth, maxHeight) / 2, 0);\n\t\tchart.innerRadius = Math.max(chart.outerRadius * cutout, 0);\n\t\tchart.radiusLength = (chart.outerRadius - chart.innerRadius) / (me._getVisibleDatasetWeightTotal() || 1);\n\t\tchart.offsetX = offsetX * chart.outerRadius;\n\t\tchart.offsetY = offsetY * chart.outerRadius;\n\n\t\tmeta.total = me.calculateTotal();\n\n\t\tme.outerRadius = chart.outerRadius - chart.radiusLength * me._getRingWeightOffset(me.index);\n\t\tme.innerRadius = Math.max(me.outerRadius - chart.radiusLength * chartWeight, 0);\n\n\t\tfor (i = 0, ilen = arcs.length; i < ilen; ++i) {\n\t\t\tme.updateElement(arcs[i], i, reset);\n\t\t}\n\t},\n\n\tupdateElement: function(arc, index, reset) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar chartArea = chart.chartArea;\n\t\tvar opts = chart.options;\n\t\tvar animationOpts = opts.animation;\n\t\tvar centerX = (chartArea.left + chartArea.right) / 2;\n\t\tvar centerY = (chartArea.top + chartArea.bottom) / 2;\n\t\tvar startAngle = opts.rotation; // non reset case handled later\n\t\tvar endAngle = opts.rotation; // non reset case handled later\n\t\tvar dataset = me.getDataset();\n\t\tvar circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : me.calculateCircumference(dataset.data[index]) * (opts.circumference / DOUBLE_PI$1);\n\t\tvar innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;\n\t\tvar outerRadius = reset && animationOpts.animateScale ? 0 : me.outerRadius;\n\t\tvar options = arc._options || {};\n\n\t\thelpers$1.extend(arc, {\n\t\t\t// Utility\n\t\t\t_datasetIndex: me.index,\n\t\t\t_index: index,\n\n\t\t\t// Desired view properties\n\t\t\t_model: {\n\t\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\t\tborderColor: options.borderColor,\n\t\t\t\tborderWidth: options.borderWidth,\n\t\t\t\tborderAlign: options.borderAlign,\n\t\t\t\tx: centerX + chart.offsetX,\n\t\t\t\ty: centerY + chart.offsetY,\n\t\t\t\tstartAngle: startAngle,\n\t\t\t\tendAngle: endAngle,\n\t\t\t\tcircumference: circumference,\n\t\t\t\touterRadius: outerRadius,\n\t\t\t\tinnerRadius: innerRadius,\n\t\t\t\tlabel: helpers$1.valueAtIndexOrDefault(dataset.label, index, chart.data.labels[index])\n\t\t\t}\n\t\t});\n\n\t\tvar model = arc._model;\n\n\t\t// Set correct angles if not resetting\n\t\tif (!reset || !animationOpts.animateRotate) {\n\t\t\tif (index === 0) {\n\t\t\t\tmodel.startAngle = opts.rotation;\n\t\t\t} else {\n\t\t\t\tmodel.startAngle = me.getMeta().data[index - 1]._model.endAngle;\n\t\t\t}\n\n\t\t\tmodel.endAngle = model.startAngle + model.circumference;\n\t\t}\n\n\t\tarc.pivot();\n\t},\n\n\tcalculateTotal: function() {\n\t\tvar dataset = this.getDataset();\n\t\tvar meta = this.getMeta();\n\t\tvar total = 0;\n\t\tvar value;\n\n\t\thelpers$1.each(meta.data, function(element, index) {\n\t\t\tvalue = dataset.data[index];\n\t\t\tif (!isNaN(value) && !element.hidden) {\n\t\t\t\ttotal += Math.abs(value);\n\t\t\t}\n\t\t});\n\n\t\t/* if (total === 0) {\n\t\t\ttotal = NaN;\n\t\t}*/\n\n\t\treturn total;\n\t},\n\n\tcalculateCircumference: function(value) {\n\t\tvar total = this.getMeta().total;\n\t\tif (total > 0 && !isNaN(value)) {\n\t\t\treturn DOUBLE_PI$1 * (Math.abs(value) / total);\n\t\t}\n\t\treturn 0;\n\t},\n\n\t// gets the max border or hover width to properly scale pie charts\n\tgetMaxBorderWidth: function(arcs) {\n\t\tvar me = this;\n\t\tvar max = 0;\n\t\tvar chart = me.chart;\n\t\tvar i, ilen, meta, arc, controller, options, borderWidth, hoverWidth;\n\n\t\tif (!arcs) {\n\t\t\t// Find the outmost visible dataset\n\t\t\tfor (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {\n\t\t\t\tif (chart.isDatasetVisible(i)) {\n\t\t\t\t\tmeta = chart.getDatasetMeta(i);\n\t\t\t\t\tarcs = meta.data;\n\t\t\t\t\tif (i !== me.index) {\n\t\t\t\t\t\tcontroller = meta.controller;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (!arcs) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tfor (i = 0, ilen = arcs.length; i < ilen; ++i) {\n\t\t\tarc = arcs[i];\n\t\t\tif (controller) {\n\t\t\t\tcontroller._configure();\n\t\t\t\toptions = controller._resolveDataElementOptions(arc, i);\n\t\t\t} else {\n\t\t\t\toptions = arc._options;\n\t\t\t}\n\t\t\tif (options.borderAlign !== 'inner') {\n\t\t\t\tborderWidth = options.borderWidth;\n\t\t\t\thoverWidth = options.hoverBorderWidth;\n\n\t\t\t\tmax = borderWidth > max ? borderWidth : max;\n\t\t\t\tmax = hoverWidth > max ? hoverWidth : max;\n\t\t\t}\n\t\t}\n\t\treturn max;\n\t},\n\n\t/**\n\t * @protected\n\t */\n\tsetHoverStyle: function(arc) {\n\t\tvar model = arc._model;\n\t\tvar options = arc._options;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\n\t\tarc.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth,\n\t\t};\n\n\t\tmodel.backgroundColor = valueOrDefault$5(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));\n\t\tmodel.borderColor = valueOrDefault$5(options.hoverBorderColor, getHoverColor(options.borderColor));\n\t\tmodel.borderWidth = valueOrDefault$5(options.hoverBorderWidth, options.borderWidth);\n\t},\n\n\t/**\n\t * Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly\n\t * @private\n\t */\n\t_getRingWeightOffset: function(datasetIndex) {\n\t\tvar ringWeightOffset = 0;\n\n\t\tfor (var i = 0; i < datasetIndex; ++i) {\n\t\t\tif (this.chart.isDatasetVisible(i)) {\n\t\t\t\tringWeightOffset += this._getRingWeight(i);\n\t\t\t}\n\t\t}\n\n\t\treturn ringWeightOffset;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getRingWeight: function(dataSetIndex) {\n\t\treturn Math.max(valueOrDefault$5(this.chart.data.datasets[dataSetIndex].weight, 1), 0);\n\t},\n\n\t/**\n\t * Returns the sum of all visibile data set weights. This value can be 0.\n\t * @private\n\t */\n\t_getVisibleDatasetWeightTotal: function() {\n\t\treturn this._getRingWeightOffset(this.chart.data.datasets.length);\n\t}\n});\n\ncore_defaults._set('horizontalBar', {\n\thover: {\n\t\tmode: 'index',\n\t\taxis: 'y'\n\t},\n\n\tscales: {\n\t\txAxes: [{\n\t\t\ttype: 'linear',\n\t\t\tposition: 'bottom'\n\t\t}],\n\n\t\tyAxes: [{\n\t\t\ttype: 'category',\n\t\t\tposition: 'left',\n\t\t\toffset: true,\n\t\t\tgridLines: {\n\t\t\t\toffsetGridLines: true\n\t\t\t}\n\t\t}]\n\t},\n\n\telements: {\n\t\trectangle: {\n\t\t\tborderSkipped: 'left'\n\t\t}\n\t},\n\n\ttooltips: {\n\t\tmode: 'index',\n\t\taxis: 'y'\n\t}\n});\n\ncore_defaults._set('global', {\n\tdatasets: {\n\t\thorizontalBar: {\n\t\t\tcategoryPercentage: 0.8,\n\t\t\tbarPercentage: 0.9\n\t\t}\n\t}\n});\n\nvar controller_horizontalBar = controller_bar.extend({\n\t/**\n\t * @private\n\t */\n\t_getValueScaleId: function() {\n\t\treturn this.getMeta().xAxisID;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getIndexScaleId: function() {\n\t\treturn this.getMeta().yAxisID;\n\t}\n});\n\nvar valueOrDefault$6 = helpers$1.valueOrDefault;\nvar resolve$2 = helpers$1.options.resolve;\nvar isPointInArea = helpers$1.canvas._isPointInArea;\n\ncore_defaults._set('line', {\n\tshowLines: true,\n\tspanGaps: false,\n\n\thover: {\n\t\tmode: 'label'\n\t},\n\n\tscales: {\n\t\txAxes: [{\n\t\t\ttype: 'category',\n\t\t\tid: 'x-axis-0'\n\t\t}],\n\t\tyAxes: [{\n\t\t\ttype: 'linear',\n\t\t\tid: 'y-axis-0'\n\t\t}]\n\t}\n});\n\nfunction scaleClip(scale, halfBorderWidth) {\n\tvar tickOpts = scale && scale.options.ticks || {};\n\tvar reverse = tickOpts.reverse;\n\tvar min = tickOpts.min === undefined ? halfBorderWidth : 0;\n\tvar max = tickOpts.max === undefined ? halfBorderWidth : 0;\n\treturn {\n\t\tstart: reverse ? max : min,\n\t\tend: reverse ? min : max\n\t};\n}\n\nfunction defaultClip(xScale, yScale, borderWidth) {\n\tvar halfBorderWidth = borderWidth / 2;\n\tvar x = scaleClip(xScale, halfBorderWidth);\n\tvar y = scaleClip(yScale, halfBorderWidth);\n\n\treturn {\n\t\ttop: y.end,\n\t\tright: x.end,\n\t\tbottom: y.start,\n\t\tleft: x.start\n\t};\n}\n\nfunction toClip(value) {\n\tvar t, r, b, l;\n\n\tif (helpers$1.isObject(value)) {\n\t\tt = value.top;\n\t\tr = value.right;\n\t\tb = value.bottom;\n\t\tl = value.left;\n\t} else {\n\t\tt = r = b = l = value;\n\t}\n\n\treturn {\n\t\ttop: t,\n\t\tright: r,\n\t\tbottom: b,\n\t\tleft: l\n\t};\n}\n\n\nvar controller_line = core_datasetController.extend({\n\n\tdatasetElementType: elements.Line,\n\n\tdataElementType: elements.Point,\n\n\t/**\n\t * @private\n\t */\n\t_datasetElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderCapStyle',\n\t\t'borderColor',\n\t\t'borderDash',\n\t\t'borderDashOffset',\n\t\t'borderJoinStyle',\n\t\t'borderWidth',\n\t\t'cubicInterpolationMode',\n\t\t'fill'\n\t],\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: {\n\t\tbackgroundColor: 'pointBackgroundColor',\n\t\tborderColor: 'pointBorderColor',\n\t\tborderWidth: 'pointBorderWidth',\n\t\thitRadius: 'pointHitRadius',\n\t\thoverBackgroundColor: 'pointHoverBackgroundColor',\n\t\thoverBorderColor: 'pointHoverBorderColor',\n\t\thoverBorderWidth: 'pointHoverBorderWidth',\n\t\thoverRadius: 'pointHoverRadius',\n\t\tpointStyle: 'pointStyle',\n\t\tradius: 'pointRadius',\n\t\trotation: 'pointRotation'\n\t},\n\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar line = meta.dataset;\n\t\tvar points = meta.data || [];\n\t\tvar options = me.chart.options;\n\t\tvar config = me._config;\n\t\tvar showLine = me._showLine = valueOrDefault$6(config.showLine, options.showLines);\n\t\tvar i, ilen;\n\n\t\tme._xScale = me.getScaleForId(meta.xAxisID);\n\t\tme._yScale = me.getScaleForId(meta.yAxisID);\n\n\t\t// Update Line\n\t\tif (showLine) {\n\t\t\t// Compatibility: If the properties are defined with only the old name, use those values\n\t\t\tif (config.tension !== undefined && config.lineTension === undefined) {\n\t\t\t\tconfig.lineTension = config.tension;\n\t\t\t}\n\n\t\t\t// Utility\n\t\t\tline._scale = me._yScale;\n\t\t\tline._datasetIndex = me.index;\n\t\t\t// Data\n\t\t\tline._children = points;\n\t\t\t// Model\n\t\t\tline._model = me._resolveDatasetElementOptions(line);\n\n\t\t\tline.pivot();\n\t\t}\n\n\t\t// Update Points\n\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\tme.updateElement(points[i], i, reset);\n\t\t}\n\n\t\tif (showLine && line._model.tension !== 0) {\n\t\t\tme.updateBezierControlPoints();\n\t\t}\n\n\t\t// Now pivot the point for animation\n\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\tpoints[i].pivot();\n\t\t}\n\t},\n\n\tupdateElement: function(point, index, reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar custom = point.custom || {};\n\t\tvar dataset = me.getDataset();\n\t\tvar datasetIndex = me.index;\n\t\tvar value = dataset.data[index];\n\t\tvar xScale = me._xScale;\n\t\tvar yScale = me._yScale;\n\t\tvar lineModel = meta.dataset._model;\n\t\tvar x, y;\n\n\t\tvar options = me._resolveDataElementOptions(point, index);\n\n\t\tx = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);\n\t\ty = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);\n\n\t\t// Utility\n\t\tpoint._xScale = xScale;\n\t\tpoint._yScale = yScale;\n\t\tpoint._options = options;\n\t\tpoint._datasetIndex = datasetIndex;\n\t\tpoint._index = index;\n\n\t\t// Desired view properties\n\t\tpoint._model = {\n\t\t\tx: x,\n\t\t\ty: y,\n\t\t\tskip: custom.skip || isNaN(x) || isNaN(y),\n\t\t\t// Appearance\n\t\t\tradius: options.radius,\n\t\t\tpointStyle: options.pointStyle,\n\t\t\trotation: options.rotation,\n\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\tborderColor: options.borderColor,\n\t\t\tborderWidth: options.borderWidth,\n\t\t\ttension: valueOrDefault$6(custom.tension, lineModel ? lineModel.tension : 0),\n\t\t\tsteppedLine: lineModel ? lineModel.steppedLine : false,\n\t\t\t// Tooltip\n\t\t\thitRadius: options.hitRadius\n\t\t};\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDatasetElementOptions: function(element) {\n\t\tvar me = this;\n\t\tvar config = me._config;\n\t\tvar custom = element.custom || {};\n\t\tvar options = me.chart.options;\n\t\tvar lineOptions = options.elements.line;\n\t\tvar values = core_datasetController.prototype._resolveDatasetElementOptions.apply(me, arguments);\n\n\t\t// The default behavior of lines is to break at null values, according\n\t\t// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158\n\t\t// This option gives lines the ability to span gaps\n\t\tvalues.spanGaps = valueOrDefault$6(config.spanGaps, options.spanGaps);\n\t\tvalues.tension = valueOrDefault$6(config.lineTension, lineOptions.tension);\n\t\tvalues.steppedLine = resolve$2([custom.steppedLine, config.steppedLine, lineOptions.stepped]);\n\t\tvalues.clip = toClip(valueOrDefault$6(config.clip, defaultClip(me._xScale, me._yScale, values.borderWidth)));\n\n\t\treturn values;\n\t},\n\n\tcalculatePointY: function(value, index, datasetIndex) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar yScale = me._yScale;\n\t\tvar sumPos = 0;\n\t\tvar sumNeg = 0;\n\t\tvar i, ds, dsMeta, stackedRightValue, rightValue, metasets, ilen;\n\n\t\tif (yScale.options.stacked) {\n\t\t\trightValue = +yScale.getRightValue(value);\n\t\t\tmetasets = chart._getSortedVisibleDatasetMetas();\n\t\t\tilen = metasets.length;\n\n\t\t\tfor (i = 0; i < ilen; ++i) {\n\t\t\t\tdsMeta = metasets[i];\n\t\t\t\tif (dsMeta.index === datasetIndex) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tds = chart.data.datasets[dsMeta.index];\n\t\t\t\tif (dsMeta.type === 'line' && dsMeta.yAxisID === yScale.id) {\n\t\t\t\t\tstackedRightValue = +yScale.getRightValue(ds.data[index]);\n\t\t\t\t\tif (stackedRightValue < 0) {\n\t\t\t\t\t\tsumNeg += stackedRightValue || 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsumPos += stackedRightValue || 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (rightValue < 0) {\n\t\t\t\treturn yScale.getPixelForValue(sumNeg + rightValue);\n\t\t\t}\n\t\t\treturn yScale.getPixelForValue(sumPos + rightValue);\n\t\t}\n\t\treturn yScale.getPixelForValue(value);\n\t},\n\n\tupdateBezierControlPoints: function() {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar meta = me.getMeta();\n\t\tvar lineModel = meta.dataset._model;\n\t\tvar area = chart.chartArea;\n\t\tvar points = meta.data || [];\n\t\tvar i, ilen, model, controlPoints;\n\n\t\t// Only consider points that are drawn in case the spanGaps option is used\n\t\tif (lineModel.spanGaps) {\n\t\t\tpoints = points.filter(function(pt) {\n\t\t\t\treturn !pt._model.skip;\n\t\t\t});\n\t\t}\n\n\t\tfunction capControlPoint(pt, min, max) {\n\t\t\treturn Math.max(Math.min(pt, max), min);\n\t\t}\n\n\t\tif (lineModel.cubicInterpolationMode === 'monotone') {\n\t\t\thelpers$1.splineCurveMonotone(points);\n\t\t} else {\n\t\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\t\tmodel = points[i]._model;\n\t\t\t\tcontrolPoints = helpers$1.splineCurve(\n\t\t\t\t\thelpers$1.previousItem(points, i)._model,\n\t\t\t\t\tmodel,\n\t\t\t\t\thelpers$1.nextItem(points, i)._model,\n\t\t\t\t\tlineModel.tension\n\t\t\t\t);\n\t\t\t\tmodel.controlPointPreviousX = controlPoints.previous.x;\n\t\t\t\tmodel.controlPointPreviousY = controlPoints.previous.y;\n\t\t\t\tmodel.controlPointNextX = controlPoints.next.x;\n\t\t\t\tmodel.controlPointNextY = controlPoints.next.y;\n\t\t\t}\n\t\t}\n\n\t\tif (chart.options.elements.line.capBezierPoints) {\n\t\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\t\tmodel = points[i]._model;\n\t\t\t\tif (isPointInArea(model, area)) {\n\t\t\t\t\tif (i > 0 && isPointInArea(points[i - 1]._model, area)) {\n\t\t\t\t\t\tmodel.controlPointPreviousX = capControlPoint(model.controlPointPreviousX, area.left, area.right);\n\t\t\t\t\t\tmodel.controlPointPreviousY = capControlPoint(model.controlPointPreviousY, area.top, area.bottom);\n\t\t\t\t\t}\n\t\t\t\t\tif (i < points.length - 1 && isPointInArea(points[i + 1]._model, area)) {\n\t\t\t\t\t\tmodel.controlPointNextX = capControlPoint(model.controlPointNextX, area.left, area.right);\n\t\t\t\t\t\tmodel.controlPointNextY = capControlPoint(model.controlPointNextY, area.top, area.bottom);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\n\tdraw: function() {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar meta = me.getMeta();\n\t\tvar points = meta.data || [];\n\t\tvar area = chart.chartArea;\n\t\tvar canvas = chart.canvas;\n\t\tvar i = 0;\n\t\tvar ilen = points.length;\n\t\tvar clip;\n\n\t\tif (me._showLine) {\n\t\t\tclip = meta.dataset._model.clip;\n\n\t\t\thelpers$1.canvas.clipArea(chart.ctx, {\n\t\t\t\tleft: clip.left === false ? 0 : area.left - clip.left,\n\t\t\t\tright: clip.right === false ? canvas.width : area.right + clip.right,\n\t\t\t\ttop: clip.top === false ? 0 : area.top - clip.top,\n\t\t\t\tbottom: clip.bottom === false ? canvas.height : area.bottom + clip.bottom\n\t\t\t});\n\n\t\t\tmeta.dataset.draw();\n\n\t\t\thelpers$1.canvas.unclipArea(chart.ctx);\n\t\t}\n\n\t\t// Draw the points\n\t\tfor (; i < ilen; ++i) {\n\t\t\tpoints[i].draw(area);\n\t\t}\n\t},\n\n\t/**\n\t * @protected\n\t */\n\tsetHoverStyle: function(point) {\n\t\tvar model = point._model;\n\t\tvar options = point._options;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\n\t\tpoint.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth,\n\t\t\tradius: model.radius\n\t\t};\n\n\t\tmodel.backgroundColor = valueOrDefault$6(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));\n\t\tmodel.borderColor = valueOrDefault$6(options.hoverBorderColor, getHoverColor(options.borderColor));\n\t\tmodel.borderWidth = valueOrDefault$6(options.hoverBorderWidth, options.borderWidth);\n\t\tmodel.radius = valueOrDefault$6(options.hoverRadius, options.radius);\n\t},\n});\n\nvar resolve$3 = helpers$1.options.resolve;\n\ncore_defaults._set('polarArea', {\n\tscale: {\n\t\ttype: 'radialLinear',\n\t\tangleLines: {\n\t\t\tdisplay: false\n\t\t},\n\t\tgridLines: {\n\t\t\tcircular: true\n\t\t},\n\t\tpointLabels: {\n\t\t\tdisplay: false\n\t\t},\n\t\tticks: {\n\t\t\tbeginAtZero: true\n\t\t}\n\t},\n\n\t// Boolean - Whether to animate the rotation of the chart\n\tanimation: {\n\t\tanimateRotate: true,\n\t\tanimateScale: true\n\t},\n\n\tstartAngle: -0.5 * Math.PI,\n\tlegendCallback: function(chart) {\n\t\tvar list = document.createElement('ul');\n\t\tvar data = chart.data;\n\t\tvar datasets = data.datasets;\n\t\tvar labels = data.labels;\n\t\tvar i, ilen, listItem, listItemSpan;\n\n\t\tlist.setAttribute('class', chart.id + '-legend');\n\t\tif (datasets.length) {\n\t\t\tfor (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {\n\t\t\t\tlistItem = list.appendChild(document.createElement('li'));\n\t\t\t\tlistItemSpan = listItem.appendChild(document.createElement('span'));\n\t\t\t\tlistItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];\n\t\t\t\tif (labels[i]) {\n\t\t\t\t\tlistItem.appendChild(document.createTextNode(labels[i]));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn list.outerHTML;\n\t},\n\tlegend: {\n\t\tlabels: {\n\t\t\tgenerateLabels: function(chart) {\n\t\t\t\tvar data = chart.data;\n\t\t\t\tif (data.labels.length && data.datasets.length) {\n\t\t\t\t\treturn data.labels.map(function(label, i) {\n\t\t\t\t\t\tvar meta = chart.getDatasetMeta(0);\n\t\t\t\t\t\tvar style = meta.controller.getStyle(i);\n\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\ttext: label,\n\t\t\t\t\t\t\tfillStyle: style.backgroundColor,\n\t\t\t\t\t\t\tstrokeStyle: style.borderColor,\n\t\t\t\t\t\t\tlineWidth: style.borderWidth,\n\t\t\t\t\t\t\thidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,\n\n\t\t\t\t\t\t\t// Extra data used for toggling the correct item\n\t\t\t\t\t\t\tindex: i\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\treturn [];\n\t\t\t}\n\t\t},\n\n\t\tonClick: function(e, legendItem) {\n\t\t\tvar index = legendItem.index;\n\t\t\tvar chart = this.chart;\n\t\t\tvar i, ilen, meta;\n\n\t\t\tfor (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {\n\t\t\t\tmeta = chart.getDatasetMeta(i);\n\t\t\t\tmeta.data[index].hidden = !meta.data[index].hidden;\n\t\t\t}\n\n\t\t\tchart.update();\n\t\t}\n\t},\n\n\t// Need to override these to give a nice default\n\ttooltips: {\n\t\tcallbacks: {\n\t\t\ttitle: function() {\n\t\t\t\treturn '';\n\t\t\t},\n\t\t\tlabel: function(item, data) {\n\t\t\t\treturn data.labels[item.index] + ': ' + item.yLabel;\n\t\t\t}\n\t\t}\n\t}\n});\n\nvar controller_polarArea = core_datasetController.extend({\n\n\tdataElementType: elements.Arc,\n\n\tlinkScales: helpers$1.noop,\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderColor',\n\t\t'borderWidth',\n\t\t'borderAlign',\n\t\t'hoverBackgroundColor',\n\t\t'hoverBorderColor',\n\t\t'hoverBorderWidth',\n\t],\n\n\t/**\n\t * @private\n\t */\n\t_getIndexScaleId: function() {\n\t\treturn this.chart.scale.id;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getValueScaleId: function() {\n\t\treturn this.chart.scale.id;\n\t},\n\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar dataset = me.getDataset();\n\t\tvar meta = me.getMeta();\n\t\tvar start = me.chart.options.startAngle || 0;\n\t\tvar starts = me._starts = [];\n\t\tvar angles = me._angles = [];\n\t\tvar arcs = meta.data;\n\t\tvar i, ilen, angle;\n\n\t\tme._updateRadius();\n\n\t\tmeta.count = me.countVisibleElements();\n\n\t\tfor (i = 0, ilen = dataset.data.length; i < ilen; i++) {\n\t\t\tstarts[i] = start;\n\t\t\tangle = me._computeAngle(i);\n\t\t\tangles[i] = angle;\n\t\t\tstart += angle;\n\t\t}\n\n\t\tfor (i = 0, ilen = arcs.length; i < ilen; ++i) {\n\t\t\tarcs[i]._options = me._resolveDataElementOptions(arcs[i], i);\n\t\t\tme.updateElement(arcs[i], i, reset);\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_updateRadius: function() {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar chartArea = chart.chartArea;\n\t\tvar opts = chart.options;\n\t\tvar minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);\n\n\t\tchart.outerRadius = Math.max(minSize / 2, 0);\n\t\tchart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);\n\t\tchart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();\n\n\t\tme.outerRadius = chart.outerRadius - (chart.radiusLength * me.index);\n\t\tme.innerRadius = me.outerRadius - chart.radiusLength;\n\t},\n\n\tupdateElement: function(arc, index, reset) {\n\t\tvar me = this;\n\t\tvar chart = me.chart;\n\t\tvar dataset = me.getDataset();\n\t\tvar opts = chart.options;\n\t\tvar animationOpts = opts.animation;\n\t\tvar scale = chart.scale;\n\t\tvar labels = chart.data.labels;\n\n\t\tvar centerX = scale.xCenter;\n\t\tvar centerY = scale.yCenter;\n\n\t\t// var negHalfPI = -0.5 * Math.PI;\n\t\tvar datasetStartAngle = opts.startAngle;\n\t\tvar distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);\n\t\tvar startAngle = me._starts[index];\n\t\tvar endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);\n\n\t\tvar resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);\n\t\tvar options = arc._options || {};\n\n\t\thelpers$1.extend(arc, {\n\t\t\t// Utility\n\t\t\t_datasetIndex: me.index,\n\t\t\t_index: index,\n\t\t\t_scale: scale,\n\n\t\t\t// Desired view properties\n\t\t\t_model: {\n\t\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\t\tborderColor: options.borderColor,\n\t\t\t\tborderWidth: options.borderWidth,\n\t\t\t\tborderAlign: options.borderAlign,\n\t\t\t\tx: centerX,\n\t\t\t\ty: centerY,\n\t\t\t\tinnerRadius: 0,\n\t\t\t\touterRadius: reset ? resetRadius : distance,\n\t\t\t\tstartAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,\n\t\t\t\tendAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,\n\t\t\t\tlabel: helpers$1.valueAtIndexOrDefault(labels, index, labels[index])\n\t\t\t}\n\t\t});\n\n\t\tarc.pivot();\n\t},\n\n\tcountVisibleElements: function() {\n\t\tvar dataset = this.getDataset();\n\t\tvar meta = this.getMeta();\n\t\tvar count = 0;\n\n\t\thelpers$1.each(meta.data, function(element, index) {\n\t\t\tif (!isNaN(dataset.data[index]) && !element.hidden) {\n\t\t\t\tcount++;\n\t\t\t}\n\t\t});\n\n\t\treturn count;\n\t},\n\n\t/**\n\t * @protected\n\t */\n\tsetHoverStyle: function(arc) {\n\t\tvar model = arc._model;\n\t\tvar options = arc._options;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\t\tvar valueOrDefault = helpers$1.valueOrDefault;\n\n\t\tarc.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth,\n\t\t};\n\n\t\tmodel.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));\n\t\tmodel.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));\n\t\tmodel.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_computeAngle: function(index) {\n\t\tvar me = this;\n\t\tvar count = this.getMeta().count;\n\t\tvar dataset = me.getDataset();\n\t\tvar meta = me.getMeta();\n\n\t\tif (isNaN(dataset.data[index]) || meta.data[index].hidden) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// Scriptable options\n\t\tvar context = {\n\t\t\tchart: me.chart,\n\t\t\tdataIndex: index,\n\t\t\tdataset: dataset,\n\t\t\tdatasetIndex: me.index\n\t\t};\n\n\t\treturn resolve$3([\n\t\t\tme.chart.options.elements.arc.angle,\n\t\t\t(2 * Math.PI) / count\n\t\t], context, index);\n\t}\n});\n\ncore_defaults._set('pie', helpers$1.clone(core_defaults.doughnut));\ncore_defaults._set('pie', {\n\tcutoutPercentage: 0\n});\n\n// Pie charts are Doughnut chart with different defaults\nvar controller_pie = controller_doughnut;\n\nvar valueOrDefault$7 = helpers$1.valueOrDefault;\n\ncore_defaults._set('radar', {\n\tspanGaps: false,\n\tscale: {\n\t\ttype: 'radialLinear'\n\t},\n\telements: {\n\t\tline: {\n\t\t\tfill: 'start',\n\t\t\ttension: 0 // no bezier in radar\n\t\t}\n\t}\n});\n\nvar controller_radar = core_datasetController.extend({\n\tdatasetElementType: elements.Line,\n\n\tdataElementType: elements.Point,\n\n\tlinkScales: helpers$1.noop,\n\n\t/**\n\t * @private\n\t */\n\t_datasetElementOptions: [\n\t\t'backgroundColor',\n\t\t'borderWidth',\n\t\t'borderColor',\n\t\t'borderCapStyle',\n\t\t'borderDash',\n\t\t'borderDashOffset',\n\t\t'borderJoinStyle',\n\t\t'fill'\n\t],\n\n\t/**\n\t * @private\n\t */\n\t_dataElementOptions: {\n\t\tbackgroundColor: 'pointBackgroundColor',\n\t\tborderColor: 'pointBorderColor',\n\t\tborderWidth: 'pointBorderWidth',\n\t\thitRadius: 'pointHitRadius',\n\t\thoverBackgroundColor: 'pointHoverBackgroundColor',\n\t\thoverBorderColor: 'pointHoverBorderColor',\n\t\thoverBorderWidth: 'pointHoverBorderWidth',\n\t\thoverRadius: 'pointHoverRadius',\n\t\tpointStyle: 'pointStyle',\n\t\tradius: 'pointRadius',\n\t\trotation: 'pointRotation'\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getIndexScaleId: function() {\n\t\treturn this.chart.scale.id;\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_getValueScaleId: function() {\n\t\treturn this.chart.scale.id;\n\t},\n\n\tupdate: function(reset) {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar line = meta.dataset;\n\t\tvar points = meta.data || [];\n\t\tvar scale = me.chart.scale;\n\t\tvar config = me._config;\n\t\tvar i, ilen;\n\n\t\t// Compatibility: If the properties are defined with only the old name, use those values\n\t\tif (config.tension !== undefined && config.lineTension === undefined) {\n\t\t\tconfig.lineTension = config.tension;\n\t\t}\n\n\t\t// Utility\n\t\tline._scale = scale;\n\t\tline._datasetIndex = me.index;\n\t\t// Data\n\t\tline._children = points;\n\t\tline._loop = true;\n\t\t// Model\n\t\tline._model = me._resolveDatasetElementOptions(line);\n\n\t\tline.pivot();\n\n\t\t// Update Points\n\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\tme.updateElement(points[i], i, reset);\n\t\t}\n\n\t\t// Update bezier control points\n\t\tme.updateBezierControlPoints();\n\n\t\t// Now pivot the point for animation\n\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\tpoints[i].pivot();\n\t\t}\n\t},\n\n\tupdateElement: function(point, index, reset) {\n\t\tvar me = this;\n\t\tvar custom = point.custom || {};\n\t\tvar dataset = me.getDataset();\n\t\tvar scale = me.chart.scale;\n\t\tvar pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);\n\t\tvar options = me._resolveDataElementOptions(point, index);\n\t\tvar lineModel = me.getMeta().dataset._model;\n\t\tvar x = reset ? scale.xCenter : pointPosition.x;\n\t\tvar y = reset ? scale.yCenter : pointPosition.y;\n\n\t\t// Utility\n\t\tpoint._scale = scale;\n\t\tpoint._options = options;\n\t\tpoint._datasetIndex = me.index;\n\t\tpoint._index = index;\n\n\t\t// Desired view properties\n\t\tpoint._model = {\n\t\t\tx: x, // value not used in dataset scale, but we want a consistent API between scales\n\t\t\ty: y,\n\t\t\tskip: custom.skip || isNaN(x) || isNaN(y),\n\t\t\t// Appearance\n\t\t\tradius: options.radius,\n\t\t\tpointStyle: options.pointStyle,\n\t\t\trotation: options.rotation,\n\t\t\tbackgroundColor: options.backgroundColor,\n\t\t\tborderColor: options.borderColor,\n\t\t\tborderWidth: options.borderWidth,\n\t\t\ttension: valueOrDefault$7(custom.tension, lineModel ? lineModel.tension : 0),\n\n\t\t\t// Tooltip\n\t\t\thitRadius: options.hitRadius\n\t\t};\n\t},\n\n\t/**\n\t * @private\n\t */\n\t_resolveDatasetElementOptions: function() {\n\t\tvar me = this;\n\t\tvar config = me._config;\n\t\tvar options = me.chart.options;\n\t\tvar values = core_datasetController.prototype._resolveDatasetElementOptions.apply(me, arguments);\n\n\t\tvalues.spanGaps = valueOrDefault$7(config.spanGaps, options.spanGaps);\n\t\tvalues.tension = valueOrDefault$7(config.lineTension, options.elements.line.tension);\n\n\t\treturn values;\n\t},\n\n\tupdateBezierControlPoints: function() {\n\t\tvar me = this;\n\t\tvar meta = me.getMeta();\n\t\tvar area = me.chart.chartArea;\n\t\tvar points = meta.data || [];\n\t\tvar i, ilen, model, controlPoints;\n\n\t\t// Only consider points that are drawn in case the spanGaps option is used\n\t\tif (meta.dataset._model.spanGaps) {\n\t\t\tpoints = points.filter(function(pt) {\n\t\t\t\treturn !pt._model.skip;\n\t\t\t});\n\t\t}\n\n\t\tfunction capControlPoint(pt, min, max) {\n\t\t\treturn Math.max(Math.min(pt, max), min);\n\t\t}\n\n\t\tfor (i = 0, ilen = points.length; i < ilen; ++i) {\n\t\t\tmodel = points[i]._model;\n\t\t\tcontrolPoints = helpers$1.splineCurve(\n\t\t\t\thelpers$1.previousItem(points, i, true)._model,\n\t\t\t\tmodel,\n\t\t\t\thelpers$1.nextItem(points, i, true)._model,\n\t\t\t\tmodel.tension\n\t\t\t);\n\n\t\t\t// Prevent the bezier going outside of the bounds of the graph\n\t\t\tmodel.controlPointPreviousX = capControlPoint(controlPoints.previous.x, area.left, area.right);\n\t\t\tmodel.controlPointPreviousY = capControlPoint(controlPoints.previous.y, area.top, area.bottom);\n\t\t\tmodel.controlPointNextX = capControlPoint(controlPoints.next.x, area.left, area.right);\n\t\t\tmodel.controlPointNextY = capControlPoint(controlPoints.next.y, area.top, area.bottom);\n\t\t}\n\t},\n\n\tsetHoverStyle: function(point) {\n\t\tvar model = point._model;\n\t\tvar options = point._options;\n\t\tvar getHoverColor = helpers$1.getHoverColor;\n\n\t\tpoint.$previousStyle = {\n\t\t\tbackgroundColor: model.backgroundColor,\n\t\t\tborderColor: model.borderColor,\n\t\t\tborderWidth: model.borderWidth,\n\t\t\tradius: model.radius\n\t\t};\n\n\t\tmodel.backgroundColor = valueOrDefault$7(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));\n\t\tmodel.borderColor = valueOrDefault$7(options.hoverBorderColor, getHoverColor(options.borderColor));\n\t\tmodel.borderWidth = valueOrDefault$7(options.hoverBorderWidth, options.borderWidth);\n\t\tmodel.radius = valueOrDefault$7(options.hoverRadius, options.radius);\n\t}\n});\n\ncore_defaults._set('scatter', {\n\thover: {\n\t\tmode: 'single'\n\t},\n\n\tscales: {\n\t\txAxes: [{\n\t\t\tid: 'x-axis-1', // need an ID so datasets can reference the scale\n\t\t\ttype: 'linear', // scatter should not use a category axis\n\t\t\tposition: 'bottom'\n\t\t}],\n\t\tyAxes: [{\n\t\t\tid: 'y-axis-1',\n\t\t\ttype: 'linear',\n\t\t\tposition: 'left'\n\t\t}]\n\t},\n\n\ttooltips: {\n\t\tcallbacks: {\n\t\t\ttitle: function() {\n\t\t\t\treturn ''; // doesn't make sense for scatter since data are formatted as a point\n\t\t\t},\n\t\t\tlabel: function(item) {\n\t\t\t\treturn '(' + item.xLabel + ', ' + item.yLabel + ')';\n\t\t\t}\n\t\t}\n\t}\n});\n\ncore_defaults._set('global', {\n\tdatasets: {\n\t\tscatter: {\n\t\t\tshowLine: false\n\t\t}\n\t}\n});\n\n// Scatter charts use line controllers\nvar controller_scatter = controller_line;\n\n// NOTE export a map in which the key represents the controller type, not\n// the class, and so must be CamelCase in order to be correctly retrieved\n// by the controller in core.controller.js (`controllers[meta.type]`).\n\nvar controllers = {\n\tbar: controller_bar,\n\tbubble: controller_bubble,\n\tdoughnut: controller_doughnut,\n\thorizontalBar: controller_horizontalBar,\n\tline: controller_line,\n\tpolarArea: controller_polarArea,\n\tpie: controller_pie,\n\tradar: controller_radar,\n\tscatter: controller_scatter\n};\n\n/**\n * Helper function to get relative position for an event\n * @param {Event|IEvent} event - The event to get the position for\n * @param {Chart} chart - The chart\n * @returns {object} the event position\n */\nfunction getRelativePosition(e, chart) {\n\tif (e.native) {\n\t\treturn {\n\t\t\tx: e.x,\n\t\t\ty: e.y\n\t\t};\n\t}\n\n\treturn helpers$1.getRelativePosition(e, chart);\n}\n\n/**\n * Helper function to traverse all of the visible elements in the chart\n * @param {Chart} chart - the chart\n * @param {function} handler - the callback to execute for each visible item\n */\nfunction parseVisibleItems(chart, handler) {\n\tvar metasets = chart._getSortedVisibleDatasetMetas();\n\tvar metadata, i, j, ilen, jlen, element;\n\n\tfor (i = 0, ilen = metasets.length; i < ilen; ++i) {\n\t\tmetadata = metasets[i].data;\n\t\tfor (j = 0, jlen = metadata.length; j < jlen; ++j) {\n\t\t\telement = metadata[j];\n\t\t\tif (!element._view.skip) {\n\t\t\t\thandler(element);\n\t\t\t}\n\t\t}\n\t}\n}\n\n/**\n * Helper function to get the items that intersect the event position\n * @param {ChartElement[]} items - elements to filter\n * @param {object} position - the point to be nearest to\n * @return {ChartElement[]} the nearest items\n */\nfunction getIntersectItems(chart, position) {\n\tvar elements = [];\n\n\tparseVisibleItems(chart, function(element) {\n\t\tif (element.inRange(position.x, position.y)) {\n\t\t\telements.push(element);\n\t\t}\n\t});\n\n\treturn elements;\n}\n\n/**\n * Helper function to get the items nearest to the event position considering all visible items in teh chart\n * @param {Chart} chart - the chart to look at elements from\n * @param {object} position - the point to be nearest to\n * @param {boolean} intersect - if true, only consider items that intersect the position\n * @param {function} distanceMetric - function to provide the distance between points\n * @return {ChartElement[]} the nearest items\n */\nfunction getNearestItems(chart, position, intersect, distanceMetric) {\n\tvar minDistance = Number.POSITIVE_INFINITY;\n\tvar nearestItems = [];\n\n\tparseVisibleItems(chart, function(element) {\n\t\tif (intersect && !element.inRange(position.x, position.y)) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar center = element.getCenterPoint();\n\t\tvar distance = distanceMetric(position, center);\n\t\tif (distance < minDistance) {\n\t\t\tnearestItems = [element];\n\t\t\tminDistance = distance;\n\t\t} else if (distance === minDistance) {\n\t\t\t// Can have multiple items at the same distance in which case we sort by size\n\t\t\tnearestItems.push(element);\n\t\t}\n\t});\n\n\treturn nearestItems;\n}\n\n/**\n * Get a distance metric function for two points based on the\n * axis mode setting\n * @param {string} axis - the axis mode. x|y|xy\n */\nfunction getDistanceMetricForAxis(axis) {\n\tvar useX = axis.indexOf('x') !== -1;\n\tvar useY = axis.indexOf('y') !== -1;\n\n\treturn function(pt1, pt2) {\n\t\tvar deltaX = useX ? Math.abs(pt1.x - pt2.x) : 0;\n\t\tvar deltaY = useY ? Math.abs(pt1.y - pt2.y) : 0;\n\t\treturn Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));\n\t};\n}\n\nfunction indexMode(chart, e, options) {\n\tvar position = getRelativePosition(e, chart);\n\t// Default axis for index mode is 'x' to match old behaviour\n\toptions.axis = options.axis || 'x';\n\tvar distanceMetric = getDistanceMetricForAxis(options.axis);\n\tvar items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);\n\tvar elements = [];\n\n\tif (!items.length) {\n\t\treturn [];\n\t}\n\n\tchart._getSortedVisibleDatasetMetas().forEach(function(meta) {\n\t\tvar element = meta.data[items[0]._index];\n\n\t\t// don't count items that are skipped (null data)\n\t\tif (element && !element._view.skip) {\n\t\t\telements.push(element);\n\t\t}\n\t});\n\n\treturn elements;\n}\n\n/**\n * @interface IInteractionOptions\n */\n/**\n * If true, only consider items that intersect the point\n * @name IInterfaceOptions#boolean\n * @type Boolean\n */\n\n/**\n * Contains interaction related functions\n * @namespace Chart.Interaction\n */\nvar core_interaction = {\n\t// Helper function for different modes\n\tmodes: {\n\t\tsingle: function(chart, e) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\tvar elements = [];\n\n\t\t\tparseVisibleItems(chart, function(element) {\n\t\t\t\tif (element.inRange(position.x, position.y)) {\n\t\t\t\t\telements.push(element);\n\t\t\t\t\treturn elements;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn elements.slice(0, 1);\n\t\t},\n\n\t\t/**\n\t\t * @function Chart.Interaction.modes.label\n\t\t * @deprecated since version 2.4.0\n\t\t * @todo remove at version 3\n\t\t * @private\n\t\t */\n\t\tlabel: indexMode,\n\n\t\t/**\n\t\t * Returns items at the same index. If the options.intersect parameter is true, we only return items if we intersect something\n\t\t * If the options.intersect mode is false, we find the nearest item and return the items at the same index as that item\n\t\t * @function Chart.Interaction.modes.index\n\t\t * @since v2.4.0\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @param {IInteractionOptions} options - options to use during interaction\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\tindex: indexMode,\n\n\t\t/**\n\t\t * Returns items in the same dataset. If the options.intersect parameter is true, we only return items if we intersect something\n\t\t * If the options.intersect is false, we find the nearest item and return the items in that dataset\n\t\t * @function Chart.Interaction.modes.dataset\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @param {IInteractionOptions} options - options to use during interaction\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\tdataset: function(chart, e, options) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\toptions.axis = options.axis || 'xy';\n\t\t\tvar distanceMetric = getDistanceMetricForAxis(options.axis);\n\t\t\tvar items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);\n\n\t\t\tif (items.length > 0) {\n\t\t\t\titems = chart.getDatasetMeta(items[0]._datasetIndex).data;\n\t\t\t}\n\n\t\t\treturn items;\n\t\t},\n\n\t\t/**\n\t\t * @function Chart.Interaction.modes.x-axis\n\t\t * @deprecated since version 2.4.0. Use index mode and intersect == true\n\t\t * @todo remove at version 3\n\t\t * @private\n\t\t */\n\t\t'x-axis': function(chart, e) {\n\t\t\treturn indexMode(chart, e, {intersect: false});\n\t\t},\n\n\t\t/**\n\t\t * Point mode returns all elements that hit test based on the event position\n\t\t * of the event\n\t\t * @function Chart.Interaction.modes.intersect\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\tpoint: function(chart, e) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\treturn getIntersectItems(chart, position);\n\t\t},\n\n\t\t/**\n\t\t * nearest mode returns the element closest to the point\n\t\t * @function Chart.Interaction.modes.intersect\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @param {IInteractionOptions} options - options to use\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\tnearest: function(chart, e, options) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\toptions.axis = options.axis || 'xy';\n\t\t\tvar distanceMetric = getDistanceMetricForAxis(options.axis);\n\t\t\treturn getNearestItems(chart, position, options.intersect, distanceMetric);\n\t\t},\n\n\t\t/**\n\t\t * x mode returns the elements that hit-test at the current x coordinate\n\t\t * @function Chart.Interaction.modes.x\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @param {IInteractionOptions} options - options to use\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\tx: function(chart, e, options) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\tvar items = [];\n\t\t\tvar intersectsItem = false;\n\n\t\t\tparseVisibleItems(chart, function(element) {\n\t\t\t\tif (element.inXRange(position.x)) {\n\t\t\t\t\titems.push(element);\n\t\t\t\t}\n\n\t\t\t\tif (element.inRange(position.x, position.y)) {\n\t\t\t\t\tintersectsItem = true;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// If we want to trigger on an intersect and we don't have any items\n\t\t\t// that intersect the position, return nothing\n\t\t\tif (options.intersect && !intersectsItem) {\n\t\t\t\titems = [];\n\t\t\t}\n\t\t\treturn items;\n\t\t},\n\n\t\t/**\n\t\t * y mode returns the elements that hit-test at the current y coordinate\n\t\t * @function Chart.Interaction.modes.y\n\t\t * @param {Chart} chart - the chart we are returning items from\n\t\t * @param {Event} e - the event we are find things at\n\t\t * @param {IInteractionOptions} options - options to use\n\t\t * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned\n\t\t */\n\t\ty: function(chart, e, options) {\n\t\t\tvar position = getRelativePosition(e, chart);\n\t\t\tvar items = [];\n\t\t\tvar intersectsItem = false;\n\n\t\t\tparseVisibleItems(chart, function(element) {\n\t\t\t\tif (element.inYRange(position.y)) {\n\t\t\t\t\titems.push(element);\n\t\t\t\t}\n\n\t\t\t\tif (element.inRange(position.x, position.y)) {\n\t\t\t\t\tintersectsItem = true;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// If we want to trigger on an intersect and we don't have any items\n\t\t\t// that intersect the position, return nothing\n\t\t\tif (options.intersect && !intersectsItem) {\n\t\t\t\titems = [];\n\t\t\t}\n\t\t\treturn items;\n\t\t}\n\t}\n};\n\nvar extend = helpers$1.extend;\n\nfunction filterByPosition(array, position) {\n\treturn helpers$1.where(array, function(v) {\n\t\treturn v.pos === position;\n\t});\n}\n\nfunction sortByWeight(array, reverse) {\n\treturn array.sort(function(a, b) {\n\t\tvar v0 = reverse ? b : a;\n\t\tvar v1 = reverse ? a : b;\n\t\treturn v0.weight === v1.weight ?\n\t\t\tv0.index - v1.index :\n\t\t\tv0.weight - v1.weight;\n\t});\n}\n\nfunction wrapBoxes(boxes) {\n\tvar layoutBoxes = [];\n\tvar i, ilen, box;\n\n\tfor (i = 0, ilen = (boxes || []).length; i < ilen; ++i) {\n\t\tbox = boxes[i];\n\t\tlayoutBoxes.push({\n\t\t\tindex: i,\n\t\t\tbox: box,\n\t\t\tpos: box.position,\n\t\t\thorizontal: box.isHorizontal(),\n\t\t\tweight: box.weight\n\t\t});\n\t}\n\treturn layoutBoxes;\n}\n\nfunction setLayoutDims(layouts, params) {\n\tvar i, ilen, layout;\n\tfor (i = 0, ilen = layouts.length; i < ilen; ++i) {\n\t\tlayout = layouts[i];\n\t\t// store width used instead of chartArea.w in fitBoxes\n\t\tlayout.width = layout.horizontal\n\t\t\t? layout.box.fullWidth && params.availableWidth\n\t\t\t: params.vBoxMaxWidth;\n\t\t// store height used instead of chartArea.h in fitBoxes\n\t\tlayout.height = layout.horizontal && params.hBoxMaxHeight;\n\t}\n}\n\nfunction buildLayoutBoxes(boxes) {\n\tvar layoutBoxes = wrapBoxes(boxes);\n\tvar left = sortByWeight(filterByPosition(layoutBoxes, 'left'), true);\n\tvar right = sortByWeight(filterByPosition(layoutBoxes, 'right'));\n\tvar top = sortByWeight(filterByPosition(layoutBoxes, 'top'), true);\n\tvar bottom = sortByWeight(filterByPosition(layoutBoxes, 'bottom'));\n\n\treturn {\n\t\tleftAndTop: left.concat(top),\n\t\trightAndBottom: right.concat(bottom),\n\t\tchartArea: filterByPosition(layoutBoxes, 'chartArea'),\n\t\tvertical: left.concat(right),\n\t\thorizontal: top.concat(bottom)\n\t};\n}\n\nfunction getCombinedMax(maxPadding, chartArea, a, b) {\n\treturn Math.max(maxPadding[a], chartArea[a]) + Math.max(maxPadding[b], chartArea[b]);\n}\n\nfunction updateDims(chartArea, params, layout) {\n\tvar box = layout.box;\n\tvar maxPadding = chartArea.maxPadding;\n\tvar newWidth, newHeight;\n\n\tif (layout.size) {\n\t\t// this layout was already counted for, lets first reduce old size\n\t\tchartArea[layout.pos] -= layout.size;\n\t}\n\tlayout.size = layout.horizontal ? box.height : box.width;\n\tchartArea[layout.pos] += layout.size;\n\n\tif (box.getPadding) {\n\t\tvar boxPadding = box.getPadding();\n\t\tmaxPadding.top = Math.max(maxPadding.top, boxPadding.top);\n\t\tmaxPadding.left = Math.max(maxPadding.left, boxPadding.left);\n\t\tmaxPadding.bottom = Math.max(maxPadding.bottom, boxPadding.bottom);\n\t\tmaxPadding.right = Math.max(maxPadding.right, boxPadding.right);\n\t}\n\n\tnewWidth = params.outerWidth - getCombinedMax(maxPadding, chartArea, 'left', 'right');\n\tnewHeight = params.outerHeight - getCombinedMax(maxPadding, chartArea, 'top', 'bottom');\n\n\tif (newWidth !== chartArea.w || newHeight !== chartArea.h) {\n\t\tchartArea.w = newWidth;\n\t\tchartArea.h = newHeight;\n\n\t\t// return true if chart area changed in layout's direction\n\t\treturn layout.horizontal ? newWidth !== chartArea.w : newHeight !== chartArea.h;\n\t}\n}\n\nfunction handleMaxPadding(chartArea) {\n\tvar maxPadding = chartArea.maxPadding;\n\n\tfunction updatePos(pos) {\n\t\tvar change = Math.max(maxPadding[pos] - chartArea[pos], 0);\n\t\tchartArea[pos] += change;\n\t\treturn change;\n\t}\n\tchartArea.y += updatePos('top');\n\tchartArea.x += updatePos('left');\n\tupdatePos('right');\n\tupdatePos('bottom');\n}\n\nfunction getMargins(horizontal, chartArea) {\n\tvar maxPadding = chartArea.maxPadding;\n\n\tfunction marginForPositions(positions) {\n\t\tvar margin = {left: 0, top: 0, right: 0, bottom: 0};\n\t\tpositions.forEach(function(pos) {\n\t\t\tmargin[pos] = Math.max(chartArea[pos], maxPadding[pos]);\n\t\t});\n\t\treturn margin;\n\t}\n\n\treturn horizontal\n\t\t? marginForPositions(['left', 'right'])\n\t\t: marginForPositions(['top', 'bottom']);\n}\n\nfunction fitBoxes(boxes, chartArea, params) {\n\tvar refitBoxes = [];\n\tvar i, ilen, layout, box, refit, changed;\n\n\tfor (i = 0, ilen = boxes.length; i < ilen; ++i) {\n\t\tlayout = boxes[i];\n\t\tbox = layout.box;\n\n\t\tbox.update(\n\t\t\tlayout.width || chartArea.w,\n\t\t\tlayout.height || chartArea.h,\n\t\t\tgetMargins(layout.horizontal, chartArea)\n\t\t);\n\t\tif (updateDims(chartArea, params, layout)) {\n\t\t\tchanged = true;\n\t\t\tif (refitBoxes.length) {\n\t\t\t\t// Dimensions changed and there were non full width boxes before this\n\t\t\t\t// -> we have to refit those\n\t\t\t\trefit = true;\n\t\t\t}\n\t\t}\n\t\tif (!box.fullWidth) { // fullWidth boxes don't need to be re-fitted in any case\n\t\t\trefitBoxes.push(layout);\n\t\t}\n\t}\n\n\treturn refit ? fitBoxes(refitBoxes, chartArea, params) || changed : changed;\n}\n\nfunction placeBoxes(boxes, chartArea, params) {\n\tvar userPadding = params.padding;\n\tvar x = chartArea.x;\n\tvar y = chartArea.y;\n\tvar i, ilen, layout, box;\n\n\tfor (i = 0, ilen = boxes.length; i < ilen; ++i) {\n\t\tlayout = boxes[i];\n\t\tbox = layout.box;\n\t\tif (layout.horizontal) {\n\t\t\tbox.left = box.fullWidth ? userPadding.left : chartArea.left;\n\t\t\tbox.right = box.fullWidth ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w;\n\t\t\tbox.top = y;\n\t\t\tbox.bottom = y + box.height;\n\t\t\tbox.width = box.right - box.left;\n\t\t\ty = box.bottom;\n\t\t} else {\n\t\t\tbox.left = x;\n\t\t\tbox.right = x + box.width;\n\t\t\tbox.top = chartArea.top;\n\t\t\tbox.bottom = chartArea.top + chartArea.h;\n\t\t\tbox.height = box.bottom - box.top;\n\t\t\tx = box.right;\n\t\t}\n\t}\n\n\tchartArea.x = x;\n\tchartArea.y = y;\n}\n\ncore_defaults._set('global', {\n\tlayout: {\n\t\tpadding: {\n\t\t\ttop: 0,\n\t\t\tright: 0,\n\t\t\tbottom: 0,\n\t\t\tleft: 0\n\t\t}\n\t}\n});\n\n/**\n * @interface ILayoutItem\n * @prop {string} position - The position of the item in the chart layout. Possible values are\n * 'left', 'top', 'right', 'bottom', and 'chartArea'\n * @prop {number} weight - The weight used to sort the item. Higher weights are further away from the chart area\n * @prop {boolean} fullWidth - if true, and the item is horizontal, then push vertical boxes down\n * @prop {function} isHorizontal - returns true if the layout item is horizontal (ie. top or bottom)\n * @prop {function} update - Takes two parameters: width and height. Returns size of item\n * @prop {function} getPadding - Returns an object with padding on the edges\n * @prop {number} width - Width of item. Must be valid after update()\n * @prop {number} height - Height of item. Must be valid after update()\n * @prop {number} left - Left edge of the item. Set by layout system and cannot be used in update\n * @prop {number} top - Top edge of the item. Set by layout system and cannot be used in update\n * @prop {number} right - Right edge of the item. Set by layout system and cannot be used in update\n * @prop {number} bottom - Bottom edge of the item. Set by layout system and cannot be used in update\n */\n\n// The layout service is very self explanatory. It's responsible for the layout within a chart.\n// Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need\n// It is this service's responsibility of carrying out that layout.\nvar core_layouts = {\n\tdefaults: {},\n\n\t/**\n\t * Register a box to a chart.\n\t * A box is simply a reference to an object that requires layout. eg. Scales, Legend, Title.\n\t * @param {Chart} chart - the chart to use\n\t * @param {ILayoutItem} item - the item to add to be layed out\n\t */\n\taddBox: function(chart, item) {\n\t\tif (!chart.boxes) {\n\t\t\tchart.boxes = [];\n\t\t}\n\n\t\t// initialize item with default values\n\t\titem.fullWidth = item.fullWidth || false;\n\t\titem.position = item.position || 'top';\n\t\titem.weight = item.weight || 0;\n\t\titem._layers = item._layers || function() {\n\t\t\treturn [{\n\t\t\t\tz: 0,\n\t\t\t\tdraw: function() {\n\t\t\t\t\titem.draw.apply(item, arguments);\n\t\t\t\t}\n\t\t\t}];\n\t\t};\n\n\t\tchart.boxes.push(item);\n\t},\n\n\t/**\n\t * Remove a layoutItem from a chart\n\t * @param {Chart} chart - the chart to remove the box from\n\t * @param {ILayoutItem} layoutItem - the item to remove from the layout\n\t */\n\tremoveBox: function(chart, layoutItem) {\n\t\tvar index = chart.boxes ? chart.boxes.indexOf(layoutItem) : -1;\n\t\tif (index !== -1) {\n\t\t\tchart.boxes.splice(index, 1);\n\t\t}\n\t},\n\n\t/**\n\t * Sets (or updates) options on the given `item`.\n\t * @param {Chart} chart - the chart in which the item lives (or will be added to)\n\t * @param {ILayoutItem} item - the item to configure with the given options\n\t * @param {object} options - the new item options.\n\t */\n\tconfigure: function(chart, item, options) {\n\t\tvar props = ['fullWidth', 'position', 'weight'];\n\t\tvar ilen = props.length;\n\t\tvar i = 0;\n\t\tvar prop;\n\n\t\tfor (; i < ilen; ++i) {\n\t\t\tprop = props[i];\n\t\t\tif (options.hasOwnProperty(prop)) {\n\t\t\t\titem[prop] = options[prop];\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * Fits boxes of the given chart into the given size by having each box measure itself\n\t * then running a fitting algorithm\n\t * @param {Chart} chart - the chart\n\t * @param {number} width - the width to fit into\n\t * @param {number} height - the height to fit into\n\t */\n\tupdate: function(chart, width, height) {\n\t\tif (!chart) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar layoutOptions = chart.options.layout || {};\n\t\tvar padding = helpers$1.options.toPadding(layoutOptions.padding);\n\n\t\tvar availableWidth = width - padding.width;\n\t\tvar availableHeight = height - padding.height;\n\t\tvar boxes = buildLayoutBoxes(chart.boxes);\n\t\tvar verticalBoxes = boxes.vertical;\n\t\tvar horizontalBoxes = boxes.horizontal;\n\n\t\t// Essentially we now have any number of boxes on each of the 4 sides.\n\t\t// Our canvas looks like the following.\n\t\t// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and\n\t\t// B1 is the bottom axis\n\t\t// There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays\n\t\t// These locations are single-box locations only, when trying to register a chartArea location that is already taken,\n\t\t// an error will be thrown.\n\t\t//\n\t\t// |----------------------------------------------------|\n\t\t// | T1 (Full Width) |\n\t\t// |----------------------------------------------------|\n\t\t// | | | T2 | |\n\t\t// | |----|-------------------------------------|----|\n\t\t// | | | C1 | | C2 | |\n\t\t// | | |----| |----| |\n\t\t// | | | | |\n\t\t// | L1 | L2 | ChartArea (C0) | R1 |\n\t\t// | | | | |\n\t\t// | | |----| |----| |\n\t\t// | | | C3 | | C4 | |\n\t\t// | |----|-------------------------------------|----|\n\t\t// | | | B1 | |\n\t\t// |----------------------------------------------------|\n\t\t// | B2 (Full Width) |\n\t\t// |----------------------------------------------------|\n\t\t//\n\n\t\tvar params = Object.freeze({\n\t\t\touterWidth: width,\n\t\t\touterHeight: height,\n\t\t\tpadding: padding,\n\t\t\tavailableWidth: availableWidth,\n\t\t\tvBoxMaxWidth: availableWidth / 2 / verticalBoxes.length,\n\t\t\thBoxMaxHeight: availableHeight / 2\n\t\t});\n\t\tvar chartArea = extend({\n\t\t\tmaxPadding: extend({}, padding),\n\t\t\tw: availableWidth,\n\t\t\th: availableHeight,\n\t\t\tx: padding.left,\n\t\t\ty: padding.top\n\t\t}, padding);\n\n\t\tsetLayoutDims(verticalBoxes.concat(horizontalBoxes), params);\n\n\t\t// First fit vertical boxes\n\t\tfitBoxes(verticalBoxes, chartArea, params);\n\n\t\t// Then fit horizontal boxes\n\t\tif (fitBoxes(horizontalBoxes, chartArea, params)) {\n\t\t\t// if the area changed, re-fit vertical boxes\n\t\t\tfitBoxes(verticalBoxes, chartArea, params);\n\t\t}\n\n\t\thandleMaxPadding(chartArea);\n\n\t\t// Finally place the boxes to correct coordinates\n\t\tplaceBoxes(boxes.leftAndTop, chartArea, params);\n\n\t\t// Move to opposite side of chart\n\t\tchartArea.x += chartArea.w;\n\t\tchartArea.y += chartArea.h;\n\n\t\tplaceBoxes(boxes.rightAndBottom, chartArea, params);\n\n\t\tchart.chartArea = {\n\t\t\tleft: chartArea.left,\n\t\t\ttop: chartArea.top,\n\t\t\tright: chartArea.left + chartArea.w,\n\t\t\tbottom: chartArea.top + chartArea.h\n\t\t};\n\n\t\t// Finally update boxes in chartArea (radial scale for example)\n\t\thelpers$1.each(boxes.chartArea, function(layout) {\n\t\t\tvar box = layout.box;\n\t\t\textend(box, chart.chartArea);\n\t\t\tbox.update(chartArea.w, chartArea.h);\n\t\t});\n\t}\n};\n\n/**\n * Platform fallback implementation (minimal).\n * @see https://github.com/chartjs/Chart.js/pull/4591#issuecomment-319575939\n */\n\nvar platform_basic = {\n\tacquireContext: function(item) {\n\t\tif (item && item.canvas) {\n\t\t\t// Support for any object associated to a canvas (including a context2d)\n\t\t\titem = item.canvas;\n\t\t}\n\n\t\treturn item && item.getContext('2d') || null;\n\t}\n};\n\nvar platform_dom = \"/*\\n * DOM element rendering detection\\n * https://davidwalsh.name/detect-node-insertion\\n */\\n@keyframes chartjs-render-animation {\\n\\tfrom { opacity: 0.99; }\\n\\tto { opacity: 1; }\\n}\\n\\n.chartjs-render-monitor {\\n\\tanimation: chartjs-render-animation 0.001s;\\n}\\n\\n/*\\n * DOM element resizing detection\\n * https://github.com/marcj/css-element-queries\\n */\\n.chartjs-size-monitor,\\n.chartjs-size-monitor-expand,\\n.chartjs-size-monitor-shrink {\\n\\tposition: absolute;\\n\\tdirection: ltr;\\n\\tleft: 0;\\n\\ttop: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\toverflow: hidden;\\n\\tpointer-events: none;\\n\\tvisibility: hidden;\\n\\tz-index: -1;\\n}\\n\\n.chartjs-size-monitor-expand > div {\\n\\tposition: absolute;\\n\\twidth: 1000000px;\\n\\theight: 1000000px;\\n\\tleft: 0;\\n\\ttop: 0;\\n}\\n\\n.chartjs-size-monitor-shrink > div {\\n\\tposition: absolute;\\n\\twidth: 200%;\\n\\theight: 200%;\\n\\tleft: 0;\\n\\ttop: 0;\\n}\\n\";\n\nvar platform_dom$1 = /*#__PURE__*/Object.freeze({\n__proto__: null,\n'default': platform_dom\n});\n\nvar stylesheet = getCjsExportFromNamespace(platform_dom$1);\n\nvar EXPANDO_KEY = '$chartjs';\nvar CSS_PREFIX = 'chartjs-';\nvar CSS_SIZE_MONITOR = CSS_PREFIX + 'size-monitor';\nvar CSS_RENDER_MONITOR = CSS_PREFIX + 'render-monitor';\nvar CSS_RENDER_ANIMATION = CSS_PREFIX + 'render-animation';\nvar ANIMATION_START_EVENTS = ['animationstart', 'webkitAnimationStart'];\n\n/**\n * DOM event types -> Chart.js event types.\n * Note: only events with different types are mapped.\n * @see https://developer.mozilla.org/en-US/docs/Web/Events\n */\nvar EVENT_TYPES = {\n\ttouchstart: 'mousedown',\n\ttouchmove: 'mousemove',\n\ttouchend: 'mouseup',\n\tpointerenter: 'mouseenter',\n\tpointerdown: 'mousedown',\n\tpointermove: 'mousemove',\n\tpointerup: 'mouseup',\n\tpointerleave: 'mouseout',\n\tpointerout: 'mouseout'\n};\n\n/**\n * The \"used\" size is the final value of a dimension property after all calculations have\n * been performed. This method uses the computed style of `element` but returns undefined\n * if the computed style is not expressed in pixels. That can happen in some cases where\n * `element` has a size relative to its parent and this last one is not yet displayed,\n * for example because of `display: none` on a parent node.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/used_value\n * @returns {number} Size in pixels or undefined if unknown.\n */\nfunction readUsedSize(element, property) {\n\tvar value = helpers$1.getStyle(element, property);\n\tvar matches = value && value.match(/^(\\d+)(\\.\\d+)?px$/);\n\treturn matches ? Number(matches[1]) : undefined;\n}\n\n/**\n * Initializes the canvas style and render size without modifying the canvas display size,\n * since responsiveness is handled by the controller.resize() method. The config is used\n * to determine the aspect ratio to apply in case no explicit height has been specified.\n */\nfunction initCanvas(canvas, config) {\n\tvar style = canvas.style;\n\n\t// NOTE(SB) canvas.getAttribute('width') !== canvas.width: in the first case it\n\t// returns null or '' if no explicit value has been set to the canvas attribute.\n\tvar renderHeight = canvas.getAttribute('height');\n\tvar renderWidth = canvas.getAttribute('width');\n\n\t// Chart.js modifies some canvas values that we want to restore on destroy\n\tcanvas[EXPANDO_KEY] = {\n\t\tinitial: {\n\t\t\theight: renderHeight,\n\t\t\twidth: renderWidth,\n\t\t\tstyle: {\n\t\t\t\tdisplay: style.display,\n\t\t\t\theight: style.height,\n\t\t\t\twidth: style.width\n\t\t\t}\n\t\t}\n\t};\n\n\t// Force canvas to display as block to avoid extra space caused by inline\n\t// elements, which would interfere with the responsive resize process.\n\t// https://github.com/chartjs/Chart.js/issues/2538\n\tstyle.display = style.display || 'block';\n\n\tif (renderWidth === null || renderWidth === '') {\n\t\tvar displayWidth = readUsedSize(canvas, 'width');\n\t\tif (displayWidth !== undefined) {\n\t\t\tcanvas.width = displayWidth;\n\t\t}\n\t}\n\n\tif (renderHeight === null || renderHeight === '') {\n\t\tif (canvas.style.height === '') {\n\t\t\t// If no explicit render height and style height, let's apply the aspect ratio,\n\t\t\t// which one can be specified by the user but also by charts as default option\n\t\t\t// (i.e. options.aspectRatio). If not specified, use canvas aspect ratio of 2.\n\t\t\tcanvas.height = canvas.width / (config.options.aspectRatio || 2);\n\t\t} else {\n\t\t\tvar displayHeight = readUsedSize(canvas, 'height');\n\t\t\tif (displayWidth !== undefined) {\n\t\t\t\tcanvas.height = displayHeight;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn canvas;\n}\n\n/**\n * Detects support for options object argument in addEventListener.\n * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support\n * @private\n */\nvar supportsEventListenerOptions = (function() {\n\tvar supports = false;\n\ttry {\n\t\tvar options = Object.defineProperty({}, 'passive', {\n\t\t\t// eslint-disable-next-line getter-return\n\t\t\tget: function() {\n\t\t\t\tsupports = true;\n\t\t\t}\n\t\t});\n\t\twindow.addEventListener('e', null, options);\n\t} catch (e) {\n\t\t// continue regardless of error\n\t}\n\treturn supports;\n}());\n\n// Default passive to true as expected by Chrome for 'touchstart' and 'touchend' events.\n// https://github.com/chartjs/Chart.js/issues/4287\nvar eventListenerOptions = supportsEventListenerOptions ? {passive: true} : false;\n\nfunction addListener(node, type, listener) {\n\tnode.addEventListener(type, listener, eventListenerOptions);\n}\n\nfunction removeListener(node, type, listener) {\n\tnode.removeEventListener(type, listener, eventListenerOptions);\n}\n\nfunction createEvent(type, chart, x, y, nativeEvent) {\n\treturn {\n\t\ttype: type,\n\t\tchart: chart,\n\t\tnative: nativeEvent || null,\n\t\tx: x !== undefined ? x : null,\n\t\ty: y !== undefined ? y : null,\n\t};\n}\n\nfunction fromNativeEvent(event, chart) {\n\tvar type = EVENT_TYPES[event.type] || event.type;\n\tvar pos = helpers$1.getRelativePosition(event, chart);\n\treturn createEvent(type, chart, pos.x, pos.y, event);\n}\n\nfunction throttled(fn, thisArg) {\n\tvar ticking = false;\n\tvar args = [];\n\n\treturn function() {\n\t\targs = Array.prototype.slice.call(arguments);\n\t\tthisArg = thisArg || this;\n\n\t\tif (!ticking) {\n\t\t\tticking = true;\n\t\t\thelpers$1.requestAnimFrame.call(window, function() {\n\t\t\t\tticking = false;\n\t\t\t\tfn.apply(thisArg, args);\n\t\t\t});\n\t\t}\n\t};\n}\n\nfunction createDiv(cls) {\n\tvar el = document.createElement('div');\n\tel.className = cls || '';\n\treturn el;\n}\n\n// Implementation based on https://github.com/marcj/css-element-queries\nfunction createResizer(handler) {\n\tvar maxSize = 1000000;\n\n\t// NOTE(SB) Don't use innerHTML because it could be considered unsafe.\n\t// https://github.com/chartjs/Chart.js/issues/5902\n\tvar resizer = createDiv(CSS_SIZE_MONITOR);\n\tvar expand = createDiv(CSS_SIZE_MONITOR + '-expand');\n\tvar shrink = createDiv(CSS_SIZE_MONITOR + '-shrink');\n\n\texpand.appendChild(createDiv());\n\tshrink.appendChild(createDiv());\n\n\tresizer.appendChild(expand);\n\tresizer.appendChild(shrink);\n\tresizer._reset = function() {\n\t\texpand.scrollLeft = maxSize;\n\t\texpand.scrollTop = maxSize;\n\t\tshrink.scrollLeft = maxSize;\n\t\tshrink.scrollTop = maxSize;\n\t};\n\n\tvar onScroll = function() {\n\t\tresizer._reset();\n\t\thandler();\n\t};\n\n\taddListener(expand, 'scroll', onScroll.bind(expand, 'expand'));\n\taddListener(shrink, 'scroll', onScroll.bind(shrink, 'shrink'));\n\n\treturn resizer;\n}\n\n// https://davidwalsh.name/detect-node-insertion\nfunction watchForRender(node, handler) {\n\tvar expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});\n\tvar proxy = expando.renderProxy = function(e) {\n\t\tif (e.animationName === CSS_RENDER_ANIMATION) {\n\t\t\thandler();\n\t\t}\n\t};\n\n\thelpers$1.each(ANIMATION_START_EVENTS, function(type) {\n\t\taddListener(node, type, proxy);\n\t});\n\n\t// #4737: Chrome might skip the CSS animation when the CSS_RENDER_MONITOR class\n\t// is removed then added back immediately (same animation frame?). Accessing the\n\t// `offsetParent` property will force a reflow and re-evaluate the CSS animation.\n\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metrics\n\t// https://github.com/chartjs/Chart.js/issues/4737\n\texpando.reflow = !!node.offsetParent;\n\n\tnode.classList.add(CSS_RENDER_MONITOR);\n}\n\nfunction unwatchForRender(node) {\n\tvar expando = node[EXPANDO_KEY] || {};\n\tvar proxy = expando.renderProxy;\n\n\tif (proxy) {\n\t\thelpers$1.each(ANIMATION_START_EVENTS, function(type) {\n\t\t\tremoveListener(node, type, proxy);\n\t\t});\n\n\t\tdelete expando.renderProxy;\n\t}\n\n\tnode.classList.remove(CSS_RENDER_MONITOR);\n}\n\nfunction addResizeListener(node, listener, chart) {\n\tvar expando = node[EXPANDO_KEY] || (node[EXPANDO_KEY] = {});\n\n\t// Let's keep track of this added resizer and thus avoid DOM query when removing it.\n\tvar resizer = expando.resizer = createResizer(throttled(function() {\n\t\tif (expando.resizer) {\n\t\t\tvar container = chart.options.maintainAspectRatio && node.parentNode;\n\t\t\tvar w = container ? container.clientWidth : 0;\n\t\t\tlistener(createEvent('resize', chart));\n\t\t\tif (container && container.clientWidth < w && chart.canvas) {\n\t\t\t\t// If the container size shrank during chart resize, let's assume\n\t\t\t\t// scrollbar appeared. So we resize again with the scrollbar visible -\n\t\t\t\t// effectively making chart smaller and the scrollbar hidden again.\n\t\t\t\t// Because we are inside `throttled`, and currently `ticking`, scroll\n\t\t\t\t// events are ignored during this whole 2 resize process.\n\t\t\t\t// If we assumed wrong and something else happened, we are resizing\n\t\t\t\t// twice in a frame (potential performance issue)\n\t\t\t\tlistener(createEvent('resize', chart));\n\t\t\t}\n\t\t}\n\t}));\n\n\t// The resizer needs to be attached to the node parent, so we first need to be\n\t// sure that `node` is attached to the DOM before injecting the resizer element.\n\twatchForRender(node, function() {\n\t\tif (expando.resizer) {\n\t\t\tvar container = node.parentNode;\n\t\t\tif (container && container !== resizer.parentNode) {\n\t\t\t\tcontainer.insertBefore(resizer, container.firstChild);\n\t\t\t}\n\n\t\t\t// The container size might have changed, let's reset the resizer state.\n\t\t\tresizer._reset();\n\t\t}\n\t});\n}\n\nfunction removeResizeListener(node) {\n\tvar expando = node[EXPANDO_KEY] || {};\n\tvar resizer = expando.resizer;\n\n\tdelete expando.resizer;\n\tunwatchForRender(node);\n\n\tif (resizer && resizer.parentNode) {\n\t\tresizer.parentNode.removeChild(resizer);\n\t}\n}\n\n/**\n * Injects CSS styles inline if the styles are not already present.\n * @param {HTMLDocument|ShadowRoot} rootNode - the node to contain the