\n * \n * ```\n *\n * @public\n */\nvar Chart = /** @class */ (function (_super) {\n __extends(Chart, _super);\n /**\n * Constructor for creating the widget\n *\n * @hidden\n */\n function Chart(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.rotatedDataLabelCollections = [];\n /** @public */\n _this.animated = false;\n /** @private */\n _this.isPointMouseDown = false;\n /** @private */\n _this.isScrolling = false;\n /** @private */\n _this.checkResize = 0;\n /** @private */\n _this.visible = 0;\n /** @private */\n _this.clickCount = 0;\n /** @private */\n _this.maxPointCount = 0;\n /** @private */\n _this.singleClickTimer = 0;\n /** @private */\n _this.chartAreaType = 'Cartesian';\n /** @private */\n _this.isRtlEnabled = false;\n /** @private */\n _this.scaleX = 1;\n /** @private */\n _this.scaleY = 1;\n _this.isCrosshair = true;\n _this.chartid = 57723;\n /** @private */\n _this.isLegendClicked = false;\n _this.isZoomed = false;\n _this.previousTargetId = '';\n _this.currentPointIndex = 0;\n _this.currentSeriesIndex = 0;\n _this.currentLegendIndex = 0;\n _this.previousPageX = null;\n _this.previousPageY = null;\n _this.allowPan = false;\n setValue('mergePersistData', _this.mergePersistChartData, _this);\n return _this;\n }\n /**\n * To manage persist chart data\n */\n Chart.prototype.mergePersistChartData = function () {\n var data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n if (!(isNullOrUndefined(data) || (data === ''))) {\n var dataObj = JSON.parse(data);\n var keys = Object.keys(dataObj);\n this.isProtectedOnChange = true;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if ((typeof this[key] === 'object') && !isNullOrUndefined(this[key])) {\n extend(this[key], dataObj[key]);\n }\n else {\n this[key] = dataObj[key];\n }\n }\n this.isProtectedOnChange = false;\n }\n };\n /**\n *\n * @param elementId\n * Return the proper ID when the special character exist in the ID\n */\n Chart.prototype.isIdHasSpecialCharacter = function (elementId) {\n var regex = /^[A-Za-z ]+$/;\n var numberRegex = /^[0-9 ]+$/;\n var childElementId = '';\n if (!regex.test(elementId)) {\n var start = 0;\n if (numberRegex.test(elementId[0])) {\n childElementId += ('\\\\3' + elementId[0]);\n start = 1;\n }\n for (var i = start; i < elementId.length; i++) {\n if (!regex.test(elementId[i]) && elementId.indexOf('-') === -1 &&\n elementId.indexOf('_') === -1 && elementId.indexOf('\\\\') === -1 && !numberRegex.test(elementId[i])) {\n childElementId += ('\\\\' + elementId[i]);\n }\n else {\n childElementId += elementId[i];\n }\n }\n return childElementId;\n }\n else {\n return elementId;\n }\n };\n /**\n * Initialize the event handler.\n */\n Chart.prototype.preRender = function () {\n this.element.id = this.isIdHasSpecialCharacter(this.element.id);\n // It is used for checking blazor framework or not.\n var blazor = 'Blazor';\n this.isBlazor = window[blazor];\n this.allowServerDataBinding = false;\n this.markerIndex = 0;\n this.unWireEvents();\n this.initPrivateVariable();\n this.setCulture();\n this.wireEvents();\n if (this.stockChart) {\n if (this.stockChart.tooltip.header === null) {\n this.tooltip.header = '
${point.x}';\n }\n if (this.stockChart.tooltip.format === null) {\n this.tooltip.format = 'High :
${point.high}Low :' +\n '
${point.low}Open :
${point.open}Close :
${point.close}';\n }\n }\n this.element.setAttribute('dir', this.enableRtl ? 'rtl' : '');\n };\n Chart.prototype.initPrivateVariable = function () {\n this.animateSeries = true;\n this.delayRedraw = false;\n this.dragY = null;\n this.horizontalAxes = [];\n this.verticalAxes = [];\n this.refreshAxis();\n this.refreshDefinition(this.rows);\n this.refreshDefinition(this.columns);\n if (this.tooltipModule) {\n this.tooltipModule.previousPoints = [];\n }\n this.element.setAttribute('role', 'region');\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-label', this.description || this.title + '. Syncfusion interactive chart.');\n if (!(this.element.classList.contains(\"e-chart-focused\"))) {\n this.element.setAttribute('class', this.element.getAttribute('class') + ' e-chart-focused');\n }\n if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-chart').length;\n var elementid = 'chart_' + this.chartid + '_' + collection;\n while (document.getElementById(elementid)) {\n collection++;\n elementid = 'chart_' + this.chartid + '_' + collection;\n }\n this.element.id = 'chart_' + this.chartid + '_' + collection;\n }\n //seperate ID to differentiate chart and stock chart\n this.svgId = this.stockChart ? this.stockChart.element.id + '_stockChart_chart' :\n this.element.id + (this.enableCanvas ? '_canvas' : '_svg');\n };\n /**\n * To Initialize the control rendering.\n */\n Chart.prototype.render = function () {\n var _this = this;\n this.svgRenderer = new SvgRenderer(this.element.id);\n var loadEventData = {\n chart: this.isBlazor ? {} : this, theme: this.theme, name: load, cancel: false\n };\n if (!this.stockChart) {\n /**\n * Load event for the chart will be triggered only chart componet, if this is stock chart, load event did not triggered.\n */\n this.trigger(load, loadEventData, function () {\n if (!loadEventData.cancel) {\n _this.cartesianChartRendering(loadEventData);\n }\n });\n }\n else {\n // The fix is specific for nextjs app, as window is set as not defined for server side application like nextjs.\n this.isRtlEnabled = (window.getComputedStyle(document.querySelector('body')).direction === 'rtl');\n this.cartesianChartRendering(loadEventData);\n }\n this.applyZoomkit();\n };\n Chart.prototype.cartesianChartRendering = function (beforeRenderData) {\n this.theme = this.isBlazor ? beforeRenderData.theme : this.theme;\n this.setTheme();\n this.createChartSvg();\n this.markerRender = new Marker(this);\n this.calculateAreaType();\n this.calculateVisibleSeries();\n this.initTechnicalIndicators();\n this.initTrendLines();\n this.calculateVisibleAxis();\n this.processData();\n this.renderComplete();\n this.mouseMoveEvent();\n this.allowServerDataBinding = true;\n };\n /**\n * Gets the localized label by locale keyword.\n *\n * @param {string} key key\n * @returns {string} localized label\n */\n Chart.prototype.getLocalizedLabel = function (key) {\n return this.localeObject.getConstant(key);\n };\n /**\n * Animate the series bounds.\n *\n * @private\n */\n Chart.prototype.animate = function (duration) {\n this.redraw = true;\n this.animated = true; //used to set duration as 1000 for animation at default 300\n this.duration = duration ? duration : 1000;\n if (this.tooltipModule) {\n this.tooltipModule.removeHighlightedMarker(this.tooltipModule.previousPoints, true);\n }\n else if (this.markerRender.previousPoints) {\n for (var previousPoint = 0; previousPoint < this.markerRender.previousPoints.length; previousPoint++)\n this.markerRender.removeHighlightedMarker(this.markerRender.previousPoints[previousPoint].series, this.markerRender.previousPoints[previousPoint].point);\n }\n };\n /**\n * Refresh the chart bounds.\n *\n * @private\n */\n Chart.prototype.refreshBound = function () {\n this.rotatedDataLabelCollections = [];\n if (this.legendModule && this.legendSettings.visible) {\n this.legendModule.getLegendOptions(this.visibleSeries, this);\n }\n /**\n * I264230, EJ2-36761\n * Issue: Tooltip doesnot appears after zooming and hovering on same point\n * Root cause: While performing zoom, previous points in tooltip restore.\n * Fix: previous points set to empty array\n */\n if (this.tooltip.enable && this.tooltipModule) {\n this.tooltipModule.previousPoints = [];\n }\n this.calculateStackValues();\n this.calculateBounds();\n //this prevents the initial rendering of stock chart\n if (this.stockChart && !this.stockChart.rangeFound) {\n if (this.stockChart.enablePeriodSelector || this.stockChart.enableSelector) {\n return null;\n }\n }\n this.renderElements();\n removeElement('chartmeasuretext');\n this.removeSelection();\n if (this.markerRender) {\n this.markerRender.mergeXvalues(this.visibleSeries);\n }\n };\n /**\n * To calcualte the stack values\n */\n Chart.prototype.calculateStackValues = function () {\n var series;\n var isCalculateStacking = false;\n for (var i = 0, len = this.visibleSeries.length; i < len; i++) {\n series = this.visibleSeries[i];\n series.position = series.rectCount = undefined;\n if (((series.type.indexOf('Stacking') !== -1) || (series.drawType.indexOf('Stacking') !== -1\n && this.chartAreaType === 'PolarRadar')) && !isCalculateStacking) {\n series.calculateStackedValue(series.type.indexOf('100') > -1, this);\n isCalculateStacking = true;\n }\n }\n };\n Chart.prototype.removeSelection = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.visible) {\n for (var _b = 0, _c = series.points; _b < _c.length; _b++) {\n var point = _c[_b];\n point.isSelect = false;\n }\n }\n }\n if (getElement(this.element.id + '_ej2_drag_multi_group')) {\n if (this.selectionMode.indexOf('Drag') > -1) {\n this.selectionModule.filterArray = [];\n }\n removeElement(this.element.id + '_ej2_drag_multi_group');\n this.selectionModule.calculateDragSelectedElements(this, new Rect(0, 0, 0, 0), true);\n }\n else if (getElement(this.element.id + '_ej2_drag_group')) {\n if (this.selectionMode !== 'Lasso') {\n this.selectionModule.filterArray = [];\n }\n removeElement(this.element.id + '_ej2_drag_group');\n this.selectionModule.calculateDragSelectedElements(this, new Rect(0, 0, 0, 0), true);\n }\n };\n Chart.prototype.renderElements = function () {\n this.renderBorder();\n this.renderTitle();\n this.renderAreaBorder();\n this.renderSeriesElements(this.renderAxes());\n this.renderLegend();\n this.applyZoomkit();\n this.performSelection();\n this.setSecondaryElementPosition();\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var value = _a[_i];\n updateBlazorTemplate(this.element.id + '_DataLabel', 'Template', value.marker.dataLabel);\n }\n this.renderAnnotation();\n };\n /**\n * To render the legend\n *\n * @private\n */\n Chart.prototype.renderAxes = function () {\n this.yAxisElements = this.renderer.createGroup({ id: this.element.id + 'yAxisCollection' });\n var axisElement;\n if (this.rows.length > 0 && this.columns.length > 0) {\n axisElement = this.chartAxisLayoutPanel.renderAxes();\n }\n if (this.stripLineModule) {\n this.stripLineModule.renderStripLine(this, 'Behind', this.axisCollections);\n }\n return axisElement;\n };\n /**\n * To render the legend\n */\n Chart.prototype.renderLegend = function () {\n if (this.legendModule && this.legendModule.legendCollections.length && this.legendSettings.visible) {\n this.legendModule.calTotalPage = true;\n var borderWidth = this.legendSettings.border.width;\n var bounds = this.legendModule.legendBounds;\n var rect = new Rect(bounds.x, bounds.y, bounds.width, bounds.height);\n if (this.enableCanvas) {\n rect = new Rect(rect.x - borderWidth / 2, rect.y - borderWidth / 2, rect.width + borderWidth, rect.height + borderWidth);\n this.renderer.canvasClip(rect);\n }\n this.legendModule.renderLegend(this, this.legendSettings, bounds);\n if (this.enableCanvas) {\n this.renderer.canvasRestore();\n }\n }\n if (!this.redraw) {\n if (!this.stockChart) {\n this.element.appendChild(this.svgObject);\n }\n else {\n if (!getElement(this.stockChart.chartObject.id)) {\n this.stockChart.mainObject.appendChild(this.svgObject);\n }\n }\n }\n };\n /**\n * To set the left and top position for data label template for center aligned chart\n */\n Chart.prototype.setSecondaryElementPosition = function () {\n var element = getElement(this.element.id + '_Secondary_Element');\n if (!element) {\n return;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.svgId).getBoundingClientRect();\n element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';\n element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';\n };\n Chart.prototype.initializeModuleElements = function () {\n this.dataLabelCollections = [];\n var elementId = this.element.id;\n if (this.series.length) {\n this.seriesElements = this.svgRenderer.createGroup({ id: elementId + 'SeriesCollection' });\n }\n if (this.indicators.length) {\n this.indicatorElements = this.renderer.createGroup({ id: elementId + 'IndicatorCollection' });\n }\n if (this.hasTrendlines()) {\n this.trendLineElements = this.renderer.createGroup({ id: elementId + 'TrendLineCollection' });\n }\n this.dataLabelElements = this.renderer.createGroup({ id: elementId + 'DataLabelCollection' });\n };\n Chart.prototype.hasTrendlines = function () {\n var isTrendline;\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n isTrendline = series.trendlines.length ? true : false;\n if (isTrendline) {\n break;\n }\n }\n return isTrendline;\n };\n Chart.prototype.renderSeriesElements = function (axisElement) {\n // Initialize the series elements values\n this.initializeModuleElements();\n var elementId = this.element.id;\n if (this.element.tagName !== 'g') {\n var tooltipDiv = redrawElement(this.redraw, elementId + '_Secondary_Element') ||\n this.createElement('div');\n tooltipDiv.id = elementId + '_Secondary_Element';\n tooltipDiv.style.cssText = 'position: relative';\n appendChildElement(false, this.element, tooltipDiv, this.redraw);\n }\n // For canvas\n if (this.enableCanvas) {\n var tooltipdiv = document.getElementById(elementId + '_Secondary_Element');\n tooltipdiv = !tooltipdiv ? this.createElement('div', { id: elementId + '_Secondary_Element',\n attrs: { 'style': 'position: relative; left:0px; top:0px' } }) : tooltipdiv;\n var svg = this.svgRenderer.createSvg({\n id: elementId + '_tooltip_svg',\n width: this.availableSize.width,\n height: this.availableSize.height\n });\n svg.style.cssText = 'position: absolute; pointer-events: none';\n tooltipdiv.appendChild(svg);\n }\n // For userInteraction\n if (this.tooltip.enable) {\n appendChildElement(this.enableCanvas, this.svgObject, this.renderer.createGroup({ id: elementId + '_UserInteraction', style: 'pointer-events:none;' }), this.redraw);\n }\n if (this.rows.length > 0 && this.columns.length > 0) {\n this.initializeIndicator();\n this.initializeTrendLine();\n this.renderSeries();\n // Trendline is append to DOM after the series\n if (this.trendLineElements) {\n appendChildElement(this.enableCanvas, this.svgObject, this.trendLineElements, this.redraw);\n }\n this.appendElementsAfterSeries(axisElement);\n }\n };\n /**\n * @private\n */\n Chart.prototype.renderSeries = function () {\n var visibility;\n if (this.enableCanvas) {\n // To clip the series rect for canvas\n this.renderer.canvasClip(this.chartAxisLayoutPanel.seriesClipRect);\n }\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.category === 'TrendLine') {\n visibility = this.series[item.sourceIndex].trendlines[item.index].visible;\n }\n else {\n visibility = item.visible;\n }\n if (visibility) {\n this.visible++;\n findClipRect(item, this.enableCanvas);\n if (this.enableCanvas) {\n // To render scatter and bubble series in canvas\n this.renderCanvasSeries(item);\n }\n item.renderSeries(this);\n }\n }\n if (this.enableCanvas) {\n this.renderer.canvasRestore();\n }\n this.visible = 0;\n var options = {\n 'id': this.element.id + '_ChartAreaClipRect_',\n 'x': this.chartAxisLayoutPanel.seriesClipRect.x,\n 'y': this.chartAxisLayoutPanel.seriesClipRect.y,\n 'width': this.chartAxisLayoutPanel.seriesClipRect.width,\n 'height': this.chartAxisLayoutPanel.seriesClipRect.height,\n 'fill': 'transparent',\n 'stroke-width': 1,\n 'stroke': 'Gray'\n };\n if (!this.seriesElements) {\n return;\n }\n var clipRectElement;\n if (this.chartAreaType === 'PolarRadar') {\n clipRectElement = appendClipElement(this.redraw, options, this.renderer, 'drawCircularClipPath');\n }\n else {\n clipRectElement = appendClipElement(this.redraw, options, this.renderer);\n }\n if (!this.enableCanvas) {\n this.seriesElements.appendChild(clipRectElement);\n }\n var seriesSvg = document.getElementById(this.element.id + '_series_svg');\n if (seriesSvg) {\n appendChildElement(false, seriesSvg, this.seriesElements, this.redraw);\n }\n else {\n appendChildElement(this.enableCanvas, this.svgObject, this.seriesElements, this.redraw);\n }\n };\n Chart.prototype.renderCanvasSeries = function (item) {\n var svgElement;\n // eslint-disable-next-line prefer-const\n svgElement = (this.enableCanvas) ?\n svgElement : this.svgObject;\n var canvas = (this.enableCanvas) ?\n false : this.enableCanvas;\n };\n Chart.prototype.initializeIndicator = function () {\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n if (this[firstToLowerCase(indicator.type) + 'IndicatorModule']) {\n this[firstToLowerCase(indicator.type) + 'IndicatorModule'].createIndicatorElements(this, indicator, indicator.index);\n }\n }\n if (this.indicatorElements) {\n appendChildElement(this.enableCanvas, this.svgObject, this.indicatorElements, this.redraw);\n }\n };\n Chart.prototype.initializeTrendLine = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.trendlines.length) {\n this.trendLineModule.getTrendLineElements(series, this);\n }\n }\n };\n Chart.prototype.appendElementsAfterSeries = function (axisElement) {\n if (this.chartAreaType === 'PolarRadar') {\n appendChildElement(this.enableCanvas, this.svgObject, this.yAxisElements, this.redraw);\n }\n appendChildElement(this.enableCanvas, this.svgObject, axisElement, this.redraw);\n if ((this.zoomModule && this.zoomSettings.enableScrollbar && this.scrollElement.childElementCount) ||\n (this.scrollElement && this.scrollElement.childElementCount)) {\n appendChildElement(false, getElement(this.element.id + '_Secondary_Element'), this.scrollElement, this.redraw);\n }\n if (this.stripLineModule) {\n this.stripLineModule.renderStripLine(this, 'Over', this.axisCollections);\n }\n if (!this.tooltip.enable) {\n appendChildElement(this.enableCanvas, this.svgObject, this.renderer.createGroup({ id: this.element.id + '_UserInteraction', style: 'pointer-events:none;' }), this.redraw);\n }\n if (this.stockChart) {\n this.stockChart.calculateStockEvents();\n }\n };\n Chart.prototype.applyZoomkit = function () {\n /**\n * Issue: Zoomkit not visible after performing refresh()\n * Fix: this method called without checking `zoomModule.isZoomed`\n */\n if (this.chartAreaType === 'PolarRadar') {\n return;\n }\n if (!this.redraw && this.zoomModule && (!this.zoomSettings.enablePan || this.zoomModule.performedUI || this.zoomSettings.showToolbar)) {\n this.zoomModule.applyZoomToolkit(this, this.axisCollections);\n }\n };\n /**\n * Render annotation perform here\n *\n * @private\n */\n Chart.prototype.renderAnnotation = function () {\n if (this.annotationModule) {\n //for stock chart, stock chart's id is added to render the annotations\n this.annotationModule.renderAnnotations(getElement((this.stockChart ? this.stockChart.element.id : this.element.id) + '_Secondary_Element'));\n }\n };\n Chart.prototype.performSelection = function () {\n var selectedDataIndexes = [];\n if (this.selectionModule) {\n selectedDataIndexes = extend([], this.selectionModule.selectedDataIndexes, null, true);\n this.selectionModule.invokeSelection(this);\n }\n if (this.highlightModule) {\n this.highlightModule.invokeHighlight(this);\n }\n if (selectedDataIndexes.length > 0) {\n this.selectionModule.selectedDataIndexes = selectedDataIndexes;\n this.selectionModule.redrawSelection(this, this.selectionMode);\n }\n };\n Chart.prototype.processData = function (render) {\n if (render === void 0) { render = true; }\n this.visibleSeriesCount = 0;\n var check = true;\n var prevPointCount = 0;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (!series.visible && !this.legendSettings.visible) {\n this.visibleSeriesCount++;\n continue;\n }\n if (series.category !== 'Indicator' && series.category !== 'TrendLine') {\n this.initializeDataModule(series);\n }\n }\n for (var _b = 0, _c = this.indicators; _b < _c.length; _b++) {\n var indicator = _c[_b];\n if (indicator.dataSource) {\n var techIndicator = indicator;\n this.initializeDataModule(techIndicator);\n check = false;\n }\n }\n if (render && (!this.visibleSeries.length || this.visibleSeriesCount === this.visibleSeries.length && check)) {\n this.refreshBound();\n this.trigger('loaded', { chart: this.isBlazor ? {} : this });\n }\n if (!this.stockChart && this.visibleSeries.length > 0) {\n for (var _d = 0, _e = this.visibleSeries; _d < _e.length; _d++) {\n var series = _e[_d];\n if (!isNullOrUndefined(series.points)) {\n this.maxPointCount = Math.max(prevPointCount, series.points.length);\n prevPointCount = series.points.length;\n }\n }\n }\n };\n Chart.prototype.initializeDataModule = function (series) {\n series.xData = [];\n series.yData = [];\n var dataSource;\n var isAngular = 'isAngular';\n if (this[isAngular]) {\n dataSource = Object.keys(series.dataSource).length ? series.dataSource : this.dataSource;\n }\n else {\n dataSource = series.dataSource || this.dataSource;\n }\n series.dataModule = new Data(dataSource, series.query);\n series.points = [];\n series.refreshDataManager(this);\n };\n Chart.prototype.calculateBounds = function () {\n var margin = this.margin;\n // Title Height;\n var titleHeight = 0;\n var subTitleHeight = 0;\n var titleWidth = 0;\n var padding = this.titleStyle.position === 'Top' || (this.titleStyle.position === 'Bottom' && !this.legendSettings.visible) ? 15 : 5;\n var left = margin.left + this.border.width;\n var width = this.availableSize.width - left - margin.right - this.border.width;\n var elementSpacing = 0;\n this.titleCollection = [];\n this.subTitleCollection = [];\n if (this.title) {\n this.titleCollection = getTitle(this.title, this.titleStyle, width, this.enableRtl, this.themeStyle.chartTitleFont);\n titleHeight = (measureText(this.title, this.titleStyle, this.themeStyle.chartTitleFont).height * this.titleCollection.length) + padding;\n if (this.subTitle) {\n this.subTitleCollection = getTitle(this.subTitle, this.subTitleStyle, width, this.enableRtl, this.themeStyle.chartSubTitleFont);\n subTitleHeight = (measureText(this.subTitle, this.subTitleStyle, this.themeStyle.chartSubTitleFont).height * this.subTitleCollection.length) +\n padding;\n }\n }\n else if (this.legendSettings.position !== 'Top' && this.border.width) {\n elementSpacing = 10;\n }\n var top = margin.top + elementSpacing + this.border.width + this.chartArea.border.width * 0.5;\n var height = this.availableSize.height - top - this.border.width - margin.bottom;\n var marginTotal = subTitleHeight + titleHeight + this.titleStyle.border.width + this.subTitleStyle.border.width;\n switch (this.titleStyle.position) {\n case 'Top':\n top += marginTotal;\n height -= marginTotal;\n break;\n case 'Bottom':\n height -= marginTotal;\n break;\n case 'Left':\n left += marginTotal;\n width -= marginTotal;\n break;\n case 'Right':\n left -= (this.titleStyle.border.width + this.subTitleStyle.border.width);\n width -= marginTotal;\n break;\n }\n if (this.stockChart && this.stockChart.legendSettings.visible && this.stockChart.stockLegendModule) {\n if (this.stockChart.legendSettings.position === 'Top') {\n top += this.stockChart.stockLegendModule.legendBounds.height;\n }\n else if (this.stockChart.legendSettings.position === 'Left') {\n left += this.stockChart.stockLegendModule.legendBounds.width;\n }\n }\n this.initialClipRect = new Rect(left, top, width, height);\n if (this.legendModule && this.legendSettings.visible) {\n this.legendModule.calculateLegendBounds(this.initialClipRect, this.availableSize, null);\n }\n this.chartAxisLayoutPanel.measureAxis(this.initialClipRect);\n };\n /**\n * Handles the print method for chart control.\n */\n Chart.prototype.print = function (id) {\n var exportChart = new PrintUtils(this);\n var width = this.width;\n if (this.getModuleName() == 'chart' && parseInt(this.width) >= 80 && this.width.indexOf('%') > -1) {\n this.width = '80%';\n this.dataBind();\n }\n exportChart.print(id);\n if (this.getModuleName() == 'chart' && parseInt(this.width) >= 80 && this.width.indexOf('%') > -1) {\n this.width = width;\n this.dataBind();\n }\n };\n /**\n * Defines the trendline initialization\n */\n Chart.prototype.initTrendLines = function () {\n this.isProtectedOnChange = true;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n var trendIndex = 0;\n for (var _b = 0, _c = series.trendlines; _b < _c.length; _b++) {\n var trendline = _c[_b];\n var trendLine = trendline;\n if (this.trendLineModule) {\n trendLine.index = trendIndex;\n trendLine.sourceIndex = series.index;\n this.trendLineModule.initSeriesCollection(trendLine, this);\n if (trendLine.targetSeries) {\n trendLine.targetSeries.xAxisName = series.xAxisName;\n trendLine.targetSeries.yAxisName = series.yAxisName;\n this.visibleSeries.push(trendLine.targetSeries);\n }\n }\n trendIndex++;\n }\n }\n this.isProtectedOnChange = false;\n };\n Chart.prototype.calculateAreaType = function () {\n var series = this.series[0];\n this.chartArea.border.width = this.stockChart ? 0 : this.chartArea.border.width;\n if (series) {\n this.requireInvertedAxis = ((series.type.indexOf('Bar') !== -1) && !this.isTransposed) ||\n ((series.type.indexOf('Bar') === -1) && this.isTransposed && this.chartAreaType !== 'PolarRadar');\n }\n this.chartAxisLayoutPanel = this.chartAreaType === 'PolarRadar' ? (this.polarSeriesModule || this.radarSeriesModule)\n : new CartesianAxisLayoutPanel(this);\n };\n /**\n * Calculate the visible axis\n *\n * @private\n */\n Chart.prototype.calculateVisibleAxis = function () {\n var axis;\n var axes = [this.primaryXAxis, this.primaryYAxis];\n axes = this.chartAreaType === 'Cartesian' ? axes.concat(this.axes) : axes;\n if (this.paretoSeriesModule && this.series[0].type === 'Pareto') {\n axes = axes.concat(this.paretoSeriesModule.paretoAxes);\n }\n this.axisCollections = [];\n if (this.zoomModule) {\n this.zoomModule.isPanning = this.zoomModule.isAxisZoomed(axes) && this.zoomSettings.enablePan;\n this.svgObject.setAttribute('cursor', this.zoomModule.isPanning ? 'pointer' : 'auto');\n if (this.scrollBarModule) {\n this.scrollBarModule.axes = axes;\n }\n }\n if (this.scrollSettingEnabled) {\n if (this.scrollBarModule) {\n this.scrollBarModule.axes = axes;\n }\n }\n for (var i = 0, len = axes.length; i < len; i++) {\n axis = axes[i];\n axis.series = [];\n axis.labels = [];\n axis.indexLabels = {};\n axis.orientation = (i == 0) ? (this.requireInvertedAxis ? 'Vertical' : 'Horizontal') :\n (i == 1) ? (this.requireInvertedAxis ? 'Horizontal' : 'Vertical') : axis.orientation;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n this.initAxis(series, axis, true);\n if (series.category == 'Pareto' && series.type == 'Line' && series.yAxis) {\n series.yAxis.internalVisibility = series.paretoOptions.showAxis;\n }\n }\n for (var _b = 0, _c = this.indicators; _b < _c.length; _b++) {\n var indicator = _c[_b];\n this.initAxis(indicator, axis, false);\n }\n if (this.scrollBarModule && !axis.zoomingScrollBar) {\n this.scrollBarModule.injectTo(axis, this);\n }\n if (axis.orientation != null) {\n this.axisCollections.push(axis);\n }\n }\n if (this.rows.length > 0 && this.columns.length > 0) {\n this.chartAxisLayoutPanel.measure();\n }\n };\n Chart.prototype.initAxis = function (series, axis, isSeries) {\n if (series.xAxisName === axis.name || (series.xAxisName == null && axis.name === 'primaryXAxis')) {\n axis.orientation = this.requireInvertedAxis ? 'Vertical' : 'Horizontal';\n series.xAxis = axis;\n if (isSeries) {\n axis.series.push(series);\n }\n }\n else if (series.yAxisName === axis.name || (series.yAxisName == null && axis.name === 'primaryYAxis')) {\n axis.orientation = this.requireInvertedAxis ? 'Horizontal' : 'Vertical';\n series.yAxis = axis;\n if (isSeries) {\n axis.series.push(series);\n }\n }\n };\n Chart.prototype.initTechnicalIndicators = function () {\n var i = 0;\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n var techIndicator = indicator;\n var type = firstToLowerCase(techIndicator.type);\n if (this[type + 'IndicatorModule']) {\n techIndicator.index = i;\n this[type + 'IndicatorModule'].initSeriesCollection(techIndicator, this);\n for (var _b = 0, _c = techIndicator.targetSeries; _b < _c.length; _b++) {\n var targetSeries = _c[_b];\n if (indicator.seriesName || indicator.dataSource) {\n this.visibleSeries.push(targetSeries);\n }\n }\n }\n i++;\n }\n };\n /** @private */\n Chart.prototype.refreshTechnicalIndicator = function (series) {\n if (this.indicators.length) {\n var targetIndicator = null;\n if (series instanceof Series && series.category !== 'Indicator') {\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n if (indicator.seriesName === series.name && !indicator.dataSource) {\n targetIndicator = indicator;\n targetIndicator.setDataSource(series, this);\n }\n }\n }\n else if (series instanceof TechnicalIndicator) {\n targetIndicator = series;\n targetIndicator.setDataSource(series instanceof Series ? series : null, this);\n }\n }\n };\n Chart.prototype.calculateVisibleSeries = function () {\n var series;\n this.visibleSeries = [];\n var colors = this.palettes.length ? this.palettes : getSeriesColor(this.theme);\n var count = colors.length;\n var seriesCollection = this.series.sort(function (a, b) { return a.zOrder - b.zOrder; });\n for (var i = 0, len = seriesCollection.length; i < len; i++) {\n series = seriesCollection[i];\n // for y axis label issue during chart navigation\n series.category = seriesCollection[0].type === 'Pareto' ? 'Pareto' : 'Series';\n series.index = i;\n series.interior = series.fill || colors[i % count];\n if (!series.marker.shape && (series.marker.visible || series.type === 'Scatter' || series.drawType === 'Scatter')) {\n series.marker.shape = markerShapes[this.markerIndex % 10];\n this.markerIndex++;\n }\n if (this.isSecondaryAxis(series.xAxis)) {\n series.xAxis.internalVisibility = series.xAxis.series.some(function (value) { return (value.visible); });\n }\n if (this.isSecondaryAxis(series.yAxis)) {\n series.yAxis.internalVisibility = series.yAxis.series.some(function (value) { return (value.visible); });\n }\n switch (series.type) {\n case 'Bar':\n case 'StackingBar':\n case 'StackingBar100':\n if (seriesCollection[0].type.indexOf('Bar') === -1) {\n continue;\n }\n break;\n case 'Polar':\n case 'Radar':\n if (this.chartAreaType !== 'PolarRadar') {\n continue;\n }\n if (this.chartAreaType === 'PolarRadar' && ((series.xAxisName !== null && (this.primaryXAxis.name !== series.xAxisName)) ||\n (series.yAxisName !== null && (this.primaryYAxis.name !== series.yAxisName)))) {\n continue;\n }\n break;\n case 'Pareto':\n this.visibleSeries.push(series);\n this.paretoSeriesModule.initSeries(series, this);\n continue;\n default:\n if (this.chartAreaType === 'PolarRadar' || seriesCollection[0].type.indexOf('Bar') > -1) {\n continue;\n }\n break;\n }\n this.visibleSeries.push(series);\n seriesCollection[i] = series;\n }\n };\n Chart.prototype.isSecondaryAxis = function (axis) {\n return (this.axes.indexOf(axis) > -1);\n };\n Chart.prototype.renderTitle = function () {\n var rect;\n var margin = this.margin;\n var elementSpacing = 5;\n if (this.title) {\n var getAnchor = getTextAnchor(this.titleStyle.textAlignment, this.enableRtl);\n var elementSize = measureText(this.title, this.titleStyle, this.themeStyle.chartTitleFont);\n rect = new Rect(margin.left, 0, this.availableSize.width - margin.left - margin.right, 0);\n var borderWidth = this.titleStyle.border.width;\n var positionY = this.margin.top + ((elementSize.height) * 3 / 4);\n var positionX = titlePositionX(rect, this.titleStyle || this.themeStyle.chartTitleFont) + borderWidth;\n var rotation = void 0;\n var alignment = this.titleStyle.textAlignment;\n var subtitleSize = measureText(this.subTitle, this.subTitleStyle, this.themeStyle.chartSubTitleFont);\n switch (this.titleStyle.position) {\n case 'Top':\n positionY += borderWidth * 0.5;\n positionX += getAnchor === 'start' ? borderWidth * 0.5 + this.border.width :\n getAnchor === 'end' ? ((-borderWidth * 2) - this.border.width) : 0;\n break;\n case 'Bottom':\n positionX += getAnchor === 'start' ? (borderWidth * 0.5) + this.border.width :\n getAnchor === 'end' ? (-borderWidth * 2) - this.border.width : 0;\n positionY = this.availableSize.height - this.margin.bottom - subtitleSize.height - (elementSize.height / 2) -\n (borderWidth * 0.5) - (this.subTitleStyle.border.width * 0.5);\n break;\n case 'Left':\n positionX = this.margin.left + ((elementSize.height) * 3 / 4) + (borderWidth * 0.5);\n positionY = alignment == 'Near' ? margin.bottom + (borderWidth * 0.5) + this.border.width :\n alignment == 'Far' ? this.availableSize.height - margin.bottom - (borderWidth * 0.5) - this.border.width : this.availableSize.height / 2;\n getAnchor = alignment == 'Near' ? 'end' : alignment == 'Far' ? 'start' : 'middle';\n getAnchor = this.enableRtl ? (getAnchor === 'end' ? 'start' : getAnchor === 'start' ? 'end' : getAnchor) : getAnchor;\n rotation = 'rotate(' + -90 + ',' + positionX + ',' + positionY + ')';\n break;\n case 'Right':\n positionX = this.availableSize.width - this.margin.right - ((elementSize.height) * 3 / 4) - (borderWidth * 0.5);\n positionY = alignment == 'Near' ? margin.bottom + (borderWidth * 0.5) + this.border.width :\n alignment == 'Far' ? this.availableSize.height - margin.bottom - (borderWidth * 0.5) - this.border.width : this.availableSize.height / 2;\n getAnchor = alignment == 'Near' ? 'start' : alignment == 'Far' ? 'end' : 'middle';\n getAnchor = this.enableRtl ? (getAnchor === 'end' ? 'start' : getAnchor === 'start' ? 'end' : getAnchor) : getAnchor;\n rotation = 'rotate(' + 90 + ',' + positionX + ',' + positionY + ')';\n break;\n case 'Custom':\n positionX = this.titleStyle.x;\n positionY = this.titleStyle.y;\n getAnchor = 'middle';\n break;\n }\n var borderOptions = {\n 'id': this.element.id + '_ChartTitleBorder',\n 'x': positionX - (getAnchor === 'middle' ? (elementSize.width / 2) + elementSpacing : getAnchor === 'end' ? elementSize.width + elementSpacing : elementSpacing),\n 'y': positionY - elementSize.height + (elementSize.height / 4),\n 'rx': this.titleStyle.border.cornerRadius,\n 'ry': this.titleStyle.border.cornerRadius,\n 'width': elementSize.width + (elementSpacing * 2),\n 'height': elementSize.height * this.titleCollection.length,\n 'fill': this.titleStyle.background,\n 'stroke-width': borderWidth,\n 'stroke': this.titleStyle.border.color,\n 'transform': rotation ? rotation : '',\n 'd': ''\n };\n var htmlObject = redrawElement(this.redraw, this.element.id + '_ChartTitleBorder', borderOptions, this.renderer)\n || this.renderer.drawRectangle(borderOptions);\n appendChildElement(this.enableCanvas, this.svgObject, htmlObject, this.redraw);\n var options = new TextOption(this.element.id + '_ChartTitle', positionX, positionY, getAnchor, this.titleCollection, rotation, 'auto');\n var element = redrawElement(this.redraw, this.element.id + '_ChartTitle', options, this.renderer) ||\n textElement(this.renderer, options, this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitleFont.color, this.svgObject, null, null, null, null, null, null, null, null, this.enableCanvas, null, this.themeStyle.chartTitleFont);\n if (element) {\n element.setAttribute('tabindex', '0');\n element.setAttribute('class', 'e-chart-focused');\n }\n if (this.subTitle) {\n this.renderSubTitle(options);\n }\n }\n };\n Chart.prototype.renderSubTitle = function (options) {\n var maxWidth = 0;\n var titleWidth = 0;\n var padding = 10;\n var alignment = this.titleStyle.textAlignment;\n for (var _i = 0, _a = this.titleCollection; _i < _a.length; _i++) {\n var titleText = _a[_i];\n titleWidth = measureText(titleText, this.titleStyle, this.themeStyle.chartSubTitleFont).width;\n maxWidth = titleWidth > maxWidth ? titleWidth : maxWidth;\n }\n var subTitleElementSize = measureText(this.subTitleCollection.reduce(function (a, b) { return (a.length > b.length ? a : b); }), this.subTitleStyle, this.themeStyle.chartSubTitleFont);\n var getAnchor = getTextAnchor(this.subTitleStyle.textAlignment, this.enableRtl);\n var rect = new Rect(alignment === 'Center' ? (options.x - maxWidth * 0.5) : alignment === 'Far' ? options.x - maxWidth : options.x, 0, maxWidth, 0);\n if (this.titleStyle.position === 'Left') {\n rect.x = alignment === 'Center' ? (options.x - maxWidth * 0.5) : alignment == 'Far' ? this.margin.left + ((subTitleElementSize.height) * 3 / 4) : (options.x - maxWidth);\n }\n var elementSize = measureText(this.title, this.titleStyle, this.themeStyle.chartTitleFont);\n var positionY = options.y * options.text.length + subTitleElementSize.height + (padding / 2) + this.titleStyle.border.width + (this.subTitleStyle.border.width * 0.5);\n if (this.titleStyle.position === 'Bottom') {\n positionY = options.y * options.text.length + (padding / 2) + (elementSize.height / 2) + (subTitleElementSize.height / 2);\n }\n var borderOptions = {\n 'id': this.element.id + '_ChartSubTitleBorder',\n 'x': titlePositionX(rect, this.subTitleStyle) - (getAnchor === 'middle' ? (subTitleElementSize.width / 2) + padding / 2 : getAnchor === 'end' ? subTitleElementSize.width + padding / 2 : padding / 2),\n 'y': positionY - subTitleElementSize.height + (subTitleElementSize.height / 4),\n 'rx': this.subTitleStyle.border.cornerRadius,\n 'ry': this.subTitleStyle.border.cornerRadius,\n 'width': subTitleElementSize.width + padding,\n 'height': subTitleElementSize.height * this.subTitleCollection.length,\n 'fill': this.subTitleStyle.background,\n 'stroke-width': this.subTitleStyle.border.width,\n 'stroke': this.subTitleStyle.border.color,\n 'transform': options.transform,\n 'd': ''\n };\n var htmlObject = redrawElement(this.redraw, this.element.id + '_ChartSubTitleBorder', borderOptions, this.renderer)\n || this.renderer.drawRectangle(borderOptions);\n appendChildElement(this.enableCanvas, this.svgObject, htmlObject, this.redraw);\n var subTitleOptions = new TextOption(this.element.id + '_ChartSubTitle', titlePositionX(rect, this.subTitleStyle), positionY, getTextAnchor(this.subTitleStyle.textAlignment, this.enableRtl), this.subTitleCollection, options.transform, 'auto');\n var element = redrawElement(this.redraw, this.element.id + '_ChartSubTitle', subTitleOptions, this.renderer) ||\n textElement(this.renderer, subTitleOptions, this.subTitleStyle, this.subTitleStyle.color || this.themeStyle.chartSubTitleFont.color, this.svgObject, null, null, null, null, null, null, null, null, this.enableCanvas, null, this.themeStyle.chartSubTitleFont);\n };\n Chart.prototype.renderBorder = function () {\n var x = 0;\n var y = 0;\n var width = this.border.width;\n var backGroundImage = this.backgroundImage;\n var fillColor = backGroundImage ? 'transparent' : (this.background || this.themeStyle.background);\n if (this.stockChart && this.stockChart.legendSettings.visible && this.stockChart.stockLegendModule) {\n if (this.stockChart.legendSettings.position === 'Top') {\n y += this.stockChart.stockLegendModule.legendBounds.height;\n }\n else if (this.stockChart.legendSettings.position === 'Left') {\n x += this.stockChart.stockLegendModule.legendBounds.width;\n }\n }\n var rect = new RectOption(this.element.id + '_ChartBorder', fillColor, this.border, 1, new Rect(width * 0.5 + x, width * 0.5 + y, this.availableSize.width - width, this.availableSize.height - width));\n this.htmlObject = redrawElement(this.redraw, this.element.id + '_ChartBorder', rect, this.renderer)\n || this.renderer.drawRectangle(rect);\n this.htmlObject.setAttribute('aria-hidden', 'true');\n appendChildElement(this.enableCanvas, this.svgObject, this.htmlObject, this.redraw);\n // to draw back ground image for chart\n if (backGroundImage) {\n var image = new ImageOption(this.availableSize.height - width, this.availableSize.width - width, backGroundImage, 0, 0, this.element.id + '_ChartBackground', 'visible', 'none');\n this.htmlObject = redrawElement(this.redraw, this.element.id + '_ChartBackground', image, this.renderer)\n || this.renderer.drawImage(image);\n appendChildElement(this.enableCanvas, this.svgObject, this.htmlObject, this.redraw);\n }\n };\n /**\n * @private\n */\n Chart.prototype.renderAreaBorder = function () {\n if (this.chartAreaType === 'PolarRadar') {\n return null;\n }\n else {\n var element = getElement(this.element.id + '_ChartAreaBorder');\n var previousRect = element ?\n new Rect(+element.getAttribute('x'), +element.getAttribute('y'), +element.getAttribute('width'), +element.getAttribute('height')) : null;\n var rect = new RectOption(this.element.id + '_ChartAreaBorder', this.chartArea.background, { width: this.chartArea.border.width, color: this.chartArea.border.color || this.themeStyle.areaBorder }, this.chartArea.opacity, this.chartAxisLayoutPanel.seriesClipRect);\n this.htmlObject = this.renderer.drawRectangle(rect);\n this.htmlObject.setAttribute('aria-hidden', 'true');\n appendChildElement(this.enableCanvas, this.svgObject, this.htmlObject, this.redraw, true, 'x', 'y', null, null, true, true, previousRect);\n this.htmlObject = null;\n }\n // to draw back ground image for chart area\n var backGroundImage = this.chartArea.backgroundImage;\n if (backGroundImage) {\n var width = this.chartArea.border.width;\n var image = new ImageOption(this.initialClipRect.height - width, this.initialClipRect.width - width, backGroundImage, this.initialClipRect.x, this.initialClipRect.y, this.element.id + '_ChartAreaBackground', 'visible', 'none');\n this.htmlObject = this.renderer.drawImage(image);\n appendChildElement(this.enableCanvas, this.svgObject, this.htmlObject, this.redraw, true, 'x', 'y', null, null, true, true);\n }\n };\n /**\n * To add series for the chart\n *\n * @param {SeriesModel[]} seriesCollection - Defines the series collection to be added in chart.\n * @returns {void}.\n */\n Chart.prototype.addSeries = function (seriesCollection) {\n for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {\n var series = seriesCollection_1[_i];\n series = new Series(this, 'series', series);\n this.series.push(series);\n }\n this.refresh();\n };\n /**\n * To Remove series for the chart\n *\n * @param {number} index - Defines the series index to be remove in chart series\n * @returns {void}\n */\n Chart.prototype.removeSeries = function (index) {\n this.redraw = false; //fix for remove svg not working when use animatemethod.\n if (this.visibleSeries[index]) {\n this.visibleSeries[index].xAxis.orientation = null;\n this.visibleSeries[index].yAxis.orientation = null;\n }\n for (var i = 0; i < this.axes.length; i++) {\n if (this.axes[i].orientation === null) {\n this.axes.splice(i, 1);\n }\n }\n this.series.splice(index, 1);\n this.refresh();\n };\n /**\n * To Clear all series for the chart\n *\n * @returns {void}.\n */\n Chart.prototype.clearSeries = function () {\n this.series = [];\n this.refresh();\n };\n /**\n * To add secondary axis for the chart\n *\n * @param {AxisModel[]} axisCollection - Defines the axis collection to be added in chart.\n * @returns {void}.\n */\n Chart.prototype.addAxes = function (axisCollection) {\n for (var _i = 0, axisCollection_1 = axisCollection; _i < axisCollection_1.length; _i++) {\n var axis = axisCollection_1[_i];\n axis = new Axis(this, 'axes', axis);\n if (this.isBlazor) {\n axis.interval = isNaN(axis.interval) ? null : axis.interval;\n axis.desiredIntervals = isNaN(axis.desiredIntervals) ? null : axis.desiredIntervals;\n }\n this.axes.push(axis);\n }\n this.refresh();\n };\n /**\n * To remove secondary axis for the chart\n *\n * @param {number} index - Defines the axis collection to be removed in chart.\n * @returns {void}\n */\n Chart.prototype.removeAxis = function (index) {\n this.redraw = false;\n this.axes.splice(index, 1);\n this.refresh();\n };\n /**\n * To destroy the widget\n *\n * @function destroy\n * @returns {void}.\n * @member of Chart\n */\n Chart.prototype.destroy = function () {\n if (this.scrollBarModule) {\n this.scrollBarModule.destroy();\n }\n if (this.markerRender) {\n this.markerRender.removeEventListener();\n this.markerRender = null;\n }\n this.horizontalAxes = [];\n this.verticalAxes = [];\n this.visibleSeries = [];\n this.axisCollections = [];\n this.rotatedDataLabelCollections = [];\n this.seriesElements = null;\n this.chartAxisLayoutPanel = null;\n this.dataLabelCollections = null;\n this.dataLabelElements = null;\n this.yAxisElements = null;\n var element = document.getElementById(this.element.id + 'Keyboard_chart_focus');\n if (element) {\n element.remove();\n }\n var highlightElement = document.getElementById(this.element.id + '_ej2_chart_highlight');\n if (highlightElement) {\n highlightElement.remove();\n }\n removeElement('chartmeasuretext');\n /**\n * To fix react timeout destroy issue.\n */\n if (this.element) {\n this.unWireEvents();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n _super.prototype.destroy.call(this);\n if (!this.enableCanvas) {\n this.removeSvg();\n this.svgObject = null;\n }\n }\n };\n /**\n * Get component name\n */\n Chart.prototype.getModuleName = function () {\n return 'chart';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @private\n */\n Chart.prototype.getPersistData = function () {\n var keyEntity = ['loaded', 'animationComplete', 'primaryXAxis', 'primaryYAxis'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Method to create SVG element.\n */\n Chart.prototype.createChartSvg = function () {\n this.removeSvg();\n createSvg(this);\n };\n /**\n * Method to bind events for chart\n */\n Chart.prototype.unWireEvents = function () {\n var startEvent = Browser.touchStartEvent;\n var moveEvent = Browser.touchMoveEvent;\n var stopEvent = Browser.touchEndEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! UnBind the Event handler */\n EventHandler.remove(this.element, startEvent, this.chartOnMouseDown);\n EventHandler.remove(this.element, moveEvent, this.mouseMove);\n EventHandler.remove(this.element, stopEvent, this.mouseEnd);\n EventHandler.remove(this.element, 'click', this.chartOnMouseClick);\n EventHandler.remove(this.element, 'dblclick', this.chartOnDoubleClick);\n EventHandler.remove(this.element, 'contextmenu', this.chartRightClick);\n EventHandler.remove(this.element, cancelEvent, this.mouseLeave);\n EventHandler.remove(this.element, 'keydown', this.chartKeyDown);\n EventHandler.remove(document.body, 'keydown', this.documentKeyHandler);\n EventHandler.remove(this.element, 'keyup', this.chartKeyUp);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeBound);\n /**\n * To fix memory issue\n */\n if (this.touchObject) {\n this.touchObject.destroy();\n this.touchObject = null;\n }\n };\n Chart.prototype.wireEvents = function () {\n /**\n * To fix react timeout destroy issue.\n */\n if (!this.element) {\n return;\n }\n /*! Find the Events type */\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! Bind the Event handler */\n EventHandler.add(this.element, Browser.touchStartEvent, this.chartOnMouseDown, this);\n EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMove, this);\n EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEnd, this);\n EventHandler.add(this.element, 'click', this.chartOnMouseClick, this);\n EventHandler.add(this.element, 'dblclick', this.chartOnDoubleClick, this);\n EventHandler.add(this.element, 'contextmenu', this.chartRightClick, this);\n EventHandler.add(this.element, cancelEvent, this.mouseLeave, this);\n EventHandler.add(this.element, 'keydown', this.chartKeyDown, this);\n EventHandler.add(document.body, 'keydown', this.documentKeyHandler, this);\n EventHandler.add(this.element, 'keyup', this.chartKeyUp, this);\n this.resizeBound = this.chartResize.bind(this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.resizeBound);\n this.longPressBound = this.longPress.bind(this);\n this.touchObject = new Touch(this.element, { tapHold: this.longPressBound, tapHoldThreshold: 500 });\n /*! Apply the style for chart */\n this.setStyle(this.element);\n };\n Chart.prototype.chartRightClick = function (event) {\n if (this.crosshair.enable && this.crosshairModule &&\n (event.buttons === 2 || event.which === 0 || event.pointerType === 'touch')) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n Chart.prototype.setStyle = function (element) {\n var zooming = this.zoomSettings;\n var disableScroll = zooming.enableSelectionZooming || zooming.enablePinchZooming ||\n this.selectionMode !== 'None' || this.crosshair.enable || this.highlightMode !== 'None';\n element.style.touchAction = disableScroll ? 'none' : 'element';\n element.style.msTouchAction = disableScroll ? 'none' : 'element';\n element.style.msContentZooming = 'none';\n element.style.msUserSelect = 'none';\n element.style.webkitUserSelect = 'none';\n element.style.position = 'relative';\n element.style.display = 'block';\n // To fix angular and react tooltip div scrollbar issue\n element.style.overflow = 'hidden';\n element.style.height = (element.style.height || (this.height && this.height.indexOf('%') === -1)) ? element.style.height : 'inherit';\n };\n /**\n * Finds the orientation.\n *\n * @returns {boolean}\n * @private\n */\n Chart.prototype.isOrientation = function () {\n return ('orientation' in window && 'onorientationchange' in window);\n };\n /**\n * Handles the long press on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.longPress = function (e) {\n this.mouseX = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientX) : 0;\n this.mouseY = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientY) : 0;\n this.startMove = true;\n this.allowPan = this.stockChart ? false : this.allowPan;\n this.setMouseXY(this.mouseX, this.mouseY);\n this.notify('tapHold', e);\n return false;\n };\n /**\n * To find mouse x, y for aligned chart element svg position\n */\n Chart.prototype.setMouseXY = function (pageX, pageY) {\n if (getElement(this.svgId)) {\n var svgRect = getElement(this.svgId).getBoundingClientRect();\n var rect = this.element.getBoundingClientRect();\n this.mouseY = ((pageY - rect.top) - Math.max(svgRect.top - rect.top, 0) / this.scaleX);\n this.mouseX = ((pageX - rect.left) - Math.max(svgRect.left - rect.left, 0) / this.scaleY);\n if (this.stockChart) {\n this.mouseX += this.stockChart.legendSettings.position === 'Left' ? this.stockChart.stockLegendModule.legendBounds.width : 0;\n this.mouseY += this.stockChart.legendSettings.position === 'Top' ? this.stockChart.stockLegendModule.legendBounds.height : 0;\n }\n }\n };\n /**\n * Export method for the chart.\n */\n Chart.prototype.export = function (type, fileName) {\n if (this.exportModule) {\n this.exportModule.export(type, fileName);\n if (this.afterExport) {\n this.exportModule.getDataUrl(this);\n }\n }\n };\n /**\n * Handles the chart resize.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartResize = function () {\n var _this = this;\n this.animateSeries = false;\n var arg = {\n chart: this,\n name: resized,\n currentSize: new Size(0, 0),\n previousSize: new Size(this.availableSize.width, this.availableSize.height)\n };\n var beforeResizeArgs = { name: 'beforeResize', cancelResizedEvent: false };\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.trigger(beforeResize, beforeResizeArgs);\n if (!beforeResizeArgs.cancelResizedEvent) {\n this.resizeTo = +setTimeout(function () {\n if (_this.isDestroyed || _this.stockChart) {\n clearTimeout(_this.resizeTo);\n return;\n }\n _this.createChartSvg();\n arg.currentSize = _this.availableSize;\n _this.trigger(resized, arg);\n _this.refreshAxis();\n _this.refreshBound();\n _this.trigger('loaded', { chart: _this.isBlazor ? {} : _this });\n }, 500);\n }\n return false;\n };\n /**\n * Handles the mouse move.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.mouseMove = function (e) {\n var pageX;\n var pageY;\n var touchArg;\n if (this.allowPan) {\n return false;\n }\n if (e.type === 'touchmove') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2' || this.isTouch;\n pageX = e.clientX;\n pageY = e.clientY;\n }\n this.previousPageX = pageX;\n this.previousPageY = pageY;\n if (getElement(this.svgId)) {\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseMove(e);\n }\n return false;\n };\n /**\n * Handles the mouse leave.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.mouseLeave = function (e) {\n var pageX;\n var pageY;\n var touchArg;\n if (this.stockChart && this.stockChart.onPanning) {\n return false;\n }\n if (e.type === 'touchleave') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n pageX = e.clientX;\n pageY = e.clientY;\n }\n this.previousPageX = null;\n this.previousPageY = null;\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseLeave(e);\n return false;\n };\n /**\n * Handles the mouse leave on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartOnMouseLeave = function (e) {\n var element = e.target;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n this.trigger(chartMouseLeave, { target: element.id, x: this.mouseX, y: this.mouseY });\n removeElement(this.element.id + '_EJ2_AxisLabel_Tooltip');\n this.isChartDrag = this.isPointMouseDown = false;\n this.notify(cancelEvent, e);\n return false;\n };\n /**\n * Handles the mouse double click on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartOnDoubleClick = function (e) {\n var element = e.target;\n this.trigger(chartDoubleClick, { target: element.id, x: this.mouseX, y: this.mouseY });\n return false;\n };\n /**\n * Handles the keyboard onkeydown on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartKeyDown = function (e) {\n var actionKey = '';\n if ((this.isZoomed && e.code === 'Tab') || e.code === 'Space') {\n e.preventDefault();\n }\n if (this.tooltip.enable && ((e.code === 'Tab' && this.previousTargetId.indexOf('Series') > -1) || e.code === 'Escape')) {\n actionKey = 'ESC';\n }\n if (this.highlightMode !== 'None' && e.code === 'Tab' && this.previousTargetId.indexOf('_chart_legend_') > -1) {\n if (this.highlightModule) {\n this.highlightModule.removeLegendHighlightStyles();\n }\n }\n if (e.ctrlKey && (e.key === '+' || e.code === 'Equal' || e.key === '-' || e.code === 'Minus')) {\n e.preventDefault();\n this.isZoomed = this.zoomModule && (this.zoomSettings.enableDeferredZooming || this.zoomSettings.enableSelectionZooming ||\n this.zoomSettings.enablePinchZooming || this.zoomSettings.enableMouseWheelZooming);\n //this.tooltipModule.fadeOut(this.element);\n actionKey = this.isZoomed ? e.code : '';\n }\n else if (e['keyCode'] === 82 && this.isZoomed) { // KeyCode 82 (R) for reseting\n e.preventDefault();\n this.isZoomed = false;\n actionKey = 'R';\n }\n else if (e.code.indexOf('Arrow') > -1) {\n e.preventDefault();\n actionKey = this.isZoomed ? e.code : '';\n }\n if (e.ctrlKey && (e.key === 'p')) {\n e.preventDefault();\n actionKey = 'CtrlP';\n }\n if (actionKey !== '')\n this.chartKeyboardNavigations(e, e.target.id, actionKey);\n return false;\n };\n /**\n * Handles the keyboard onkeydown on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartKeyUp = function (e) {\n var actionKey = '';\n var targetId = e.target['id'];\n var groupElement;\n var markerGroup;\n var targetElement = e.target;\n var titleElement = getElement(this.element.id + '_ChartTitle');\n var seriesElement = getElement(this.element.id + 'SeriesCollection');\n var legendElement = getElement(this.element.id + '_chart_legend_translate_g');\n var pagingElement = getElement(this.element.id + '_chart_legend_pageup');\n if (titleElement) {\n titleElement.setAttribute('class', 'e-chart-focused');\n }\n if (seriesElement && seriesElement.firstElementChild && seriesElement.firstElementChild.children[1]) {\n var firstChild = seriesElement.firstElementChild.children[1];\n var className = firstChild.getAttribute('class');\n if (className && className.indexOf('e-chart-focused') === -1) {\n className = className + ' e-chart-focused';\n }\n else if (!className) {\n className = 'e-chart-focused';\n }\n firstChild.setAttribute('class', className);\n }\n if (legendElement) {\n var firstChild = legendElement.firstElementChild;\n var className = firstChild.getAttribute('class');\n if (className && className.indexOf('e-chart-focused') === -1) {\n className = className + ' e-chart-focused';\n }\n else if (!className) {\n className = 'e-chart-focused';\n }\n firstChild.setAttribute('class', className);\n }\n if (pagingElement) {\n pagingElement.setAttribute('class', 'e-chart-focused');\n }\n if (e.code === 'Tab') {\n if (this.previousTargetId !== '') {\n if ((this.previousTargetId.indexOf('_Series_') > -1 && targetId.indexOf('_Series_') === -1)) {\n groupElement = getElement(this.element.id + 'SeriesCollection');\n var previousElement = this.previousTargetId.indexOf('_Symbol') > -1 ?\n getElement(this.element.id + 'SymbolGroup' + this.currentSeriesIndex).children[this.currentPointIndex + 1] :\n (this.previousTargetId.indexOf('_Point_') > -1 ?\n groupElement.children[this.currentSeriesIndex].children[this.currentPointIndex + 1] :\n groupElement.children[this.currentSeriesIndex]);\n this.setTabIndex(previousElement, groupElement.firstElementChild);\n this.currentPointIndex = 0;\n this.currentSeriesIndex = 0;\n }\n else if (this.previousTargetId.indexOf('_chart_legend_page') > -1 && targetId.indexOf('_chart_legend_page') === -1\n && targetId.indexOf('_chart_legend_g_') === -1) {\n this.setTabIndex(e.target, getElement(this.element.id + '_chart_legend_pageup'));\n }\n else if (this.previousTargetId.indexOf('_chart_legend_g_') > -1 && targetId.indexOf('_chart_legend_g_') === -1) {\n groupElement = getElement(this.element.id + '_chart_legend_translate_g');\n this.setTabIndex(groupElement.children[this.currentLegendIndex], groupElement.firstElementChild);\n }\n }\n this.previousTargetId = targetId;\n if (targetId.indexOf('SeriesGroup') > -1) {\n this.currentSeriesIndex = +targetId.split('SeriesGroup')[1];\n targetElement.removeAttribute('tabindex');\n targetElement.blur();\n if (targetElement.children[1].id.indexOf('_Point_') === -1) {\n markerGroup = getElement(this.element.id + 'SymbolGroup' + targetId.split('SeriesGroup')[1]);\n }\n targetId = this.focusChild((markerGroup != null ? markerGroup.children[1] : targetElement.children[1]));\n }\n actionKey = this.highlightMode !== 'None' || this.tooltip.enable ? 'Tab' : '';\n }\n else if (e.code.indexOf('Arrow') > -1) {\n e.preventDefault();\n this.previousTargetId = targetId;\n if (targetId.indexOf('_chart_legend_page') > -1) {\n if (e.code === 'ArrowLeft') {\n getElement(this.element.id + '_chart_legend_pagedown').removeAttribute('tabindex');\n this.focusChild(getElement(this.element.id + '_chart_legend_pageup'));\n }\n else if (e.code === 'ArrowRight') {\n getElement(this.element.id + '_chart_legend_pageup').removeAttribute('tabindex');\n this.focusChild(getElement(this.element.id + '_chart_legend_pagedown'));\n }\n }\n else if ((targetId.indexOf('_chart_legend_') > -1)) {\n var legendElement_1 = targetElement.parentElement.children;\n legendElement_1[this.currentLegendIndex].removeAttribute('tabindex');\n this.currentLegendIndex += (e.code === 'ArrowUp' || e.code === 'ArrowRight') ? +1 : -1;\n this.currentLegendIndex = this.getActualIndex(this.currentLegendIndex, legendElement_1.length);\n var currentLegend = legendElement_1[this.currentLegendIndex];\n this.focusChild(currentLegend);\n targetId = currentLegend.children[1].id;\n actionKey = this.highlightMode !== 'None' ? 'ArrowMove' : '';\n }\n else if (targetId.indexOf('_Series_') > -1) {\n groupElement = targetElement.parentElement.parentElement;\n var currentPoint = e.target;\n targetElement.removeAttribute('tabindex');\n targetElement.blur();\n if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {\n var seriesIndexes = [];\n for (var i = 0; i < groupElement.children.length; i++) {\n if (groupElement.children[i].id.indexOf('SeriesGroup') > -1) {\n seriesIndexes.push(+groupElement.children[i].id.split('SeriesGroup')[1]);\n }\n }\n this.currentSeriesIndex = seriesIndexes.indexOf(this.currentSeriesIndex) + (e.code === 'ArrowRight' ? 1 : -1);\n this.currentSeriesIndex = seriesIndexes[this.getActualIndex(this.currentSeriesIndex, seriesIndexes.length)];\n }\n else {\n this.currentPointIndex += e.code === 'ArrowUp' ? 1 : -1;\n }\n if (targetId.indexOf('_Symbol') > -1) {\n this.currentPointIndex = this.getActualIndex(this.currentPointIndex, getElement(this.element.id + 'SymbolGroup' + this.currentSeriesIndex).childElementCount - 1);\n currentPoint = getElement(this.element.id + '_Series_' + this.currentSeriesIndex + '_Point_' +\n this.currentPointIndex + '_Symbol');\n }\n else if (targetId.indexOf('_Point_') > -1) {\n this.currentPointIndex = this.getActualIndex(this.currentPointIndex, getElement(this.element.id + 'SeriesGroup' + this.currentSeriesIndex).childElementCount - 1);\n currentPoint = getElement(this.element.id + '_Series_' + this.currentSeriesIndex + '_Point_' +\n this.currentPointIndex);\n }\n targetId = this.focusChild(currentPoint);\n actionKey = this.tooltip.enable || this.highlightMode !== 'None' ? 'ArrowMove' : '';\n }\n }\n else if ((e.code === 'Enter' || e.code === 'Space') && ((targetId.indexOf('_chart_legend_') > -1) ||\n (targetId.indexOf('_Point_') > -1))) {\n targetId = (targetId.indexOf('_chart_legend_page') > -1) ? targetId : ((targetId.indexOf('_chart_legend_') > -1) ?\n targetElement.children[1].id : targetId);\n actionKey = 'Enter';\n }\n if (actionKey !== '') {\n this.chartKeyboardNavigations(e, targetId, actionKey);\n }\n return false;\n };\n Chart.prototype.setTabIndex = function (previousElement, currentElement) {\n if (previousElement) {\n previousElement.removeAttribute('tabindex');\n }\n if (currentElement) {\n currentElement.setAttribute('tabindex', '0');\n }\n };\n Chart.prototype.getActualIndex = function (index, totalLength) {\n return index > totalLength - 1 ? 0 : (index < 0 ? totalLength - 1 : index);\n };\n Chart.prototype.focusChild = function (element) {\n element.setAttribute('tabindex', '0');\n var className = element.getAttribute('class');\n element.setAttribute('tabindex', '0');\n if (className && className.indexOf('e-chart-focused') === -1) {\n className = 'e-chart-focused ' + className;\n }\n else if (!className) {\n className = 'e-chart-focused';\n }\n element.setAttribute('class', className);\n element.focus();\n return element.id;\n };\n /**\n * Handles the document onkey.\n *\n * @private\n */\n Chart.prototype.documentKeyHandler = function (e) {\n // 74 - J\n if (e.altKey && e.keyCode === 74 && !isNullOrUndefined(this.element)) {\n this.element.focus();\n }\n };\n Chart.prototype.chartKeyboardNavigations = function (e, targetId, actionKey) {\n this.isLegendClicked = false;\n switch (actionKey) {\n case 'Tab':\n case 'ArrowMove':\n if (this.highlightModule) {\n this.highlightModule.removeLegendHighlightStyles();\n }\n if (targetId.indexOf('_Point_') > -1) {\n var seriesIndex = +(targetId.split('_Series_')[1].split('_Point_')[0]);\n var pointIndex = +(targetId.split('_Series_')[1].replace('_Symbol', '').split('_Point_')[1]);\n var pointRegion = this.visibleSeries[seriesIndex].points[pointIndex].symbolLocations[0];\n this.mouseX = pointRegion.x + this.initialClipRect.x;\n this.mouseY = pointRegion.y + this.initialClipRect.y;\n if (this.highlightModule) {\n this.highlightModule.highlightChart(document.getElementById(targetId), 'mousemove');\n this.highlightModule.completeSelection(document.getElementById(targetId), 'mousemove');\n }\n if (this.tooltipModule) {\n this.tooltipModule.tooltip();\n }\n }\n if (this.highlightModule && this.highlightMode !== 'None') {\n targetId = targetId.indexOf('_chart_legend_g_') > -1 ? document.getElementById(targetId).firstChild['id'] : targetId;\n var legendID = this.element.id + '_chart_legend';\n var legendItemsId = [legendID + '_text_', legendID + '_shape_marker_',\n legendID + '_shape_'];\n for (var i = 0; i < legendItemsId.length; i++) {\n var id = legendItemsId[i];\n if (targetId.indexOf(id) > -1) {\n document.getElementById(targetId).setAttribute('class', '');\n this.highlightModule.legendSelection(this, parseInt(targetId.split(id)[1], 10), document.getElementById(targetId), 'mousemove');\n break;\n }\n }\n }\n break;\n case 'Enter':\n case 'Space':\n if (targetId.indexOf('_chart_legend_') > -1) {\n this.isLegendClicked = true;\n this.legendModule.click(e);\n this.focusChild(document.getElementById(targetId).parentElement);\n }\n else {\n this.selectionModule.calculateSelectedElements(document.getElementById(targetId), 'click');\n }\n break;\n case 'CtrlP':\n this.print();\n break;\n case 'ESC':\n this.tooltipModule.removeTooltip(1);\n break;\n case 'Equal':\n case 'Minus':\n this.zoomModule.isZoomed = this.zoomModule.performedUI = true;\n this.zoomModule.isPanning = this.isChartDrag = false;\n if (actionKey === 'Equal') {\n this.zoomModule.toolkit.zoomInOutCalculation(1, this, this.axisCollections, this.zoomSettings.mode);\n }\n else {\n this.zoomModule.toolkit.zoomInOutCalculation(-1, this, this.axisCollections, this.zoomSettings.mode);\n }\n this.zoomModule.performZoomRedraw(this);\n this.element.focus();\n break;\n case 'ArrowUp':\n case 'ArrowDown':\n case 'ArrowLeft':\n case 'ArrowRight':\n var yArrowPadding = actionKey === 'ArrowUp' ? 10 : (actionKey === 'ArrowDown' ? -10 : 0);\n var xArrowPadding = actionKey === 'ArrowLeft' ? -10 : (actionKey === 'ArrowRight' ? 10 : 0);\n this.zoomModule.isPanning = this.isChartDrag = true;\n this.zoomModule.doPan(this, this.axisCollections, xArrowPadding, yArrowPadding);\n this.zoomModule.performZoomRedraw(this);\n this.element.focus();\n break;\n case 'R':\n this.zoomModule.toolkit.reset(e);\n break;\n }\n };\n /**\n * Handles the mouse click on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartOnMouseClick = function (e) {\n var _this = this;\n var element = e.target;\n var chart = this;\n this.clickCount++;\n var timeInterval = 400;\n if (this.clickCount === 1) {\n this.singleClickTimer = +setTimeout(function () {\n chart.clickCount = 0;\n chart.trigger(chartMouseClick, { target: element.id, x: chart.mouseX, y: chart.mouseY });\n }, timeInterval);\n }\n else if (this.clickCount === 2 && !this.pointDoubleClick) {\n clearTimeout(this.singleClickTimer);\n this.clickCount = 0;\n }\n var isAngular = 'isAngular';\n if (this[isAngular]) {\n var observers = 'observers';\n timeInterval = this.pointDoubleClick[observers].length > 0 ? 400 : 0;\n }\n else {\n timeInterval = this.pointDoubleClick ? 400 : 0;\n }\n if (this.clickCount === 1 && this.pointClick) {\n this.singleClickTimer = +setTimeout(function () {\n _this.clickCount = 0;\n _this.triggerPointEvent(pointClick, e);\n }, timeInterval);\n }\n else if (this.clickCount === 2 && this.pointDoubleClick) {\n clearTimeout(this.singleClickTimer);\n this.clickCount = 0;\n this.triggerPointEvent(pointDoubleClick, e);\n }\n if (this.axisLabelClick) {\n this.triggerAxisLabelClickEvent(axisLabelClick, e);\n }\n this.notify('click', e);\n return false;\n };\n Chart.prototype.triggerPointEvent = function (event, e) {\n var evt = e;\n var data = new ChartData(this);\n var pointData = data.getData();\n if (pointData.series && pointData.point) {\n this.trigger(event, {\n series: this.isBlazor ? {} : pointData.series,\n point: pointData.point,\n seriesIndex: pointData.series.index, pointIndex: pointData.point.index,\n x: this.mouseX, y: this.mouseY, pageX: evt.pageX, pageY: evt.pageY\n });\n }\n };\n Chart.prototype.triggerAxisLabelClickEvent = function (event, e) {\n var targetElement = e.target;\n var clickEvt = e;\n if (targetElement.id.indexOf('_AxisLabel_') !== -1) {\n var index = targetElement.id.split('_AxisLabel_');\n var axisIndex = +index[0].slice(-1);\n var labelIndex = +index[1];\n var currentAxis = this.axisCollections[axisIndex];\n if (currentAxis.visible && (axisIndex === 0 || axisIndex === 1)) {\n this.trigger(event, {\n chart: this,\n axis: currentAxis,\n text: currentAxis.visibleLabels[labelIndex].text,\n labelID: targetElement.id,\n index: labelIndex,\n location: new ChartLocation(clickEvt.pageX, clickEvt.pageY),\n value: currentAxis.visibleLabels[labelIndex].value\n });\n }\n }\n };\n /**\n * Handles the mouse move on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartOnMouseMove = function (e) {\n var element = e.target;\n this.trigger(chartMouseMove, { target: element.id, x: this.mouseX, y: this.mouseY });\n if (this.pointMove) {\n this.triggerPointEvent(pointMove, e);\n }\n // Tooltip for chart series.\n if (!this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY);\n this.axisTooltip(e, this.mouseX, this.mouseY);\n }\n if (this.dataEditingModule) {\n this.dataEditingModule.pointMouseMove(e);\n }\n this.notify(Browser.touchMoveEvent, e);\n this.isTouch = false;\n return false;\n };\n Chart.prototype.titleTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n var id = (targetId === (this.element.id + '_ChartTitle') || targetId === (this.element.id + '_ChartSubTitle') ||\n targetId.indexOf('_AxisTitle') > -1 || targetId.indexOf('_legend_title') > -1);\n var index = 0;\n if (targetId.indexOf('_AxisTitle') > -1) {\n index = parseInt(((targetId.replace(this.element.id, '')).replace('AxisLabel_', '')).split('_')[2], 10);\n }\n if (id && (event.target.textContent.indexOf('...') > -1)) {\n var title = (targetId === (this.element.id + '_ChartTitle')) ? this.title :\n targetId.indexOf('_AxisTitle') > -1 ? this.axisCollections[index].title :\n targetId.indexOf('_ChartSubTitle') > -1 ? this.subTitle : this.legendSettings.title;\n showTooltip(title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);\n }\n else {\n removeElement(this.element.id + '_EJ2_Title_Tooltip');\n }\n };\n Chart.prototype.axisTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n if (((targetId.indexOf('AxisLabel') > -1) || targetId.indexOf('Axis_MultiLevelLabel') > -1) &&\n (event.target.textContent.indexOf('...') > -1)) {\n var isTitleOrLegendEnabled = (this.legendSettings.visible || this.primaryXAxis.title === '');\n showTooltip(this.findAxisLabel(targetId), x, y, this.element.offsetWidth, this.element.id + '_EJ2_AxisLabel_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch, isTitleOrLegendEnabled);\n }\n else {\n removeElement(this.element.id + '_EJ2_AxisLabel_Tooltip');\n }\n };\n Chart.prototype.findAxisLabel = function (text) {\n var texts;\n if (text.indexOf('AxisLabel') > -1) {\n texts = ((text.replace(this.element.id, '')).replace('AxisLabel_', '')).split('_');\n return this.axisCollections[parseInt(texts[0], 10)].visibleLabels[parseInt(texts[1], 10)].originalText;\n }\n else {\n texts = ((text.replace(this.element.id, '')).replace('Axis_MultiLevelLabel_Level_', '').replace('Text_', '')).split('_');\n return (this.axisCollections[parseInt(texts[0], 10)].multiLevelLabels[parseInt(texts[1], 10)]\n .categories[parseInt(texts[2], 10)].text);\n }\n };\n /**\n * Handles the mouse down on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.chartOnMouseDown = function (e) {\n var pageX;\n var pageY;\n var target;\n var touchArg;\n var offset = Browser.isDevice ? 20 : 30;\n var rect = this.element.getBoundingClientRect();\n var element = e.target;\n if (this.stockChart && this.stockChart.zoomSettings.enablePan) {\n this.allowPan = true;\n }\n this.trigger(chartMouseDown, { target: element.id, x: this.mouseX, y: this.mouseY });\n if (e.type === 'touchstart') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n target = touchArg.target;\n }\n else {\n this.isTouch = e.pointerType === 'touch';\n pageX = e.clientX;\n pageY = e.clientY;\n target = e.target;\n }\n var svgRect = getElement(this.svgId).getBoundingClientRect();\n this.mouseDownX = this.previousMouseMoveX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n this.mouseDownY = this.previousMouseMoveY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n if (this.isTouch) {\n this.isDoubleTap = (new Date().getTime() < this.threshold && target.id.indexOf(this.element.id + '_Zooming_') === -1 &&\n (this.mouseDownX - offset >= this.mouseX || this.mouseDownX + offset >= this.mouseX) &&\n (this.mouseDownY - offset >= this.mouseY || this.mouseDownY + offset >= this.mouseY) &&\n (this.mouseX - offset >= this.mouseDownX || this.mouseX + offset >= this.mouseDownX) &&\n (this.mouseY - offset >= this.mouseDownY || this.mouseY + offset >= this.mouseDownY));\n }\n if (this.dataEditingModule) {\n this.dataEditingModule.pointMouseDown();\n }\n this.notify(Browser.touchStartEvent, e);\n return false;\n };\n /**\n * Handles the mouse up.\n *\n * @returns {boolean} false\n * @private\n */\n Chart.prototype.mouseEnd = function (e) {\n var pageY;\n var pageX;\n var touchArg;\n if (e.type === 'touchend') {\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n this.isTouch = true;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n pageY = e.clientY;\n pageX = e.clientX;\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n }\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseUp(e);\n return false;\n };\n /**\n * Handles the mouse up.\n *\n * @returns {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseUp = function (e) {\n var element = e.target;\n this.trigger(chartMouseUp, { target: element.id, x: this.mouseX, y: this.mouseY });\n this.isChartDrag = false;\n this.allowPan = false;\n if (this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n this.axisTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n this.threshold = new Date().getTime() + 300;\n }\n if (this.dataEditingModule) {\n this.dataEditingModule.pointMouseUp();\n }\n if (!this.enableCanvas && this.seriesElements) {\n this.seriesElements.removeAttribute('clip-path');\n }\n this.notify(Browser.touchEndEvent, e);\n return false;\n };\n /**\n * Method to set culture for chart\n */\n Chart.prototype.setCulture = function () {\n this.intl = new Internationalization();\n this.setLocaleConstants();\n this.localeObject = new L10n(this.getModuleName(), this.defaultLocalConstants, this.locale);\n };\n /**\n * Method to set the annotation content dynamically for chart.\n */\n Chart.prototype.setAnnotationValue = function (annotationIndex, content) {\n var parentNode = getElement(this.element.id + '_Annotation_Collections');\n var annotation = this.annotations[annotationIndex];\n var element;\n if (content !== null) {\n annotation.content = content;\n if (parentNode) {\n removeElement(this.element.id + '_Annotation_' + annotationIndex);\n element = this.createElement('div');\n this.annotationModule.processAnnotation(annotation, annotationIndex, element);\n parentNode.appendChild(element.children[0]);\n }\n else {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n }\n };\n /**\n * Method to set locale constants\n */\n Chart.prototype.setLocaleConstants = function () {\n this.defaultLocalConstants = {\n ZoomIn: 'Zoom in',\n Zoom: 'Zoom',\n ZoomOut: 'Zoom out',\n Pan: 'Pan',\n Reset: 'Reset',\n ResetZoom: 'Reset Zoom'\n };\n };\n /**\n * Theming for chart\n */\n Chart.prototype.setTheme = function () {\n /*! Set theme */\n this.themeStyle = getThemeColor(this.theme, this.enableCanvas);\n if (!(document.getElementById(this.element.id + 'Keyboard_chart_focus'))) {\n var style = document.createElement('style');\n style.setAttribute('id', this.element.id + 'Keyboard_chart_focus');\n style.innerText = '.e-chart-focused:focus, path[class*=_ej2_chart_selection_series]:focus,' +\n 'path[id*=_Point_]:focus, text[id*=_ChartTitle]:focus {outline: none } .e-chart-focused:focus-visible, path[class*=_ej2_chart_selection_series]:focus-visible,' +\n 'path[id*=_Point_]:focus-visible, text[id*=_ChartTitle]:focus-visible {outline: 1.5px ' + this.themeStyle.tabColor + ' solid}';\n document.body.appendChild(style);\n }\n };\n /**\n * To provide the array of modules needed for control rendering\n *\n * @returns {ModuleDeclaration[]}\n * @private\n */\n /* eslint-disable */\n Chart.prototype.requiredModules = function () {\n var _this = this;\n var modules = [];\n var series = this.series;\n var enableAnnotation = false;\n var moduleName;\n var errorBarVisible = false;\n var isPointDrag = false;\n var dataLabelEnable = false;\n var zooming = this.zoomSettings;\n this.chartAreaType = (series.length > 0 && (series[0].type === 'Polar' || series[0].type === 'Radar')) ? 'PolarRadar' : 'Cartesian';\n if (this.tooltip.enable) {\n modules.push({\n member: 'Tooltip',\n args: [this]\n });\n }\n series.map(function (value) {\n _this.isLegend = (_this.legendSettings.visible && ((value.name !== '') || !!_this.isLegend));\n moduleName = value.type.indexOf('100') !== -1 ? value.type.replace('100', '') + 'Series' : value.type + 'Series';\n errorBarVisible = value.errorBar.visible || errorBarVisible;\n dataLabelEnable = value.marker.dataLabel.visible || dataLabelEnable || (value.type == 'Pareto' && value.paretoOptions.marker.dataLabel.visible);\n isPointDrag = value.dragSettings.enable || isPointDrag;\n if (!modules.some(function (currentModule) {\n return currentModule.member === moduleName;\n })) {\n modules.push({\n member: moduleName,\n args: [_this, series]\n });\n }\n if (_this.chartAreaType === 'PolarRadar') {\n modules.push({\n member: value.drawType + 'Series',\n args: [_this, series]\n });\n }\n if (value.type === 'Pareto') {\n modules.push({\n member: 'ColumnSeries',\n args: [_this, series]\n });\n modules.push({\n member: 'LineSeries',\n args: [_this, series]\n });\n }\n });\n this.findIndicatorModules(modules);\n this.findTrendLineModules(modules);\n modules = this.findAxisModule(modules);\n enableAnnotation = this.annotations.some(function (value) {\n return (value.content !== null);\n });\n if (errorBarVisible) {\n modules.push({\n member: 'ErrorBar',\n args: [this, series]\n });\n }\n if (this.isLegend) {\n modules.push({\n member: 'Legend',\n args: [this]\n });\n }\n if (this.enableExport || this.allowExport) {\n modules.push({\n member: 'Export',\n args: [this]\n });\n }\n if (this.chartAreaType !== 'PolarRadar' && this.crosshair.enable) {\n modules.push({\n member: 'Crosshair',\n args: [this]\n });\n }\n if (this.chartAreaType !== 'PolarRadar' && !this.scrollSettingEnabled && (zooming.enableSelectionZooming\n || zooming.enableMouseWheelZooming || zooming.enablePinchZooming || zooming.enablePan || zooming.enableScrollbar || zooming.showToolbar)) {\n modules.push({\n member: 'Zoom',\n args: [this, this.zoomSettings]\n });\n if (zooming.enableScrollbar) {\n modules.push({\n member: 'ScrollBar',\n args: [this]\n });\n }\n }\n if (this.selectionMode !== 'None' && !(this.chartAreaType === 'PolarRadar' &&\n this.selectionMode.indexOf('Drag') > -1)) {\n modules.push({\n member: 'Selection',\n args: [this]\n });\n }\n if (this.highlightMode !== 'None' || this.legendSettings.enableHighlight) {\n modules.push({\n member: 'Highlight',\n args: [this]\n });\n }\n if (dataLabelEnable) {\n modules.push({\n member: 'DataLabel',\n args: [this, series]\n });\n }\n if (isPointDrag) {\n modules.push({\n member: 'DataEditing',\n args: [this]\n });\n }\n if (enableAnnotation) {\n modules.push({\n member: 'Annotation',\n args: [this]\n });\n }\n return modules;\n };\n Chart.prototype.findAxisModule = function (modules) {\n var axisCollections = [];\n axisCollections.push(this.primaryXAxis);\n axisCollections.push(this.primaryYAxis);\n axisCollections = axisCollections.concat(this.axes);\n var datetimeEnabled = false;\n var categoryEnabled = false;\n var logarithmicEnabled = false;\n var striplineEnabled = false;\n var dateTimeCategoryEnabled = false;\n var multiLevelEnabled = false;\n for (var _i = 0, axisCollections_1 = axisCollections; _i < axisCollections_1.length; _i++) {\n var axis = axisCollections_1[_i];\n datetimeEnabled = axis.valueType === 'DateTime' || datetimeEnabled;\n categoryEnabled = axis.valueType === 'Category' || categoryEnabled;\n logarithmicEnabled = axis.valueType === 'Logarithmic' || logarithmicEnabled;\n dateTimeCategoryEnabled = axis.valueType === 'DateTimeCategory' || dateTimeCategoryEnabled;\n striplineEnabled = this.findStriplineVisibility(axis.stripLines) || striplineEnabled;\n multiLevelEnabled = axis.multiLevelLabels.length > 0 || multiLevelEnabled;\n this.scrollSettingEnabled = axis.scrollbarSettings.enable ? true : this.scrollSettingEnabled;\n }\n if (datetimeEnabled) {\n modules.push({\n member: 'DateTime',\n args: [this]\n });\n }\n if (categoryEnabled) {\n modules.push({\n member: 'Category',\n args: [this]\n });\n }\n if (logarithmicEnabled) {\n modules.push({\n member: 'Logarithmic',\n args: [this]\n });\n }\n if (striplineEnabled) {\n modules.push({\n member: 'StripLine',\n args: [this]\n });\n }\n if (multiLevelEnabled) {\n modules.push({\n member: 'MultiLevelLabel',\n args: [this]\n });\n }\n if (dateTimeCategoryEnabled) {\n modules.push({\n member: 'DateTimeCategory',\n args: [this]\n });\n }\n if (this.scrollSettingEnabled) {\n modules.push({\n member: 'ScrollBar',\n args: [this]\n });\n }\n return modules;\n };\n Chart.prototype.findIndicatorModules = function (modules) {\n var macdEnable;\n var bandEnable;\n var indicators = this.indicators;\n if (this.indicators.length) {\n modules.push({\n member: 'LineSeries',\n args: [this]\n });\n indicators.map(function (indicator) {\n macdEnable = macdEnable || indicator.type === 'Macd';\n bandEnable = bandEnable || indicator.type === 'BollingerBands';\n });\n if (macdEnable) {\n modules.push({\n member: 'ColumnSeries',\n args: [this]\n });\n }\n if (bandEnable) {\n modules.push({\n member: 'RangeAreaSeries',\n args: [this]\n });\n }\n if (bandEnable) {\n modules.push({\n member: 'SplineRangeAreaSeries',\n args: [this]\n });\n }\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n modules.push({\n member: indicator.type + 'Indicator',\n args: [this]\n });\n }\n }\n };\n Chart.prototype.findTrendLineModules = function (modules) {\n var isLine;\n var isSpline;\n var _loop_1 = function (series) {\n var markerEnable;\n series.trendlines.map(function (trendline) {\n markerEnable = markerEnable || trendline.marker.visible;\n isLine = isLine || (trendline.type === 'Linear' || trendline.type === 'MovingAverage') ? true : false;\n isSpline = isSpline || (!isLine || (trendline.type === 'Exponential' || trendline.type === 'Logarithmic' || trendline.type === 'Power' || trendline.type === 'Polynomial')) ? true : false;\n });\n if (markerEnable) {\n modules.push({\n member: 'Marker',\n args: [this_1, series]\n });\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n _loop_1(series);\n }\n if (isLine || isSpline) {\n modules.push({\n member: 'TrendLine',\n args: [this]\n });\n }\n if (isLine) {\n modules.push({\n member: 'LineSeries',\n args: [this]\n });\n }\n if (isSpline) {\n modules.push({\n member: 'SplineSeries',\n args: [this]\n });\n }\n };\n Chart.prototype.findStriplineVisibility = function (striplines) {\n var visible = false;\n for (var _i = 0, striplines_1 = striplines; _i < striplines_1.length; _i++) {\n var stripline = striplines_1[_i];\n if (stripline.visible) {\n visible = true;\n break;\n }\n }\n return visible;\n };\n /**\n * To Remove the SVG.\n * @return {boolean}\n * @private\n */\n Chart.prototype.removeSvg = function () {\n if (this.redraw) {\n return null;\n }\n blazorTemplatesReset(this);\n if (this.enableCanvas && this.svgObject && this.svgObject.tagName === 'CANVAS') {\n this.renderer.clearRect(new Rect(0, 0, this.availableSize.width, this.availableSize.height));\n if (this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n return null;\n }\n removeElement(this.element.id + '_Secondary_Element');\n if (this.isReact) {\n this.clearTemplate();\n }\n var removeLength = 0;\n if (this.zoomModule && this.zoomModule.pinchTarget) {\n this.zoomModule.pinchTarget.id = '';\n this.zoomModule.pinchTarget.setAttribute('opacity', '0');\n this.svgObject.appendChild(this.zoomModule.pinchTarget);\n removeLength = 1;\n }\n // Fix for blazor resize issue\n if (!isNullOrUndefined(this.resizeTo)) {\n if (this.resizeTo !== this.checkResize && this.isBlazor && this.element.childElementCount) {\n var containerCollection = document.querySelectorAll('.e-chart');\n for (var index = 0; index < containerCollection.length; index++) {\n var container = containerCollection[index];\n while (container.firstChild) {\n remove(container.firstChild);\n }\n }\n }\n this.checkResize = this.resizeTo;\n }\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > removeLength) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode && !(this.stockChart)) {\n remove(this.svgObject);\n }\n }\n };\n Chart.prototype.refreshDefinition = function (definitions) {\n for (var _i = 0, definitions_1 = definitions; _i < definitions_1.length; _i++) {\n var item = definitions_1[_i];\n item.axes = [];\n }\n };\n /**\n * Refresh the axis default value.\n *\n * @returns {boolean}\n * @private\n */\n Chart.prototype.refreshAxis = function () {\n var axis = this.primaryXAxis;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n axis = this.primaryYAxis;\n axis.isStack100 = false;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n for (var _i = 0, _a = this.axes; _i < _a.length; _i++) {\n var item = _a[_i];\n axis = item;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n axis.isStack100 = false;\n }\n if (this.paretoSeriesModule && this.series[0].type === 'Pareto') {\n for (var _b = 0, _c = this.paretoSeriesModule.paretoAxes; _b < _c.length; _b++) {\n var item = _c[_b];\n axis = item;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n axis.isStack100 = false;\n }\n }\n };\n Chart.prototype.axisChange = function (axis) {\n if (!axis.name && !axis.valueType) {\n return false;\n }\n this.refreshDefinition(this.columns);\n this.refreshDefinition(this.rows);\n this.calculateVisibleAxis();\n this.processData();\n return true;\n };\n /**\n * Get visible series by index\n */\n Chart.prototype.getVisibleSeries = function (visibleSeries, index) {\n for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {\n var series = visibleSeries_1[_i];\n if (index === series.index) {\n return series;\n }\n }\n return null;\n };\n /**\n * Fix for live data update flicker issue\n */\n Chart.prototype.refreshLiveData = function () {\n this.calculateVisibleSeries();\n this.initTechnicalIndicators();\n this.initTrendLines();\n this.refreshDefinition(this.columns);\n this.refreshDefinition(this.rows);\n this.calculateVisibleAxis();\n this.processData(false);\n if (!this.isBlazor) {\n this.enableCanvas ? this.createChartSvg() : this.removeSvg();\n this.refreshAxis();\n this.refreshBound();\n this.trigger('loaded', { chart: this.isBlazor ? {} : this });\n }\n };\n /**\n * To remove style element\n */\n Chart.prototype.removeStyles = function () {\n removeElement(this.element.id + '_ej2_chart_selection');\n removeElement(this.element.id + '_ej2_chart_highlight');\n };\n /**\n * To trigger the manual mouse move event for live chart tooltip\n */\n Chart.prototype.mouseMoveEvent = function () {\n if (this.tooltip.enable && this.previousPageX !== null && this.previousPageY !== null) {\n var mousemove = document.createEvent('MouseEvent');\n mousemove.initMouseEvent('mousemove', true, false, window, 1, 100, 100, this.previousPageX, this.previousPageY, false, false, false, false, 0, null);\n this.element.dispatchEvent(mousemove);\n }\n };\n /**\n * Displays a tooltip for the data points.\n *\n * @param {object} x - Specifies the x value of the point or x coordinate.\n * @param {number} y - Specifies the x value of the point or y coordinate.\n * @param {boolean} isPoint - Specifies whether x and y are data point or chart coordinates.\n * @returns {void}\n */\n Chart.prototype.showTooltip = function (x, y, isPoint) {\n if (isPoint === void 0) { isPoint = false; }\n if (isPoint) {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n for (var _b = 0, _c = series.points; _b < _c.length; _b++) {\n var point = _c[_b];\n var pointX = series.xAxis.valueType == 'DateTime' ? point.xValue : point.x;\n var xValue = x;\n if (series.xAxis.valueType == 'DateTime') {\n xValue = new Date(xValue).getTime();\n }\n if (x == pointX && y === point.yValue) {\n this.mouseX = point.regions[0].x + this.chartAxisLayoutPanel.seriesClipRect.x;\n this.mouseY = point.regions[0].y + this.chartAxisLayoutPanel.seriesClipRect.y;\n this.tooltipModule.tooltip();\n this.markerRender.mouseMoveHandler();\n break;\n }\n }\n }\n }\n else {\n if (this.isTouch) {\n this.startMove = true;\n }\n this.mouseX = x;\n this.mouseY = y;\n this.tooltipModule.mouseMoveHandler();\n this.markerRender.mouseMoveHandler();\n }\n };\n /**\n * Hides a tooltip in the chart.\n *\n * @returns {void}\n */\n Chart.prototype.hideTooltip = function () {\n this.tooltipModule.removeTooltip(Browser.isDevice ? 2000 : 1000);\n };\n /**\n * Displays a crosshair for the chart.\n *\n * @param {object} x - Specifies the x value of the point or x coordinate.\n * @param {number} y - Specifies the x value of the point or y coordinate.\n * @returns {void}\n */\n Chart.prototype.showCrosshair = function (x, y) {\n this.mouseX = x;\n this.mouseY = y;\n this.isCrosshair = false;\n if (withInBounds(this.mouseX, this.mouseY, this.chartAxisLayoutPanel.seriesClipRect)) {\n this.crosshairModule.crosshair();\n }\n else {\n this.hideCrosshair();\n }\n this.isCrosshair = true;\n };\n /**\n * Hides a tooltip in the chart.\n *\n * @returns {void}\n */\n Chart.prototype.hideCrosshair = function () {\n this.crosshairModule.removeCrosshair(Browser.isDevice ? 2000 : 1000);\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n Chart.prototype.onPropertyChanged = function (newProp, oldProp) {\n var renderer = false;\n var refreshBounds = false;\n this.animateSeries = false;\n var axis;\n if (!this.delayRedraw) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'primaryXAxis':\n axis = newProp.primaryXAxis;\n refreshBounds = this.axisChange(axis);\n if (newProp.primaryXAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryXAxis.crosshairTooltip) {\n refreshBounds = true;\n }\n if (!isNullOrUndefined(axis.isInversed) || !isNullOrUndefined(axis.opposedPosition)) {\n this.primaryXAxis.setIsInversedAndOpposedPosition();\n }\n break;\n case 'primaryYAxis':\n axis = newProp.primaryYAxis;\n refreshBounds = this.axisChange(axis);\n if (newProp.primaryYAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryYAxis.crosshairTooltip) {\n refreshBounds = true;\n }\n if (!isNullOrUndefined(axis.isInversed) || !isNullOrUndefined(axis.opposedPosition)) {\n this.primaryYAxis.setIsInversedAndOpposedPosition();\n }\n break;\n case 'axes':\n for (var _b = 0, _c = Object.keys(newProp.axes); _b < _c.length; _b++) {\n var index = _c[_b];\n axis = newProp.axes[index];\n refreshBounds = refreshBounds || this.axisChange(axis);\n if (!axis.crosshairTooltip) {\n refreshBounds = true;\n }\n if (!isNullOrUndefined(axis.isInversed) || !isNullOrUndefined(axis.opposedPosition)) {\n this.axes[index].setIsInversedAndOpposedPosition();\n }\n }\n break;\n case 'height':\n case 'width':\n this.createChartSvg();\n refreshBounds = true;\n break;\n case 'subTitle':\n case 'title':\n refreshBounds = true;\n break;\n case 'titleStyle':\n if (newProp.titleStyle && (newProp.titleStyle.size || newProp.titleStyle.textOverflow)) {\n refreshBounds = true;\n }\n else {\n renderer = true;\n }\n break;\n case 'subTitleStyle':\n if (newProp.subTitleStyle && (newProp.subTitleStyle.size || newProp.subTitleStyle.textOverflow)) {\n refreshBounds = true;\n }\n else {\n renderer = true;\n }\n break;\n case 'border':\n renderer = true;\n break;\n case 'dataSource':\n this.processData(false);\n refreshBounds = true;\n break;\n case 'enableCanvas':\n this.refresh();\n break;\n case 'series':\n var len = this.series.length;\n var seriesRefresh = false;\n var series = void 0;\n var blazorProp = void 0;\n for (var i = 0; i < len; i++) {\n series = newProp.series[i];\n // I264774 blazor series visible property binding not working issue fixed.\n if (this.isBlazor && series && ((series.visible !== oldProp.series[i].visible) || series.isClosed ||\n series.marker || series.emptyPointSettings || series.type || series.boxPlotMode || series.showMean)) {\n blazorProp = true;\n }\n if (!isNullOrUndefined(series) && (series.dataSource || series.query || series.errorBar || series.xName ||\n series.yName || series.size || series.high || series.low || series.open || series.close || series.trendlines ||\n series.fill || series.name || series.marker || series.width || series.binInterval || series.type || (series.visible !== oldProp.series[i].visible) || blazorProp)) {\n extend(this.getVisibleSeries(this.visibleSeries, i), series, null, true);\n seriesRefresh = true;\n }\n }\n if (seriesRefresh) {\n this.calculateVisibleSeries();\n this.initTechnicalIndicators();\n this.initTrendLines();\n this.refreshDefinition(this.columns);\n this.refreshDefinition(this.rows);\n this.calculateVisibleAxis();\n this.processData(false);\n refreshBounds = true;\n }\n break;\n case 'indicators':\n refreshBounds = true;\n break;\n case 'zoomSettings':\n if (newProp.zoomSettings.enableScrollbar || oldProp.zoomSettings.enableScrollbar) {\n refreshBounds = true;\n }\n renderer = true;\n break;\n case 'background':\n renderer = true;\n break;\n case 'chartArea':\n if (newProp.chartArea.border && newProp.chartArea.border.width) {\n refreshBounds = true;\n }\n renderer = true;\n break;\n case 'legendSettings':\n if (!newProp.legendSettings.background || !newProp.legendSettings.opacity) {\n refreshBounds = true;\n }\n renderer = true;\n break;\n case 'palettes':\n this.calculateVisibleSeries();\n renderer = true;\n break;\n case 'selectedDataIndexes':\n if (this.selectionModule) {\n this.selectionModule.currentMode = this.selectionMode;\n this.selectionModule.selectedDataIndexes = this.selectedDataIndexes;\n this.selectionModule.styleId = this.element.id + '_ej2_chart_selection';\n this.selectionModule.redrawSelection(this, oldProp.selectionMode, true);\n }\n else if (this.highlightModule) {\n this.highlightModule.currentMode = this.highlightMode;\n this.highlightModule.highlightDataIndexes = this.selectedDataIndexes;\n this.highlightModule.styleId = this.element.id + '_ej2_chart_highlight';\n this.highlightModule.redrawSelection(this, oldProp.selectionMode, true);\n }\n break;\n case 'selectionMode':\n if (this.selectionModule && newProp.selectionMode && newProp.selectionMode.indexOf('Drag') === -1) {\n this.selectionModule.currentMode = this.selectionMode;\n this.selectionModule.styleId = this.element.id + '_ej2_chart_selection';\n this.selectionModule.redrawSelection(this, oldProp.selectionMode, true);\n }\n break;\n case 'isMultiSelect':\n if (this.selectionModule && !newProp.isMultiSelect && this.selectionModule.selectedDataIndexes.length > 1) {\n this.selectionModule.currentMode = this.selectionMode;\n this.selectionModule.styleId = this.element.id + '_ej2_chart_selection';\n this.selectionModule.redrawSelection(this, oldProp.selectionMode);\n }\n break;\n case 'highlightMode':\n case 'selectionPattern':\n case 'highlightPattern':\n this.removeStyles();\n renderer = true;\n break;\n case 'theme':\n this.animateSeries = true;\n break;\n case 'enableRtl':\n case 'locale':\n case 'currencyCode':\n if (this.isBlazor) {\n this.setCulture();\n renderer = true;\n }\n else {\n this.refresh();\n }\n break;\n case 'tooltip':\n if (this.tooltipModule) { // To check the tooltip enable is true.\n this.tooltipModule.previousPoints = [];\n if (this.tooltip.template) {\n this.tooltipModule.template = this.tooltip.template;\n }\n }\n break;\n }\n }\n if (!refreshBounds && renderer) {\n this.rotatedDataLabelCollections = [];\n this.removeSvg();\n this.renderElements();\n this.trigger('loaded', { chart: this.isBlazor ? {} : this });\n }\n if (refreshBounds) {\n this.enableCanvas ? this.createChartSvg() : this.removeSvg();\n if (this.isReact) {\n this.clearTemplate();\n }\n this.dragY = null;\n this.refreshAxis();\n this.refreshBound();\n this.trigger('loaded', { chart: this.isBlazor ? {} : this });\n this.redraw = false;\n this.animated = false;\n }\n }\n };\n __decorate([\n Property(null)\n ], Chart.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"title\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"dataSource\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"16px\", fontStyle: 'Normal', fontWeight: '600', color: null }, titleSettings)\n ], Chart.prototype, \"titleStyle\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"subTitle\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"14px\", fontStyle: 'Normal', fontWeight: '400', color: null }, titleSettings)\n ], Chart.prototype, \"subTitleStyle\", void 0);\n __decorate([\n Complex({}, Margin)\n ], Chart.prototype, \"margin\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], Chart.prototype, \"border\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"background\", void 0);\n __decorate([\n Complex({ border: { color: null, width: 0.5 }, background: 'transparent' }, ChartArea)\n ], Chart.prototype, \"chartArea\", void 0);\n __decorate([\n Complex({ name: 'primaryXAxis' }, Axis)\n ], Chart.prototype, \"primaryXAxis\", void 0);\n __decorate([\n Complex({ name: 'primaryYAxis' }, Axis)\n ], Chart.prototype, \"primaryYAxis\", void 0);\n __decorate([\n Collection([{}], Row)\n ], Chart.prototype, \"rows\", void 0);\n __decorate([\n Collection([{}], Column)\n ], Chart.prototype, \"columns\", void 0);\n __decorate([\n Collection([{}], Axis)\n ], Chart.prototype, \"axes\", void 0);\n __decorate([\n Collection([{}], Series)\n ], Chart.prototype, \"series\", void 0);\n __decorate([\n Collection([{}], ChartAnnotationSettings)\n ], Chart.prototype, \"annotations\", void 0);\n __decorate([\n Property([])\n ], Chart.prototype, \"palettes\", void 0);\n __decorate([\n Property('Material')\n ], Chart.prototype, \"theme\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], Chart.prototype, \"tooltip\", void 0);\n __decorate([\n Complex({}, CrosshairSettings)\n ], Chart.prototype, \"crosshair\", void 0);\n __decorate([\n Complex({}, LegendSettings)\n ], Chart.prototype, \"legendSettings\", void 0);\n __decorate([\n Collection([{}], RangeColorSetting)\n ], Chart.prototype, \"rangeColorSettings\", void 0);\n __decorate([\n Complex({}, ZoomSettings)\n ], Chart.prototype, \"zoomSettings\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"highlightColor\", void 0);\n __decorate([\n Property('None')\n ], Chart.prototype, \"selectionMode\", void 0);\n __decorate([\n Property('None')\n ], Chart.prototype, \"highlightMode\", void 0);\n __decorate([\n Property('None')\n ], Chart.prototype, \"selectionPattern\", void 0);\n __decorate([\n Property('None')\n ], Chart.prototype, \"highlightPattern\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"isMultiSelect\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"allowMultiSelection\", void 0);\n __decorate([\n Property(true)\n ], Chart.prototype, \"enableExport\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"allowExport\", void 0);\n __decorate([\n Collection([], Indexes)\n ], Chart.prototype, \"selectedDataIndexes\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"enableAutoIntervalOnBothAxis\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"isTransposed\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"enableCanvas\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"backgroundImage\", void 0);\n __decorate([\n Collection([], TechnicalIndicator)\n ], Chart.prototype, \"indicators\", void 0);\n __decorate([\n Property(true)\n ], Chart.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"description\", void 0);\n __decorate([\n Property(1)\n ], Chart.prototype, \"tabIndex\", void 0);\n __decorate([\n Property(true)\n ], Chart.prototype, \"enableSideBySidePlacement\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"resized\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"beforeResize\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"beforeExport\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"afterExport\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"legendRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"textRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"seriesRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisLabelRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisLabelClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisRangeCalculated\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisMultiLabelRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"legendClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"multiLevelLabelClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"sharedTooltipRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseMove\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartDoubleClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointDoubleClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointMove\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseLeave\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseDown\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseUp\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"dragComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"selectionComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"zoomComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"onZooming\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"scrollStart\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"scrollEnd\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"scrollChanged\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"dragEnd\", void 0);\n __decorate([\n Property('USD')\n ], Chart.prototype, \"currencyCode\", void 0);\n Chart = __decorate([\n NotifyPropertyChanges\n ], Chart);\n return Chart;\n}(Component));\nexport { Chart };\n","/**\n * Function helps to find which highlightSearch is to call based on your data.\n *\n * @param {HTMLElement} element - Specifies an li element.\n * @param {string} query - Specifies the string to be highlighted.\n * @param {boolean} ignoreCase - Specifies the ignoreCase option.\n * @param {HightLightType} type - Specifies the type of highlight.\n * @returns {void}\n */\nexport function highlightSearch(element, query, ignoreCase, type) {\n if (query === '') {\n return;\n }\n else {\n var ignoreRegex = ignoreCase ? 'gim' : 'gm';\n // eslint-disable-next-line\n query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?\n '(' + query + ')$' : '(' + query + ')';\n // eslint-disable-next-line security/detect-non-literal-regexp\n findTextNode(element, new RegExp(replaceQuery, ignoreRegex));\n }\n}\n/* eslint-enable jsdoc/require-param, valid-jsdoc */\n/**\n *\n * @param {HTMLElement} element - Specifies the element.\n * @param {RegExp} pattern - Specifies the regex to match the searched text.\n * @returns {void}\n */\nfunction findTextNode(element, pattern) {\n for (var index = 0; element.childNodes && (index < element.childNodes.length); index++) {\n if (element.childNodes[index].nodeType === 3 && element.childNodes[index].textContent.trim() !== '') {\n var value = element.childNodes[index].nodeValue.trim().replace(pattern, '
$1');\n element.childNodes[index].nodeValue = '';\n element.innerHTML = element.innerHTML.trim() + value;\n break;\n }\n else {\n findTextNode(element.childNodes[index], pattern);\n }\n }\n}\n/**\n * Function helps to remove highlighted element based on your data.\n *\n * @param {HTMLElement} content - Specifies an content element.\n * @returns {void}\n */\nexport function revertHighlightSearch(content) {\n var contentElement = content.querySelectorAll('.e-highlight');\n for (var i = contentElement.length - 1; i >= 0; i--) {\n var parent_1 = contentElement[i].parentNode;\n var text = document.createTextNode(contentElement[i].textContent);\n parent_1.replaceChild(text, contentElement[i]);\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { Event, Complex } from '@syncfusion/ej2-base';\nimport { removeClass, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { ComboBox } from '../combo-box/combo-box';\nimport { highlightSearch, revertHighlightSearch } from '../common/highlight-search';\nimport { Search } from '../common/incremental-search';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\ndropDownListClasses.root = 'e-autocomplete';\ndropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';\n/**\n * The AutoComplete component provides the matched suggestion list when type into the input,\n * from which the user can select one.\n * ```html\n *
\n * ```\n * ```typescript\n * let atcObj:AutoComplete = new AutoComplete();\n * atcObj.appendTo(\"#list\");\n * ```\n */\nvar AutoComplete = /** @class */ (function (_super) {\n __extends(AutoComplete, _super);\n /**\n * * Constructor for creating the widget\n *\n * @param {AutoCompleteModel} options - Specifies the AutoComplete model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function AutoComplete(options, element) {\n var _this_1 = _super.call(this, options, element) || this;\n _this_1.isFiltered = false;\n _this_1.searchList = false;\n return _this_1;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getLocaleName = function () {\n return 'auto-complete';\n };\n AutoComplete.prototype.getNgDirective = function () {\n return 'EJS-AUTOCOMPLETE';\n };\n AutoComplete.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.queryString !== null && this.queryString !== '') {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount) && !this.enableVirtualization) {\n // Since defualt value of suggestioncount is 20, checked the condition\n if (this.suggestionCount !== 20) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n filterQuery.queries.splice(queryElements, 1);\n }\n }\n }\n filterQuery.take(this.suggestionCount);\n }\n if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {\n var takeValue = this.getTakeValue();\n filterQuery.skip(this.virtualItemStartIndex);\n filterQuery.take(takeValue);\n filterQuery.requiresCount();\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this_1 = this;\n this.isTyped = true;\n this.isDataFetched = this.isSelectCustom = false;\n this.checkAndResetCache();\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, e, true);\n }\n this.queryString = this.filterInput.value;\n if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields, null, e);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this_1.isFiltered = true;\n _this_1.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {\n _this_1.searchList = true;\n _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);\n }\n });\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n\n */\n AutoComplete.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.filterAction(dataSource, query, fields);\n };\n AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {\n this.beforePopupOpen = true;\n var isNoDataElement = this.list.classList.contains('e-nodata');\n if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n if (this.enableVirtualization && this.isFiltering() && this.isTyped) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n this.resetList(dataSource, fields, query, e);\n if (this.enableVirtualization && isNoDataElement && !this.list.classList.contains('e-nodata')) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {\n this.getFilteringSkeletonCount();\n }\n }\n else {\n this.hidePopup(e);\n this.beforePopupOpen = false;\n }\n this.renderReactTemplates();\n };\n AutoComplete.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n this.checkAndResetCache();\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (!this.enableVirtualization) {\n this.fixedHeaderElement = null;\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {\n this.getFilteringSkeletonCount();\n }\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {\n var items = [this.liCollections[0]];\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);\n this.searchList = false;\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n this.selectedLI = li;\n return;\n }\n if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'\n && e.action !== 'tab' && this.isValidLI(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill && this.isPopupOpen) {\n this.preventAutoFill = false;\n var isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');\n _super.prototype.setAutoFill.call(this, li, isKeyNavigate);\n }\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n }\n };\n AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this_1 = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n if (_this_1.element.tagName === _this_1.getNgDirective() && _this_1.itemTemplate) {\n setTimeout(function () {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }, 0);\n }\n else {\n var isHtmlElement = /<[^>]*>/g.test(e.item.innerText);\n if (isHtmlElement) {\n e.item.innerText = e.item.innerText.replace(/[\\u00A0-\\u9999<>&]/g, function (match) { return \"&#\" + match.charCodeAt(0) + \";\"; });\n }\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n itemCreated_1.apply(_this_1, [e]);\n };\n }\n return fields;\n };\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function (e) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n _super.prototype.renderPopup.call(this, e);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return false;\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n AutoComplete.prototype.setInputValue = function (newProp, oldProp) {\n var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;\n var value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;\n if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {\n var checkFields_1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;\n var listLength_1 = this.getItems().length;\n var query = new Query();\n var _this_2 = this;\n new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1_1, 'equal', value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this_2.value = checkFields_1_1 !== '' ? e.result[0][_this_2.fields.value].toString() : e.result[0].toString();\n _this_2.addItem(e.result, listLength_1);\n _this_2.updateValues();\n }\n else {\n newProp && newProp.text ? _this_2.setOldText(oldValue) : newProp && newProp.value ? _this_2.setOldValue(oldValue) : _this_2.updateValues();\n }\n });\n }\n else if (newProp) {\n newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);\n }\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n *\n * @returns {void}\n\n */\n AutoComplete.prototype.showPopup = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list)) {\n this.renderList(e);\n }\n else {\n this.resetList(this.dataSource, this.fields, null, e);\n }\n };\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n */\n AutoComplete.prototype.hidePopup = function (e) {\n _super.prototype.hidePopup.call(this, e);\n this.activeIndex = null;\n this.virtualListInfo = this.viewPortInfo;\n this.previousStartIndex = this.viewPortInfo.startIndex;\n this.startIndex = this.viewPortInfo.startIndex;\n this.previousEndIndex = this.viewPortInfo.endIndex;\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {AutoCompleteModel} newProp - Returns the dynamic property value of the component.\n * @param {AutoCompleteModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'autocomplete') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'showPopupButton':\n if (this.showPopupButton) {\n var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);\n this.inputWrapper.buttons[0] = button;\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (this.inputWrapper && this.inputWrapper.buttons && this.inputWrapper.buttons[0]) {\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);\n }\n }\n else {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default: {\n // eslint-disable-next-line max-len\n var atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\n }\n }\n };\n AutoComplete.prototype.renderHightSearch = function () {\n if (this.highlight) {\n for (var i = 0; i < this.liCollections.length; i++) {\n var isHighlight = this.ulElement.querySelector('.e-active');\n if (!isHighlight) {\n revertHighlightSearch(this.liCollections[i]);\n highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);\n }\n }\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\n };\n __decorate([\n Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], AutoComplete.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], AutoComplete.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"showPopupButton\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"highlight\", void 0);\n __decorate([\n Property(20)\n ], AutoComplete.prototype, \"suggestionCount\", void 0);\n __decorate([\n Property({})\n ], AutoComplete.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"query\", void 0);\n __decorate([\n Property(1)\n ], AutoComplete.prototype, \"minLength\", void 0);\n __decorate([\n Property('Contains')\n ], AutoComplete.prototype, \"filterType\", void 0);\n __decorate([\n Event()\n ], AutoComplete.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], AutoComplete.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"text\", void 0);\n AutoComplete = __decorate([\n NotifyPropertyChanges\n ], AutoComplete);\n return AutoComplete;\n}(ComboBox));\nexport { AutoComplete };\n","/**\n * Specifies class names\n */\n/** @hidden */\nexport var rowCell = 'e-rowcell';\n/** @hidden */\nexport var gridHeader = 'e-gridheader';\n/** @hidden */\nexport var gridContent = 'e-gridcontent';\n/** @hidden */\nexport var gridFooter = 'e-gridfooter';\n/** @hidden */\nexport var headerContent = 'e-headercontent';\n/** @hidden */\nexport var movableContent = 'e-movablecontent';\n/** @hidden */\nexport var movableHeader = 'e-movableheader';\n/** @hidden */\nexport var frozenContent = 'e-frozencontent';\n/** @hidden */\nexport var frozenHeader = 'e-frozenheader';\n/** @hidden */\nexport var content = 'e-content';\n/** @hidden */\nexport var table = 'e-table';\n/** @hidden */\nexport var row = 'e-row';\n/** @hidden */\nexport var gridChkBox = 'e-gridchkbox';\n/** @hidden */\nexport var editedRow = 'e-editedrow';\n/** @hidden */\nexport var addedRow = 'e-addedrow';\n/**\n * Specifies repeated strings\n */\n/** @hidden */\nexport var changedRecords = 'changedRecords';\n/** @hidden */\nexport var addedRecords = 'addedRecords';\n/** @hidden */\nexport var deletedRecords = 'deletedRecords';\n/** @hidden */\nexport var leftRight = 'Left-Right';\n/** @hidden */\nexport var frozenRight = 'frozen-right';\n/** @hidden */\nexport var frozenLeft = 'frozen-left';\n/** @hidden */\nexport var dataColIndex = 'data-colindex';\n/** @hidden */\nexport var ariaColIndex = 'aria-colindex';\n/** @hidden */\nexport var dataRowIndex = 'data-rowindex';\n/** @hidden */\nexport var ariaRowIndex = 'aria-rowindex';\n/** @hidden */\nexport var tbody = 'tbody';\n/** @hidden */\nexport var colGroup = 'colgroup';\n/** @hidden */\nexport var open = 'open';\n/** @hidden */\nexport var change = 'change';\n/** @hidden */\nexport var focus = 'focus';\n/** @hidden */\nexport var create = 'created';\n/** @hidden */\nexport var beforeOpen = 'beforeOpen';\n/** @hidden */\nexport var downArrow = 'downArrow';\n/** @hidden */\nexport var upArrow = 'upArrow';\n/** @hidden */\nexport var pageUp = 'PageUp';\n/** @hidden */\nexport var pageDown = 'PageDown';\n/** @hidden */\nexport var enter = 'enter';\n/** @hidden */\nexport var shiftEnter = 'shiftEnter';\n/** @hidden */\nexport var tab = 'tab';\n/** @hidden */\nexport var shiftTab = 'shiftTab';\n/** @hidden */\nexport var initialFrozenColumnIndex = 'initialFrozenColumnIndex';\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, rippleEffect, NotifyPropertyChanges, Property, closest, setValue } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n this.trigger('change', { value: value, event: event });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isAngular) {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.wrapper;\n _super.prototype.destroy.call(this);\n if (radioWrap) {\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n this.element = this.wrapper;\n if (this.refreshing) {\n ['e-control', 'e-radio', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n }\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getWrapper = function () {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n if (this.isVue ? this.value && type !== 'boolean' && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelMouseDownHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n RadioButton.prototype.labelMouseLeaveHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n RadioButton.prototype.labelMouseUpHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrap = this.getWrapper();\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrap], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrap], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n var type = typeof this.htmlAttributes.value;\n if (!isNullOrUndefined(this.htmlAttributes) && (this.htmlAttributes.value || type === 'boolean' && !this.htmlAttributes.value)) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n var wrapper = this.element.parentElement;\n if (ATTRIBUTES.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ').trim().split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.wrapper;\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByTagName('label')[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelMouseUpHandler);\n EventHandler.remove(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelMouseUpHandler, this);\n EventHandler.add(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable jsdoc/require-param */\nimport { Property, Complex, ChildProperty, Collection, extend, Browser } from '@syncfusion/ej2-base';\nimport { Font, Border } from '../../common/model/base';\nimport { rotateTextSize, firstToLowerCase, valueToCoefficient, inside, isBreakLabel, isZoomSet, getTitle } from '../../common/utils/helper';\nimport { Size, Rect, measureText } from '@syncfusion/ej2-svg-base';\nimport { DoubleRange } from '../utils/double-range';\nimport { Double } from '../axis/double-axis';\nimport { axisRangeCalculated } from '../../common/model/constants';\nimport { StripLineSettings, MultiLevelLabels, LabelBorder, ScrollbarSettings } from '../model/chart-base';\nimport { textWrap } from '../../common/utils/helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Configures the `rows` of the chart.\n */\nvar Row = /** @class */ (function (_super) {\n __extends(Row, _super);\n function Row() {\n /**\n * The height of the row as a string accept input both as '100px' and '100%'.\n * If specified as '100%, row renders to the full height of its chart.\n *\n * @default '100%'\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.axes = [];\n /** @private */\n _this.nearSizes = [];\n /** @private */\n _this.farSizes = [];\n /** @private */\n _this.insideFarSizes = [];\n /** @private */\n _this.insideNearSizes = [];\n return _this;\n }\n /**\n * Measure the row size\n *\n * @returns {void}\n * @private\n */\n Row.prototype.computeSize = function (axis, scrollBarHeight, definition, chart) {\n var width = 0;\n var innerPadding = (axis.labelPosition === 'Inside' && (chart.axes.indexOf(axis) > -1)) ? -5 : 5;\n if (axis.visible && axis.internalVisibility) {\n width += (axis.findTickSize(axis.crossInAxis) + scrollBarHeight +\n axis.findLabelSize(axis.crossInAxis, innerPadding, definition, chart) + axis.lineStyle.width * 0.5);\n }\n if (axis.isAxisOpposedPosition) {\n this.farSizes.push(width);\n }\n else {\n this.nearSizes.push(width);\n }\n };\n __decorate([\n Property('100%')\n ], Row.prototype, \"height\", void 0);\n __decorate([\n Complex({}, Border)\n ], Row.prototype, \"border\", void 0);\n return Row;\n}(ChildProperty));\nexport { Row };\n/**\n * Configures the `columns` of the chart.\n */\nvar Column = /** @class */ (function (_super) {\n __extends(Column, _super);\n function Column() {\n /**\n * The width of the column as a string accepts input both as like '100px' or '100%'.\n * If specified as '100%, column renders to the full width of its chart.\n *\n * @default '100%'\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.axes = [];\n /** @private */\n _this.nearSizes = [];\n /** @private */\n _this.farSizes = [];\n /** @private */\n _this.insideFarSizes = [];\n /** @private */\n _this.insideNearSizes = [];\n /** @private */\n _this.padding = 0;\n return _this;\n }\n /**\n * Measure the column size\n *\n * @returns {void}\n * @private\n */\n Column.prototype.computeSize = function (axis, scrollBarHeight, definition, chart) {\n var height = 0;\n var innerPadding = 5;\n if (axis.visible && axis.internalVisibility) {\n height += (axis.findTickSize(axis.crossInAxis) + scrollBarHeight +\n axis.findLabelSize(axis.crossInAxis, innerPadding, definition, chart) + axis.lineStyle.width * 0.5);\n }\n if (axis.isAxisOpposedPosition) {\n this.farSizes.push(height);\n }\n else {\n this.nearSizes.push(height);\n }\n };\n __decorate([\n Property('100%')\n ], Column.prototype, \"width\", void 0);\n __decorate([\n Complex({}, Border)\n ], Column.prototype, \"border\", void 0);\n return Column;\n}(ChildProperty));\nexport { Column };\n/**\n * Configures the major grid lines in the `axis`.\n */\nvar MajorGridLines = /** @class */ (function (_super) {\n __extends(MajorGridLines, _super);\n function MajorGridLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], MajorGridLines.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], MajorGridLines.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], MajorGridLines.prototype, \"color\", void 0);\n return MajorGridLines;\n}(ChildProperty));\nexport { MajorGridLines };\n/**\n * Configures the minor grid lines in the `axis`.\n */\nvar MinorGridLines = /** @class */ (function (_super) {\n __extends(MinorGridLines, _super);\n function MinorGridLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0.7)\n ], MinorGridLines.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], MinorGridLines.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], MinorGridLines.prototype, \"color\", void 0);\n return MinorGridLines;\n}(ChildProperty));\nexport { MinorGridLines };\n/**\n * Configures the axis line of a chart.\n */\nvar AxisLine = /** @class */ (function (_super) {\n __extends(AxisLine, _super);\n function AxisLine() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], AxisLine.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], AxisLine.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], AxisLine.prototype, \"color\", void 0);\n return AxisLine;\n}(ChildProperty));\nexport { AxisLine };\n/**\n * Configures the major tick lines.\n */\nvar MajorTickLines = /** @class */ (function (_super) {\n __extends(MajorTickLines, _super);\n function MajorTickLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], MajorTickLines.prototype, \"width\", void 0);\n __decorate([\n Property(5)\n ], MajorTickLines.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], MajorTickLines.prototype, \"color\", void 0);\n return MajorTickLines;\n}(ChildProperty));\nexport { MajorTickLines };\n/**\n * Configures the minor tick lines.\n */\nvar MinorTickLines = /** @class */ (function (_super) {\n __extends(MinorTickLines, _super);\n function MinorTickLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0.7)\n ], MinorTickLines.prototype, \"width\", void 0);\n __decorate([\n Property(5)\n ], MinorTickLines.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], MinorTickLines.prototype, \"color\", void 0);\n return MinorTickLines;\n}(ChildProperty));\nexport { MinorTickLines };\n/**\n * Configures the crosshair ToolTip.\n */\nvar CrosshairTooltip = /** @class */ (function (_super) {\n __extends(CrosshairTooltip, _super);\n function CrosshairTooltip() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], CrosshairTooltip.prototype, \"enable\", void 0);\n __decorate([\n Property(null)\n ], CrosshairTooltip.prototype, \"fill\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"12px\", fontStyle: 'Normal', fontWeight: '400', color: null }, Font)\n ], CrosshairTooltip.prototype, \"textStyle\", void 0);\n return CrosshairTooltip;\n}(ChildProperty));\nexport { CrosshairTooltip };\n/**\n * Configures the axes in the chart.\n *\n * @public\n */\nvar Axis = /** @class */ (function (_super) {\n __extends(Axis, _super);\n // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n function Axis(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n /** @private */\n _this.visibleLabels = [];\n /** @private */\n _this.series = [];\n /** @private */\n _this.rect = new Rect(undefined, undefined, 0, 0);\n /** @private */\n _this.axisBottomLine = null;\n /** @private */\n _this.intervalDivs = [10, 5, 2, 1];\n /** @private */\n _this.isStack100 = false;\n /** @private */\n _this.crossAt = null;\n /** @private */\n _this.updatedRect = null;\n /** @private */\n _this.multiLevelLabelHeight = 0;\n /** @private */\n _this.isChart = true;\n /** @private */\n _this.isIntervalInDecimal = true;\n /** @private */\n _this.titleCollection = [];\n /** @private */\n _this.titleSize = new Size(0, 0);\n /**\n * Task: BLAZ-2044\n * This property used to hide the axis when series hide from legend click\n *\n * @private\n */\n _this.internalVisibility = true;\n /**\n * This property is used to place the vertical axis in opposed position and horizontal axis in inversed\n * when RTL is enabled in chart\n *\n * @private */\n _this.isRTLEnabled = false;\n _this.angle = _this.labelRotation;\n return _this;\n }\n /**\n * The function used to find tick size.\n *\n * @returns {number} tick line size\n * @private\n */\n Axis.prototype.findTickSize = function (crossAxis) {\n if (this.tickPosition === 'Inside') {\n return 0;\n }\n if (crossAxis && (!crossAxis.visibleRange || this.isInside(crossAxis.visibleRange))) {\n return 0;\n }\n return this.majorTickLines.height;\n };\n /**\n * The function used to find axis position.\n *\n * @returns {number}\n * @private\n */\n Axis.prototype.isInside = function (range) {\n return (inside(this.crossAt, range) ||\n (!this.isAxisOpposedPosition && this.crossAt >= range.max) || (this.isAxisOpposedPosition && this.crossAt <= range.min));\n };\n /**\n * The function used to find label Size.\n *\n * @returns {number} labelSize\n * @private\n */\n Axis.prototype.findLabelSize = function (crossAxis, innerPadding, definition, chart) {\n var titleSize = 0;\n var isHorizontal = this.orientation === 'Horizontal';\n if (this.title) {\n var angle = this.titleRotation;\n if ((isNullOrUndefined(angle))) {\n this.titleSize = measureText(this.title, this.titleStyle, chart.themeStyle.axisTitleFont);\n titleSize = this.titleSize.height + innerPadding;\n }\n else {\n this.titleSize = rotateTextSize(this.titleStyle, this.title, angle, chart);\n titleSize = (this.orientation === 'Vertical' ? this.titleSize.width : this.titleSize.height) + innerPadding;\n }\n if (this.rect.width || this.rect.height) {\n var length_1 = isHorizontal ? this.rect.width : this.rect.height;\n this.titleCollection = getTitle(this.title, this.titleStyle, length_1, chart.enableRtl, chart.themeStyle.legendLabelFont);\n titleSize = (titleSize * this.titleCollection.length);\n }\n }\n var diff;\n var value;\n var labelSize = titleSize + innerPadding + this.titlePadding + this.labelPadding +\n ((this.orientation === 'Vertical') ? this.maxLabelSize.width : this.maxLabelSize.height) + this.multiLevelLabelHeight;\n if (crossAxis && this.placeNextToAxisLine) {\n var range = crossAxis.visibleRange;\n var size = (crossAxis.orientation === 'Horizontal') ? crossAxis.rect.width : crossAxis.rect.height;\n if (!range || !size) {\n return 0;\n }\n else if (this.isInside(range)) {\n value = this.findDifference(crossAxis);\n diff = (value) * (size / range.delta);\n diff = (value) * ((size - (diff < labelSize ? (labelSize - diff) : 0)) / range.delta);\n labelSize = (diff < labelSize) ? (labelSize - diff) : 0;\n }\n }\n if (this.isAxisOpposedPosition) {\n definition.insideFarSizes.push(labelSize);\n }\n else {\n definition.insideNearSizes.push(labelSize);\n }\n if (this.labelPosition === 'Inside') {\n return titleSize + innerPadding;\n }\n return labelSize;\n };\n /**\n * The function used to find axis position.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.updateCrossValue = function () {\n var value = this.crossAt;\n if (value === null || !this.isInside(this.crossInAxis.visibleRange)) {\n this.updatedRect = this.rect;\n return null;\n }\n var range = this.crossInAxis.visibleRange;\n if (!this.isAxisOpposedPosition) {\n if (this.crossAt > range.max) {\n value = range.max;\n }\n }\n else {\n if (this.crossAt < range.min) {\n value = range.min;\n }\n }\n this.updatedRect = extend({}, this.rect, null, true);\n if (this.orientation === 'Horizontal') {\n value = this.crossInAxis.rect.height - (valueToCoefficient(value, this.crossInAxis) * this.crossInAxis.rect.height);\n this.updatedRect.y = this.crossInAxis.rect.y + value;\n }\n else {\n value = valueToCoefficient(value, this.crossInAxis) * this.crossInAxis.rect.width;\n this.updatedRect.x = this.crossInAxis.rect.x + value;\n }\n };\n Axis.prototype.findDifference = function (crossAxis) {\n var value = 0;\n if (this.isAxisOpposedPosition) {\n value = crossAxis.isAxisInverse ? crossAxis.visibleRange.min : crossAxis.visibleRange.max;\n }\n else {\n value = crossAxis.isAxisInverse ? crossAxis.visibleRange.max : crossAxis.visibleRange.min;\n }\n return Math.abs(this.crossAt - value);\n };\n /**\n * Calculate visible range for axis.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.calculateVisibleRangeOnZooming = function (size) {\n if (isZoomSet(this)) {\n var baseRange = this.actualRange;\n var start = void 0;\n var end = void 0;\n if (!this.isAxisInverse) {\n start = this.actualRange.min + this.zoomPosition * this.actualRange.delta;\n end = start + this.zoomFactor * this.actualRange.delta;\n }\n else {\n start = this.actualRange.max - (this.zoomPosition * this.actualRange.delta);\n end = start - (this.zoomFactor * this.actualRange.delta);\n }\n if (start < baseRange.min) {\n end = end + (baseRange.min - start);\n start = baseRange.min;\n }\n if (end > baseRange.max) {\n start = start - (end - baseRange.max);\n end = baseRange.max;\n }\n this.doubleRange = new DoubleRange(start, end);\n this.visibleRange = { min: this.doubleRange.start, max: this.doubleRange.end,\n delta: this.doubleRange.delta, interval: this.visibleRange.interval };\n }\n };\n /**\n * Triggers the event.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.triggerRangeRender = function (chart, minimum, maximum, interval) {\n var argsData = {\n cancel: false, name: axisRangeCalculated, axis: this,\n minimum: minimum, maximum: maximum, interval: interval\n };\n chart.trigger(axisRangeCalculated, argsData);\n if (!argsData.cancel) {\n this.visibleRange = { min: argsData.minimum, max: argsData.maximum, interval: argsData.interval,\n delta: argsData.maximum - argsData.minimum };\n }\n };\n /**\n * Calculate padding for the axis.\n *\n * @returns {string}\n * @private\n */\n Axis.prototype.getRangePadding = function (chart) {\n var padding = this.rangePadding;\n if (padding !== 'Auto') {\n return padding;\n }\n switch (this.orientation) {\n case 'Horizontal':\n if (chart.requireInvertedAxis) {\n padding = (this.isStack100 || this.baseModule.chart.stockChart ? 'Round' : 'Normal');\n }\n else {\n padding = 'None';\n }\n break;\n case 'Vertical':\n if (!chart.requireInvertedAxis) {\n padding = (this.isStack100 || this.baseModule.chart.stockChart ? 'Round' : 'Normal');\n }\n else {\n padding = 'None';\n }\n break;\n }\n return padding;\n };\n /**\n * Calculate maximum label width for the axis.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.getMaxLabelWidth = function (chart) {\n var pointX;\n var previousEnd = 0;\n var isIntersect = false;\n var isAxisLabelBreak;\n this.angle = this.labelRotation;\n this.maxLabelSize = new Size(0, 0);\n var action = this.labelIntersectAction;\n var label;\n for (var i = 0, len = this.visibleLabels.length; i < len; i++) {\n label = this.visibleLabels[i];\n isAxisLabelBreak = isBreakLabel(label.originalText);\n if (isAxisLabelBreak) {\n label.size = measureText(label.originalText.replace(/
/g, ' '), this.labelStyle, chart.themeStyle.axisLabelFont);\n label.breakLabelSize = measureText(this.enableTrim ? label.text.join('
') : label.originalText, this.labelStyle, chart.themeStyle.axisLabelFont);\n }\n else {\n label.size = measureText(label.text, this.labelStyle, chart.themeStyle.axisLabelFont);\n }\n var width = isAxisLabelBreak ? label.breakLabelSize.width : label.size.width;\n if (width > this.maxLabelSize.width) {\n this.maxLabelSize.width = width;\n this.rotatedLabel = label.text;\n }\n var height = isAxisLabelBreak ? label.breakLabelSize.height : label.size.height;\n if (height > this.maxLabelSize.height) {\n this.maxLabelSize.height = height;\n }\n if (isAxisLabelBreak) {\n label.text = this.enableTrim ? label.text : label.originalText.split('
');\n }\n if (action === 'None' || action === 'Hide' || action === 'Trim') {\n continue;\n }\n if ((action !== 'None' || this.angle % 360 === 0) && this.orientation === 'Horizontal' &&\n this.rect.width > 0 && !isIntersect) {\n var width1 = isAxisLabelBreak ? label.breakLabelSize.width : label.size.width;\n pointX = (valueToCoefficient(label.value, this) * this.rect.width) + this.rect.x;\n pointX -= width1 / 2;\n if (this.edgeLabelPlacement === 'Shift') {\n if (i === 0 && pointX < this.rect.x) {\n pointX = this.rect.x;\n }\n if (i === this.visibleLabels.length - 1 && ((pointX + width1) > (this.rect.x + this.rect.width))) {\n pointX = this.rect.x + this.rect.width - width1;\n }\n }\n switch (action) {\n case 'MultipleRows':\n if (i > 0) {\n this.findMultiRows(i, pointX, label, isAxisLabelBreak);\n }\n break;\n case 'Rotate45':\n case 'Rotate90':\n if (i > 0 && (!this.isAxisInverse ? pointX <= previousEnd : pointX + width1 >= previousEnd)) {\n this.angle = (action === 'Rotate45') ? 45 : 90;\n isIntersect = true;\n }\n break;\n default:\n if (isAxisLabelBreak) {\n var result = void 0;\n var result1 = [];\n var str = void 0;\n for (var index = 0; index < label.text.length; index++) {\n result = textWrap(label.text[index], this.rect.width / this.visibleLabels.length, this.labelStyle, chart.enableRtl, null, null, chart.themeStyle.axisLabelFont);\n if (result.length > 1) {\n for (var j = 0; j < result.length; j++) {\n str = result[j];\n result1.push(str);\n }\n }\n else {\n result1.push(result[0]);\n }\n }\n label.text = result1;\n }\n else {\n label.text = textWrap(label.text, this.rect.width / this.visibleLabels.length, this.labelStyle, chart.enableRtl, null, null, chart.themeStyle.axisLabelFont);\n }\n // eslint-disable-next-line no-case-declarations\n var height_1 = (label.size.height * label.text.length);\n if (height_1 > this.maxLabelSize.height) {\n this.maxLabelSize.height = height_1;\n }\n break;\n }\n previousEnd = this.isAxisInverse ? pointX : pointX + width1;\n }\n }\n if (this.angle !== 0 && this.orientation === 'Horizontal') {\n //I264474: Fix for datasource bind im mounted console error ocurred\n this.rotatedLabel = isNullOrUndefined(this.rotatedLabel) ? '' : this.rotatedLabel;\n var isHorizontalAngle = this.angle === -360 || this.angle === 0 || this.angle === -180 ||\n this.angle === 180 || this.angle === 360;\n // To avoid overlap axis label with chart title or chart legend when it is outside.\n if (this.labelPosition === 'Outside' && !isHorizontalAngle && isBreakLabel(this.rotatedLabel)) {\n this.maxLabelSize = new Size(this.maxLabelSize.height, this.maxLabelSize.width);\n }\n else {\n this.maxLabelSize = rotateTextSize(this.labelStyle, this.rotatedLabel, this.angle, chart);\n }\n }\n else if (this.angle !== 0 && this.orientation === 'Vertical') {\n //I264474: Fix for datasource bind im mounted console error ocurred\n this.rotatedLabel = isNullOrUndefined(this.rotatedLabel) ? '' : this.rotatedLabel;\n var isHorizontalAngle = this.angle === -360 || this.angle === 0 || this.angle === -180 ||\n this.angle === 180 || this.angle === 360;\n // To avoid overlap axis label with chart title or chart legend when it is outside.\n if (this.labelPosition === 'Outside' && !isHorizontalAngle && isBreakLabel(this.rotatedLabel)) {\n this.maxLabelSize = new Size(this.maxLabelSize.height, this.maxLabelSize.width);\n }\n else {\n this.maxLabelSize = rotateTextSize(this.labelStyle, this.rotatedLabel, this.angle, chart);\n }\n }\n if (chart.multiLevelLabelModule && this.multiLevelLabels.length > 0) {\n chart.multiLevelLabelModule.getMultilevelLabelsHeight(this);\n }\n };\n /**\n * Finds the multiple rows for axis.\n *\n * @returns {void}\n */\n Axis.prototype.findMultiRows = function (length, currentX, currentLabel, isBreakLabels) {\n var label;\n var pointX;\n var width2;\n var store = [];\n var isMultiRows;\n for (var i = length - 1; i >= 0; i--) {\n label = this.visibleLabels[i];\n width2 = isBreakLabels ? label.breakLabelSize.width : label.size.width;\n pointX = (valueToCoefficient(label.value, this) * this.rect.width) + this.rect.x;\n isMultiRows = !this.isAxisInverse ? currentX < (pointX + width2 * 0.5) :\n currentX + currentLabel.size.width > (pointX - width2 * 0.5);\n if (isMultiRows) {\n store.push(label.index);\n currentLabel.index = (currentLabel.index > label.index) ? currentLabel.index : label.index + 1;\n }\n else {\n currentLabel.index = store.indexOf(label.index) > -1 ? currentLabel.index : label.index;\n }\n }\n var height = ((isBreakLabels ? currentLabel.breakLabelSize.height : currentLabel.size.height) * currentLabel.index) +\n (5 * (currentLabel.index - 1));\n if (height > this.maxLabelSize.height) {\n this.maxLabelSize.height = height;\n }\n };\n /**\n * Finds the default module for axis.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.getModule = function (chart) {\n if (this.valueType === 'Double') {\n this.baseModule = new Double(chart);\n }\n else {\n this.baseModule = chart[firstToLowerCase(this.valueType) + 'Module'];\n }\n };\n /**\n * Set the axis `opposedPosition` and `isInversed` properties.\n *\n * @returns {void}\n * @private\n */\n Axis.prototype.setIsInversedAndOpposedPosition = function (isPolar) {\n if (isPolar === void 0) { isPolar = false; }\n this.isAxisOpposedPosition = this.opposedPosition || (!isPolar && this.isRTLEnabled && this.orientation === 'Vertical');\n if (this.opposedPosition && (!isPolar && this.isRTLEnabled && this.orientation === 'Vertical')) {\n this.isAxisOpposedPosition = false;\n }\n this.isAxisInverse = this.isInversed || (this.isRTLEnabled && this.orientation === 'Horizontal');\n if (this.isInversed && (!isPolar && this.isRTLEnabled && this.orientation === 'Horizontal')) {\n this.isAxisInverse = false;\n }\n };\n __decorate([\n Complex({ fontFamily: null, size: \"12px\", fontStyle: 'Normal', fontWeight: '400', color: null }, Font)\n ], Axis.prototype, \"labelStyle\", void 0);\n __decorate([\n Complex({}, CrosshairTooltip)\n ], Axis.prototype, \"crosshairTooltip\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"title\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"14px\", fontStyle: 'Normal', fontWeight: '600', color: null }, Font)\n ], Axis.prototype, \"titleStyle\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"labelFormat\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"skeleton\", void 0);\n __decorate([\n Property('DateTime')\n ], Axis.prototype, \"skeletonType\", void 0);\n __decorate([\n Property('Center')\n ], Axis.prototype, \"lineBreakAlignment\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"plotOffset\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"plotOffsetLeft\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"plotOffsetTop\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"plotOffsetRight\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"plotOffsetBottom\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"isIndexed\", void 0);\n __decorate([\n Property(10)\n ], Axis.prototype, \"logBase\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"columnIndex\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"rowIndex\", void 0);\n __decorate([\n Property(1)\n ], Axis.prototype, \"span\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"desiredIntervals\", void 0);\n __decorate([\n Property(3)\n ], Axis.prototype, \"maximumLabels\", void 0);\n __decorate([\n Property(1)\n ], Axis.prototype, \"zoomFactor\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"zoomPosition\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"enableScrollbarOnZooming\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"opposedPosition\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"enableAutoIntervalOnZooming\", void 0);\n __decorate([\n Property('Auto')\n ], Axis.prototype, \"rangePadding\", void 0);\n __decorate([\n Property('Double')\n ], Axis.prototype, \"valueType\", void 0);\n __decorate([\n Property('None')\n ], Axis.prototype, \"edgeLabelPlacement\", void 0);\n __decorate([\n Property('Auto')\n ], Axis.prototype, \"intervalType\", void 0);\n __decorate([\n Property('BetweenTicks')\n ], Axis.prototype, \"labelPlacement\", void 0);\n __decorate([\n Property('Outside')\n ], Axis.prototype, \"tickPosition\", void 0);\n __decorate([\n Property('Outside')\n ], Axis.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"name\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"visible\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"minorTicksPerInterval\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"labelRotation\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"titleRotation\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"crossesAt\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"placeNextToAxisLine\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"crossesInAxis\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"minimum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"maximum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"interval\", void 0);\n __decorate([\n Property(34)\n ], Axis.prototype, \"maximumLabelWidth\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"enableTrim\", void 0);\n __decorate([\n Property(5)\n ], Axis.prototype, \"labelPadding\", void 0);\n __decorate([\n Property(5)\n ], Axis.prototype, \"titlePadding\", void 0);\n __decorate([\n Complex({}, MajorTickLines)\n ], Axis.prototype, \"majorTickLines\", void 0);\n __decorate([\n Complex({}, MinorTickLines)\n ], Axis.prototype, \"minorTickLines\", void 0);\n __decorate([\n Complex({}, MajorGridLines)\n ], Axis.prototype, \"majorGridLines\", void 0);\n __decorate([\n Complex({}, MinorGridLines)\n ], Axis.prototype, \"minorGridLines\", void 0);\n __decorate([\n Complex({}, AxisLine)\n ], Axis.prototype, \"lineStyle\", void 0);\n __decorate([\n Property(Browser.isDevice ? 'Rotate45' : 'Trim')\n ], Axis.prototype, \"labelIntersectAction\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"isInversed\", void 0);\n __decorate([\n Property(100)\n ], Axis.prototype, \"coefficient\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"startAngle\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"startFromZero\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"description\", void 0);\n __decorate([\n Property(2)\n ], Axis.prototype, \"tabIndex\", void 0);\n __decorate([\n Collection([], StripLineSettings)\n ], Axis.prototype, \"stripLines\", void 0);\n __decorate([\n Collection([], MultiLevelLabels)\n ], Axis.prototype, \"multiLevelLabels\", void 0);\n __decorate([\n Complex({ color: null, width: 0, type: 'Rectangle' }, LabelBorder)\n ], Axis.prototype, \"border\", void 0);\n __decorate([\n Complex({}, ScrollbarSettings)\n ], Axis.prototype, \"scrollbarSettings\", void 0);\n return Axis;\n}(ChildProperty));\nexport { Axis };\n/** @private */\nvar VisibleLabels = /** @class */ (function () {\n function VisibleLabels(text, value, labelStyle, originalText, size, breakLabelSize, index) {\n if (size === void 0) { size = new Size(0, 0); }\n if (breakLabelSize === void 0) { breakLabelSize = new Size(0, 0); }\n if (index === void 0) { index = 1; }\n this.text = text;\n this.originalText = originalText;\n this.value = value;\n this.labelStyle = labelStyle;\n this.size = size;\n this.breakLabelSize = breakLabelSize;\n this.index = index;\n }\n return VisibleLabels;\n}());\nexport { VisibleLabels };\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 { merge, isNullOrUndefined, extend, Property } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options, parent) {\n var _this = this;\n /**\n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n *\n * @default true\n */\n this.disableHtmlEncode = true;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n *\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n *\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n *\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n *\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n *\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n *\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n *\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n *\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](../../grid/filtering/filter-menu/#custom-component-in-filter-menu) for its customization.\n *\n * @default {}\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n *\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n *\n * @default {}\n */\n this.edit = {};\n /**\n * If `allowSearching` set to false, then it disables Searching of a particular column.\n * By default all columns allow Searching.\n *\n * @default true\n */\n this.allowSearching = true;\n /**\n * If `autoFit` set to true, then the particular column content width will be\n * adjusted based on its content in the initial rendering itself.\n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n *\n * @default false\n */\n this.autoFit = false;\n this.sortDirection = 'Descending';\n /**\n * @returns {Function} returns the edit template\n * @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /**\n * @returns {Function} returns the filter template\n * @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.parent = parent;\n if (this.type === 'none') {\n this.type = null;\n }\n else if (this.type) {\n this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined;\n }\n if (this.editType) {\n this.editType = this.editType.toLowerCase();\n }\n if (isNullOrUndefined(this.uid)) {\n this.uid = getUid('grid-column');\n }\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || (options.format.format &&\n typeof options.format.format === 'string'))) {\n this.setFormatter(valueFormatter.getFormatFunction(extend({}, options.format)));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () {\n var col = {};\n var skip = ['filter', 'dataSource', 'headerText', 'template', 'headerTemplate', 'edit',\n 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent'];\n var keys = Object.keys(_this);\n for (var i = 0; i < keys.length; i++) {\n if (keys[parseInt(i.toString(), 10)] === 'columns') {\n col[keys[parseInt(i.toString(), 10)]] = [];\n for (var j = 0; j < _this[keys[parseInt(i.toString(), 10)]].length; j++) {\n col[keys[parseInt(i.toString(), 10)]].push(_this[keys[parseInt(i.toString(), 10)]][parseInt(j.toString(), 10)].toJSON());\n }\n }\n else if (skip.indexOf(keys[parseInt(i.toString(), 10)]) < 0) {\n col[keys[parseInt(i.toString(), 10)]] = _this[keys[parseInt(i.toString(), 10)]];\n }\n }\n return col;\n };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() &&\n (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) {\n this.editType = 'dropdownedit';\n if (this.edit.params && this.edit.params.dataSource) {\n this.edit.params.ddEditedData = true;\n }\n this.edit.params = extend({\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n }, this.edit.params);\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function (x, y, xObj, yObj) {\n if (typeof a_1 === 'string') {\n a_1 = getObject(a_1, window);\n }\n if (_this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n var obj = xObj;\n xObj = yObj;\n yObj = obj;\n }\n return a_1(x, y, xObj, yObj);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getObject(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getObject(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /**\n * @returns {string} returns the sort direction\n * @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /**\n * @param {string} direction - specifies the direction\n * @returns {void}\n * @hidden\n */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /**\n * @returns {freezeTable} returns the FreezeTable\n * @hidden */\n Column.prototype.getFreezeTableName = function () {\n return this.freezeTable;\n };\n /**\n * @param {Column} column - specifies the column\n * @returns {void}\n * @hidden\n */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]];\n //Refresh the react columnTemplates on state change\n if (this.parent && this.parent.isReact) {\n if (keys[parseInt(i.toString(), 10)] === 'template') {\n this.templateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this.parent.refreshReactColumnTemplateByUid(this.uid, true);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'headerTemplate') {\n this.headerTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this.parent.refreshReactHeaderTemplateByUid(this.uid);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'editTemplate') {\n this.editTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n }\n }\n }\n };\n /**\n * @returns {boolean} returns true for foreign column\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /**\n * @returns {Function} returns the function\n * @hidden\n */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /**\n * @returns {string} returns the string\n * @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n/**\n * Define options for custom command buttons.\n */\nvar CommandColumnModel = /** @class */ (function () {\n function CommandColumnModel() {\n }\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"title\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"buttonOption\", void 0);\n return CommandColumnModel;\n}());\nexport { CommandColumnModel };\n/**\n * Defines Grid column\n */\nvar GridColumn = /** @class */ (function (_super) {\n __extends(GridColumn, _super);\n function GridColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], GridColumn.prototype, \"columns\", void 0);\n return GridColumn;\n}(Column));\nexport { GridColumn };\n/**\n * Defines stacked grid column\n */\nvar StackedColumn = /** @class */ (function (_super) {\n __extends(StackedColumn, _super);\n function StackedColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return StackedColumn;\n}(GridColumn));\nexport { StackedColumn };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth, getUpdateUsingRaf } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty, headerRefreshed, textWrapRefresh, virtualScrollEdit, infiniteScrollHandler, closeFilterDialog } from '../base/constant';\nimport { lazyLoadScrollHandler, checkScrollReset } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\nimport * as literals from '../base/string-literals';\nimport * as events from '../base/constant';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Scroll(parent) {\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @param {boolean} uiupdate - specifies the uiupdate\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setWidth = function (uiupdate) {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (uiupdate) {\n this.widthService.setWidthToColumns();\n }\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n var tlbrElement = this.parent.toolbarModule.toolbar.element;\n var tlbrLeftElement = tlbrElement.querySelector('.e-toolbar-left');\n var tlbrCenterElement = tlbrElement.querySelector('.e-toolbar-center');\n var tlbrRightElement = tlbrElement.querySelector('.e-toolbar-right');\n var tlbrItems = tlbrElement.querySelector('.e-toolbar-items');\n var tlbrLeftWidth = tlbrLeftElement ? tlbrLeftElement.clientWidth : 0;\n var tlbrCenterWidth = tlbrCenterElement ? tlbrCenterElement.clientWidth : 0;\n var tlbrRightWidth = tlbrRightElement ? tlbrRightElement.clientWidth : 0;\n var tlbrItemsWidth = tlbrItems ? tlbrItems.clientWidth : 0;\n var tlbrWidth = tlbrElement ? tlbrElement.clientWidth : 0;\n if (!this.parent.enableAdaptiveUI || tlbrLeftWidth > tlbrWidth || tlbrCenterWidth > tlbrWidth || tlbrRightWidth > tlbrWidth ||\n tlbrItemsWidth > tlbrWidth) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().querySelector('.' + literals.content);\n var height = this.parent.height;\n if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid() && this.parent.height !== 'auto'\n && this.parent.height.toString().indexOf('%') < 0) {\n height = parseInt(height, 10) - Scroll.getScrollBarWidth();\n }\n if (!this.parent.enableVirtualization && this.parent.frozenRows && this.parent.height !== 'auto') {\n var tbody = this.parent.getHeaderContent()\n .querySelector(literals.tbody + ':not(.e-masked-tbody)');\n mHdrHeight = tbody ? tbody.offsetHeight : 0;\n if (tbody && mHdrHeight) {\n var add = tbody.getElementsByClassName(literals.addedRow).length;\n var height_1 = add * this.parent.getRowHeight();\n mHdrHeight -= height_1;\n }\n else if (!this.parent.isInitialLoad && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && this.parent.getHeaderContent().querySelector('.e-masked-table')) {\n height = parseInt(height, 10) - (this.parent.frozenRows * this.parent.getRowHeight());\n }\n content.style.height = formatUnit(height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(height);\n }\n this.ensureOverflow(content);\n if (this.parent.isFrozenGrid()) {\n this.refresh();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n content.querySelector('.' + literals.headerContent).style[cssProps.border] = scrollWidth > 0 ? '1px' : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n var hDiv = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n hDiv.style[cssProps.border] = '';\n hDiv.parentElement.style[cssProps.padding] = '';\n var footerDiv = this.parent.getFooterContent();\n if (footerDiv && footerDiv.classList.contains('e-footerpadding')) {\n footerDiv.classList.remove('e-footerpadding');\n }\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](./#height) must be set to 100%.\n *\n * @returns {void}\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.' + literals.gridContent;\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(textWrapRefresh, this.wireEvents, this);\n this.parent.on(headerRefreshed, this.setScrollLeft, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(textWrapRefresh, this.wireEvents);\n this.parent.off(headerRefreshed, this.setScrollLeft);\n this.unwireEvents();\n };\n Scroll.prototype.unwireEvents = function () {\n if (this.parent.frozenRows && this.header) {\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n var mScrollBar = this.parent.getContent() ? this.parent.getContent().querySelector('.e-movablescrollbar') : null;\n if (this.parent.isFrozenGrid() && this.parent.enableColumnVirtualization) {\n if (mScrollBar) {\n EventHandler.remove(mScrollBar, 'scroll', this.onCustomScrollbarScroll);\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.content, 'touchstart pointerdown', this.setPageXY);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.remove(this.content, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.contentScrollHandler);\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.headerScrollHandler);\n }\n this.contentScrollHandler = null;\n this.headerScrollHandler = null;\n if (this.parent.aggregates.length && this.parent.getFooterContent()) {\n EventHandler.remove(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll);\n }\n };\n Scroll.prototype.setScrollLeft = function () {\n this.parent.getHeaderContent().querySelector('.' + literals.headerContent).scrollLeft = this.previousValues.left;\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains(literals.headerContent);\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n var target = e.target;\n if (_this.parent.frozenRows) {\n if (_this.content.scrollTop > 0 && _this.parent.frozenRows) {\n addClass([_this.parent.element], 'e-top-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-top-shadow');\n }\n }\n if (_this.parent.element.querySelectorAll('.e-leftfreeze,.e-fixedfreeze,.e-rightfreeze').length) {\n var errorFreeze = _this.parent.getContent().querySelectorAll('.e-freezeerror:not([style*=\"display: none\"])');\n var errorFixed = _this.parent.getContent().querySelectorAll('.e-fixederror:not([style*=\"display: none\"])');\n if (target.scrollLeft !== 0 && _this.parent.getVisibleFrozenLeftCount()) {\n addClass([_this.parent.element], 'e-left-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-left-shadow');\n }\n var widthVal = Math.round((_this.parent.enableRtl ? target.scrollWidth + target.scrollLeft : target.scrollWidth - target.scrollLeft) +\n (_this.parent.height === 'auto' ? 0 : 1));\n if (widthVal === target.offsetWidth && _this.parent.getVisibleFrozenRightCount()) {\n removeClass([_this.parent.element], 'e-right-shadow');\n }\n else {\n addClass([_this.parent.element], 'e-right-shadow');\n }\n var rows = [].slice.call(_this.parent.getContent().querySelectorAll('.e-row:not(.e-hiddenrow)'));\n if (((rows.length === 1 && errorFreeze.length) ||\n (_this.parent.element.querySelector('.e-freeze-autofill:not([style*=\"display: none\"])')) ||\n errorFixed.length) && target.scrollLeft !== _this.previousValues.left) {\n target.scrollLeft = _this.previousValues.left;\n return;\n }\n if (rows.length !== 1 && (errorFreeze.length || errorFixed.length) && target.scrollTop !== _this.previousValues.top) {\n target.scrollTop = _this.previousValues.top;\n return;\n }\n }\n var left = target.scrollLeft;\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling && !_this.parent.isEdit) {\n _this.parent.notify(infiniteScrollHandler, { target: e.target, isLeft: _this.previousValues.left !== left });\n }\n if (_this.parent.groupSettings.columns.length && _this.parent.groupSettings.enableLazyLoading) {\n var isDown = _this.previousValues.top < _this.parent.getContent().firstElementChild.scrollTop;\n _this.parent.notify(lazyLoadScrollHandler, { scrollDown: isDown });\n }\n _this.parent.notify(virtualScrollEdit, {});\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n _this.parent.notify(closeFilterDialog, e);\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onCustomScrollbarScroll = function (cont, hdr) {\n var _this = this;\n var content = cont;\n var header = hdr;\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (_this.previousValues.left === left) {\n return;\n }\n content.scrollLeft = left;\n header.scrollLeft = left;\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var isFrozen = _this.parent.isFrozenGrid();\n var pageXY = _this.getPointXY(e);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n var mHdr = _this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mCont = _this.parent.getContent().querySelector('.' + literals.content);\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n mCont.scrollLeft = left;\n if (isFrozen && _this.parent.enableColumnVirtualization) {\n var scrollBar = _this.parent.getContent().querySelector('.e-movablescrollbar');\n scrollBar.scrollLeft = left;\n }\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.getScrollbleParent = function (node) {\n if (node === null) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var parent = isNullOrUndefined(node.tagName) ? node.scrollingElement : node;\n var overflowY = document.defaultView.getComputedStyle(parent, null).overflowY;\n if (parent.scrollHeight > parent.clientHeight && overflowY !== 'hidden'\n && overflowY !== 'visible' || node.tagName === 'HTML' || node.tagName === 'BODY') {\n return node;\n }\n else {\n return this.getScrollbleParent(node.parentNode);\n }\n };\n /**\n * @param {boolean} isAdd - specifies whether adding/removing the event\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addStickyListener = function (isAdd) {\n this.parentElement = this.getScrollbleParent(this.parent.element.parentElement);\n if (isAdd && this.parentElement) {\n this.eventElement = this.parentElement.tagName === 'HTML' || this.parentElement.tagName === 'BODY' ? document :\n this.parentElement;\n EventHandler.add(this.eventElement, 'scroll', this.makeStickyHeader, this);\n }\n else if (this.eventElement) {\n EventHandler.remove(this.eventElement, 'scroll', this.makeStickyHeader);\n this.eventElement = null;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.resizeFrozenRowBorder = function () {\n var div;\n if (!this.parent.element.querySelector('.e-frozenrow-border')) {\n div = this.parent.createElement('div', { className: 'e-frozenrow-border' });\n this.parent.element.insertBefore(div, this.parent.element.querySelector('.e-gridcontent'));\n }\n else {\n div = this.parent.element.querySelector('.e-frozenrow-border');\n }\n var scrollWidth = this.parent.height !== 'auto' ? Scroll.getScrollBarWidth() : 0;\n div.style.width = (this.parent.element.offsetWidth - scrollWidth) - 0.5 + 'px';\n };\n Scroll.prototype.wireEvents = function () {\n var _this = this;\n if (this.oneTimeReady) {\n var frzCols = this.parent.isFrozenGrid();\n this.content = this.parent.getContent().querySelector('.' + literals.content);\n this.header = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mScrollBar = this.parent.getContent().querySelector('.e-movablescrollbar');\n if (this.parent.frozenRows && this.header && this.content) {\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n }\n if (frzCols && mScrollBar && this.parent.enableColumnVirtualization) {\n EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(this.content, this.header), this);\n EventHandler.add(this.content, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.header), this);\n EventHandler.add(this.header, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.content), this);\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n EventHandler.add(this.content, 'touchstart pointerdown', this.setPageXY(), this);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.add(this.content, 'touchmove pointermove', this.onTouchScroll(this.header), this);\n }\n }\n this.contentScrollHandler = this.onContentScroll(this.header);\n this.headerScrollHandler = this.onContentScroll(this.content);\n EventHandler.add(this.content, 'scroll', this.contentScrollHandler, this);\n EventHandler.add(this.header, 'scroll', this.headerScrollHandler, this);\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(true);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n var sLeft;\n var sHeight;\n var clientHeight;\n getUpdateUsingRaf(function () {\n sLeft = _this.header.scrollLeft;\n sHeight = table.scrollHeight;\n clientHeight = _this.parent.getContent().clientHeight;\n }, function () {\n var args = { cancel: false };\n _this.parent.notify(checkScrollReset, args);\n if (sHeight < clientHeight && _this.parent.height !== 'auto') {\n _this.setLastRowCell();\n }\n if (_this.parent.frozenRows) {\n _this.resizeFrozenRowBorder();\n }\n if (!_this.parent.enableVirtualization && !_this.parent.enableInfiniteScrolling) {\n if (!args.cancel) {\n _this.header.scrollLeft = _this.previousValues.left;\n _this.content.scrollLeft = _this.previousValues.left;\n _this.content.scrollTop = _this.previousValues.top;\n }\n }\n if (!_this.parent.enableColumnVirtualization) {\n _this.content.scrollLeft = sLeft;\n if (_this.parent.isFrozenGrid()) {\n _this.previousValues.left = sLeft;\n }\n }\n });\n this.parent.isPreventScrollEvent = false;\n };\n /**\n * @returns {void} returns void\n * @hidden\n */\n Scroll.prototype.setLastRowCell = function () {\n var table = this.parent.getContentTable();\n if (table.querySelector('tr:nth-last-child(2)')) {\n removeClass(table.querySelector('tr:nth-last-child(2)').querySelectorAll('td'), 'e-lastrowcell');\n }\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {ScrollCss} returns the ScrollCss\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n var width = 'width';\n this.setWidth(!isNullOrUndefined(e.properties[\"\" + width]));\n };\n Scroll.prototype.makeStickyHeader = function () {\n if (this.parent.enableStickyHeader && this.parent.element && this.parent.getContent()) {\n var contentRect = this.parent.getContent().getClientRects()[0];\n if (contentRect) {\n var headerEle = this.parent.getHeaderContent();\n var toolbarEle = this.parent.element.querySelector('.e-toolbar');\n var groupHeaderEle = this.parent.element.querySelector('.e-groupdroparea');\n var height = headerEle.offsetHeight + (toolbarEle ? toolbarEle.offsetHeight : 0) +\n (groupHeaderEle ? groupHeaderEle.offsetHeight : 0);\n var parentTop = this.parentElement.getClientRects()[0].top;\n var top_1 = contentRect.top - (parentTop < 0 ? 0 : parentTop);\n var left = contentRect.left;\n var colMenuEle = document.body.querySelector('#' + this.parent.element.id + '_columnmenu');\n if (top_1 < height && contentRect.bottom > 0) {\n headerEle.classList.add('e-sticky');\n var elemTop = 0;\n if (groupHeaderEle && this.parent.groupSettings.showDropArea) {\n this.setSticky(groupHeaderEle, elemTop, contentRect.width, left, true);\n elemTop += groupHeaderEle.getClientRects()[0].height;\n }\n if (toolbarEle) {\n this.setSticky(toolbarEle, elemTop, contentRect.width, left, true);\n elemTop += toolbarEle.getClientRects()[0].height;\n }\n this.setSticky(headerEle, elemTop, contentRect.width, left, true);\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'fixed';\n colMenuEle.style.top = height + 'px';\n }\n }\n else {\n if (headerEle.classList.contains('e-sticky')) {\n this.setSticky(headerEle, null, null, null, false);\n if (toolbarEle) {\n this.setSticky(toolbarEle, null, null, null, false);\n }\n if (groupHeaderEle) {\n this.setSticky(groupHeaderEle, null, null, null, false);\n }\n var ccDlg = this.parent.element.querySelector('.e-ccdlg');\n if (ccDlg) {\n ccDlg.classList.remove('e-sticky');\n }\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'absolute';\n var topStyle = contentRect.top - parentTop;\n colMenuEle.style.top = topStyle + 'px';\n }\n }\n }\n this.parent.notify(events.stickyScrollComplete, {});\n }\n }\n };\n Scroll.prototype.setSticky = function (ele, top, width, left, isAdd) {\n if (isAdd) {\n ele.style.width = width + 'px';\n ele.classList.add('e-sticky');\n }\n else {\n ele.classList.remove('e-sticky');\n }\n ele.style.top = top != null ? top + 'px' : '';\n ele.style.left = left !== null ? parseInt(ele.style.left, 10) !== left ? left + 'px' : ele.style.left : '';\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.removeEventListener();\n //Remove Dom event\n var cont = this.parent.getContent().querySelector('.' + literals.content);\n EventHandler.remove(cont, 'scroll', this.onContentScroll);\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(false);\n }\n //Remove padding\n this.removePadding();\n removeClass([this.parent.getHeaderContent().querySelector('.' + literals.headerContent)], literals.headerContent);\n removeClass([cont], literals.content);\n //Remove height\n cont.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n };\n /**\n * Function to get the scrollbar width of the browser.\n *\n * @returns {number} return the width\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\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})();\nimport { Row } from '../models/row';\nimport { Column } from '../models/column';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { calculateAggregate, getUid } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\n/**\n * Summary row model generator\n *\n * @hidden\n */\nvar SummaryModelGenerator = /** @class */ (function () {\n /**\n * Constructor for Summary row model generator\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function SummaryModelGenerator(parent) {\n this.parent = parent;\n }\n SummaryModelGenerator.prototype.getData = function () {\n var _this = this;\n var rows = [];\n var row = this.parent.aggregates.slice();\n for (var i = 0; i < row.length; i++) {\n var columns = row[parseInt(i.toString(), 10)].columns.filter(function (column) {\n return !(column.footerTemplate || column.groupFooterTemplate || column.groupCaptionTemplate)\n || _this.columnSelector(column);\n });\n if (columns.length) {\n rows.push({ columns: columns });\n }\n }\n return rows;\n };\n SummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.footerTemplate !== undefined;\n };\n SummaryModelGenerator.prototype.getColumns = function (start) {\n var columns = [];\n if (this.parent.detailTemplate || !isNullOrUndefined(this.parent.childGrid)) {\n columns.push(new Column({}));\n }\n if (this.parent.allowGrouping) {\n for (var i = 0; i < this.parent.groupSettings.columns.length; i++) {\n columns.push(new Column({}));\n }\n }\n if (this.parent.isRowDragable() && !start) {\n columns.push(new Column({}));\n }\n columns.push.apply(columns, this.parent.getColumns());\n return columns;\n };\n SummaryModelGenerator.prototype.generateRows = function (input, args, start, end, columns) {\n if (input.length === 0) {\n if (args === undefined || !args.count) {\n return [];\n }\n }\n var data = this.buildSummaryData(input, args);\n var rows = [];\n var row = this.getData();\n for (var i = 0; i < row.length; i++) {\n rows.push(this.getGeneratedRow(row[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)], args ? args.level : undefined, start, end, args ? args.parentUid : undefined, columns));\n }\n return rows;\n };\n SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end, parentUid, columns) {\n var tmp = [];\n var indents = this.getIndentByLevel();\n var isDetailGridAlone = !isNullOrUndefined(this.parent.childGrid);\n var indentLength = this.parent.getIndentCount();\n if (this.parent.groupSettings.columns.length && this.parent.allowRowDragAndDrop) {\n indents.push('e-indentcelltop');\n }\n else if (this.parent.isRowDragable() && !start) {\n indents = ['e-indentcelltop'];\n }\n var values = columns ? columns : this.getColumns(start);\n for (var i = 0; i < values.length; i++) {\n tmp.push(this.getGeneratedCell(values[parseInt(i.toString(), 10)], summaryRow, i >= indentLength ? this.getCellType() :\n i === 0 && this.parent.childGrid ? CellType.DetailFooterIntent : CellType.Indent, indents[parseInt(i.toString(), 10)], isDetailGridAlone));\n }\n var row = new Row({ data: data, attributes: { class: 'e-summaryrow' } });\n row.cells = tmp;\n row.uid = getUid('grid-row');\n row.parentUid = parentUid;\n row.isAggregateRow = true;\n row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });\n return row;\n };\n SummaryModelGenerator.prototype.getGeneratedCell = function (column, summaryRow, cellType, indent, isDetailGridAlone) {\n //Get the summary column by display\n var sColumn = summaryRow.columns.filter(function (scolumn) { return scolumn.columnName === column.field; })[0];\n var attrs = {\n 'style': { 'textAlign': column.textAlign },\n 'e-mappinguid': column.uid, index: column.index\n };\n if (indent) {\n attrs.class = indent;\n }\n if (isNullOrUndefined(indent) && isDetailGridAlone) {\n attrs.class = 'e-detailindentcelltop';\n }\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(sColumn),\n 'isTemplate': sColumn && !isNullOrUndefined(sColumn.footerTemplate\n || sColumn.groupFooterTemplate || sColumn.groupCaptionTemplate),\n 'column': sColumn || {},\n 'attributes': attrs,\n 'cellType': cellType\n };\n opt.column.headerText = column.headerText;\n return new Cell(opt);\n };\n SummaryModelGenerator.prototype.buildSummaryData = function (data, args) {\n var dummy = [];\n var summaryRows = this.getData();\n var single = {};\n for (var i = 0; i < summaryRows.length; i++) {\n single = {};\n var column = summaryRows[parseInt(i.toString(), 10)].columns;\n for (var j = 0; j < column.length; j++) {\n single = this.setTemplate(column[parseInt(j.toString(), 10)], (args && args.aggregates) ? args : data, single);\n }\n dummy.push(single);\n }\n return dummy;\n };\n SummaryModelGenerator.prototype.getIndentByLevel = function () {\n return this.parent.groupSettings.columns.map(function () { return 'e-indentcelltop'; });\n };\n SummaryModelGenerator.prototype.setTemplate = function (column, data, single) {\n var types = column.type;\n var helper = {};\n var formatFn = column.getFormatter() || (function () { return function (a) { return a; }; })();\n var group = data;\n if (!(types instanceof Array)) {\n types = [column.type];\n }\n for (var i = 0; i < types.length; i++) {\n var key = column.field + ' - ' + types[parseInt(i.toString(), 10)].toLowerCase();\n var disp = column.columnName;\n var val = types[parseInt(i.toString(), 10)] !== 'Custom' && group.aggregates && key in group.aggregates ? group.aggregates[\"\" + key] :\n calculateAggregate(types[parseInt(i.toString(), 10)], group.aggregates ? group : data, column, this.parent);\n single[\"\" + disp] = single[\"\" + disp] || {};\n single[\"\" + disp][\"\" + key] = val;\n single[\"\" + disp][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(val) : ' ';\n if (group.field) {\n single[\"\" + disp].field = group.field;\n single[\"\" + disp].key = group.key;\n }\n }\n helper.format = column.getFormatter();\n column.setTemplate(helper);\n return single;\n };\n SummaryModelGenerator.prototype.getCellType = function () {\n return CellType.Summary;\n };\n return SummaryModelGenerator;\n}());\nexport { SummaryModelGenerator };\nvar GroupSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(GroupSummaryModelGenerator, _super);\n function GroupSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n GroupSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupFooterTemplate !== undefined;\n };\n GroupSummaryModelGenerator.prototype.getIndentByLevel = function (level) {\n if (level === void 0) { level = this.parent.groupSettings.columns.length; }\n if (this.parent.allowRowDragAndDrop && this.parent.groupSettings.columns.length) {\n level -= 1;\n }\n return this.parent.groupSettings.columns.map(function (v, indx) { return indx <= level - 1 ? '' : 'e-indentcelltop'; });\n };\n GroupSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.GroupSummary;\n };\n return GroupSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { GroupSummaryModelGenerator };\nvar CaptionSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(CaptionSummaryModelGenerator, _super);\n function CaptionSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CaptionSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupCaptionTemplate !== undefined;\n };\n CaptionSummaryModelGenerator.prototype.getData = function () {\n var initVal = { columns: [] };\n return [_super.prototype.getData.call(this).reduce(function (prev, cur) {\n prev.columns = prev.columns.concat(cur.columns);\n return prev;\n }, initVal)];\n };\n CaptionSummaryModelGenerator.prototype.isEmpty = function () {\n return (this.getData()[0].columns || []).length === 0;\n };\n CaptionSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.CaptionSummary;\n };\n return CaptionSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { CaptionSummaryModelGenerator };\n","/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable jsdoc/require-param */\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { remove } from '@syncfusion/ej2-base';\nimport { removeElement, RectOption, PolygonOption, createTooltip, minMax, getElement } from '../../common/utils/helper';\nimport { textElement } from '../../common/utils/helper';\nimport { PathOption, Rect, measureText, TextOption, SvgRenderer } from '@syncfusion/ej2-svg-base';\nimport { Zoom } from './zooming';\nimport { zoomComplete, onZooming } from '../../common/model/constants';\n/**\n * Zooming Toolkit created here\n *\n * @private\n */\nvar Toolkit = /** @class */ (function () {\n /** @private */\n function Toolkit(chart) {\n this.iconRectOverFill = 'transparent';\n this.iconRectSelectionFill = 'transparent';\n /** @private */\n this.zoomCompleteEvtCollection = [];\n this.chart = chart;\n this.elementId = chart.element.id;\n this.chart.svgRenderer = new SvgRenderer(this.elementId);\n }\n /**\n * To create the pan button.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.createPanButton = function (childElement, parentElement) {\n var render = this.chart.svgRenderer;\n var fillColor = this.chart.zoomModule.isPanning ? this.chart.themeStyle.toolkitSelectionColor : this.chart.themeStyle.toolkitFill;\n var direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';\n direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';\n //This is for setting low opacity to PAN Button\n this.elementOpacity = !this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n childElement.id = this.elementId + '_Zooming_Pan';\n childElement.setAttribute('role', 'button');\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Pan'));\n this.panElements = childElement;\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Pan_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect)));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Pan_2', fillColor, null, null, 1, null, direction)));\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.pan);\n };\n /**\n * To create the zoom button.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.createZoomButton = function (childElement, parentElement) {\n var render = this.chart.svgRenderer;\n //This is for selecting initial fill color to ZOOM button\n var fillColor = this.chart.zoomModule.isPanning || (!this.chart.zoomModule.isZoomed &&\n this.chart.zoomSettings.showToolbar) ? this.chart.themeStyle.toolkitFill : this.chart.themeStyle.toolkitSelectionColor;\n this.elementOpacity = !this.chart.zoomModule.isPanning && !this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar ? '0.2' : '1';\n var rectColor = this.chart.zoomModule.isPanning ? 'transparent' : this.chart.themeStyle.toolkitIconRectSelectionFill;\n var direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';\n direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';\n direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';\n childElement.id = this.elementId + '_Zooming_Zoom';\n childElement.setAttribute('role', 'button');\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Zoom'));\n childElement.setAttribute('opacity', this.elementOpacity);\n this.zoomElements = childElement;\n this.selectedID = this.chart.zoomModule.isPanning ? this.chart.element.id + '_Zooming_Pan_1' : this.elementId + '_Zooming_Zoom_1';\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Zoom_1', rectColor, {}, 1, this.chart.themeStyle.toolkitIconRect)));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Zoom_3', fillColor, null, null, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoom);\n };\n /**\n * To create the ZoomIn button.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.createZoomInButton = function (childElement, parentElement, chart) {\n var render = this.chart.svgRenderer;\n var fillColor = this.chart.themeStyle.toolkitFill;\n var direction = 'M10.103,0C6.812,0,4.16,2.651,4.16,5.943c0,1.509,0.503,2.834,1.417,3.885l-0.274,0.229H4.571L0,';\n direction += '14.628l0,0L1.372,16l4.571-4.572v-0.685l0.228-0.275c1.052,0.868,2.423,1.417,3.885,1.417c3.291,0,5.943-2.651,';\n direction += '5.943-5.943C16,2.651,13.395,0,10.103,0z M10.058,10.058c-2.286,0-4.114-1.828-4.114-4.114c0-2.286,1.828-4.114,';\n childElement.id = this.elementId + '_Zooming_ZoomIn';\n childElement.setAttribute('role', 'button');\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomIn'));\n var polygonDirection = '12.749,5.466 10.749,5.466 10.749,3.466 9.749,3.466 9.749,5.466 7.749,5.466 7.749,6.466';\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_ZoomIn_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect)));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_ZoomIn_2', fillColor, null, null, 1, null, direction + '4.114-4.114c2.286,0,4.114,1.828,4.114,4.114C14.172,8.229,12.344,10.058,10.058,10.058z')));\n childElement.appendChild(render.drawPolygon(new PolygonOption(this.elementId + '_Zooming_ZoomIn_3', polygonDirection + ' 9.749,6.466 9.749,8.466 10.749,8.466 10.749,6.466 12.749,6.466', fillColor)));\n this.zoomInElements = childElement;\n //This is for low opacity to ZOOM IN button\n this.elementOpacity = chart.zoomModule.isPanning || (!chart.zoomModule.isZoomed && !chart.zoomSettings.showToolbar && !this.enableZoomButton) ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoomIn);\n };\n /**\n * To create the ZoomOut button.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.createZoomOutButton = function (childElement, parentElement, chart) {\n var render = this.chart.svgRenderer;\n var fillColor = this.chart.themeStyle.toolkitFill;\n var direction = 'M0,14.622L1.378,16l4.533-4.533v-0.711l0.266-0.266c1.022,0.889,2.4,1.422,3.866,';\n direction += '1.422c3.289,0,5.955-2.666,5.955-5.955S13.333,0,10.044,0S4.089,2.667,4.134,5.911c0,1.466,0.533,2.844,';\n direction += '1.422,3.866l-0.266,0.266H4.578L0,14.622L0,14.622z M5.911,5.911c0-2.311,1.822-4.133,4.133-4.133s4.133,1.822,4.133,';\n childElement.id = this.elementId + '_Zooming_ZoomOut';\n childElement.setAttribute('role', 'button');\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomOut'));\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_ZoomOut_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect)));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_ZoomOut_2', fillColor, null, null, 1, null, direction + '4.133s-1.866,4.133-4.133,4.133S5.911,8.222,5.911,5.911z M12.567,6.466h-5v-1h5V6.466z')));\n this.zoomOutElements = childElement;\n //This is for low opacity of ZOOM OUT button\n this.elementOpacity = chart.zoomModule.isPanning || (!chart.zoomModule.isZoomed && chart.zoomSettings.showToolbar && !this.enableZoomButton) ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoomOut);\n };\n /**\n * To create the Reset button.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.createResetButton = function (childElement, parentElement, chart, isDevice) {\n var render = this.chart.svgRenderer;\n var fillColor = this.chart.themeStyle.toolkitFill;\n var size;\n var direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';\n direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';\n direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';\n childElement.id = this.elementId + '_Zooming_Reset';\n childElement.setAttribute('role', 'button');\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Reset'));\n //This is for low opacity to RESET button\n this.elementOpacity = !chart.zoomModule.isZoomed && chart.zoomSettings.showToolbar ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n if (!isDevice) {\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, this.chart.themeStyle.toolkitIconRect)));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Reset_2', fillColor, null, null, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z')));\n }\n else {\n size = measureText(this.chart.getLocalizedLabel('ResetZoom'), { size: '12px' }, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' });\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, new Rect(0, 0, size.width, size.height))));\n textElement(chart.renderer, new TextOption(this.elementId + '_Zooming_Reset_2', 0 + size.width / 2, 0 + size.height * 3 / 4, 'middle', this.chart.getLocalizedLabel('ResetZoom'), 'rotate(0,' + (0) + ',' + (0) + ')', 'auto'), { size: '12px' }, this.chart.theme === 'Material3Dark' ? 'White' : 'black', childElement, null, null, null, null, null, null, null, null, chart.enableCanvas, null, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' });\n }\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.reset);\n };\n /**\n * To bind events.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.wireEvents = function (element, process) {\n EventHandler.add(element, 'mousedown touchstart', process, this);\n EventHandler.add(element, 'mouseover', this.showTooltip, this);\n EventHandler.add(element, 'mouseout', this.removeTooltip, this);\n };\n /**\n * To show tooltip.\n *\n * @returns {void}\n * @private\n */\n Toolkit.prototype.showTooltip = function (event) {\n var text = event.currentTarget.id.split('_Zooming_')[1];\n var left = (event.pageX - (measureText(text, { size: '10px' }, { size: '10px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' }).width + 5));\n var rect = getElement(event.currentTarget.id + '_1');\n var icon2 = getElement(event.currentTarget.id + '_2');\n var icon3 = getElement(event.currentTarget.id + '_3');\n if (event.currentTarget.getAttribute('opacity') === '1') {\n event.currentTarget.setAttribute('cursor', 'pointer');\n }\n else {\n event.currentTarget.setAttribute('cursor', 'auto');\n }\n if (rect) {\n this.hoveredID = rect.id;\n rect.setAttribute('fill', this.chart.themeStyle.toolkitIconRectOverFill);\n }\n if (icon2) {\n icon2.setAttribute('fill', this.chart.themeStyle.toolkitSelectionColor);\n }\n if (icon3) {\n icon3.setAttribute('fill', this.chart.themeStyle.toolkitSelectionColor);\n }\n if (!this.chart.isTouch) {\n createTooltip('EJ2_Chart_ZoomTip', this.chart.getLocalizedLabel(text), (event.pageY + 10), left, '10px');\n }\n };\n /** @private */\n /* eslint-disable */\n Toolkit.prototype.removeTooltip = function () {\n if (this.hoveredID && getElement(this.hoveredID)) {\n var rectColor = this.chart.zoomModule.isPanning ? (this.hoveredID.indexOf('_Pan_') > -1) ? this.chart.themeStyle.toolkitIconRectSelectionFill : 'transparent' : (this.hoveredID.indexOf('_Zoom_') > -1) ? this.chart.themeStyle.toolkitIconRectSelectionFill : 'transparent';\n getElement(this.hoveredID).setAttribute('fill', rectColor);\n }\n var icon2 = this.hoveredID ? getElement(this.hoveredID.replace('_1', '_2')) : null;\n var icon3 = this.hoveredID ? getElement(this.hoveredID.replace('_1', '_3')) : null;\n if (icon2) {\n var iconColor = this.chart.zoomModule.isPanning ? (this.hoveredID.indexOf('_Pan_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.chart.themeStyle.toolkitFill : (this.hoveredID.indexOf('_Zoom_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.chart.themeStyle.toolkitFill;\n icon2.setAttribute('fill', iconColor);\n }\n if (icon3) {\n //This is used for change color while hover on ZOOM button\n var iconColor = this.chart.zoomModule.isPanning || (!this.chart.isZoomed && this.chart.zoomSettings.showToolbar) ? this.chart.themeStyle.toolkitFill : (this.hoveredID.indexOf('_Zoom_') > -1) ? this.chart.themeStyle.toolkitSelectionColor : this.chart.themeStyle.toolkitFill;\n icon3.setAttribute('fill', iconColor);\n }\n removeElement('EJ2_Chart_ZoomTip');\n };\n // Toolkit events function calculation here.\n /** @private */\n Toolkit.prototype.reset = function (event) {\n var _this = this;\n if (!this.chart.zoomModule.isZoomed) {\n return false;\n }\n var chart = this.chart;\n this.enableZoomButton = false;\n if (!chart.zoomModule.isDevice) {\n remove(chart.zoomModule.toolkitElements);\n }\n else if (event.type == 'touchstart') {\n event.stopPropagation();\n }\n var argsData;\n this.removeTooltip();\n chart.svgObject.setAttribute('cursor', 'auto');\n var zoomingEventArgs;\n var zoomedAxisCollection = [];\n this.zoomCompleteEvtCollection = [];\n for (var _i = 0, _a = chart.axisCollections; _i < _a.length; _i++) {\n var axis = _a[_i];\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition, currentZoomFactor: 1, currentZoomPosition: 0,\n previousVisibleRange: axis.visibleRange, currentVisibleRange: null\n };\n axis.zoomFactor = 1;\n axis.zoomPosition = 0;\n if (axis.zoomingScrollBar) {\n axis.zoomingScrollBar.isScrollUI = false;\n }\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n zoomedAxisCollection.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n if (chart.zoomModule.isDevice && !this.chart.isBlazor) {\n chart.trigger(zoomComplete, argsData);\n }\n }\n zoomingEventArgs = { cancel: false, axisCollection: zoomedAxisCollection, name: onZooming };\n if (!zoomingEventArgs.cancel && this.chart.isBlazor) {\n this.chart.trigger(onZooming, zoomingEventArgs, function () {\n _this.setDefferedZoom(chart);\n });\n return false;\n }\n else {\n return (this.setDefferedZoom(chart));\n }\n };\n Toolkit.prototype.setDefferedZoom = function (chart) {\n chart.disableTrackTooltip = false;\n chart.zoomModule.isZoomed = chart.zoomModule.isPanning = chart.isChartDrag = chart.delayRedraw = false;\n chart.zoomModule.touchMoveList = chart.zoomModule.touchStartList = [];\n chart.zoomModule.pinchTarget = null;\n chart.removeSvg();\n chart.refreshAxis();\n chart.refreshBound();\n this.elementOpacity = '1';\n return false;\n };\n Toolkit.prototype.zoomIn = function (e) {\n this.zoomInOutCalculation(1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);\n return false;\n };\n Toolkit.prototype.zoomOut = function (e) {\n this.enableZoomButton = false;\n this.zoomInOutCalculation(-1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);\n return false;\n };\n Toolkit.prototype.zoom = function (e) {\n this.chart.zoomModule.isPanning = false;\n var zoomModule = this.chart.zoomModule;\n this.elementOpacity = '1';\n this.chart.svgObject.setAttribute('cursor', 'auto');\n this.zoomInElements.setAttribute('opacity', this.elementOpacity);\n this.elementOpacity = (!this.chart.zoomModule.isZoomed && this.chart.zoomSettings.showToolbar) ? '0.2' : '1';\n this.zoomOutElements.setAttribute('opacity', this.elementOpacity);\n this.applySelection(this.zoomElements.childNodes, this.chart.themeStyle.toolkitSelectionColor);\n this.applySelection(this.panElements.childNodes, '#737373');\n if (getElement(this.selectedID)) {\n getElement(this.selectedID).setAttribute('fill', 'transparent');\n }\n this.selectedID = this.chart.element.id + '_Zooming_Zoom_1';\n getElement(this.selectedID).setAttribute('fill', this.chart.themeStyle.toolkitIconRectSelectionFill);\n return false;\n };\n /** @private */\n Toolkit.prototype.pan = function () {\n if (!this.chart.zoomModule.isZoomed) {\n return false;\n }\n var element;\n this.chart.zoomModule.isPanning = true;\n this.chart.svgObject.setAttribute('cursor', 'pointer');\n this.elementOpacity = '0.2';\n element = this.zoomInElements ? this.zoomInElements.setAttribute('opacity', this.elementOpacity) : null;\n element = this.zoomOutElements ? this.zoomOutElements.setAttribute('opacity', this.elementOpacity) : null;\n element = this.panElements ? this.applySelection(this.panElements.childNodes, this.chart.themeStyle.toolkitSelectionColor) : null;\n element = this.zoomElements ? this.applySelection(this.zoomElements.childNodes, '#737373') : null;\n if (getElement(this.selectedID)) {\n getElement(this.selectedID).setAttribute('fill', 'transparent');\n }\n this.selectedID = this.chart.element.id + '_Zooming_Pan_1';\n getElement(this.selectedID).setAttribute('fill', this.chart.themeStyle.toolkitIconRectSelectionFill);\n return false;\n };\n Toolkit.prototype.zoomInOutCalculation = function (scale, chart, axes, mode) {\n var _this = this;\n if (chart.zoomSettings.showToolbar) {\n this.elementOpacity = this.zoomInElements.getAttribute('opacity');\n }\n if (!chart.zoomModule.isPanning && this.elementOpacity !== '0.2') {\n if ((chart.zoomSettings.showToolbar && !chart.isZoomed)) {\n chart.zoomModule.isZoomed = true;\n }\n var zoomFactor = void 0;\n var zoomPosition = void 0;\n var cumulative = void 0;\n chart.disableTrackTooltip = true;\n chart.delayRedraw = true;\n var argsData = void 0;\n this.zoomCompleteEvtCollection = [];\n var zoomedAxisCollection = [];\n for (var _i = 0, _a = axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition, currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition,\n previousVisibleRange: axis.visibleRange, currentVisibleRange: null\n };\n if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||\n (axis.orientation === 'Vertical')) {\n cumulative = Math.max(Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1) + (0.25 * scale), 1);\n zoomFactor = (cumulative === 1) ? 1 : minMax(1 / cumulative, 0, 1);\n zoomPosition = (cumulative === 1) ? 0 : axis.zoomPosition + ((axis.zoomFactor - zoomFactor) * 0.5);\n if (axis.zoomPosition !== zoomPosition || axis.zoomFactor !== zoomFactor) {\n zoomFactor = (zoomPosition + zoomFactor) > 1 ? (1 - zoomPosition) : zoomFactor;\n }\n argsData.currentZoomFactor = zoomFactor;\n argsData.currentZoomPosition = zoomPosition;\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n zoomedAxisCollection.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n }\n }\n var zoomingEventArgs_1 = { cancel: false, axisCollection: zoomedAxisCollection, name: onZooming };\n this.chart.trigger(onZooming, zoomingEventArgs_1, function () {\n if (zoomingEventArgs_1.cancel) {\n var zoom = new Zoom(chart);\n zoom.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n });\n }\n };\n Toolkit.prototype.applySelection = function (elements, color) {\n for (var i = 1, length_1 = elements.length; i < length_1; i++) {\n elements[i].setAttribute('fill', color);\n }\n };\n return Toolkit;\n}());\nexport { Toolkit };\n","import { EventHandler, Browser, createElement } from '@syncfusion/ej2-base';\nimport { getRectLocation, minMax, getElement, ChartLocation, RectOption } from '../../common/utils/helper';\nimport { Rect, measureText } from '@syncfusion/ej2-svg-base';\nimport { Toolkit } from './zooming-toolkit';\nimport { zoomComplete, onZooming } from '../../common/model/constants';\nimport { withInBounds } from '../../common/utils/helper';\n/**\n * `Zooming` module handles the zooming for chart.\n */\nvar Zoom = /** @class */ (function () {\n /**\n * Constructor for Zooming module.\n *\n * @private\n */\n function Zoom(chart) {\n this.zoomCompleteEvtCollection = [];\n this.chart = chart;\n this.isPointer = Browser.isPointer;\n this.browserName = Browser.info.name;\n this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';\n this.addEventListener();\n this.isDevice = Browser.isDevice;\n var zooming = chart.zoomSettings;\n this.toolkit = new Toolkit(chart);\n this.zooming = zooming;\n this.elementId = chart.element.id;\n this.zoomingRect = new Rect(0, 0, 0, 0);\n this.zoomAxes = [];\n this.zoomkitOpacity = 1;\n this.isIOS = Browser.isIos || Browser.isIos7;\n this.isZoomed = this.performedUI = this.zooming.enablePan ||\n ((this.chart.primaryXAxis.zoomFactor < 1 && this.chart.primaryXAxis.zoomPosition > 0) ||\n (this.chart.primaryYAxis.zoomFactor < 1 && this.chart.primaryYAxis.zoomPosition > 0) || this.isAxisZoomed(this.chart.axes));\n if (zooming.enableScrollbar) {\n chart.scrollElement = createElement('div', { id: chart.element.id + '_scrollElement' });\n }\n }\n /**\n * Function that handles the Rectangular zooming.\n *\n * @returns {void}\n */\n Zoom.prototype.renderZooming = function (e, chart, isTouch) {\n this.calculateZoomAxesRange(chart);\n if (this.zooming.enableSelectionZooming && (!isTouch\n || (chart.isDoubleTap && this.touchStartList.length === 1)) && (!this.isPanning || chart.isDoubleTap)) {\n this.isPanning = this.isDevice ? true : this.isPanning;\n this.performedUI = true;\n this.drawZoomingRectangle(chart);\n }\n else if (this.isPanning && chart.isChartDrag) {\n if (!isTouch || (isTouch && this.touchStartList.length === 1)) {\n this.pinchTarget = isTouch ? e.target : null;\n this.doPan(chart, chart.axisCollections);\n }\n }\n };\n // Zooming rectangle drawn here\n Zoom.prototype.drawZoomingRectangle = function (chart) {\n var areaBounds = chart.chartAxisLayoutPanel.seriesClipRect;\n var startLocation = new ChartLocation(chart.previousMouseMoveX, chart.previousMouseMoveY);\n var endLocation = new ChartLocation(chart.mouseX, chart.mouseY);\n var rect = this.zoomingRect = getRectLocation(startLocation, endLocation, areaBounds);\n if (rect.width > 0 && rect.height > 0) {\n this.isZoomed = true;\n chart.disableTrackTooltip = true;\n chart.svgObject.setAttribute('cursor', 'crosshair');\n if (this.zooming.mode === 'Y') {\n rect.width = areaBounds.width;\n rect.x = areaBounds.x;\n }\n var svg = chart.enableCanvas ? document.getElementById(this.elementId + '_tooltip_svg') : chart.svgObject;\n svg.appendChild(chart.svgRenderer.drawRectangle(new RectOption(this.elementId + '_ZoomArea', chart.themeStyle.selectionRectFill, { color: chart.themeStyle.selectionRectStroke, width: 1 }, 1, rect, 0, 0, '', '3')));\n }\n };\n // Panning performed here\n Zoom.prototype.doPan = function (chart, axes, xDifference, yDifference) {\n var _this = this;\n if (xDifference === void 0) { xDifference = 0; }\n if (yDifference === void 0) { yDifference = 0; }\n if (chart.startMove && chart.crosshair.enable) {\n return null;\n }\n var currentScale;\n var offset;\n this.isZoomed = true;\n this.offset = !chart.delayRedraw ? chart.chartAxisLayoutPanel.seriesClipRect : this.offset;\n chart.delayRedraw = true;\n this.zoomCompleteEvtCollection = [];\n chart.disableTrackTooltip = true;\n var argsData;\n var zoomedAxisCollection = [];\n for (var _i = 0, _a = axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition, currentZoomFactor: axis.zoomFactor,\n currentZoomPosition: axis.zoomPosition, previousVisibleRange: axis.visibleRange,\n currentVisibleRange: null\n };\n currentScale = Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1);\n if (axis.orientation === 'Horizontal') {\n offset = (xDifference !== 0 ? xDifference : (chart.previousMouseMoveX - chart.mouseX)) / axis.rect.width / currentScale;\n argsData.currentZoomPosition = minMax(axis.zoomPosition + offset, 0, (1 - axis.zoomFactor));\n }\n else {\n offset = (yDifference !== 0 ? yDifference : (chart.previousMouseMoveY - chart.mouseY)) / axis.rect.height / currentScale;\n argsData.currentZoomPosition = minMax(axis.zoomPosition - offset, 0, (1 - axis.zoomFactor));\n }\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n zoomedAxisCollection.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n }\n var zoomingEventArgs = { cancel: false, axisCollection: zoomedAxisCollection, name: onZooming };\n if (!zoomingEventArgs.cancel && this.chart.isBlazor) {\n this.chart.trigger(onZooming, zoomingEventArgs, function () {\n if (zoomingEventArgs.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.performDefferedZoom(chart);\n }\n });\n }\n else {\n this.chart.trigger(onZooming, zoomingEventArgs, function () {\n if (zoomingEventArgs.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.performDefferedZoom(chart);\n _this.redrawOnZooming(chart, false);\n }\n });\n }\n };\n Zoom.prototype.performDefferedZoom = function (chart) {\n var translateX;\n var translateY;\n if (this.zooming.enableDeferredZooming) {\n translateX = chart.mouseX - chart.mouseDownX;\n translateY = chart.mouseY - chart.mouseDownY;\n switch (this.zooming.mode) {\n case 'Y':\n translateX = 0;\n break;\n }\n this.setTransform(translateX, translateY, null, null, chart, false);\n this.refreshAxis(chart.chartAxisLayoutPanel, chart, chart.axisCollections);\n if (chart.enableCanvas) {\n this.performZoomRedraw(chart);\n }\n }\n else {\n this.performZoomRedraw(chart);\n }\n chart.previousMouseMoveX = chart.mouseX;\n chart.previousMouseMoveY = chart.mouseY;\n };\n /**\n * Redraw the chart on zooming.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.performZoomRedraw = function (chart) {\n var rect = this.zoomingRect;\n chart.animateSeries = false;\n if (this.isZoomed) {\n if (rect.width > 0 && rect.height > 0) {\n this.performedUI = true;\n chart.svgObject.setAttribute('cursor', 'auto');\n this.doZoom(chart, chart.axisCollections, chart.chartAxisLayoutPanel.seriesClipRect);\n chart.isDoubleTap = false;\n }\n else if (chart.disableTrackTooltip) {\n chart.disableTrackTooltip = false;\n chart.delayRedraw = false;\n chart.enableCanvas ? chart.createChartSvg() : chart.removeSvg();\n chart.refreshAxis();\n chart.refreshBound();\n }\n }\n };\n Zoom.prototype.refreshAxis = function (layout, chart, axes) {\n var mode = chart.zoomSettings.mode;\n layout.measureAxis(new Rect(chart.initialClipRect.x, chart.initialClipRect.y, chart.initialClipRect.width, chart.initialClipRect.height));\n axes.map(function (axis, index) {\n if (axis.orientation === 'Horizontal' && mode !== 'Y') {\n layout.drawXAxisLabels(axis, index, null, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n if (axis.orientation === 'Vertical') {\n layout.drawYAxisLabels(axis, index, null, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n });\n };\n // Rectangular zoom calculated here performed here\n Zoom.prototype.doZoom = function (chart, axes, bounds) {\n var _this = this;\n var zoomRect = this.zoomingRect;\n var mode = this.zooming.mode;\n var argsData;\n this.isPanning = chart.zoomSettings.enablePan || this.isPanning;\n var zoomedAxisCollections = [];\n this.zoomCompleteEvtCollection = [];\n for (var _i = 0, _a = axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n argsData = {\n cancel: false, name: zoomComplete, axis: axis,\n previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition,\n currentZoomFactor: axis.zoomFactor,\n currentZoomPosition: axis.zoomPosition,\n previousVisibleRange: axis.visibleRange, currentVisibleRange: null\n };\n if (axis.orientation === 'Horizontal') {\n if (mode !== 'Y') {\n argsData.currentZoomPosition += Math.abs((zoomRect.x - bounds.x) / (bounds.width)) * axis.zoomFactor;\n argsData.currentZoomFactor *= (zoomRect.width / bounds.width);\n }\n }\n else {\n argsData.currentZoomPosition += (1 - Math.abs((zoomRect.height + (zoomRect.y - bounds.y)) / (bounds.height)))\n * axis.zoomFactor;\n argsData.currentZoomFactor *= (zoomRect.height / bounds.height);\n }\n if (parseFloat(argsData.currentZoomFactor.toFixed(3)) <= 0.001) {\n argsData.currentZoomFactor = argsData.previousZoomFactor;\n argsData.currentZoomPosition = argsData.previousZoomPosition;\n }\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n zoomedAxisCollections.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n }\n var onZoomingEventArg = { cancel: false, axisCollection: zoomedAxisCollections, name: onZooming };\n if (!onZoomingEventArg.cancel && this.chart.isBlazor) {\n this.chart.trigger(onZooming, onZoomingEventArg, function () {\n if (onZoomingEventArg.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.zoomingRect = new Rect(0, 0, 0, 0);\n _this.performZoomRedraw(chart);\n }\n });\n }\n else {\n this.chart.trigger(onZooming, onZoomingEventArg, function () {\n if (onZoomingEventArg.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.zoomingRect = new Rect(0, 0, 0, 0);\n _this.redrawOnZooming(chart);\n }\n });\n }\n };\n /** It is used to redraw the chart and trigger zoomComplete event */\n Zoom.prototype.redrawOnZooming = function (chart, isRedraw, isMouseUp) {\n if (isRedraw === void 0) { isRedraw = true; }\n if (isMouseUp === void 0) { isMouseUp = false; }\n var zoomCompleteCollection = isMouseUp ? this.toolkit.zoomCompleteEvtCollection :\n this.zoomCompleteEvtCollection;\n if (isRedraw) {\n this.performZoomRedraw(chart);\n }\n var argsData;\n for (var i = 0; i < zoomCompleteCollection.length; i++) {\n if (!zoomCompleteCollection[i].cancel) {\n argsData = {\n cancel: false, name: zoomComplete,\n axis: chart.axisCollections[i],\n previousZoomFactor: zoomCompleteCollection[i].previousZoomFactor,\n previousZoomPosition: zoomCompleteCollection[i].previousZoomPosition,\n currentZoomFactor: chart.axisCollections[i].zoomFactor,\n currentZoomPosition: chart.axisCollections[i].zoomPosition,\n currentVisibleRange: chart.axisCollections[i].visibleRange,\n previousVisibleRange: zoomCompleteCollection[i].previousVisibleRange\n };\n chart.trigger(zoomComplete, argsData);\n }\n }\n };\n /**\n * Function that handles the Mouse wheel zooming.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.performMouseWheelZooming = function (e, mouseX, mouseY, chart, axes) {\n var _this = this;\n var direction = (this.browserName === 'mozilla' && !this.isPointer) ?\n -(e.detail) / 3 > 0 ? 1 : -1 : (e['wheelDelta'] > 0 ? 1 : -1);\n var mode = this.zooming.mode;\n var origin = 0.5;\n var cumulative;\n var zoomFactor;\n var zoomPosition;\n this.isZoomed = true;\n this.calculateZoomAxesRange(chart);\n chart.disableTrackTooltip = true;\n this.performedUI = true;\n this.isPanning = chart.zoomSettings.enablePan || this.isPanning;\n this.zoomCompleteEvtCollection = [];\n var argsData;\n var zoomedAxisCollection = [];\n for (var _i = 0, _a = axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition,\n currentZoomFactor: axis.zoomFactor,\n currentZoomPosition: axis.zoomPosition, currentVisibleRange: null,\n previousVisibleRange: axis.visibleRange\n };\n if ((axis.orientation === 'Vertical') ||\n (axis.orientation === 'Horizontal' && mode !== 'Y')) {\n cumulative = Math.max(Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1) + (0.25 * direction), 1);\n cumulative = (cumulative > 50000000000) ? 50000000000 : cumulative;\n if (cumulative >= 1) {\n origin = axis.orientation === 'Horizontal' ? mouseX / axis.rect.width : 1 - (mouseY / axis.rect.height);\n origin = origin > 1 ? 1 : origin < 0 ? 0 : origin;\n zoomFactor = (cumulative === 1) ? 1 : minMax((direction > 0 ? 0.9 : 1.1) / cumulative, 0, 1);\n zoomPosition = (cumulative === 1) ? 0 : axis.zoomPosition + ((axis.zoomFactor - zoomFactor) * origin);\n if (axis.zoomPosition !== zoomPosition || axis.zoomFactor !== zoomFactor) {\n zoomFactor = (zoomPosition + zoomFactor) > 1 ? (1 - zoomPosition) : zoomFactor;\n }\n argsData.currentZoomFactor = zoomFactor;\n argsData.currentZoomPosition = zoomPosition;\n }\n if (argsData.currentZoomFactor === argsData.previousZoomFactor && argsData.currentZoomPosition === argsData.previousZoomPosition) {\n chart.disableTrackTooltip = false;\n }\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n }\n zoomedAxisCollection.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n }\n var onZoomingEventArgs = { cancel: false, axisCollection: zoomedAxisCollection, name: onZooming };\n if (!onZoomingEventArgs.cancel && this.chart.isBlazor) {\n this.chart.trigger(onZooming, onZoomingEventArgs, function () {\n if (onZoomingEventArgs.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.performZoomRedraw(chart);\n }\n });\n }\n else {\n this.chart.trigger(onZooming, onZoomingEventArgs, function () {\n if (onZoomingEventArgs.cancel) {\n _this.zoomCancel(axes, _this.zoomCompleteEvtCollection);\n }\n else {\n _this.redrawOnZooming(chart);\n }\n });\n }\n };\n /**\n * Function that handles the Pinch zooming.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.performPinchZooming = function (e, chart) {\n if ((this.zoomingRect.width > 0 && this.zoomingRect.height > 0) || (chart.startMove && chart.crosshair.enable)) {\n return false;\n }\n this.calculateZoomAxesRange(chart);\n this.isZoomed = true;\n this.isPanning = true;\n this.performedUI = true;\n this.offset = !chart.delayRedraw ? chart.chartAxisLayoutPanel.seriesClipRect : this.offset;\n chart.delayRedraw = true;\n chart.disableTrackTooltip = true;\n var elementOffset = chart.element.getBoundingClientRect();\n var touchDown = this.touchStartList;\n var touchMove = this.touchMoveList;\n var touch0StartX = touchDown[0].pageX - elementOffset.left;\n var touch0StartY = touchDown[0].pageY - elementOffset.top;\n var touch0EndX = touchMove[0].pageX - elementOffset.left;\n var touch0EndY = touchMove[0].pageY - elementOffset.top;\n var touch1StartX = touchDown[1].pageX - elementOffset.left;\n var touch1StartY = touchDown[1].pageY - elementOffset.top;\n var touch1EndX = touchMove[1].pageX - elementOffset.left;\n var touch1EndY = touchMove[1].pageY - elementOffset.top;\n var scaleX = Math.abs(touch0EndX - touch1EndX) / Math.abs(touch0StartX - touch1StartX);\n var scaleY = Math.abs(touch0EndY - touch1EndY) / Math.abs(touch0StartY - touch1StartY);\n var clipX = ((this.offset.x - touch0EndX) / scaleX) + touch0StartX;\n var clipY = ((this.offset.y - touch0EndY) / scaleY) + touch0StartY;\n var pinchRect = new Rect(clipX, clipY, this.offset.width / scaleX, this.offset.height / scaleY);\n var translateXValue = (touch0EndX - (scaleX * touch0StartX));\n var translateYValue = (touch0EndY - (scaleY * touch0StartY));\n if (!isNaN(scaleX - scaleX) && !isNaN(scaleY - scaleY)) {\n switch (this.zooming.mode) {\n case 'XY':\n case 'X':\n this.setTransform(translateXValue, translateYValue, scaleX, scaleY, chart, true);\n break;\n case 'Y':\n this.setTransform(0, translateYValue, 1, scaleY, chart, true);\n break;\n }\n }\n if (!this.calculatePinchZoomFactor(chart, pinchRect)) {\n this.refreshAxis(chart.chartAxisLayoutPanel, chart, chart.axisCollections);\n this.redrawOnZooming(chart, false);\n }\n return true;\n };\n Zoom.prototype.calculatePinchZoomFactor = function (chart, pinchRect) {\n var mode = this.zooming.mode;\n var selectionMin;\n var selectionMax;\n var rangeMin;\n var rangeMax;\n var value;\n var axisTrans;\n var argsData;\n var currentZF;\n var currentZP;\n var zoomedAxisCollection = [];\n this.zoomCompleteEvtCollection = [];\n for (var index = 0; index < chart.axisCollections.length; index++) {\n var axis = chart.axisCollections[index];\n if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||\n (axis.orientation === 'Vertical')) {\n currentZF = axis.zoomFactor;\n currentZP = axis.zoomPosition;\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,\n previousZoomPosition: axis.zoomPosition, currentZoomFactor: currentZF,\n currentZoomPosition: currentZP, previousVisibleRange: axis.visibleRange,\n currentVisibleRange: null\n };\n if (axis.orientation === 'Horizontal') {\n value = pinchRect.x - this.offset.x;\n axisTrans = axis.rect.width / this.zoomAxes[index].delta;\n rangeMin = value / axisTrans + this.zoomAxes[index].min;\n value = pinchRect.x + pinchRect.width - this.offset.x;\n rangeMax = value / axisTrans + this.zoomAxes[index].min;\n }\n else {\n value = pinchRect.y - this.offset.y;\n axisTrans = axis.rect.height / this.zoomAxes[index].delta;\n rangeMin = (value * -1 + axis.rect.height) / axisTrans + this.zoomAxes[index].min;\n value = pinchRect.y + pinchRect.height - this.offset.y;\n rangeMax = (value * -1 + axis.rect.height) / axisTrans + this.zoomAxes[index].min;\n }\n selectionMin = Math.min(rangeMin, rangeMax);\n selectionMax = Math.max(rangeMin, rangeMax);\n currentZP = (selectionMin - this.zoomAxes[index].actualMin) / this.zoomAxes[index].actualDelta;\n currentZF = (selectionMax - selectionMin) / this.zoomAxes[index].actualDelta;\n argsData.currentZoomPosition = currentZP < 0 ? 0 : currentZP;\n argsData.currentZoomFactor = currentZF > 1 ? 1 : (currentZF < 0.03) ? 0.03 : currentZF;\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n this.zoomCompleteEvtCollection.push(argsData);\n }\n zoomedAxisCollection.push({\n zoomFactor: axis.zoomFactor, zoomPosition: axis.zoomFactor, axisName: axis.name,\n axisRange: axis.visibleRange\n });\n }\n }\n var onZoomingEventArgs = { cancel: false, axisCollection: zoomedAxisCollection, name: onZooming };\n if (!onZoomingEventArgs.cancel) {\n this.chart.trigger(onZooming, onZoomingEventArgs);\n if (onZoomingEventArgs.cancel) {\n this.zoomCancel(chart.axisCollections, this.zoomCompleteEvtCollection);\n return true;\n }\n }\n return false;\n };\n // Series transformation style applied here.\n Zoom.prototype.setTransform = function (transX, transY, scaleX, scaleY, chart, isPinch) {\n if (!chart.enableCanvas) {\n chart.seriesElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');\n }\n if (chart.indicatorElements) {\n chart.indicatorElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');\n }\n var translate;\n var xAxisLoc;\n var yAxisLoc;\n var element;\n if (transX !== null && transY !== null) {\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var value = _a[_i];\n xAxisLoc = chart.requireInvertedAxis ? value.yAxis.rect.x : value.xAxis.rect.x;\n yAxisLoc = chart.requireInvertedAxis ? value.xAxis.rect.y : value.yAxis.rect.y;\n translate = 'translate(' + (transX + (isPinch ? (scaleX * xAxisLoc) : xAxisLoc)) +\n ',' + (transY + (isPinch ? (scaleY * yAxisLoc) : yAxisLoc)) + ')';\n translate = (scaleX || scaleY) ? translate + ' scale(' + scaleX + ' ' + scaleY + ')' : translate;\n if (value.visible) {\n if (value.category === 'Indicator') {\n value.seriesElement.parentNode.setAttribute('transform', translate);\n }\n else {\n if (!chart.enableCanvas) {\n value.seriesElement.setAttribute('transform', translate);\n }\n }\n element = getElement(chart.element.id + '_Series_' + value.index + '_DataLabelCollections');\n if (value.errorBarElement) {\n value.errorBarElement.setAttribute('transform', translate);\n }\n if (value.symbolElement) {\n value.symbolElement.setAttribute('transform', translate);\n }\n if (value.textElement) {\n value.textElement.setAttribute('visibility', 'hidden');\n value.shapeElement.setAttribute('visibility', 'hidden');\n }\n if (element) {\n element.style.visibility = 'hidden';\n }\n }\n }\n }\n };\n Zoom.prototype.calculateZoomAxesRange = function (chart) {\n var range;\n var axisRange;\n for (var index = 0; index < chart.axisCollections.length; index++) {\n var axis = chart.axisCollections[index];\n axisRange = axis.visibleRange;\n if (this.zoomAxes[index]) {\n if (!chart.delayRedraw) {\n this.zoomAxes[index].min = axisRange.min;\n this.zoomAxes[index].delta = axisRange.delta;\n }\n }\n else {\n range = {\n actualMin: axis.actualRange.min,\n actualDelta: axis.actualRange.delta,\n min: axisRange.min,\n delta: axisRange.delta\n };\n this.zoomAxes[index] = range;\n }\n }\n };\n // Zooming Toolkit created here\n Zoom.prototype.showZoomingToolkit = function (chart) {\n var toolboxItems = this.zooming.toolbarItems;\n var areaBounds = chart.chartAxisLayoutPanel.seriesClipRect;\n var spacing = 10;\n var render = chart.svgRenderer;\n var length = this.isDevice ? 1 : toolboxItems.length;\n var iconSize = this.isDevice ? measureText('Reset Zoom', { size: '12px' }, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' }).width : 16;\n var height = this.isDevice ? measureText('Reset Zoom', { size: '12px' }, { size: '12px', fontStyle: 'Normal', fontWeight: '400', fontFamily: 'Segoe UI' }).height : 22;\n var width = (length * iconSize) + ((length + 1) * spacing) + ((length - 1) * spacing);\n var transX = areaBounds.x + areaBounds.width - width - spacing;\n var transY = (areaBounds.y + spacing);\n var xPosition = spacing;\n var toolkit = this.toolkit;\n var element;\n var shadowElement = '
';\n shadowElement += '';\n shadowElement += '';\n if (length === 0 || getElement(this.elementId + '_Zooming_KitCollection')) {\n return false;\n }\n var defElement = render.createDefs();\n toolboxItems = this.isDevice ? ['Reset'] : toolboxItems;\n defElement.innerHTML = shadowElement;\n this.toolkitElements = render.createGroup({\n id: this.elementId + '_Zooming_KitCollection',\n transform: 'translate(' + transX + ',' + transY + ')'\n });\n this.toolkitElements.appendChild(defElement);\n var zoomFillColor = this.chart.theme === 'Tailwind' ? '#F3F4F6' : this.chart.theme === 'Fluent' ? '#F3F2F1' :\n (this.chart.theme === 'Material3' ? '#FFFFFF' : this.chart.theme === 'Material3Dark' ? '#1C1B1F' : '#fafafa');\n this.toolkitElements.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Rect', zoomFillColor, { color: 'transparent', width: 1 }, 1, new Rect(0, 0, width, (height + (spacing * 2))), 4, 4)));\n var outerElement = render.drawRectangle(new RectOption(this.elementId + '_Zooming_Rect', zoomFillColor, { color: 'transparent', width: 1 }, 0.1, new Rect(0, 0, width, (height + (spacing * 2))), 4, 4));\n if (this.chart.theme === 'Tailwind' || this.chart.theme === 'TailwindDark') {\n outerElement.setAttribute('box-shadow', '0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)');\n }\n else if (this.chart.theme === 'Material3' || this.chart.theme === 'Material3Dark') {\n outerElement.setAttribute('filter', 'drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))');\n outerElement.setAttribute('fill', this.chart.theme === 'Material3' ? '#FFFFFF' : '#1C1B1F');\n outerElement.setAttribute('rx', '4px');\n outerElement.setAttribute('ry', '4px');\n outerElement.setAttribute('opacity', '1');\n }\n else {\n outerElement.setAttribute('filter', 'url(#chart_shadow)');\n }\n this.toolkitElements.appendChild(outerElement);\n var currentItem;\n var panIcon = false;\n for (var i = 1; i <= length; i++) {\n currentItem = toolboxItems[i - 1];\n element = render.createGroup({\n transform: 'translate(' + xPosition + ',' + (this.isDevice ? spacing : (spacing + 3)) + ')'\n });\n // for desktop toolkit hight is 32 and top padding is 8 icon size 16\n switch (currentItem) {\n case 'Pan':\n toolkit.createPanButton(element, this.toolkitElements);\n panIcon = true;\n break;\n case 'Zoom':\n toolkit.createZoomButton(element, this.toolkitElements);\n break;\n case 'ZoomIn':\n toolkit.createZoomInButton(element, this.toolkitElements, chart);\n break;\n case 'ZoomOut':\n toolkit.createZoomOutButton(element, this.toolkitElements, chart);\n break;\n case 'Reset':\n toolkit.createResetButton(element, this.toolkitElements, chart, this.isDevice);\n break;\n }\n xPosition += iconSize + (spacing * 2);\n }\n this.toolkitElements.setAttribute('opacity', this.isDevice ? '1' : '' + this.zoomkitOpacity);\n this.toolkitElements.setAttribute('cursor', 'auto');\n if (chart.enableCanvas) {\n var zoomDiv = document.createElement('div');\n zoomDiv.id = chart.element.id + '_zoom';\n zoomDiv.style.cssText = 'position:absolute; z-index:1';\n var zoomheight = chart.availableSize.height / 2;\n var svg = chart.svgRenderer.createSvg({\n id: chart.element.id + '_zoomkit_svg',\n width: chart.availableSize.width,\n height: zoomheight\n });\n svg.style.position = 'absolute';\n svg.appendChild(this.toolkitElements);\n zoomDiv.appendChild(svg);\n document.getElementById(this.elementId + '_Secondary_Element').appendChild(zoomDiv);\n }\n else {\n chart.svgObject.appendChild(this.toolkitElements);\n }\n if (!this.isDevice) {\n EventHandler.add(this.toolkitElements, 'mousemove touchstart', this.zoomToolkitMove, this);\n EventHandler.add(this.toolkitElements, 'mouseleave touchend', this.zoomToolkitLeave, this);\n if (this.isPanning && panIcon) {\n toolkit.pan();\n }\n }\n return true;\n };\n /**\n * To the show the zooming toolkit.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.applyZoomToolkit = function (chart, axes) {\n var showToolkit = this.isAxisZoomed(axes);\n if (showToolkit) {\n this.showZoomingToolkit(chart);\n this.isZoomed = true;\n }\n else if (chart.zoomSettings.showToolbar) {\n this.isZoomed = showToolkit;\n this.showZoomingToolkit(chart);\n }\n else {\n this.toolkit.removeTooltip();\n this.isPanning = false;\n this.isZoomed = false;\n chart.isZoomed = false;\n chart.svgObject.setAttribute('cursor', 'auto');\n }\n };\n /**\n * To cancel zoom event.\n *\n * @returns {void}\n * @public\n */\n Zoom.prototype.zoomCancel = function (axes, zoomCompleteEventCollection) {\n for (var _i = 0, _a = zoomCompleteEventCollection; _i < _a.length; _i++) {\n var zoomCompleteEvent = _a[_i];\n for (var _b = 0, _c = axes; _b < _c.length; _b++) {\n var axis = _c[_b];\n if (axis.name === zoomCompleteEvent.axis.name) {\n axis.zoomFactor = zoomCompleteEvent.previousZoomFactor;\n axis.zoomPosition = zoomCompleteEvent.previousZoomPosition;\n axis.visibleRange = zoomCompleteEvent.previousVisibleRange;\n break;\n }\n }\n }\n };\n /**\n * Return boolean property to show zooming toolkit.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.isAxisZoomed = function (axes) {\n var showToolkit = false;\n for (var _i = 0, _a = axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n showToolkit = (showToolkit || (axis.zoomFactor !== 1 || axis.zoomPosition !== 0));\n }\n return showToolkit;\n };\n Zoom.prototype.zoomToolkitMove = function () {\n var element = this.toolkitElements;\n this.zoomkitOpacity = 1;\n element.setAttribute('opacity', '' + this.zoomkitOpacity);\n return false;\n };\n Zoom.prototype.zoomToolkitLeave = function () {\n var element = this.toolkitElements;\n this.zoomkitOpacity = 1;\n element.setAttribute('opacity', '' + this.zoomkitOpacity);\n return false;\n };\n /**\n * @hidden\n */\n Zoom.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n EventHandler.add(this.chart.element, this.wheelEvent, this.chartMouseWheel, this);\n this.chart.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.chart.on(Browser.touchStartEvent, this.mouseDownHandler, this);\n this.chart.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n this.chart.on(this.cancelEvent, this.mouseCancelHandler, this);\n };\n /**\n * @hidden\n */\n Zoom.prototype.removeEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n EventHandler.remove(this.chart.element, this.wheelEvent, this.chartMouseWheel);\n this.chart.off(Browser.touchMoveEvent, this.mouseMoveHandler);\n this.chart.off(Browser.touchStartEvent, this.mouseDownHandler);\n this.chart.off(Browser.touchEndEvent, this.mouseUpHandler);\n this.chart.off(this.cancelEvent, this.mouseCancelHandler);\n };\n /**\n * Handles the mouse wheel on chart.\n *\n * @returns {boolean} false\n * @private\n */\n Zoom.prototype.chartMouseWheel = function (e) {\n var chart = this.chart;\n var offset = chart.element.getBoundingClientRect();\n var svgRect = getElement(chart.svgId).getBoundingClientRect();\n var mouseX = (e.clientX - offset.left) - Math.max(svgRect.left - offset.left, 0);\n var mouseY = (e.clientY - offset.top) - Math.max(svgRect.top - offset.top, 0);\n if (this.zooming.enableMouseWheelZooming &&\n withInBounds(mouseX, mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n e.preventDefault();\n this.performMouseWheelZooming(e, mouseX, mouseY, chart, chart.axisCollections);\n }\n return false;\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseMoveHandler = function (e) {\n //Zooming for chart\n var chart = this.chart;\n var touches = null;\n if (e.type === 'touchmove') {\n if (e.preventDefault && this.isIOS &&\n (this.isPanning || (chart.isDoubleTap)\n || (this.zooming.enablePinchZooming && this.touchStartList.length > 1))) {\n e.preventDefault();\n }\n touches = e.touches;\n }\n if (chart.isChartDrag) {\n if (chart.isTouch) {\n this.touchMoveList = this.addTouchPointer(this.touchMoveList, e, touches);\n if (this.zooming.enablePinchZooming && this.touchMoveList.length > 1\n && this.touchStartList.length > 1) {\n this.performPinchZooming(e, chart);\n }\n }\n this.renderZooming(e, chart, chart.isTouch);\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseDownHandler = function (e) {\n //Zooming for chart\n var chart = this.chart;\n var touches = null;\n var target;\n if (e.type === 'touchstart') {\n touches = e.touches;\n target = e.target;\n }\n else {\n target = e.target;\n }\n if (target.id.indexOf(chart.element.id + '_Zooming_') === -1 &&\n (chart.zoomSettings.enablePinchZooming || chart.zoomSettings.enableSelectionZooming) &&\n withInBounds(chart.previousMouseMoveX, chart.previousMouseMoveY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n chart.isChartDrag = true;\n }\n if (chart.isTouch) {\n this.touchStartList = this.addTouchPointer(this.touchStartList, e, touches);\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseUpHandler = function (e) {\n var chart = this.chart;\n var performZoomRedraw = e.target.id.indexOf(chart.element.id + '_ZoomOut_') === -1 ||\n e.target.id.indexOf(chart.element.id + '_ZoomIn_') === -1;\n if (chart.isChartDrag || performZoomRedraw) {\n this.redrawOnZooming(chart, true, true);\n }\n if (chart.isTouch) {\n if (chart.isDoubleTap && withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)\n && this.touchStartList.length === 1 && this.isZoomed) {\n this.toolkit.reset(e);\n }\n this.touchStartList = [];\n chart.isDoubleTap = false;\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseCancelHandler = function () {\n if (this.isZoomed) {\n this.performZoomRedraw(this.chart);\n }\n this.pinchTarget = null;\n this.touchStartList = [];\n this.touchMoveList = [];\n };\n /**\n * Handles the touch pointer.\n *\n * @returns {ITouches[]} touchList collection\n * @private\n */\n Zoom.prototype.addTouchPointer = function (touchList, e, touches) {\n if (touches) {\n touchList = [];\n for (var i = 0, length_1 = touches.length; i < length_1; i++) {\n touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });\n }\n }\n else {\n touchList = touchList ? touchList : [];\n if (touchList.length === 0) {\n touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n }\n else {\n for (var i = 0, length_2 = touchList.length; i < length_2; i++) {\n if (touchList[i].pointerId === e.pointerId) {\n touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };\n }\n else {\n touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n }\n }\n }\n }\n return touchList;\n };\n /**\n * Get module name.\n */\n Zoom.prototype.getModuleName = function () {\n // Returns te module name\n return 'Zoom';\n };\n /**\n * To destroy the zooming.\n *\n * @returns {void}\n * @private\n */\n Zoom.prototype.destroy = function () {\n // Destroy method performed here\n this.removeEventListener();\n };\n return Zoom;\n}());\nexport { Zoom };\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var ButtonsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render: function (createElement) {\n if (!isExecute) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated: function () {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag: function () {\n return 'e-buttons';\n }\n }\n});\nexport var ButtonsPlugin = {\n name: 'e-buttons',\n install: function (Vue) {\n Vue.component(ButtonsPlugin.name, ButtonsDirective);\n }\n};\n/**\n * 'e-button' directive represent a button of Vue Dialog\n * It must be contained in a Dialog component(`ejs-dialog`).\n * ```html\n *
\n * \n * \n * \n * \n * \n * ```\n */\nexport var DialogButtonDirective = vueDefineComponent({\n render: function () {\n return;\n },\n methods: {\n getTag: function () {\n return 'e-dialogbutton';\n }\n }\n});\nexport var DialogButtonPlugin = {\n name: 'e-dialogbutton',\n install: function (Vue) {\n Vue.component(DialogButtonPlugin.name, DialogButtonDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { ButtonsDirective, DialogButtonDirective, ButtonsPlugin, DialogButtonPlugin } from './buttons.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'allowDragging', 'animationSettings', 'buttons', 'closeOnEscape', 'content', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableResize', 'enableRtl', 'footerTemplate', 'header', 'height', 'isModal', 'locale', 'minHeight', 'position', 'resizeHandles', 'showCloseIcon', 'target', 'visible', 'width', 'zIndex', 'beforeClose', 'beforeOpen', 'beforeSanitizeHtml', 'close', 'created', 'destroyed', 'drag', 'dragStart', 'dragStop', 'open', 'overlayClick', 'resizeStart', 'resizeStop', 'resizing'];\nexport var modelProps = ['visible'];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the VueJS Dialog component\n * ```html\n *
\n * ```\n */\nexport var DialogComponent = vueDefineComponent({\n name: 'DialogComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n model: { event: 'modelchanged' },\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new Dialog({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: false,\n tagMapper: { \"e-buttons\": \"e-dialogbutton\" },\n tagNameMapper: {},\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\n this.ej2Instances._trigger = this.ej2Instances.trigger;\n this.ej2Instances.trigger = this.trigger;\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n trigger: function (eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/checked|value/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/currentView|selectedDate/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n },\n custom: function () {\n this.updated();\n },\n getButtons: function (index) {\n return this.ej2Instances.getButtons(index);\n },\n getDimension: function () {\n return this.ej2Instances.getDimension();\n },\n hide: function (event) {\n return this.ej2Instances.hide(event);\n },\n refreshPosition: function () {\n return this.ej2Instances.refreshPosition();\n },\n sanitizeHelper: function (value) {\n return this.ej2Instances.sanitizeHelper(value);\n },\n show: function (isFullScreen) {\n return this.ej2Instances.show(isFullScreen);\n },\n }\n});\nexport var DialogPlugin = {\n name: 'ejs-dialog',\n install: function (Vue) {\n Vue.component(DialogPlugin.name, DialogComponent);\n Vue.component(DialogButtonPlugin.name, DialogButtonDirective);\n Vue.component(ButtonsPlugin.name, ButtonsDirective);\n }\n};\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContractForm.vue?vue&type=style&index=0&id=438cdd5c&prod&lang=css\"","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheets class\n * @private\n */\nvar Worksheets = /** @class */ (function (_super) {\n __extends(Worksheets, _super);\n function Worksheets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return Worksheets;\n}(Array));\nexport { Worksheets };\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})();\n/**\n * Worksheet class\n * @private\n */\nvar Worksheet = /** @class */ (function () {\n function Worksheet() {\n this.isSummaryRowBelow = true;\n this.showGridLines = true;\n this.enableRtl = false;\n }\n return Worksheet;\n}());\nexport { Worksheet };\n/**\n * Hyperlink class\n * @private\n */\nvar HyperLink = /** @class */ (function () {\n function HyperLink() {\n }\n return HyperLink;\n}());\nexport { HyperLink };\n/**\n * Grouping class\n * @private\n */\nvar Grouping = /** @class */ (function () {\n function Grouping() {\n }\n return Grouping;\n}());\nexport { Grouping };\n/**\n * FreezePane class\n * @private\n */\nvar FreezePane = /** @class */ (function () {\n function FreezePane() {\n }\n return FreezePane;\n}());\nexport { FreezePane };\n/**\n * MergeCell\n * @private\n */\nvar MergeCell = /** @class */ (function () {\n function MergeCell() {\n }\n return MergeCell;\n}());\nexport { MergeCell };\n/**\n * MergeCells class\n * @private\n */\nvar MergeCells = /** @class */ (function (_super) {\n __extends(MergeCells, _super);\n function MergeCells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (mergeCell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var mCell = _a[_i];\n if (MergeCells.isIntersecting(mCell, mergeCell)) {\n var intersectingCell = new MergeCell();\n intersectingCell.x = Math.min(mCell.x, mergeCell.x);\n intersectingCell.y = Math.min(mCell.Y, mergeCell.y);\n intersectingCell.width = Math.max(mCell.Width + mCell.X, mergeCell.width + mergeCell.x);\n intersectingCell.height = Math.max(mCell.Height + mCell.Y, mergeCell.height + mergeCell.y);\n intersectingCell.ref = (_this[count].ref.split(':')[0]) + ':' + (mergeCell.ref.split(':')[1]);\n _this[count] = intersectingCell;\n mergeCell = intersectingCell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(mergeCell);\n }\n return mergeCell;\n };\n return _this;\n }\n MergeCells.isIntersecting = function (base, compare) {\n return (base.x <= compare.x + compare.width)\n && (compare.x <= base.x + base.width)\n && (base.y <= compare.y + compare.height)\n && (compare.y <= base.y + base.height);\n };\n return MergeCells;\n}(Array));\nexport { MergeCells };\n","/**\n * CellStyle class\n * @private\n */\nvar CellStyle = /** @class */ (function () {\n function CellStyle() {\n this.numFmtId = 0;\n this.backColor = 'none';\n this.fontName = 'Calibri';\n this.fontSize = 10.5;\n this.fontColor = '#000000';\n this.italic = false;\n this.bold = false;\n this.underline = false;\n this.strikeThrough = false;\n this.wrapText = false;\n this.hAlign = 'general';\n this.vAlign = 'bottom';\n this.indent = 0;\n this.rotation = 0;\n this.numberFormat = 'GENERAL';\n this.type = 'datetime';\n this.borders = new Borders();\n this.isGlobalStyle = false;\n }\n return CellStyle;\n}());\nexport { CellStyle };\n/**\n * Font Class\n * @private\n */\nvar Font = /** @class */ (function () {\n function Font() {\n this.sz = 10.5;\n this.name = 'Calibri';\n this.u = false;\n this.b = false;\n this.i = false;\n this.color = 'FF000000';\n this.strike = false;\n }\n return Font;\n}());\nexport { Font };\n/**\n * CellXfs class\n * @private\n */\nvar CellXfs = /** @class */ (function () {\n function CellXfs() {\n }\n return CellXfs;\n}());\nexport { CellXfs };\n/**\n * Alignment class\n * @private\n */\nvar Alignment = /** @class */ (function () {\n function Alignment() {\n }\n return Alignment;\n}());\nexport { Alignment };\n/**\n * CellStyleXfs class\n * @private\n */\nvar CellStyleXfs = /** @class */ (function () {\n function CellStyleXfs() {\n }\n return CellStyleXfs;\n}());\nexport { CellStyleXfs };\n/**\n * CellStyles class\n * @private\n */\nvar CellStyles = /** @class */ (function () {\n function CellStyles() {\n this.name = 'Normal';\n this.xfId = 0;\n }\n return CellStyles;\n}());\nexport { CellStyles };\n/**\n * NumFmt class\n * @private\n */\nvar NumFmt = /** @class */ (function () {\n function NumFmt(id, code) {\n this.numFmtId = id;\n this.formatCode = code;\n }\n return NumFmt;\n}());\nexport { NumFmt };\n/**\n * Border class\n * @private\n */\nvar Border = /** @class */ (function () {\n function Border(mLine, mColor) {\n this.lineStyle = mLine;\n this.color = mColor;\n }\n return Border;\n}());\nexport { Border };\n/**\n * Borders class\n * @private\n */\nvar Borders = /** @class */ (function () {\n function Borders() {\n this.left = new Border('none', '#FFFFFF');\n this.right = new Border('none', '#FFFFFF');\n this.top = new Border('none', '#FFFFFF');\n this.bottom = new Border('none', '#FFFFFF');\n this.all = new Border('none', '#FFFFFF');\n }\n return Borders;\n}());\nexport { Borders };\n","/**\n * Column class\n * @private\n */\nvar Column = /** @class */ (function () {\n function Column() {\n }\n return Column;\n}());\nexport { Column };\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})();\n/**\n * Row class\n * @private\n */\nvar Row = /** @class */ (function () {\n function Row() {\n }\n return Row;\n}());\nexport { Row };\n/**\n * Rows class\n * @private\n */\nvar Rows = /** @class */ (function (_super) {\n __extends(Rows, _super);\n function Rows() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (row) {\n _this.push(row);\n };\n return _this;\n }\n return Rows;\n}(Array));\nexport { Rows };\n","/**\n * Image class\n * @private\n */\nvar Image = /** @class */ (function () {\n function Image() {\n }\n return Image;\n}());\nexport { Image };\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})();\n/**\n * Worksheet class\n * @private\n */\nvar Cell = /** @class */ (function () {\n function Cell() {\n }\n return Cell;\n}());\nexport { Cell };\n/**\n * Cells class\n * @private\n */\nvar Cells = /** @class */ (function (_super) {\n __extends(Cells, _super);\n function Cells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (cell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var c = _a[_i];\n if (c.index === cell.index) {\n _this[count] = cell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(cell);\n }\n };\n return _this;\n }\n return Cells;\n}(Array));\nexport { Cells };\n","/* eslint-disable */\nvar Utils = /** @class */ (function () {\n function Utils() {\n }\n Utils.bitReverse = function (value) {\n return (Utils.reverseBits[value & 15] << 12\n | Utils.reverseBits[(value >> 4) & 15] << 8\n | Utils.reverseBits[(value >> 8) & 15] << 4\n | Utils.reverseBits[value >> 12]);\n };\n Utils.bitConverterToInt32 = function (value, index) {\n return value[index] | value[index + 1] << 8 | value[index + 2] << 16 | value[index + 3] << 24;\n };\n Utils.bitConverterToInt16 = function (value, index) {\n return value[index] | value[index + 1] << 8;\n };\n Utils.bitConverterToUInt32 = function (value) {\n var uint = new Uint32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterToUInt16 = function (value, index) {\n var uint = new Uint16Array(1);\n uint[0] = (value[index] | value[index + 1] << 8);\n return uint[0];\n };\n Utils.bitConverterUintToInt32 = function (value) {\n var uint = new Int32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterInt32ToUint = function (value) {\n var uint = new Uint32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterInt32ToInt16 = function (value) {\n var uint = new Int16Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.byteToString = function (value) {\n var str = '';\n for (var i = 0; i < value.length; i++) {\n str += String.fromCharCode(value[i]);\n }\n return str;\n };\n Utils.byteIntToString = function (value) {\n var str = '';\n for (var i = 0; i < value.length; i++) {\n str += String.fromCharCode(value[i]);\n }\n return str;\n };\n Utils.arrayCopy = function (source, sourceIndex, destination, destinationIndex, dataToCopy) {\n var temp = new Uint8Array(source.buffer, sourceIndex);\n var data = temp.subarray(0, dataToCopy);\n destination.set(data, destinationIndex);\n };\n Utils.mergeArray = function (arrayOne, arrayTwo) {\n var mergedArray = new Uint8Array(arrayOne.length + arrayTwo.length);\n mergedArray.set(arrayOne);\n mergedArray.set(arrayTwo, arrayOne.length);\n return mergedArray;\n };\n /**\n * @private\n */\n Utils.encodedString = function (input) {\n var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n var chr1;\n var chr2;\n var chr3;\n var encode1;\n var encode2;\n var encode3;\n var encode4;\n var count = 0;\n var resultIndex = 0;\n /*let dataUrlPrefix: string = 'data:';*/\n input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, '');\n var totalLength = input.length * 3 / 4;\n if (input.charAt(input.length - 1) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (input.charAt(input.length - 2) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (totalLength % 1 !== 0) {\n // totalLength is not an integer, the length does not match a valid\n // base64 content. That can happen if:\n // - the input is not a base64 content\n // - the input is *almost* a base64 content, with a extra chars at the\n // beginning or at the end\n // - the input uses a base64 variant (base64url for example)\n throw new Error('Invalid base64 input, bad content length.');\n }\n var output = new Uint8Array(totalLength | 0);\n while (count < input.length) {\n encode1 = keyStr.indexOf(input.charAt(count++));\n encode2 = keyStr.indexOf(input.charAt(count++));\n encode3 = keyStr.indexOf(input.charAt(count++));\n encode4 = keyStr.indexOf(input.charAt(count++));\n chr1 = (encode1 << 2) | (encode2 >> 4);\n chr2 = ((encode2 & 15) << 4) | (encode3 >> 2);\n chr3 = ((encode3 & 3) << 6) | encode4;\n output[resultIndex++] = chr1;\n if (encode3 !== 64) {\n output[resultIndex++] = chr2;\n }\n if (encode4 !== 64) {\n output[resultIndex++] = chr3;\n }\n }\n return output;\n };\n Utils.reverseBits = [0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15];\n Utils.huffCodeLengthOrders = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n return Utils;\n}());\nexport { Utils };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { Utils } from './index';\nvar DecompressorHuffmanTree = /** @class */ (function () {\n function DecompressorHuffmanTree(lengths) {\n this.buildTree(lengths);\n }\n DecompressorHuffmanTree.init = function () {\n var lengths;\n var index;\n // Generate huffman tree for lengths.\n lengths = new Uint8Array(288);\n index = 0;\n while (index < 144) {\n lengths[index++] = 8;\n }\n while (index < 256) {\n lengths[index++] = 9;\n }\n while (index < 280) {\n lengths[index++] = 7;\n }\n while (index < 288) {\n lengths[index++] = 8;\n }\n DecompressorHuffmanTree.m_LengthTree = new DecompressorHuffmanTree(lengths);\n // Generate huffman tree for distances.\n lengths = new Uint8Array(32);\n index = 0;\n while (index < 32) {\n lengths[index++] = 5;\n }\n DecompressorHuffmanTree.m_DistanceTree = new DecompressorHuffmanTree(lengths);\n };\n ///
\n /// Prepares data for generating huffman tree.\n /// \n ///
Array of counts of each code length.\n ///
Numerical values of the smallest code for each code length.\n ///
Array of code lengths.\n ///
Calculated tree size.\n ///
Code.\n DecompressorHuffmanTree.prototype.prepareData = function (blCount, nextCode, lengths) {\n var code = 0;\n var treeSize = 512;\n // Count number of codes for each code length.\n for (var i = 0; i < lengths.length; i++) {\n var length_1 = lengths[i];\n if (length_1 > 0) {\n blCount[length_1]++;\n }\n }\n for (var bits = 1; bits <= DecompressorHuffmanTree.MAX_BITLEN; bits++) {\n nextCode[bits] = code;\n code += blCount[bits] << (16 - bits);\n if (bits >= 10) {\n var start = nextCode[bits] & 0x1ff80;\n var end = code & 0x1ff80;\n treeSize += (end - start) >> (16 - bits);\n }\n }\n /* if( code != 65536 )\n throw new ZipException( \"Code lengths don't add up properly.\" );*/\n return { 'code': code, 'treeSize': treeSize };\n };\n ///
\n /// Generates huffman tree.\n /// \n ///
Array of counts of each code length.\n ///
Numerical values of the smallest code for each code length.\n ///
Precalculated code.\n ///
Array of code lengths.\n ///
Calculated size of the tree.\n ///
Generated tree.\n DecompressorHuffmanTree.prototype.treeFromData = function (blCount, nextCode, lengths, code, treeSize) {\n var tree = new Int16Array(treeSize);\n var pointer = 512;\n var increment = 1 << 7;\n for (var bits = DecompressorHuffmanTree.MAX_BITLEN; bits >= 10; bits--) {\n var end = code & 0x1ff80;\n code -= blCount[bits] << (16 - bits);\n var start = code & 0x1ff80;\n for (var i = start; i < end; i += increment) {\n tree[Utils.bitReverse(i)] = Utils.bitConverterInt32ToInt16((-pointer << 4) | bits);\n pointer += 1 << (bits - 9);\n }\n }\n for (var i = 0; i < lengths.length; i++) {\n var bits = lengths[i];\n if (bits == 0) {\n continue;\n }\n code = nextCode[bits];\n var revcode = Utils.bitReverse(code);\n if (bits <= 9) {\n do {\n tree[revcode] = Utils.bitConverterInt32ToInt16((i << 4) | bits);\n revcode += 1 << bits;\n } while (revcode < 512);\n }\n else {\n var subTree = tree[revcode & 511];\n var treeLen = 1 << (subTree & 15);\n subTree = -(subTree >> 4);\n do {\n tree[subTree | (revcode >> 9)] = Utils.bitConverterInt32ToInt16((i << 4) | bits);\n revcode += 1 << bits;\n } while (revcode < treeLen);\n }\n nextCode[bits] = code + (1 << (16 - bits));\n }\n return tree;\n };\n ///
\n /// Builds huffman tree from array of code lengths.\n /// \n ///
Array of code lengths.\n DecompressorHuffmanTree.prototype.buildTree = function (lengths) {\n // Count of codes for each code length.\n var blCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n // Numerical value of the smallest code for each code length.\n var nextCode = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n var prepareData = this.prepareData(blCount, nextCode, lengths);\n this.m_Tree = this.treeFromData(blCount, nextCode, lengths, prepareData.code, prepareData.treeSize);\n };\n ///
\n /// Reads and decompresses one symbol.\n /// \n ///
\n ///
\n DecompressorHuffmanTree.prototype.unpackSymbol = function (input) {\n var lookahead;\n var symbol;\n if ((lookahead = input.peekBits(9)) >= 0) {\n if ((symbol = this.m_Tree[lookahead]) >= 0) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n var subtree = -(symbol >> 4);\n var bitlen = symbol & 15;\n if ((lookahead = input.peekBits(bitlen)) >= 0) {\n symbol = this.m_Tree[subtree | (lookahead >> 9)];\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n var bits = input.availableBits;\n lookahead = input.peekBits(bits);\n symbol = this.m_Tree[subtree | (lookahead >> 9)];\n if ((symbol & 15) <= bits) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n return -1;\n }\n }\n }\n else {\n var bits = input.availableBits;\n lookahead = input.peekBits(bits);\n symbol = this.m_Tree[lookahead];\n if (symbol >= 0 && (symbol & 15) <= bits) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n return -1;\n }\n }\n };\n Object.defineProperty(DecompressorHuffmanTree, \"lengthTree\", {\n ///
\n /// GET huffman tree for encoding and decoding lengths.\n /// \n get: function () {\n return this.m_LengthTree;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DecompressorHuffmanTree, \"distanceTree\", {\n ///
\n /// GET huffman tree for encoding and decoding distances.\n /// \n get: function () {\n return this.m_DistanceTree;\n },\n enumerable: true,\n configurable: true\n });\n ///
\n /// Maximum count of bits.\n /// \n DecompressorHuffmanTree.MAX_BITLEN = 15;\n return DecompressorHuffmanTree;\n}());\nexport { DecompressorHuffmanTree };\n/* eslint-enable */ \n","/* eslint-disable */\n///
\n/// Checksum calculator, based on Adler32 algorithm.\n/// \nvar ChecksumCalculator = /** @class */ (function () {\n function ChecksumCalculator() {\n }\n ///
\n /// Updates checksum by calculating checksum of the\n /// given buffer and adding it to current value.\n /// \n ///
Current checksum.\n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n ChecksumCalculator.ChecksumUpdate = function (checksum, buffer, offset, length) {\n var checkSumUInt = checksum;\n var s1 = checkSumUInt & 65535;\n var s2 = checkSumUInt >> this.DEF_CHECKSUM_BIT_OFFSET;\n while (length > 0) {\n var steps = Math.min(length, this.DEF_CHECKSUM_ITERATIONSCOUNT);\n length -= steps;\n while (--steps >= 0) {\n s1 = s1 + (buffer[offset++] & 255);\n s2 = s2 + s1;\n }\n s1 %= this.DEF_CHECKSUM_BASE;\n s2 %= this.DEF_CHECKSUM_BASE;\n }\n checkSumUInt = (s2 << this.DEF_CHECKSUM_BIT_OFFSET) | s1;\n checksum = checkSumUInt;\n };\n ///
\n /// Generates checksum by calculating checksum of the\n /// given buffer.\n /// \n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n ChecksumCalculator.ChecksumGenerate = function (buffer, offset, length) {\n var result = 1;\n ChecksumCalculator.ChecksumUpdate(result, buffer, offset, length);\n return result;\n };\n ///
\n /// Bits offset, used in adler checksum calculation.\n /// \n ChecksumCalculator.DEF_CHECKSUM_BIT_OFFSET = 16;\n ///
\n /// Lagrest prime, less than 65535\n /// \n ChecksumCalculator.DEF_CHECKSUM_BASE = 65521;\n ///
\n /// Count of iteration used in calculated of the adler checksumm.\n /// \n ChecksumCalculator.DEF_CHECKSUM_ITERATIONSCOUNT = 3800;\n return ChecksumCalculator;\n}());\nexport { ChecksumCalculator };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { DecompressorHuffmanTree } from './decompressor-huffman-tree';\nimport { Utils } from './utils';\nimport { ChecksumCalculator } from './checksum-calculator';\nvar CompressedStreamReader = /** @class */ (function () {\n function CompressedStreamReader(stream, bNoWrap) {\n ///
\n /// Code lengths for the code length alphabet.\n /// \n this.defaultHuffmanDynamicTree = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n ///
\n /// Mask for compression method to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_METHOD_MASK = 15 << 8;\n ///
\n /// Mask for compression info to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_INFO_MASK = 240 << 8;\n ///
\n /// Mask for check bits to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FCHECK = 31;\n ///
\n /// Mask for dictionary presence to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FDICT = 32;\n ///
\n /// Mask for compression level to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FLEVEL = 192;\n ///
\n /// Maximum size of the data window.\n /// \n this.DEF_MAX_WINDOW_SIZE = 65535;\n ///
\n /// Maximum length of the repeatable block.\n /// \n this.DEF_HUFFMAN_REPEATE_MAX = 258;\n ///
\n /// End of the block sign.\n /// \n this.DEF_HUFFMAN_END_BLOCK = 256;\n ///
\n /// Minimal length code.\n /// \n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE = 257;\n ///
\n /// Maximal length code.\n /// \n this.DEF_HUFFMAN_LENGTH_MAXIMUMCODE = 285;\n ///
\n /// Maximal distance code.\n /// \n this.DEF_HUFFMAN_DISTANCE_MAXIMUMCODE = 29;\n ///
\n /// Currently calculated checksum,\n /// based on Adler32 algorithm.\n /// \n this.mCheckSum = 1;\n ///
\n /// Currently read 4 bytes.\n /// \n this.tBuffer = 0;\n ///
\n /// Count of bits that are in buffer.\n /// \n this.mBufferedBits = 0;\n ///
\n /// Temporary buffer.\n /// \n this.mTempBuffer = new Uint8Array(4);\n ///
\n /// 32k buffer for unpacked data.\n /// \n this.mBlockBuffer = new Uint8Array(this.DEF_MAX_WINDOW_SIZE);\n ///
\n /// No wrap mode.\n /// \n this.mbNoWrap = false;\n ///
\n /// Window size, can not be larger than 32k.\n /// \n this.mWindowSize = 0;\n ///
\n /// Current position in output stream.\n /// Current in-block position can be extracted by applying Int16.MaxValue mask.\n /// \n this.mCurrentPosition = 0;\n ///
\n /// Data length.\n /// Current in-block position can be extracted by applying Int16.MaxValue mask.\n /// \n this.mDataLength = 0;\n ///
\n /// Specifies wheather next block can to be read.\n /// Reading can be denied because the header of the last block have been read.\n /// \n this.mbCanReadNextBlock = true;\n ///
\n /// Specifies wheather user can read more data from stream.\n /// \n this.mbCanReadMoreData = true;\n ///
\n /// Specifies wheather checksum has been read.\n /// \n this.mbCheckSumRead = false;\n if (stream == null) {\n throw new DOMException('stream');\n }\n if (stream.length === 0) {\n throw new DOMException('stream - string can not be empty');\n }\n DecompressorHuffmanTree.init();\n this.mInputStream = new Stream(stream);\n this.mbNoWrap = bNoWrap;\n if (!this.mbNoWrap) {\n this.readZLibHeader();\n }\n this.decodeBlockHeader();\n }\n Object.defineProperty(CompressedStreamReader.prototype, \"mBuffer\", {\n get: function () {\n return this.tBuffer;\n },\n set: function (value) {\n this.tBuffer = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Initializes compressor and writes ZLib header if needed.\n * @param {boolean} noWrap - optional if true, ZLib header and checksum will not be written.\n */\n ///
\n /// Reads specified count of bits without adjusting position.\n /// \n ///
Count of bits to be read.\n ///
Read value.\n CompressedStreamReader.prototype.peekBits = function (count) {\n if (count < 0) {\n throw new DOMException('count', 'Bits count can not be less than zero.');\n }\n if (count > 32) {\n throw new DOMException('count', 'Count of bits is too large.');\n }\n // If buffered data is not enough to give result,\n // fill buffer.\n if (this.mBufferedBits < count) {\n this.fillBuffer();\n }\n // If you want to read 4 bytes and there is partial data in\n // buffer, than you will fail.\n if (this.mBufferedBits < count) {\n return -1;\n }\n // Create bitmask for reading of count bits\n var bitMask = ~(4294967295 << count);\n var result = Utils.bitConverterUintToInt32(this.mBuffer & bitMask);\n //Debug.WriteLine( /*new string( ' ', 32 - mBufferedBits + (int)( ( 32 - mBufferedBits ) / 8 ) ) + BitsToString( (int)mBuffer, mBufferedBits ) + \" \" + BitsToString( result, count ) +*/ \" \" + result.ToString() );\n return result;\n };\n CompressedStreamReader.prototype.fillBuffer = function () {\n var length = 4 - (this.mBufferedBits >> 3) -\n (((this.mBufferedBits & 7) !== 0) ? 1 : 0);\n if (length === 0) {\n return;\n }\n //TODO: fix this\n var bytesRead = this.mInputStream.read(this.mTempBuffer, 0, length);\n for (var i = 0; i < bytesRead; i++) {\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer |\n (Utils.bitConverterInt32ToUint(this.mTempBuffer[i] << this.mBufferedBits)));\n this.mBufferedBits += 8;\n }\n //TODO: fix this\n };\n ///
\n /// Skips specified count of bits.\n /// \n ///
Count of bits to be skipped.\n CompressedStreamReader.prototype.skipBits = function (count) {\n if (count < 0) {\n throw new DOMException('count', 'Bits count can not be less than zero.');\n }\n if (count === 0) {\n return;\n }\n if (count >= this.mBufferedBits) {\n count -= this.mBufferedBits;\n this.mBufferedBits = 0;\n this.mBuffer = 0;\n // if something left, skip it.\n if (count > 0) {\n // Skip entire bytes.\n this.mInputStream.position += (count >> 3); //TODO: fix this\n count &= 7;\n // Skip bits.\n if (count > 0) {\n this.fillBuffer();\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n }\n }\n }\n else {\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n }\n };\n Object.defineProperty(CompressedStreamReader.prototype, \"availableBits\", {\n get: function () {\n return this.mBufferedBits;\n },\n enumerable: true,\n configurable: true\n });\n ///
\n /// Reads ZLib header with compression method and flags.\n /// \n CompressedStreamReader.prototype.readZLibHeader = function () {\n // first 8 bits - compression Method and flags\n // 8 other - flags\n var header = this.readInt16();\n //Debug.WriteLine( BitsToString( header ) );\n if (header === -1) {\n throw new DOMException('Header of the stream can not be read.');\n }\n if (header % 31 !== 0) {\n throw new DOMException('Header checksum illegal');\n }\n if ((header & this.DEF_HEADER_METHOD_MASK) !== (8 << 8)) {\n throw new DOMException('Unsupported compression method.');\n }\n this.mWindowSize = Math.pow(2, ((header & this.DEF_HEADER_INFO_MASK) >> 12) + 8);\n if (this.mWindowSize > 65535) {\n throw new DOMException('Unsupported window size for deflate compression method.');\n }\n if ((header & this.DEF_HEADER_FLAGS_FDICT) >> 5 === 1) {\n // Get dictionary.\n throw new DOMException('Custom dictionary is not supported at the moment.');\n }\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt16 = function () {\n var result = (this.readBits(8) << 8);\n result |= this.readBits(8);\n return result;\n };\n ///
\n /// Reads specified count of bits from stream.\n /// \n ///
Count of bits to be read.\n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readBits = function (count) {\n var result = this.peekBits(count);\n if (result === -1) {\n return -1;\n }\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n return result;\n };\n ///
\n /// Reads and decodes block of data.\n /// \n ///
True if buffer was empty and new data was read, otherwise - False.\n CompressedStreamReader.prototype.decodeBlockHeader = function () {\n if (!this.mbCanReadNextBlock) {\n return false;\n }\n var bFinalBlock = this.readBits(1);\n if (bFinalBlock === -1) {\n return false;\n }\n var blockType = this.readBits(2);\n if (blockType === -1) {\n return false;\n }\n this.mbCanReadNextBlock = (bFinalBlock === 0);\n // ChecksumReset();\n switch (blockType) {\n case 0:\n // Uncompressed data\n this.mbReadingUncompressed = true;\n this.skipToBoundary();\n var length_1 = this.readInt16Inverted();\n var lengthComplement = this.readInt16Inverted();\n if (length_1 !== (lengthComplement ^ 0xffff)) {\n throw new DOMException('Wrong block length.');\n }\n if (length_1 > 65535) {\n throw new DOMException('Uncompressed block length can not be more than 65535.');\n }\n this.mUncompressedDataLength = length_1;\n this.mCurrentLengthTree = null;\n this.mCurrentDistanceTree = null;\n break;\n case 1:\n // Compressed data with fixed huffman codes.\n this.mbReadingUncompressed = false;\n this.mUncompressedDataLength = -1;\n this.mCurrentLengthTree = DecompressorHuffmanTree.lengthTree;\n this.mCurrentDistanceTree = DecompressorHuffmanTree.distanceTree;\n break;\n case 2:\n // Compressed data with dynamic huffman codes.\n this.mbReadingUncompressed = false;\n this.mUncompressedDataLength = -1;\n var trees = this.decodeDynamicHeader(this.mCurrentLengthTree, this.mCurrentDistanceTree);\n this.mCurrentLengthTree = trees.lengthTree;\n this.mCurrentDistanceTree = trees.distanceTree;\n break;\n default:\n throw new DOMException('Wrong block type.');\n }\n return true;\n };\n ///
\n /// Discards left-most partially used byte.\n /// \n CompressedStreamReader.prototype.skipToBoundary = function () {\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> (this.mBufferedBits & 7));\n this.mBufferedBits &= ~7;\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt16Inverted = function () {\n var result = (this.readBits(8));\n result |= this.readBits(8) << 8;\n return result;\n };\n ///
\n /// Reades dynamic huffman codes from block header.\n /// \n ///
Literals/Lengths tree.\n ///
Distances tree.\n CompressedStreamReader.prototype.decodeDynamicHeader = function (lengthTree, distanceTree) {\n var bLastSymbol = 0;\n var iLengthsCount = this.readBits(5);\n var iDistancesCount = this.readBits(5);\n var iCodeLengthsCount = this.readBits(4);\n if (iLengthsCount < 0 || iDistancesCount < 0 || iCodeLengthsCount < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n iLengthsCount += 257;\n iDistancesCount += 1;\n var iResultingCodeLengthsCount = iLengthsCount + iDistancesCount;\n var arrResultingCodeLengths = new Uint8Array(iResultingCodeLengthsCount);\n var arrDecoderCodeLengths = new Uint8Array(19);\n iCodeLengthsCount += 4;\n var iCurrentCode = 0;\n while (iCurrentCode < iCodeLengthsCount) {\n var len = this.readBits(3);\n if (len < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n arrDecoderCodeLengths[this.defaultHuffmanDynamicTree[iCurrentCode++]] = len;\n }\n var treeInternalDecoder = new DecompressorHuffmanTree(arrDecoderCodeLengths);\n iCurrentCode = 0;\n for (;;) {\n var symbol = void 0;\n var bNeedBreak = false;\n symbol = treeInternalDecoder.unpackSymbol(this);\n while ((symbol & ~15) === 0) {\n arrResultingCodeLengths[iCurrentCode++] = bLastSymbol = symbol;\n if (iCurrentCode === iResultingCodeLengthsCount) {\n bNeedBreak = true;\n break;\n }\n symbol = treeInternalDecoder.unpackSymbol(this);\n }\n if (bNeedBreak) {\n break;\n }\n if (symbol < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n if (symbol >= 17) {\n bLastSymbol = 0;\n }\n else if (iCurrentCode === 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n var miRepSymbol = symbol - 16;\n var bits = CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_BITS[miRepSymbol];\n var count = this.readBits(bits);\n if (count < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n count += CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_MINIMUMS[miRepSymbol];\n if (iCurrentCode + count > iResultingCodeLengthsCount) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n while (count-- > 0) {\n arrResultingCodeLengths[iCurrentCode++] = bLastSymbol;\n }\n if (iCurrentCode === iResultingCodeLengthsCount) {\n break;\n }\n }\n var tempArray = new Uint8Array(iLengthsCount);\n tempArray.set(arrResultingCodeLengths.subarray(0, iLengthsCount), 0);\n //sourceArray, sourceIndex, destinationArray, destinationIndex, length\n //Array.copy( arrResultingCodeLengths, 0, tempArray, 0, iLengthsCount );\n lengthTree = new DecompressorHuffmanTree(tempArray);\n tempArray = arrResultingCodeLengths.slice(iLengthsCount, iLengthsCount + iDistancesCount);\n //Array.copy( arrResultingCodeLengths, iLengthsCount, tempArray, 0, iDistancesCount );\n distanceTree = new DecompressorHuffmanTree(tempArray);\n return { 'lengthTree': lengthTree, 'distanceTree': distanceTree };\n };\n ///
\n /// Decodes huffman codes.\n /// \n ///
True if some data was read.\n CompressedStreamReader.prototype.readHuffman = function () {\n var free = this.DEF_MAX_WINDOW_SIZE - (this.mDataLength - this.mCurrentPosition);\n var dataRead = false;\n //long maxdistance = DEF_MAX_WINDOW_SIZE >> 1;\n var readdata = {};\n // DEF_HUFFMAN_REPEATE_MAX - longest repeatable block, we should always reserve space for it because\n // if we should not, we will have buffer overrun.\n while (free >= this.DEF_HUFFMAN_REPEATE_MAX) {\n var symbol = void 0;\n symbol = this.mCurrentLengthTree.unpackSymbol(this);\n // Only codes 0..255 are valid independent symbols.\n while (((symbol) & ~0xff) === 0) {\n readdata[(this.mDataLength + 1) % this.DEF_MAX_WINDOW_SIZE] = symbol;\n this.mBlockBuffer[this.mDataLength++ % this.DEF_MAX_WINDOW_SIZE] = symbol;\n dataRead = true;\n if (--free < this.DEF_HUFFMAN_REPEATE_MAX) {\n return true;\n }\n //if( (mDataLength - mCurrentPosition ) < maxdistance ) return true;\n symbol = this.mCurrentLengthTree.unpackSymbol(this);\n }\n if (symbol < this.DEF_HUFFMAN_LENGTH_MINIMUMCODE) {\n if (symbol < this.DEF_HUFFMAN_END_BLOCK) {\n throw new DOMException('Illegal code.');\n }\n var numDataRead = dataRead ? 1 : 0;\n this.mbCanReadMoreData = this.decodeBlockHeader();\n var numReadMore = (this.mbCanReadMoreData) ? 1 : 0;\n return (numDataRead | numReadMore) ? true : false;\n }\n if (symbol > this.DEF_HUFFMAN_LENGTH_MAXIMUMCODE) {\n throw new DOMException('Illegal repeat code length.');\n }\n var iRepeatLength = CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_BASE[symbol -\n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE];\n var iRepeatExtraBits = CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_EXTENSION[symbol -\n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE];\n if (iRepeatExtraBits > 0) {\n var extra = this.readBits(iRepeatExtraBits);\n if (extra < 0) {\n throw new DOMException('Wrong data.');\n }\n iRepeatLength += extra;\n }\n // Unpack repeat distance.\n symbol = this.mCurrentDistanceTree.unpackSymbol(this);\n if (symbol < 0 || symbol > CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE.length) {\n throw new DOMException('Wrong distance code.');\n }\n var iRepeatDistance = CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE[symbol];\n iRepeatExtraBits = CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_EXTENSION[symbol];\n if (iRepeatExtraBits > 0) {\n var extra = this.readBits(iRepeatExtraBits);\n if (extra < 0) {\n throw new DOMException('Wrong data.');\n }\n iRepeatDistance += extra;\n }\n // Copy data in slow repeat mode\n for (var i = 0; i < iRepeatLength; i++) {\n this.mBlockBuffer[this.mDataLength % this.DEF_MAX_WINDOW_SIZE] =\n this.mBlockBuffer[(this.mDataLength - iRepeatDistance) % this.DEF_MAX_WINDOW_SIZE];\n this.mDataLength++;\n free--;\n }\n dataRead = true;\n }\n return dataRead;\n };\n ///
\n /// Reads data to buffer.\n /// \n ///
Output buffer for data.\n ///
Offset in output data.\n ///
Length of the data to be read.\n ///
Count of bytes actually read.\n CompressedStreamReader.prototype.read = function (buffer, offset, length) {\n if (buffer == null) {\n throw new DOMException('buffer');\n }\n if (offset < 0 || offset > buffer.length - 1) {\n throw new DOMException('offset', 'Offset does not belong to specified buffer.');\n }\n if (length < 0 || length > buffer.length - offset) {\n throw new DOMException('length', 'Length is illegal.');\n }\n var initialLength = length;\n while (length > 0) {\n // Read from internal buffer.\n if (this.mCurrentPosition < this.mDataLength) {\n // Position in buffer array.\n var inBlockPosition = (this.mCurrentPosition % this.DEF_MAX_WINDOW_SIZE);\n // We can not read more than we have in buffer at once,\n // and we not read more than till the array end.\n var dataToCopy = Math.min(this.DEF_MAX_WINDOW_SIZE - inBlockPosition, (this.mDataLength - this.mCurrentPosition));\n // Reading not more, than the rest of the buffer.\n dataToCopy = Math.min(dataToCopy, length);\n //sourceArray, sourceIndex, destinationArray, destinationIndex, length\n // Copy data.\n //Array.Copy( mBlockBuffer, inBlockPosition, buffer, offset, dataToCopy );\n //buffer.set(this.mBlockBuffer.slice(inBlockPosition, dataToCopy), offset);\n Utils.arrayCopy(this.mBlockBuffer, inBlockPosition, buffer, offset, dataToCopy);\n // Correct position, length,\n this.mCurrentPosition += dataToCopy;\n offset += dataToCopy;\n length -= dataToCopy;\n }\n else {\n if (!this.mbCanReadMoreData) {\n break;\n }\n var oldDataLength = this.mDataLength;\n if (!this.mbReadingUncompressed) {\n if (!this.readHuffman()) {\n break;\n }\n }\n else {\n if (this.mUncompressedDataLength === 0) {\n // If there is no more data in stream, just exit.\n this.mbCanReadMoreData = this.decodeBlockHeader();\n if (!(this.mbCanReadMoreData)) {\n break;\n }\n }\n else {\n // Position of the data end in block buffer.\n var inBlockPosition = (this.mDataLength % this.DEF_MAX_WINDOW_SIZE);\n var dataToRead = Math.min(this.mUncompressedDataLength, this.DEF_MAX_WINDOW_SIZE - inBlockPosition);\n var dataRead = this.readPackedBytes(this.mBlockBuffer, inBlockPosition, dataToRead);\n if (dataToRead !== dataRead) {\n throw new DOMException('Not enough data in stream.');\n }\n this.mUncompressedDataLength -= dataRead;\n this.mDataLength += dataRead;\n }\n }\n if (oldDataLength < this.mDataLength) {\n var start = (oldDataLength % this.DEF_MAX_WINDOW_SIZE);\n var end = (this.mDataLength % this.DEF_MAX_WINDOW_SIZE);\n if (start < end) {\n this.checksumUpdate(this.mBlockBuffer, start, end - start);\n }\n else {\n this.checksumUpdate(this.mBlockBuffer, start, this.DEF_MAX_WINDOW_SIZE - start);\n if (end > 0) {\n this.checksumUpdate(this.mBlockBuffer, 0, end);\n }\n }\n }\n }\n }\n if (!this.mbCanReadMoreData && !this.mbCheckSumRead && !this.mbNoWrap) {\n this.skipToBoundary();\n var checkSum = this.readInt32();\n //Debug.Assert( checkSum == mCheckSum, \"\" );\n if (checkSum !== this.mCheckSum) {\n throw new DOMException('Checksum check failed.');\n }\n this.mbCheckSumRead = true;\n }\n return initialLength - length;\n };\n ///
\n /// Reads array of bytes.\n /// \n ///
Output buffer.\n ///
Offset in output buffer.\n ///
Length of the data to be read.\n ///
Count of bytes actually read to the buffer.\n CompressedStreamReader.prototype.readPackedBytes = function (buffer, offset, length) {\n if (buffer == null) {\n throw new DOMException('buffer');\n }\n if (offset < 0 || offset > buffer.length - 1) {\n throw new DOMException('offset\", \"Offset can not be less than zero or greater than buffer length - 1.');\n }\n if (length < 0) {\n throw new DOMException('length\", \"Length can not be less than zero.');\n }\n if (length > buffer.length - offset) {\n throw new DOMException('length\", \"Length is too large.');\n }\n if ((this.mBufferedBits & 7) !== 0) {\n throw new DOMException('Reading of unalligned data is not supported.');\n }\n if (length === 0) {\n return 0;\n }\n var result = 0;\n while (this.mBufferedBits > 0 && length > 0) {\n buffer[offset++] = (this.mBuffer);\n this.mBufferedBits -= 8;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> 8);\n length--;\n result++;\n }\n if (length > 0) {\n //TODO: Fix this.\n result += this.mInputStream.read(buffer, offset, length);\n }\n return result;\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt32 = function () {\n var result = this.readBits(8) << 24;\n result |= this.readBits(8) << 16;\n result |= this.readBits(8) << 8;\n result |= this.readBits(8);\n return result;\n };\n ///
\n /// Updates checksum by calculating checksum of the\n /// given buffer and adding it to current value.\n /// \n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n CompressedStreamReader.prototype.checksumUpdate = function (buffer, offset, length) {\n ChecksumCalculator.ChecksumUpdate(this.mCheckSum, buffer, offset, length);\n };\n CompressedStreamReader.DEF_REVERSE_BITS = new Uint8Array([0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15]);\n ///
\n /// Minimum count of repetions.\n /// \n CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_MINIMUMS = [3, 3, 11];\n ///
\n /// Bits, that responds for different repetion modes.\n /// \n CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_BITS = [2, 3, 7];\n ///
\n /// Length bases.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_BASE = [\n 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 15, 17, 19, 23, 27, 31,\n 35, 43, 51, 59, 67, 83, 99, 115, 131, 163, 195, 227, 258\n ];\n ///
\n /// Length extended bits count.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_EXTENSION = [\n 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2,\n 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 0\n ];\n ///
\n /// Distance bases.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE = [\n 1, 2, 3, 4, 5, 7, 9, 13, 17, 25, 33, 49, 65, 97, 129, 193,\n 257, 385, 513, 769, 1025, 1537, 2049, 3073, 4097, 6145,\n 8193, 12289, 16385, 24577\n ];\n ///
\n /// Distance extanded bits count.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_EXTENSION = [\n 0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6,\n 7, 7, 8, 8, 9, 9, 10, 10, 11, 11,\n 12, 12, 13, 13\n ];\n return CompressedStreamReader;\n}());\nexport { CompressedStreamReader };\nvar Stream = /** @class */ (function () {\n function Stream(input) {\n this.position = 0;\n this.inputStream = new Uint8Array(input.buffer);\n }\n Object.defineProperty(Stream.prototype, \"length\", {\n get: function () {\n return this.inputStream.buffer.byteLength;\n },\n enumerable: true,\n configurable: true\n });\n Stream.prototype.read = function (buffer, start, length) {\n var temp = new Uint8Array(this.inputStream.buffer, this.position + start);\n var data = temp.subarray(0, length);\n buffer.set(data, 0);\n this.position += data.byteLength;\n return data.byteLength;\n };\n Stream.prototype.readByte = function () {\n return this.inputStream[this.position++];\n };\n Stream.prototype.write = function (inputBuffer, offset, count) {\n Utils.arrayCopy(inputBuffer, 0, this.inputStream, this.position + offset, count);\n // this.inputStream = new Uint8Array(this.inputStream.buffer, this.position + offset);\n // this.inputStream.set(inputBuffer, offset);\n this.position += count;\n };\n Stream.prototype.toByteArray = function () {\n return new Uint8Array(this.inputStream.buffer);\n };\n return Stream;\n}());\nexport { Stream };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { CompressedStreamWriter, Stream, CompressedStreamReader } from './index';\nimport { Save } from '@syncfusion/ej2-file-utils';\nimport { Utils } from './utils';\nvar CRC32TABLE = [];\n///
\n/// Size of the int value in bytes.\n/// \nvar INT_SIZE = 4;\n///
\n/// Size of the short value in bytes.\n/// \nvar SHORT_SIZE = 2;\n///
\n/// End of central directory signature.\n/// \nvar CentralDirectoryEndSignature = 0x06054b50;\n///
\n/// Offset to the size field in the End of central directory record.\n/// \nvar CentralDirSizeOffset = 12;\n///
\n/// Central header signature.\n/// \nvar CentralHeaderSignature = 0x02014b50;\n///
\n/// Buffer size.\n/// \nvar BufferSize = 4096;\n/**\n * class provide compression library\n * ```typescript\n * let archive = new ZipArchive();\n * archive.compressionLevel = 'Normal';\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * archive.addItem(archiveItem);\n * archive.save(fileName.zip);\n * ```\n */\nvar ZipArchive = /** @class */ (function () {\n /**\n * constructor for creating ZipArchive instance\n */\n function ZipArchive() {\n if (CRC32TABLE.length === 0) {\n ZipArchive.initCrc32Table();\n }\n this.files = [];\n this.level = 'Normal';\n Save.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n }\n Object.defineProperty(ZipArchive.prototype, \"items\", {\n get: function () {\n return this.files;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ZipArchive.prototype, \"compressionLevel\", {\n /**\n * gets compression level\n */\n get: function () {\n return this.level;\n },\n /**\n * sets compression level\n */\n set: function (level) {\n this.level = level;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ZipArchive.prototype, \"length\", {\n /**\n * gets items count\n */\n get: function () {\n if (this.files === undefined) {\n return 0;\n }\n return this.files.length;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * add new item to archive\n * @param {ZipArchiveItem} item - item to be added\n * @returns {void}\n */\n ZipArchive.prototype.addItem = function (item) {\n if (item === null || item === undefined) {\n throw new Error('ArgumentException: item cannot be null or undefined');\n }\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n if (file.name === item.name) {\n throw new Error('item with same name already exist');\n }\n }\n }\n this.files.push(item);\n };\n /**\n * add new directory to archive\n * @param directoryName directoryName to be created\n * @returns {void}\n */\n ZipArchive.prototype.addDirectory = function (directoryName) {\n if (directoryName === null || directoryName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (directoryName.length === 0) {\n throw new Error('ArgumentException: string cannot be empty');\n }\n if (directoryName.slice(-1) !== '/') {\n directoryName += '/';\n }\n if (this.files.indexOf(directoryName) !== -1) {\n throw new Error('item with same name already exist');\n }\n this.files.push(directoryName);\n };\n /**\n * gets item at specified index\n * @param {number} index - item index\n * @returns {ZipArchiveItem}\n */\n ZipArchive.prototype.getItem = function (index) {\n if (index >= 0 && index < this.files.length) {\n return this.files[index];\n }\n return undefined;\n };\n /**\n * determines whether an element is in the collection\n * @param {string | ZipArchiveItem} item - item to search\n * @returns {boolean}\n */\n ZipArchive.prototype.contains = function (item) {\n return this.files.indexOf(item) !== -1 ? true : false;\n };\n ZipArchive.prototype.open = function (base64String) {\n //return promise = new Promise((resolve: Function, reject: Function) => {\n var zipArchive = this;\n var zipByteArray = Utils.encodedString(base64String);\n if (zipByteArray.length == 0)\n throw new DOMException(\"stream\");\n var stream = new Stream(zipByteArray);\n //let lCentralDirEndPosition = this.findValueFromEnd( arrBuffer, Constants.CentralDirectoryEndSignature, 65557 );\n var lCentralDirEndPosition = ZipArchive.findValueFromEnd(stream, CentralDirectoryEndSignature, 65557);\n if (lCentralDirEndPosition < 0)\n throw new DOMException(\"Can't locate end of central directory record. Possible wrong file format or archive is corrupt.\");\n // Step2. Locate central directory and iterate through all items\n stream.position = lCentralDirEndPosition + CentralDirSizeOffset;\n var iCentralDirSize = ZipArchive.ReadInt32(stream);\n var lCentralDirPosition = lCentralDirEndPosition - iCentralDirSize;\n // verify that this is really central directory\n stream.position = lCentralDirPosition;\n this.readCentralDirectoryDataAndExtractItems(stream);\n //});\n // let zipArchive: ZipArchive = this;\n //let promise: Promise
;\n // return promise = new Promise((resolve: Function, reject: Function) => {\n // let reader: FileReader = new FileReader();\n // reader.onload = (e: Event) => {\n // let data: Uint8Array = new Uint8Array((e.target as any).result);\n // let zipReader: ZipReader = new ZipReader(data);\n // zipReader.readEntries().then((entries: ZipEntry[]) => {\n // for (let i: number = 0; i < entries.length; i++) {\n // let entry: ZipEntry = entries[i];\n // let item: ZipArchiveItem = new ZipArchiveItem(zipArchive, entry.fileName);\n // item.data = entry.data;\n // item.compressionMethod = entry.compressionMethod;\n // item.crc = entry.crc;\n // item.lastModified = entry.lastModified;\n // item.lastModifiedDate = entry.lastModifiedDate;\n // item.size = entry.size;\n // item.uncompressedSize = entry.uncompressedSize;\n // zipArchive.addItem(item);\n // }\n // resolve(zipArchive);\n // });\n // };\n // reader.readAsArrayBuffer(fileName);\n // });\n };\n /// \n /// Read central directory record from the stream.\n /// \n /// Stream to read from.\n ZipArchive.prototype.readCentralDirectoryDataAndExtractItems = function (stream) {\n if (stream == null)\n throw new DOMException(\"stream\");\n var itemHelper;\n while (ZipArchive.ReadInt32(stream) == CentralHeaderSignature) {\n itemHelper = new ZipArchiveItemHelper();\n itemHelper.readCentralDirectoryData(stream);\n itemHelper;\n // let item: ZipArchiveItem = new ZipArchiveItem(this);\n // item.ReadCentralDirectoryData(stream);\n // m_arrItems.Add(item);\n }\n itemHelper.readData(stream, itemHelper.checkCrc);\n itemHelper.decompressData();\n this.files.push(new ZipArchiveItem(itemHelper.unCompressedStream.buffer, itemHelper.name));\n };\n /**\n * save archive with specified file name\n * @param {string} fileName save archive with specified file name\n * @returns {Promise}\n */\n ZipArchive.prototype.save = function (fileName) {\n if (fileName === null || fileName === undefined || fileName.length === 0) {\n throw new Error('ArgumentException: fileName cannot be null or undefined');\n }\n if (this.files.length === 0) {\n throw new Error('InvalidOperation');\n }\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal(fileName, false).then(function () {\n resolve(zipArchive);\n });\n });\n };\n /**\n * Save archive as blob\n * @return {Promise}\n */\n ZipArchive.prototype.saveAsBlob = function () {\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal('', true).then(function (blob) {\n resolve(blob);\n });\n });\n };\n ZipArchive.prototype.saveInternal = function (fileName, skipFileSave) {\n var _this = this;\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n var zipData = [];\n var dirLength = 0;\n for (var i = 0; i < zipArchive.files.length; i++) {\n var compressedObject = _this.getCompressedData(_this.files[i]);\n compressedObject.then(function (data) {\n dirLength = zipArchive.constructZippedObject(zipData, data, dirLength, data.isDirectory);\n if (zipData.length === zipArchive.files.length) {\n var blob = zipArchive.writeZippedContent(fileName, zipData, dirLength, skipFileSave);\n resolve(blob);\n }\n });\n }\n });\n };\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchive.prototype.destroy = function () {\n if (this.files !== undefined && this.files.length > 0) {\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n file.destroy();\n }\n file = undefined;\n }\n this.files = [];\n }\n this.files = undefined;\n this.level = undefined;\n };\n ZipArchive.prototype.getCompressedData = function (item) {\n var zipArchive = this;\n var promise = new Promise(function (resolve, reject) {\n if (item instanceof ZipArchiveItem) {\n var reader_1 = new FileReader();\n reader_1.onload = function () {\n var input = new Uint8Array(reader_1.result);\n var data = {\n fileName: item.name, crc32Value: 0, compressedData: [],\n compressedSize: undefined, uncompressedDataSize: input.length, compressionType: undefined,\n isDirectory: false\n };\n if (zipArchive.level === 'Normal') {\n zipArchive.compressData(input, data, CRC32TABLE);\n var length_1 = 0;\n for (var i = 0; i < data.compressedData.length; i++) {\n length_1 += data.compressedData[i].length;\n }\n data.compressedSize = length_1;\n data.compressionType = '\\x08\\x00'; //Deflated = 8\n }\n else {\n data.compressedSize = input.length;\n data.crc32Value = zipArchive.calculateCrc32Value(0, input, CRC32TABLE);\n data.compressionType = '\\x00\\x00'; // Stored = 0\n data.compressedData.push(input);\n }\n resolve(data);\n };\n reader_1.readAsArrayBuffer(item.data);\n }\n else {\n var data = {\n fileName: item, crc32Value: 0, compressedData: '', compressedSize: 0, uncompressedDataSize: 0,\n compressionType: '\\x00\\x00', isDirectory: true\n };\n resolve(data);\n }\n });\n return promise;\n };\n ZipArchive.prototype.compressData = function (input, data, crc32Table) {\n var compressor = new CompressedStreamWriter(true);\n var currentIndex = 0;\n var nextIndex = 0;\n do {\n if (currentIndex >= input.length) {\n compressor.close();\n break;\n }\n nextIndex = Math.min(input.length, currentIndex + 16384);\n var subArray = input.subarray(currentIndex, nextIndex);\n data.crc32Value = this.calculateCrc32Value(data.crc32Value, subArray, crc32Table);\n compressor.write(subArray, 0, nextIndex - currentIndex);\n currentIndex = nextIndex;\n } while (currentIndex <= input.length);\n data.compressedData = compressor.compressedData;\n compressor.destroy();\n };\n ZipArchive.prototype.constructZippedObject = function (zipParts, data, dirLength, isDirectory) {\n var extFileAttr = 0;\n var date = new Date();\n if (isDirectory) {\n extFileAttr = extFileAttr | 0x00010; // directory flag\n }\n extFileAttr = extFileAttr | (0 & 0x3F);\n var header = this.writeHeader(data, date);\n var localHeader = 'PK\\x03\\x04' + header + data.fileName;\n var centralDir = this.writeCentralDirectory(data, header, dirLength, extFileAttr);\n zipParts.push({ localHeader: localHeader, centralDir: centralDir, compressedData: data });\n return dirLength + localHeader.length + data.compressedSize;\n };\n ZipArchive.prototype.writeHeader = function (data, date) {\n var zipHeader = '';\n zipHeader += '\\x0A\\x00' + '\\x00\\x00'; // version needed to extract & general purpose bit flag\n zipHeader += data.compressionType; // compression method Deflate=8,Stored=0\n zipHeader += this.getBytes(this.getModifiedTime(date), 2); // last modified Time\n zipHeader += this.getBytes(this.getModifiedDate(date), 2); // last modified date\n zipHeader += this.getBytes(data.crc32Value, 4); // crc-32 value\n zipHeader += this.getBytes(data.compressedSize, 4); // compressed file size\n zipHeader += this.getBytes(data.uncompressedDataSize, 4); // uncompressed file size\n zipHeader += this.getBytes(data.fileName.length, 2); // file name length\n zipHeader += this.getBytes(0, 2); // extra field length\n return zipHeader;\n };\n ZipArchive.prototype.writeZippedContent = function (fileName, zipData, localDirLen, skipFileSave) {\n var cenDirLen = 0;\n var buffer = [];\n for (var i = 0; i < zipData.length; i++) {\n var item = zipData[i];\n cenDirLen += item.centralDir.length;\n buffer.push(this.getArrayBuffer(item.localHeader));\n while (item.compressedData.compressedData.length) {\n buffer.push(item.compressedData.compressedData.shift().buffer);\n }\n }\n for (var i = 0; i < zipData.length; i++) {\n buffer.push(this.getArrayBuffer(zipData[i].centralDir));\n }\n buffer.push(this.getArrayBuffer(this.writeFooter(zipData, cenDirLen, localDirLen)));\n var blob = new Blob(buffer, { type: 'application/zip' });\n if (!skipFileSave) {\n Save.save(fileName, blob);\n }\n return blob;\n };\n ZipArchive.prototype.writeCentralDirectory = function (data, localHeader, offset, externalFileAttribute) {\n var directoryHeader = 'PK\\x01\\x02' +\n this.getBytes(0x0014, 2) + localHeader + // inherit from file header\n this.getBytes(0, 2) + // comment length\n '\\x00\\x00' + '\\x00\\x00' + // internal file attributes \n this.getBytes(externalFileAttribute, 4) + // external file attributes\n this.getBytes(offset, 4) + // local fileHeader relative offset\n data.fileName;\n return directoryHeader;\n };\n ZipArchive.prototype.writeFooter = function (zipData, centralLength, localLength) {\n var dirEnd = 'PK\\x05\\x06' + '\\x00\\x00' + '\\x00\\x00' +\n this.getBytes(zipData.length, 2) + this.getBytes(zipData.length, 2) +\n this.getBytes(centralLength, 4) + this.getBytes(localLength, 4) +\n this.getBytes(0, 2);\n return dirEnd;\n };\n ZipArchive.prototype.getArrayBuffer = function (input) {\n var a = new Uint8Array(input.length);\n for (var j = 0; j < input.length; ++j) {\n a[j] = input.charCodeAt(j) & 0xFF;\n }\n return a.buffer;\n };\n ZipArchive.prototype.getBytes = function (value, offset) {\n var bytes = '';\n for (var i = 0; i < offset; i++) {\n bytes += String.fromCharCode(value & 0xff);\n value = value >>> 8;\n }\n return bytes;\n };\n ZipArchive.prototype.getModifiedTime = function (date) {\n var modTime = date.getHours();\n modTime = modTime << 6;\n modTime = modTime | date.getMinutes();\n modTime = modTime << 5;\n return modTime = modTime | date.getSeconds() / 2;\n };\n ZipArchive.prototype.getModifiedDate = function (date) {\n var modiDate = date.getFullYear() - 1980;\n modiDate = modiDate << 4;\n modiDate = modiDate | (date.getMonth() + 1);\n modiDate = modiDate << 5;\n return modiDate = modiDate | date.getDate();\n };\n ZipArchive.prototype.calculateCrc32Value = function (crc32Value, input, crc32Table) {\n crc32Value ^= -1;\n for (var i = 0; i < input.length; i++) {\n crc32Value = (crc32Value >>> 8) ^ crc32Table[(crc32Value ^ input[i]) & 0xFF];\n }\n return (crc32Value ^ (-1));\n };\n /**\n * construct cyclic redundancy code table\n * @private\n */\n ZipArchive.initCrc32Table = function () {\n var i;\n for (var j = 0; j < 256; j++) {\n i = j;\n for (var k = 0; k < 8; k++) {\n i = ((i & 1) ? (0xEDB88320 ^ (i >>> 1)) : (i >>> 1));\n }\n CRC32TABLE[j] = i;\n }\n };\n ZipArchive.findValueFromEnd = function (stream, value, maxCount) {\n if (stream == null)\n throw new DOMException(\"stream\");\n // if( !stream.CanSeek || !stream.CanRead )\n // throw new ArgumentOutOfRangeException( \"We need to have seekable and readable stream.\" );\n // read last 4 bytes and compare with required value\n var lStreamSize = stream.inputStream.buffer.byteLength;\n if (lStreamSize < 4)\n return -1;\n var arrBuffer = new Uint8Array(4);\n var lLastPos = Math.max(0, lStreamSize - maxCount);\n var lCurrentPosition = lStreamSize - 1 - INT_SIZE;\n stream.position = lCurrentPosition;\n stream.read(arrBuffer, 0, INT_SIZE);\n var uiCurValue = arrBuffer[0];\n var bFound = (uiCurValue == value);\n if (!bFound) {\n while (lCurrentPosition > lLastPos) {\n // remove unnecessary byte and replace it with new value.\n uiCurValue <<= 8;\n lCurrentPosition--;\n stream.position = lCurrentPosition;\n uiCurValue += stream.readByte();\n if (uiCurValue == value) {\n bFound = true;\n break;\n }\n }\n }\n return bFound ? lCurrentPosition : -1;\n };\n /// \n /// Extracts Int32 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadInt32 = function (stream) {\n var buffer = new Uint8Array(INT_SIZE);\n if (stream.read(buffer, 0, INT_SIZE) != INT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt32(buffer, 0);\n };\n /// \n /// Extracts Int16 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadInt16 = function (stream) {\n var buffer = new Uint8Array(SHORT_SIZE);\n if (stream.read(buffer, 0, SHORT_SIZE) != SHORT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt16(buffer, 0);\n };\n /// \n /// Extracts unsigned Int16 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadUInt16 = function (stream) {\n {\n var buffer = new Uint8Array(SHORT_SIZE);\n if (stream.read(buffer, 0, SHORT_SIZE) != SHORT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt16(buffer, 0);\n }\n };\n return ZipArchive;\n}());\nexport { ZipArchive };\nvar ZipArchiveItemHelper = /** @class */ (function () {\n function ZipArchiveItemHelper() {\n /// \n /// Zip header signature.\n /// \n this.headerSignature = 0x04034b50;\n /// \n /// Indicates whether we should check Crc value when reading item's data. Check\n /// is performed when user gets access to decompressed data for the first time.\n /// \n this.checkCrc = true;\n /// \n /// Crc.\n /// \n this.crc32 = 0;\n }\n /// \n /// Read data from the stream based on the central directory.\n /// \n /// Stream to read data from, stream.Position must point at just after correct file header.\n ZipArchiveItemHelper.prototype.readCentralDirectoryData = function (stream) {\n // on the current moment we ignore \"version made by\" and \"version needed to extract\" fields.\n stream.position += 4;\n this.options = ZipArchive.ReadInt16(stream);\n this.compressionMethod = ZipArchive.ReadInt16(stream);\n this.checkCrc = (this.compressionMethod != 99); //COmpression.Defalte != SecurityConstants.AES\n //m_bCompressed = true;\n // on the current moment we ignore \"last mod file time\" and \"last mod file date\" fields.\n var lastModified = ZipArchive.ReadInt32(stream);\n //LastModified = ConvertToDateTime(lastModified);\n this.crc32 = Utils.bitConverterToUInt32(ZipArchive.ReadInt32(stream));\n this.compressedSize = ZipArchive.ReadInt32(stream);\n this.originalSize = ZipArchive.ReadInt32(stream);\n var iFileNameLength = ZipArchive.ReadInt16(stream);\n var iExtraFieldLenth = ZipArchive.ReadInt16(stream);\n var iCommentLength = ZipArchive.ReadInt16(stream);\n // on the current moment we ignore and \"disk number start\" (2 bytes),\n // \"internal file attributes\" (2 bytes).\n stream.position += 4;\n this.externalAttributes = ZipArchive.ReadInt32(stream);\n this.localHeaderOffset = ZipArchive.ReadInt32(stream);\n var arrBuffer = new Uint8Array(iFileNameLength);\n stream.read(arrBuffer, 0, iFileNameLength);\n var m_strItemName = Utils.byteToString(arrBuffer);\n m_strItemName = m_strItemName.replace(\"\\\\\", \"/\");\n this.name = m_strItemName;\n stream.position += iExtraFieldLenth + iCommentLength;\n if (this.options != 0)\n this.options = 0;\n };\n /// \n /// Reads zipped data from the stream.\n /// \n /// Stream to read data from.\n /// Indicates whether we should check crc value after data decompression.\n ZipArchiveItemHelper.prototype.readData = function (stream, checkCrc) {\n if (stream.length == 0)\n throw new DOMException(\"stream\");\n stream.position = this.localHeaderOffset;\n this.checkCrc = checkCrc;\n this.readLocalHeader(stream);\n this.readCompressedData(stream);\n };\n ZipArchiveItemHelper.prototype.decompressData = function () {\n if (this.compressionMethod == 8) {\n if (this.originalSize > 0) {\n this.decompressDataOld();\n }\n }\n };\n ZipArchiveItemHelper.prototype.decompressDataOld = function () {\n var reader = new CompressedStreamReader(this.compressedStream, true);\n var decompressedData;\n if (this.originalSize > 0)\n decompressedData = new Stream(new Uint8Array(this.originalSize));\n var arrBuffer = new Uint8Array(BufferSize);\n var iReadBytes;\n var past = new Uint8Array(0);\n while ((iReadBytes = reader.read(arrBuffer, 0, BufferSize)) > 0) {\n // past = new Uint8Array(decompressedData.length);\n // let currentBlock: Uint8Array = arrBuffer.subarray(0, iReadBytes);\n decompressedData.write(arrBuffer.subarray(0, iReadBytes), 0, iReadBytes);\n }\n this.unCompressedStream = decompressedData.toByteArray();\n // this.originalSize = decompressedData.Length;\n // m_bControlStream = true;\n // m_streamData = decompressedData;\n // decompressedData.SetLength( m_lOriginalSize );\n // decompressedData.Capacity = ( int )m_lOriginalSize;\n if (this.checkCrc) {\n //TODO: fix this\n //CheckCrc(decompressedData.ToArray());\n }\n //m_streamData.Position = 0;\n };\n /// \n /// Extracts local header from the stream.\n /// \n /// Stream to read data from.\n ZipArchiveItemHelper.prototype.readLocalHeader = function (stream) {\n if (stream.length == 0)\n throw new DOMException(\"stream\");\n if (ZipArchive.ReadInt32(stream) != this.headerSignature)\n throw new DOMException(\"Can't find local header signature - wrong file format or file is corrupt.\");\n // TODO: it is good to verify data read from the central directory record,\n // but on the current moment we simply skip it.\n stream.position += 22;\n var iNameLength = ZipArchive.ReadInt16(stream);\n var iExtraLength = ZipArchive.ReadUInt16(stream);\n if (this.compressionMethod == 99) //SecurityConstants.AES\n {\n // stream.Position += iNameLength + 8;\n // m_archive.EncryptionAlgorithm = (EncryptionAlgorithm)stream.ReadByte();\n // m_actualCompression = new byte[2];\n // stream.Read(m_actualCompression, 0, 2);\n }\n else if (iExtraLength > 2) {\n stream.position += iNameLength;\n var headerVal = ZipArchive.ReadInt16(stream);\n if (headerVal == 0x0017) //PKZipEncryptionHeader\n throw new DOMException(\"UnSupported\");\n else\n stream.position += iExtraLength - 2;\n }\n else\n stream.position += iNameLength + iExtraLength;\n };\n /// \n /// Extracts compressed data from the stream.\n /// \n /// Stream to read data from.\n ZipArchiveItemHelper.prototype.readCompressedData = function (stream) {\n var dataStream;\n if (this.compressedSize > 0) {\n var iBytesLeft = this.compressedSize;\n dataStream = new Stream(new Uint8Array(iBytesLeft));\n var arrBuffer = new Uint8Array(BufferSize);\n while (iBytesLeft > 0) {\n var iBytesToRead = Math.min(iBytesLeft, BufferSize);\n if (stream.read(arrBuffer, 0, iBytesToRead) != iBytesToRead)\n throw new DOMException(\"End of file reached - wrong file format or file is corrupt.\");\n dataStream.write(arrBuffer.subarray(0, iBytesToRead), 0, iBytesToRead);\n iBytesLeft -= iBytesToRead;\n }\n // if(m_archive.Password != null)\n // {\n // byte[] dataBuffer = new byte[dataStream.Length];\n // dataBuffer = dataStream.ToArray();\n // dataStream=new MemoryStream( Decrypt(dataBuffer));\n // }\n this.compressedStream = new Uint8Array(dataStream.inputStream);\n // m_bControlStream = true;\n }\n else if (this.compressedSize < 0) //If compression size is negative, then read until the next header signature reached.\n {\n // MemoryStream dataStream = new MemoryStream();\n // int bt = 0;\n // bool proceed=true;\n // while (proceed)\n // {\n // if ((bt = stream.ReadByte()) == Constants.HeaderSignatureStartByteValue)\n // {\n // stream.Position -= 1;\n // int headerSignature = ZipArchive.ReadInt32(stream);\n // if (headerSignature==Constants.CentralHeaderSignature || headerSignature==Constants.CentralHeaderSignature)\n // {\n // proceed = false;\n // }\n // stream.Position -= 3;\n // }\n // if (proceed)\n // dataStream.WriteByte((byte)bt);\n // }\n // m_streamData = dataStream;\n // m_lCompressedSize = m_streamData.Length;\n // m_bControlStream = true;\n }\n else if (this.compressedSize == 0) {\n // m_streamData = new MemoryStream();\n }\n };\n return ZipArchiveItemHelper;\n}());\nexport { ZipArchiveItemHelper };\n/**\n * Class represent unique ZipArchive item\n * ```typescript\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * ```\n */\nvar ZipArchiveItem = /** @class */ (function () {\n /**\n * constructor for creating {ZipArchiveItem} instance\n * @param {Blob|ArrayBuffer} data file data\n * @param {itemName} itemName absolute file path\n */\n function ZipArchiveItem(data, itemName) {\n if (data === null || data === undefined) {\n throw new Error('ArgumentException: data cannot be null or undefined');\n }\n if (itemName === null || itemName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (itemName.length === 0) {\n throw new Error('string cannot be empty');\n }\n this.data = data;\n this.name = itemName;\n }\n Object.defineProperty(ZipArchiveItem.prototype, \"dataStream\", {\n get: function () {\n return this.decompressedStream;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ZipArchiveItem.prototype, \"name\", {\n /**\n * Get the name of archive item\n * @returns string\n */\n get: function () {\n return this.fileName;\n },\n /**\n * Set the name of archive item\n * @param {string} value\n */\n set: function (value) {\n this.fileName = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchiveItem.prototype.destroy = function () {\n this.fileName = undefined;\n this.data = undefined;\n };\n return ZipArchiveItem;\n}());\nexport { ZipArchiveItem };\n/* eslint-enable */ \n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization } from '@syncfusion/ej2-base';\n// import { IValueFormatter } from '../base/interface';\n/**\n * ValueFormatter class to globalize the value.\n * @private\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n // if (!isNullOrUndefined(cultureName)) {\n // this.intl.culture = cultureName;\n // }\n }\n ValueFormatter.prototype.getFormatFunction = function (format, isServerRendered) {\n if (format.type) {\n if (isServerRendered) {\n format.isServerRendered = true;\n }\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n // public getParserFunction(format: NumberFormatOptions | DateFormatOptions): Function {\n // if ((format).type) {\n // return this.intl.getDateParser(format);\n // } else {\n // return this.intl.getNumberParser(format);\n // }\n // }\n // public fromView(value: string, format: Function, type?: string): string | number | Date {\n // if (type === 'date' || type === 'datetime' || type === 'number') {\n // return format(value);\n // } else {\n // return value;\n // }\n // }\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n // public setCulture(cultureName: string): void {\n // if (!isNullOrUndefined(cultureName)) {\n // setCulture(cultureName);\n // }\n // }\n /* tslint:disable:no-any */\n ValueFormatter.prototype.displayText = function (value, format, isServerRendered) {\n return this.toView(value, this.getFormatFunction(format, isServerRendered));\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { ValueFormatter } from './value-formatter';\nimport { Encoding } from '@syncfusion/ej2-file-utils';\n/**\n * CsvHelper class\n * @private\n */\nvar CsvHelper = /** @class */ (function () {\n /* tslint:disable:no-any */\n function CsvHelper(json, separator) {\n this.csvStr = '';\n if (separator === null || separator === undefined) {\n this.separator = ',';\n }\n else {\n this.separator = separator;\n }\n this.formatter = new ValueFormatter();\n this.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n if (json.isServerRendered !== null && json.isServerRendered !== undefined) {\n this.isServerRendered = json.isServerRendered;\n }\n if (json.styles !== null && json.styles !== undefined) {\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined && json.styles[i].numberFormat !== undefined) {\n this.globalStyles.set(json.styles[i].name, json.styles[i].numberFormat);\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parseWorksheet(json.worksheets[0]);\n }\n //this.csvStr = 'a1,a2,a3\\nb1,b2,b3';\n }\n CsvHelper.prototype.parseWorksheet = function (json) {\n //Rows\n if (json.rows !== null && json.rows !== undefined) {\n this.parseRows(json.rows);\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRows = function (rows) {\n var count = 1;\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n //Row index\n if (row.index !== null && row.index !== undefined) {\n while (count < row.index) {\n this.csvStr += '\\r\\n';\n count++;\n }\n this.parseRow(row);\n }\n else {\n throw Error('Row index is missing.');\n }\n }\n this.csvStr += '\\r\\n';\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRow = function (row) {\n if (row.cells !== null && row.cells !== undefined) {\n var count = 1;\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n //cell index\n if (cell.index !== null && cell.index !== undefined) {\n while (count < cell.index) {\n this.csvStr += this.separator;\n count++;\n }\n this.parseCell(cell);\n }\n else {\n throw Error('Cell index is missing.');\n }\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseCell = function (cell) {\n var csv = this.csvStr;\n if (cell.value !== undefined) {\n if (cell.value instanceof Date) {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n try {\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: cell.style.numberFormat }, this.isServerRendered));\n }\n catch (error) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', format: cell.style.numberFormat }, this.isServerRendered));\n }\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n try {\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n catch (error) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', format: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n }\n else {\n csv += cell.value;\n }\n }\n else if (typeof (cell.value) === 'boolean') {\n csv += cell.value ? 'TRUE' : 'FALSE';\n }\n else if (typeof (cell.value) === 'number') {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: cell.style.numberFormat }, this.isServerRendered));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n else {\n csv += cell.value;\n }\n }\n else {\n csv += this.parseCellValue(cell.value);\n }\n }\n this.csvStr = csv;\n };\n CsvHelper.prototype.parseCellValue = function (value) {\n var val = '';\n var length = value.length;\n for (var start = 0; start < length; start++) {\n if (value[start] === '\\\"') {\n val += value[start].replace('\\\"', '\\\"\\\"');\n }\n else {\n val += value[start];\n }\n }\n value = val;\n if (value.indexOf(this.separator) !== -1 || value.indexOf('\\n') !== -1 || value.indexOf('\\\"') !== -1) {\n return value = '\\\"' + value + '\\\"';\n }\n else {\n return value;\n }\n };\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n */\n CsvHelper.prototype.save = function (fileName) {\n this.buffer = new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(this.buffer, fileName);\n }\n else {\n var dataUrl_1 = window.URL.createObjectURL(this.buffer);\n var dwlLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n dwlLink.download = fileName;\n dwlLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n dwlLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n });\n }\n };\n /**\n * Returns a Blob object containing CSV data with optional encoding.\n * @param {string} [encodingType] - The supported encoding types are \"ansi\", \"unicode\" and \"utf8\".\n */\n /* tslint:disable:no-any */\n CsvHelper.prototype.saveAsBlob = function (encodingType) {\n if (encodingType != undefined) {\n var encoding = new Encoding();\n var encodeString = 'UTF-8';\n if (encodingType.toUpperCase() == \"ANSI\") {\n encoding.type = 'Ansi';\n encodeString = 'ANSI';\n }\n else if (encodingType.toUpperCase() == \"UNICODE\") {\n encoding.type = 'Unicode';\n encodeString = 'UNICODE';\n }\n else {\n encoding.type = 'Utf8';\n encodeString = 'UTF-8';\n }\n var buffer = encoding.getBytes(this.csvStr, 0, this.csvStr.length);\n return new Blob([buffer], { type: 'text/csv;charset=' + encodeString });\n }\n else\n return new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n };\n return CsvHelper;\n}());\nexport { CsvHelper };\n","/**\n * BlobHelper class\n * @private\n */\nvar BlobHelper = /** @class */ (function () {\n function BlobHelper() {\n /* tslint:disable:no-any */\n this.parts = [];\n }\n /* tslint:disable:no-any */\n BlobHelper.prototype.append = function (part) {\n this.parts.push(part);\n this.blob = undefined; // Invalidate the blob\n };\n BlobHelper.prototype.getBlob = function () {\n return new Blob(this.parts, { type: 'text/plain' });\n };\n return BlobHelper;\n}());\nexport { BlobHelper };\n","/**\n * AutoFilters class\n * @private\n */\nvar AutoFilters = /** @class */ (function () {\n function AutoFilters() {\n }\n return AutoFilters;\n}());\nexport { AutoFilters };\n","import { Worksheets } from './worksheets';\nimport { Worksheet, FreezePane, MergeCell, MergeCells, HyperLink, Grouping } from './worksheet';\nimport { CellStyle, Font, Borders, CellXfs, Alignment, NumFmt, CellStyleXfs, CellStyles } from './cell-style';\nimport { Column } from './column';\nimport { Row, Rows } from './row';\nimport { Image } from './image';\nimport { Cell, Cells } from './cell';\nimport { ZipArchive, ZipArchiveItem } from '@syncfusion/ej2-compression';\nimport { CsvHelper } from './csv-helper';\nimport { Internationalization, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { BlobHelper } from './blob-helper';\nimport { AutoFilters } from './auto-filters';\n/**\n * Workbook class\n */\nvar Workbook = /** @class */ (function () {\n /* tslint:disable:no-any */\n function Workbook(json, saveType, culture, currencyString, separator) {\n this.sharedStringCount = 0;\n this.unitsProportions = [\n 96 / 75.0,\n 96 / 300.0,\n 96,\n 96 / 25.4,\n 96 / 2.54,\n 1,\n 96 / 72.0,\n 96 / 72.0 / 12700,\n ];\n /* tslint:disable:no-any */\n this.hyperlinkStyle = { fontColor: '#0000FF', underline: true };\n if (culture !== undefined) {\n this.culture = culture;\n }\n else {\n this.culture = 'en-US';\n }\n if (currencyString !== undefined) {\n this.currency = currencyString;\n }\n else {\n this.currency = 'USD';\n }\n this.intl = new Internationalization(this.culture);\n this.mSaveType = saveType;\n if (saveType === 'xlsx') {\n this.mArchive = new ZipArchive();\n this.sharedString = [];\n this.mFonts = [];\n this.mBorders = [];\n this.mStyles = [];\n this.printTitles = new Map();\n this.cellStyles = new Map();\n this.mNumFmt = new Map();\n this.mFills = new Map();\n this.mStyles.push(new CellStyle());\n this.mFonts.push(new Font());\n /* tslint:disable */\n this.cellStyles.set('Normal', new CellStyles());\n /* tslint:enable */\n this.mCellXfs = [];\n this.mCellStyleXfs = [];\n this.drawingCount = 0;\n this.imageCount = 0;\n if (json.styles !== null && json.styles !== undefined) {\n /* tslint:disable-next-line:no-any */\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined) {\n if (!this.cellStyles.has(json.styles[i].name)) {\n var cellStyle = new CellStyle();\n cellStyle.isGlobalStyle = true;\n this.parserCellStyle(json.styles[i], cellStyle, 'none');\n var cellStylesIn = new CellStyles();\n cellStylesIn.name = cellStyle.name;\n cellStylesIn.xfId = (cellStyle.index - 1);\n this.cellStyles.set(cellStylesIn.name, cellStylesIn);\n /* tslint:disable-next-line:no-any */\n var tFormat = {};\n if (json.styles[i].numberFormat !== undefined) {\n tFormat.format = json.styles[i].numberFormat;\n }\n if (json.styles[i].type !== undefined) {\n tFormat.type = json.styles[i].type;\n }\n else {\n tFormat.type = 'datetime';\n }\n if (tFormat.format !== undefined) {\n this.globalStyles.set(json.styles[i].name, tFormat);\n }\n }\n else {\n throw Error('Style name ' + json.styles[i].name + ' is already existed');\n }\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parserWorksheets(json.worksheets);\n }\n else {\n throw Error('Worksheet is expected.');\n }\n // Parses the BuiltInProperties data to DOM. \n if (json.builtInProperties !== null && json.builtInProperties !== undefined) {\n this.builtInProperties = new BuiltInProperties();\n this.parserBuiltInProperties(json.builtInProperties, this.builtInProperties);\n }\n }\n else {\n this.csvHelper = new CsvHelper(json, separator);\n }\n }\n /* tslint:disable:no-any */\n Workbook.prototype.parserBuiltInProperties = function (jsonBuiltInProperties, builtInProperties) {\n //Author\n if (jsonBuiltInProperties.author !== null && jsonBuiltInProperties.author !== undefined) {\n builtInProperties.author = jsonBuiltInProperties.author;\n }\n //Comments\n if (jsonBuiltInProperties.comments !== null && jsonBuiltInProperties.comments !== undefined) {\n builtInProperties.comments = jsonBuiltInProperties.comments;\n }\n //Category\n if (jsonBuiltInProperties.category !== null && jsonBuiltInProperties.category !== undefined) {\n builtInProperties.category = jsonBuiltInProperties.category;\n }\n //Company\n if (jsonBuiltInProperties.company !== null && jsonBuiltInProperties.company !== undefined) {\n builtInProperties.company = jsonBuiltInProperties.company;\n }\n //Manager\n if (jsonBuiltInProperties.manager !== null && jsonBuiltInProperties.manager !== undefined) {\n builtInProperties.manager = jsonBuiltInProperties.manager;\n }\n //Subject\n if (jsonBuiltInProperties.subject !== null && jsonBuiltInProperties.subject !== undefined) {\n builtInProperties.subject = jsonBuiltInProperties.subject;\n }\n //Title\n if (jsonBuiltInProperties.title !== null && jsonBuiltInProperties.title !== undefined) {\n builtInProperties.title = jsonBuiltInProperties.title;\n }\n //Creation date\n if (jsonBuiltInProperties.createdDate !== null && jsonBuiltInProperties.createdDate !== undefined) {\n builtInProperties.createdDate = jsonBuiltInProperties.createdDate;\n }\n //Modified date\n if (jsonBuiltInProperties.modifiedDate !== null && jsonBuiltInProperties.modifiedDate !== undefined) {\n builtInProperties.modifiedDate = jsonBuiltInProperties.modifiedDate;\n }\n //Tags\n if (jsonBuiltInProperties.tags !== null && jsonBuiltInProperties.tags !== undefined) {\n builtInProperties.tags = jsonBuiltInProperties.tags;\n }\n //Status\n if (jsonBuiltInProperties.status !== null && jsonBuiltInProperties.status !== undefined) {\n builtInProperties.status = jsonBuiltInProperties.status;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserWorksheets = function (json) {\n this.worksheets = new Worksheets();\n var length = json.length;\n for (var i = 0; i < length; i++) {\n var jsonSheet = json[i];\n var sheet = new Worksheet();\n this.mergeCells = new MergeCells();\n this.mergedCellsStyle = new Map();\n this.mHyperLinks = [];\n //Name\n if (jsonSheet.name !== null && jsonSheet.name !== undefined) {\n sheet.name = jsonSheet.name;\n }\n else {\n sheet.name = 'Sheet' + (i + 1).toString();\n }\n if (jsonSheet.enableRtl !== null && jsonSheet.enableRtl !== undefined) {\n sheet.enableRtl = jsonSheet.enableRtl;\n }\n sheet.index = (i + 1);\n //Columns\n if (jsonSheet.columns !== null && jsonSheet.columns !== undefined) {\n this.parserColumns(jsonSheet.columns, sheet);\n }\n //Rows\n if (jsonSheet.rows !== null && jsonSheet.rows !== undefined) {\n this.parserRows(jsonSheet.rows, sheet);\n }\n //showGridLines\n if (jsonSheet.showGridLines !== null && jsonSheet.showGridLines !== undefined) {\n sheet.showGridLines = jsonSheet.showGridLines;\n }\n //FreezePanes\n if (jsonSheet.freeze !== null && jsonSheet.freeze !== undefined) {\n this.parserFreezePanes(jsonSheet.freeze, sheet);\n }\n //Print Title\n if (jsonSheet.printTitle !== null && jsonSheet.printTitle !== undefined) {\n this.parserPrintTitle(jsonSheet.printTitle, sheet);\n }\n if (jsonSheet.pageSetup !== undefined) {\n if (jsonSheet.pageSetup.isSummaryRowBelow !== undefined) {\n sheet.isSummaryRowBelow = jsonSheet.pageSetup.isSummaryRowBelow;\n }\n }\n if (jsonSheet.images !== undefined) {\n this.parserImages(jsonSheet.images, sheet);\n }\n if (jsonSheet.autoFilters !== null && jsonSheet.autoFilters !== undefined) {\n this.parseFilters(jsonSheet.autoFilters, sheet);\n }\n sheet.index = (i + 1);\n sheet.mergeCells = this.mergeCells;\n sheet.hyperLinks = this.mHyperLinks;\n this.worksheets.push(sheet);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.mergeOptions = function (fromJson, toJson) {\n /* tslint:disable:no-any */\n var result = {};\n this.applyProperties(fromJson, result);\n this.applyProperties(toJson, result);\n return result;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.applyProperties = function (sourceJson, destJson) {\n var keys = Object.keys(sourceJson);\n for (var index = 0; index < keys.length; index++) {\n if (keys[index] !== 'name') {\n destJson[keys[index]] = sourceJson[keys[index]];\n }\n }\n };\n Workbook.prototype.getCellName = function (row, column) {\n return this.getColumnName(column) + row.toString();\n };\n Workbook.prototype.getColumnName = function (col) {\n col--;\n var strColumnName = '';\n do {\n var iCurrentDigit = col % 26;\n col = col / 26 - 1;\n strColumnName = String.fromCharCode(65 + iCurrentDigit) + strColumnName;\n } while (col >= 0);\n return strColumnName;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserPrintTitle = function (json, sheet) {\n var printTitleName = '';\n var titleRowName;\n if (json.fromRow !== null && json.fromRow !== undefined) {\n var fromRow = json.fromRow;\n var toRow = void 0;\n if (json.toRow !== null && json.toRow !== undefined) {\n toRow = json.toRow;\n }\n else {\n toRow = json.fromRow;\n }\n titleRowName = '$' + fromRow + ':$' + toRow;\n }\n var titleColName;\n if (json.fromColumn !== null && json.fromColumn !== undefined) {\n var fromColumn = json.fromColumn;\n var toColumn = void 0;\n if (json.toColumn !== null && json.toColumn !== undefined) {\n toColumn = json.toColumn;\n }\n else {\n toColumn = json.fromColumn;\n }\n titleColName = '$' + this.getColumnName(fromColumn) + ':$' + this.getColumnName(toColumn);\n }\n if (titleRowName !== undefined) {\n printTitleName += (sheet.name + '!' + titleRowName);\n }\n if (titleColName !== undefined && titleRowName !== undefined) {\n printTitleName += ',' + (sheet.name + '!' + titleColName);\n }\n else if (titleColName !== undefined) {\n printTitleName += (sheet.name + '!' + titleColName);\n }\n if (printTitleName !== '') {\n this.printTitles.set(sheet.index - 1, printTitleName);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserFreezePanes = function (json, sheet) {\n sheet.freezePanes = new FreezePane();\n if (json.row !== null && json.row !== undefined) {\n sheet.freezePanes.row = json.row;\n }\n else {\n sheet.freezePanes.row = 0;\n }\n if (json.column !== null && json.column !== undefined) {\n sheet.freezePanes.column = json.column;\n }\n else {\n sheet.freezePanes.column = 0;\n }\n sheet.freezePanes.leftCell = this.getCellName(sheet.freezePanes.row + 1, sheet.freezePanes.column + 1);\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserColumns = function (json, sheet) {\n var columnsLength = json.length;\n sheet.columns = [];\n for (var column = 0; column < columnsLength; column++) {\n var col = new Column();\n if (json[column].index !== null && json[column].index !== undefined) {\n col.index = json[column].index;\n }\n else {\n throw Error('Column index is missing.');\n }\n if (json[column].width !== null && json[column].width !== undefined) {\n col.width = json[column].width;\n }\n sheet.columns.push(col);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRows = function (json, sheet) {\n var rowsLength = json.length;\n sheet.rows = new Rows();\n var rowId = 0;\n for (var r = 0; r < rowsLength; r++) {\n var row = this.parserRow(json[r], rowId);\n rowId = row.index;\n sheet.rows.add(row);\n }\n this.insertMergedCellsStyle(sheet);\n };\n Workbook.prototype.insertMergedCellsStyle = function (sheet) {\n var _this = this;\n if (this.mergeCells.length > 0) {\n this.mergedCellsStyle.forEach(function (value, key) {\n var row = sheet.rows.filter(function (item) {\n return item.index === value.y;\n })[0];\n if (!isNullOrUndefined(row)) {\n var cell = row.cells.filter(function (item) {\n return item.index === value.x;\n })[0];\n if (!isNullOrUndefined(cell)) {\n cell.styleIndex = value.styleIndex;\n }\n else {\n var cells = row.cells.filter(function (item) {\n return item.index <= value.x;\n });\n var insertIndex = 0;\n if (cells.length > 0) {\n insertIndex = row.cells.indexOf(cells[cells.length - 1]) + 1;\n }\n row.cells.splice(insertIndex, 0, _this.createCell(value, key));\n }\n }\n else {\n var rows = sheet.rows.filter(function (item) {\n return item.index <= value.y;\n });\n var rowToInsert = new Row();\n rowToInsert.index = value.y;\n rowToInsert.cells = new Cells();\n rowToInsert.cells.add(_this.createCell(value, key));\n var insertIndex = 0;\n if (rows.length > 0) {\n insertIndex = sheet.rows.indexOf(rows[rows.length - 1]) + 1;\n }\n sheet.rows.splice(insertIndex, 0, rowToInsert);\n }\n });\n }\n };\n Workbook.prototype.createCell = function (value, key) {\n var cellToInsert = new Cell();\n cellToInsert.refName = key;\n cellToInsert.index = value.x;\n cellToInsert.cellStyle = new CellStyle();\n cellToInsert.styleIndex = value.styleIndex;\n return cellToInsert;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRow = function (json, rowIndex) {\n var row = new Row();\n //Row Height\n if (json.height !== null && json.height !== undefined) {\n row.height = json.height;\n }\n //Row index\n if (json.index !== null && json.index !== undefined) {\n row.index = json.index;\n }\n else {\n throw Error('Row index is missing.');\n }\n if (json.grouping !== null && json.grouping !== undefined) {\n this.parseGrouping(json.grouping, row);\n }\n this.parseCells(json.cells, row);\n return row;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseGrouping = function (json, row) {\n row.grouping = new Grouping();\n if (json.outlineLevel !== undefined) {\n row.grouping.outlineLevel = json.outlineLevel;\n }\n if (json.isCollapsed !== undefined) {\n row.grouping.isCollapsed = json.isCollapsed;\n }\n if (json.isHidden !== undefined) {\n row.grouping.isHidden = json.isHidden;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseCells = function (json, row) {\n row.cells = new Cells();\n var cellsLength = json !== undefined ? json.length : 0;\n var spanMin = 1;\n var spanMax = 1;\n var curCellIndex = 0;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n /* tslint:disable:no-any */\n var jsonCell = json[cellId];\n var cell = new Cell();\n //cell index\n if (jsonCell.index !== null && jsonCell.index !== undefined) {\n cell.index = jsonCell.index;\n }\n else {\n throw Error('Cell index is missing.');\n }\n if (cell.index < spanMin) {\n spanMin = cell.index;\n }\n else if (cell.index > spanMax) {\n spanMax = cell.index;\n }\n //Update the Cell name\n cell.refName = this.getCellName(row.index, cell.index);\n //Row span\n if (jsonCell.rowSpan !== null && jsonCell.rowSpan !== undefined) {\n cell.rowSpan = jsonCell.rowSpan - 1;\n }\n else {\n cell.rowSpan = 0;\n }\n //Column span\n if (jsonCell.colSpan !== null && jsonCell.colSpan !== undefined) {\n cell.colSpan = jsonCell.colSpan - 1;\n }\n else {\n cell.colSpan = 0;\n }\n //Hyperlink\n if (jsonCell.hyperlink !== null && jsonCell.hyperlink !== undefined) {\n var hyperLink = new HyperLink();\n if (jsonCell.hyperlink.target !== undefined) {\n hyperLink.target = jsonCell.hyperlink.target;\n if (jsonCell.hyperlink.displayText !== undefined) {\n cell.value = jsonCell.hyperlink.displayText;\n }\n else {\n cell.value = jsonCell.hyperlink.target;\n }\n cell.type = this.getCellValueType(cell.value);\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n cell.cellStyle = new CellStyle();\n /* tslint:disable-next-line:max-line-length */\n this.parserCellStyle((jsonCell.style !== undefined ? this.mergeOptions(jsonCell.style, this.hyperlinkStyle) : this.hyperlinkStyle), cell.cellStyle, 'string');\n cell.styleIndex = cell.cellStyle.index;\n }\n }\n // formulas\n if (jsonCell.formula !== null && jsonCell.formula !== undefined) {\n cell.formula = jsonCell.formula;\n cell.type = 'formula';\n }\n //Cell value\n if (jsonCell.value !== null && jsonCell.value !== undefined) {\n if (cell.formula !== undefined) {\n cell.value = 0;\n }\n else {\n cell.value = jsonCell.value;\n cell.type = this.getCellValueType(cell.value);\n }\n }\n if (jsonCell.style !== null && jsonCell.style !== undefined && cell.styleIndex === undefined) {\n cell.cellStyle = new CellStyle();\n if (cell.value instanceof Date) {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type, 14);\n }\n else {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type);\n }\n cell.styleIndex = cell.cellStyle.index;\n }\n else if (cell.value instanceof Date) {\n cell.cellStyle = new CellStyle();\n this.parserCellStyle({}, cell.cellStyle, cell.type, 14);\n cell.styleIndex = cell.cellStyle.index;\n }\n this.parseCellType(cell);\n this.mergeCells = this.processMergeCells(cell, row.index, this.mergeCells);\n row.cells.add(cell);\n curCellIndex = (cell.index + 1);\n }\n row.spans = (spanMin) + ':' + (spanMax);\n };\n Workbook.prototype.GetColors = function () {\n var colors;\n colors = new Map();\n /* tslint:disable */\n colors.set('WHITE', 'FFFFFFFF');\n /* tslint:disable */\n colors.set('SILVER', 'FFC0C0C0');\n /* tslint:disable */\n colors.set('GRAY', 'FF808080');\n /* tslint:disable */\n colors.set('BLACK', 'FF000000');\n /* tslint:disable */\n colors.set('RED', 'FFFF0000');\n /* tslint:disable */\n colors.set('MAROON', 'FF800000');\n /* tslint:disable */\n colors.set('YELLOW', 'FFFFFF00');\n /* tslint:disable */\n colors.set('OLIVE', 'FF808000');\n /* tslint:disable */\n colors.set('LIME', 'FF00FF00');\n /* tslint:disable */\n colors.set('GREEN', 'FF008000');\n /* tslint:disable */\n colors.set('AQUA', 'FF00FFFF');\n /* tslint:disable */\n colors.set('TEAL', 'FF008080');\n /* tslint:disable */\n colors.set('BLUE', 'FF0000FF');\n /* tslint:disable */\n colors.set('NAVY', 'FF000080');\n /* tslint:disable */\n colors.set('FUCHSIA', 'FFFF00FF');\n /* tslint:disable */\n colors.set('PURPLE', 'FF800080');\n return colors;\n };\n Workbook.prototype.processColor = function (colorVal) {\n if (colorVal.indexOf('#') === 0) {\n return colorVal.replace('#', 'FF');\n }\n colorVal = colorVal.toUpperCase();\n this.rgbColors = this.GetColors();\n if (this.rgbColors.has(colorVal)) {\n colorVal = this.rgbColors.get(colorVal);\n }\n else {\n colorVal = 'FF000000';\n }\n return colorVal;\n };\n Workbook.prototype.processCellValue = function (value, cell) {\n var cellValue = value;\n if (value.indexOf(\"\") !== -1 ||\n value.indexOf(\"\") !== -1 || value.indexOf(\"\") !== -1) {\n var processedVal = '';\n var startindex = value.indexOf('<', 0);\n var endIndex = value.indexOf('>', startindex + 1);\n if (startindex >= 0 && endIndex >= 0) {\n if (startindex !== 0) {\n processedVal += '' + this.processString(value.substring(0, startindex)) + '';\n }\n while (startindex >= 0 && endIndex >= 0) {\n endIndex = value.indexOf('>', startindex + 1);\n if (endIndex >= 0) {\n var subString = value.substring(startindex + 1, endIndex);\n startindex = value.indexOf('<', endIndex + 1);\n if (startindex < 0) {\n startindex = cellValue.length;\n }\n var text = cellValue.substring(endIndex + 1, startindex);\n if (text.length !== 0) {\n var subSplit = subString.split(' ');\n if (subSplit.length > 0) {\n processedVal += '';\n }\n if (subSplit.length > 1) {\n for (var _i = 0, subSplit_1 = subSplit; _i < subSplit_1.length; _i++) {\n var element = subSplit_1[_i];\n var start = element.trim().substring(0, 5);\n switch (start) {\n case 'size=':\n processedVal += '';\n break;\n case 'face=':\n processedVal += '';\n break;\n case 'color':\n processedVal += '';\n break;\n case 'href=':\n var hyperLink = new HyperLink();\n hyperLink.target = element.substring(6, element.length - 1).trim();\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n processedVal += '';\n break;\n }\n }\n }\n else if (subSplit.length === 1) {\n var style = subSplit[0].trim();\n switch (style) {\n case 'b':\n processedVal += '';\n break;\n case 'i':\n processedVal += '';\n break;\n case 'u':\n processedVal += '';\n break;\n }\n }\n processedVal += '' + this.processString(text) + '';\n }\n }\n }\n if (processedVal === '') {\n return cellValue;\n }\n return processedVal;\n }\n else {\n return cellValue;\n }\n }\n else {\n return cellValue;\n }\n };\n Workbook.prototype.applyGlobalStyle = function (json, cellStyle) {\n var index = 0;\n if (this.cellStyles.has(json.name)) {\n cellStyle.index = this.mStyles.filter(function (a) { return (a.name === json.name); })[0].index;\n cellStyle.name = json.name;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserCellStyle = function (json, cellStyle, cellType, defStyleIndex) {\n //name\n if (json.name !== null && json.name !== undefined) {\n if (cellStyle.isGlobalStyle) {\n cellStyle.name = json.name;\n }\n else {\n this.applyGlobalStyle(json, cellStyle);\n return;\n }\n }\n //background color\n if (json.backColor !== null && json.backColor !== undefined) {\n cellStyle.backColor = json.backColor;\n }\n //borders\n //leftBorder\n cellStyle.borders = new Borders();\n //AllBorder\n if (json.borders !== null && json.borders !== undefined) {\n this.parserBorder(json.borders, cellStyle.borders.all);\n }\n //leftborder\n if (json.leftBorder !== null && json.leftBorder !== undefined) {\n this.parserBorder(json.leftBorder, cellStyle.borders.left);\n }\n //rightBorder\n if (json.rightBorder !== null && json.rightBorder !== undefined) {\n this.parserBorder(json.rightBorder, cellStyle.borders.right);\n }\n //topBorder\n if (json.topBorder !== null && json.topBorder !== undefined) {\n this.parserBorder(json.topBorder, cellStyle.borders.top);\n }\n //bottomBorder\n if (json.bottomBorder !== null && json.bottomBorder !== undefined) {\n this.parserBorder(json.bottomBorder, cellStyle.borders.bottom);\n }\n //fontName\n if (json.fontName !== null && json.fontName !== undefined) {\n cellStyle.fontName = json.fontName;\n }\n //fontSize\n if (json.fontSize !== null && json.fontSize !== undefined) {\n cellStyle.fontSize = json.fontSize;\n }\n //fontColor\n if (json.fontColor !== null && json.fontColor !== undefined) {\n cellStyle.fontColor = json.fontColor;\n }\n //italic\n if (json.italic !== null && json.italic !== undefined) {\n cellStyle.italic = json.italic;\n }\n //bold\n if (json.bold !== null && json.bold !== undefined) {\n cellStyle.bold = json.bold;\n }\n //hAlign\n if (json.hAlign !== null && json.hAlign !== undefined) {\n cellStyle.hAlign = json.hAlign.toLowerCase();\n }\n //indent\n if (json.indent !== null && json.indent !== undefined) {\n cellStyle.indent = json.indent;\n if (!(cellStyle.hAlign === 'left' || cellStyle.hAlign === 'right')) {\n cellStyle.hAlign = 'left';\n }\n }\n if (json.rotation !== null && json.rotation !== undefined) {\n cellStyle.rotation = json.rotation;\n }\n //vAlign\n if (json.vAlign !== null && json.vAlign !== undefined) {\n cellStyle.vAlign = json.vAlign.toLowerCase();\n }\n //underline\n if (json.underline !== null && json.underline !== undefined) {\n cellStyle.underline = json.underline;\n }\n //strikeThrough\n if (json.strikeThrough !== null && json.strikeThrough !== undefined) {\n cellStyle.strikeThrough = json.strikeThrough;\n }\n //wrapText\n if (json.wrapText !== null && json.wrapText !== undefined) {\n cellStyle.wrapText = json.wrapText;\n }\n //numberFormat\n if (json.numberFormat !== null && json.numberFormat !== undefined) {\n if (json.type !== null && json.type !== undefined) {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, json.type);\n }\n else {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, cellType);\n }\n }\n else if (defStyleIndex !== undefined) {\n cellStyle.numFmtId = 14;\n cellStyle.numberFormat = 'GENERAL';\n }\n else {\n cellStyle.numberFormat = 'GENERAL';\n }\n cellStyle.index = this.processCellStyle(cellStyle);\n };\n Workbook.prototype.switchNumberFormat = function (numberFormat, type) {\n var format = this.getNumberFormat(numberFormat, type);\n if (format !== numberFormat) {\n var numFmt = this.mNumFmt.get(numberFormat);\n if (numFmt !== undefined) {\n numFmt.formatCode = format;\n if (this.mNumFmt.has(format)) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXfs = _a[_i];\n if (cellStyleXfs.numFmtId === numFmt.numFmtId) {\n cellStyleXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n for (var _b = 0, _c = this.mCellXfs; _b < _c.length; _b++) {\n var cellXfs = _c[_b];\n if (cellXfs.numFmtId === numFmt.numFmtId) {\n cellXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n }\n }\n }\n };\n Workbook.prototype.changeNumberFormats = function (value) {\n if (typeof value == \"string\") {\n var regex = new RegExp(this.currency, 'g');\n value = value.replace(regex, '[$' + this.currency + ']');\n }\n else if (typeof value == \"object\") {\n for (var i = 0; i < value.length; i++) {\n value[i] = value[i].replace(this.currency, '[$' + this.currency + ']');\n }\n }\n return value;\n };\n Workbook.prototype.getNumberFormat = function (numberFormat, type) {\n var returnFormat;\n switch (type) {\n case 'number':\n try {\n returnFormat = this.intl.getNumberPattern({ format: numberFormat, currency: this.currency, useGrouping: true }, true);\n if (this.currency.length > 1) {\n returnFormat = this.changeNumberFormats(returnFormat);\n }\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'datetime':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n case 'date':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n case 'time':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n default:\n returnFormat = numberFormat;\n break;\n }\n return returnFormat;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserBorder = function (json, border) {\n if (json.color !== null && json.color !== undefined) {\n border.color = json.color;\n }\n else {\n border.color = '#000000';\n }\n if (json.lineStyle !== null && json.lineStyle !== undefined) {\n border.lineStyle = json.lineStyle;\n }\n else {\n border.lineStyle = 'thin';\n }\n };\n Workbook.prototype.processCellStyle = function (style) {\n if (style.isGlobalStyle) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n var compareResult = this.compareStyle(style);\n if (!compareResult.result) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n //Return the index of the already existing style.\n return compareResult.index;\n }\n }\n };\n Workbook.prototype.processNumFormatId = function (style) {\n if (style.numberFormat !== 'GENERAL' && !this.mNumFmt.has(style.numberFormat)) {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n }\n };\n Workbook.prototype.isNewFont = function (toCompareStyle) {\n var result = false;\n var index = 0;\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n index++;\n var fontColor = undefined;\n if (toCompareStyle.fontColor !== undefined) {\n fontColor = ('FF' + toCompareStyle.fontColor.replace('#', ''));\n }\n result = font.color === fontColor &&\n font.b === toCompareStyle.bold &&\n font.i === toCompareStyle.italic &&\n font.u === toCompareStyle.underline &&\n font.strike === toCompareStyle.strikeThrough &&\n font.name === toCompareStyle.fontName &&\n font.sz === toCompareStyle.fontSize;\n if (result) {\n break;\n }\n }\n index = index - 1;\n return { index: index, result: result };\n };\n Workbook.prototype.isNewBorder = function (toCompareStyle) {\n var bStyle = new CellStyle();\n if (this.isAllBorder(toCompareStyle.borders)) {\n return (bStyle.borders.all.color === toCompareStyle.borders.all.color &&\n bStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle);\n }\n else {\n return (bStyle.borders.left.color === toCompareStyle.borders.left.color &&\n bStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n bStyle.borders.right.color === toCompareStyle.borders.right.color &&\n bStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n bStyle.borders.top.color === toCompareStyle.borders.top.color &&\n bStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n bStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n bStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle);\n }\n };\n Workbook.prototype.isAllBorder = function (toCompareBorder) {\n var allBorderStyle = new CellStyle();\n return allBorderStyle.borders.all.color !== toCompareBorder.all.color &&\n allBorderStyle.borders.all.lineStyle !== toCompareBorder.all.lineStyle;\n };\n Workbook.prototype.compareStyle = function (toCompareStyle) {\n var result = true;\n var index = 0;\n var globalStyleIndex = 0;\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var baseStyle = _a[_i];\n result = baseStyle.isGlobalStyle ? false : (baseStyle.backColor === toCompareStyle.backColor &&\n baseStyle.bold === toCompareStyle.bold &&\n baseStyle.numFmtId === toCompareStyle.numFmtId &&\n baseStyle.numberFormat === toCompareStyle.numberFormat &&\n baseStyle.type === toCompareStyle.type &&\n baseStyle.fontColor === toCompareStyle.fontColor &&\n baseStyle.fontName === toCompareStyle.fontName &&\n baseStyle.fontSize === toCompareStyle.fontSize &&\n baseStyle.hAlign === toCompareStyle.hAlign &&\n baseStyle.italic === toCompareStyle.italic &&\n baseStyle.underline === toCompareStyle.underline &&\n baseStyle.strikeThrough === toCompareStyle.strikeThrough &&\n baseStyle.vAlign === toCompareStyle.vAlign &&\n baseStyle.indent === toCompareStyle.indent &&\n baseStyle.rotation === toCompareStyle.rotation &&\n baseStyle.wrapText === toCompareStyle.wrapText &&\n (baseStyle.borders.all.color === toCompareStyle.borders.all.color &&\n baseStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle) &&\n (baseStyle.borders.left.color === toCompareStyle.borders.left.color &&\n baseStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n baseStyle.borders.right.color === toCompareStyle.borders.right.color &&\n baseStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n baseStyle.borders.top.color === toCompareStyle.borders.top.color &&\n baseStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n baseStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n baseStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle));\n if (result) {\n index = baseStyle.index;\n break;\n }\n }\n return { index: index, result: result };\n };\n Workbook.prototype.contains = function (array, item) {\n var index = array.indexOf(item);\n return index > -1 && index < array.length;\n };\n Workbook.prototype.getCellValueType = function (value) {\n if (value instanceof Date) {\n return 'datetime';\n }\n else if (typeof (value) === 'boolean') {\n return 'boolean';\n }\n else if (typeof (value) === 'number') {\n return 'number';\n }\n else {\n return 'string';\n }\n };\n Workbook.prototype.parseCellType = function (cell) {\n var type = cell.type;\n var saveType;\n var value = cell.value;\n switch (type) {\n case 'datetime':\n value = this.toOADate(value);\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n var value_1 = this.globalStyles.get(cell.cellStyle.name);\n this.switchNumberFormat(value_1.format, value_1.type);\n }\n }\n saveType = 'n';\n break;\n //TODO: Update the number format index and style\n case 'boolean':\n value = value ? 1 : 0;\n saveType = 'b';\n break;\n case 'number':\n saveType = 'n';\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n this.switchNumberFormat(this.globalStyles.get(cell.cellStyle.name).format, 'number');\n }\n }\n break;\n case 'string':\n this.sharedStringCount++;\n saveType = 's';\n var sstvalue = this.processCellValue(value, cell);\n if (!this.contains(this.sharedString, sstvalue)) {\n this.sharedString.push(sstvalue);\n }\n value = this.sharedString.indexOf(sstvalue);\n break;\n default:\n break;\n }\n cell.saveType = saveType;\n cell.value = value;\n };\n Workbook.prototype.parserImages = function (json, sheet) {\n var imagesLength = json.length;\n sheet.images = [];\n var imageId = 0;\n for (var p = 0; p < imagesLength; p++) {\n var image = this.parserImage(json[p]);\n sheet.images.push(image);\n }\n };\n Workbook.prototype.parseFilters = function (json, sheet) {\n sheet.autoFilters = new AutoFilters();\n if (json.row !== null && json.row !== undefined)\n sheet.autoFilters.row = json.row;\n else\n throw new Error('Argument Null Exception: row null or empty');\n if (json.lastRow !== null && json.lastRow !== undefined)\n sheet.autoFilters.lastRow = json.lastRow;\n else\n throw new Error('Argument Null Exception: lastRow cannot be null or empty');\n if (json.column !== null && json.column !== undefined)\n sheet.autoFilters.column = json.column;\n else\n throw new Error('Argument Null Exception: column cannot be null or empty');\n if (json.lastColumn !== null && json.row !== undefined)\n sheet.autoFilters.lastColumn = json.lastColumn;\n else\n throw new Error('Argument Null Exception: lastColumn cannot be null or empty');\n };\n Workbook.prototype.parserImage = function (json) {\n var image = new Image();\n if (json.image !== null && json.image !== undefined) {\n image.image = json.image;\n }\n if (json.row !== null && json.row !== undefined) {\n image.row = json.row;\n }\n if (json.column !== null && json.column !== undefined) {\n image.column = json.column;\n }\n if (json.lastRow !== null && json.lastRow !== undefined) {\n image.lastRow = json.lastRow;\n }\n if (json.lastColumn !== null && json.lastColumn !== undefined) {\n image.lastColumn = json.lastColumn;\n }\n if (json.width !== null && json.width !== undefined) {\n image.width = json.width;\n }\n if (json.height !== null && json.height !== undefined) {\n image.height = json.height;\n }\n if (json.horizontalFlip !== null && json.horizontalFlip !== undefined) {\n image.horizontalFlip = json.horizontalFlip;\n }\n if (json.verticalFlip !== null && json.verticalFlip !== undefined) {\n image.verticalFlip = json.verticalFlip;\n }\n if (json.rotation !== null && json.rotation !== undefined) {\n image.rotation = json.rotation;\n }\n return image;\n };\n /**\n * Returns a Promise with a Blob based on the specified BlobSaveType and optional encoding.\n * @param {BlobSaveType} blobSaveType - A string indicating the type of Blob to generate ('text/csv' or other).\n * @param {string} [encodingType] - The supported encoding types are \"ansi\", \"unicode\" and \"utf8\".\n */\n /* tslint:disable:no-any */\n Workbook.prototype.saveAsBlob = function (blobSaveType, encodingType) {\n var _this = this;\n switch (blobSaveType) {\n case 'text/csv':\n return new Promise(function (resolve, reject) {\n var obj = {};\n obj.blobData = _this.csvHelper.saveAsBlob(encodingType);\n resolve(obj);\n });\n default:\n return new Promise(function (resolve, reject) {\n _this.saveInternal();\n _this.mArchive.saveAsBlob().then(function (blob) {\n var obj = {};\n obj.blobData = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n resolve(obj);\n });\n });\n }\n };\n Workbook.prototype.save = function (fileName, proxyUrl) {\n var _this = this;\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('Argument Null Exception: fileName cannot be null or empty');\n }\n var xlsxMatch = fileName.match('.xlsx$');\n var csvMatch = fileName.match('.csv$');\n if (xlsxMatch !== null && xlsxMatch[0] === ('.' + this.mSaveType)) {\n this.saveInternal();\n this.mArchive.save(fileName).then(function () {\n _this.mArchive.destroy();\n });\n }\n else if (csvMatch !== null && csvMatch[0] === ('.' + this.mSaveType)) {\n this.csvHelper.save(fileName);\n }\n else {\n throw Error('Save type and file extension is different.');\n }\n };\n Workbook.prototype.saveInternal = function () {\n this.saveWorkbook();\n this.saveWorksheets();\n this.saveSharedString();\n this.saveStyles();\n this.saveApp(this.builtInProperties);\n this.saveCore(this.builtInProperties);\n this.saveContentType();\n this.saveTopLevelRelation();\n this.saveWorkbookRelation();\n };\n Workbook.prototype.saveWorkbook = function () {\n /* tslint:disable-next-line:max-line-length */\n var workbookTemp = '';\n var sheets = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n var sheetName = this.worksheets[i].name;\n sheetName = sheetName.replace(\"&\", \"&\");\n sheetName = sheetName.replace(\"<\", \"<\");\n sheetName = sheetName.replace(\">\", \">\");\n sheetName = sheetName.replace(\"\\\"\", \""\");\n sheets += '';\n }\n sheets += '';\n workbookTemp += sheets;\n if (this.printTitles.size > 0) {\n var printTitle_1 = '';\n this.printTitles.forEach(function (value, key) {\n printTitle_1 += '' + value + '';\n });\n printTitle_1 += '';\n workbookTemp += printTitle_1;\n }\n this.addToArchive(workbookTemp + '', 'xl/workbook.xml');\n };\n Workbook.prototype.saveWorksheets = function () {\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n this.saveWorksheet(this.worksheets[i], i);\n }\n };\n Workbook.prototype.saveWorksheet = function (sheet, index) {\n var sheetBlob = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetString = '';\n if (!sheet.isSummaryRowBelow) {\n sheetString += ('' + '' + '' + '');\n }\n else {\n sheetString += ('');\n }\n sheetString += this.saveSheetView(sheet);\n if (sheet.columns !== undefined) {\n var colString = '';\n for (var _i = 0, _a = sheet.columns; _i < _a.length; _i++) {\n var column = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n if (column.width !== undefined) {\n colString += '';\n }\n else {\n colString += '';\n }\n }\n sheetString += (colString + '');\n }\n sheetString += ('');\n sheetBlob.append(sheetString);\n sheetString = '';\n if (sheet.rows !== undefined) {\n for (var _b = 0, _c = sheet.rows; _b < _c.length; _b++) {\n var row = _c[_b];\n var rowString = '');\n for (var _d = 0, _e = row.cells; _d < _e.length; _d++) {\n var cell = _e[_d];\n if (cell !== undefined && (cell.value !== undefined || cell.cellStyle !== undefined)) {\n rowString += ('');\n if (cell.formula !== undefined) {\n rowString += ('' + cell.formula + '');\n }\n if (cell.value !== undefined) {\n rowString += ('' + cell.value + '');\n }\n else {\n rowString += ('');\n }\n }\n }\n rowString += ('
');\n sheetBlob.append(rowString);\n }\n }\n sheetString += ('');\n /* tslint:disable-next-line:max-line-length */\n if (sheet.autoFilters !== null && sheet.autoFilters !== undefined)\n sheetString += ('');\n if (sheet.mergeCells.length > 0) {\n sheetString += ('');\n for (var _f = 0, _g = sheet.mergeCells; _f < _g.length; _f++) {\n var mCell = _g[_f];\n sheetString += ('');\n }\n sheetString += ('');\n }\n if (sheet.hyperLinks.length > 0) {\n sheetString += ('');\n for (var _h = 0, _j = sheet.hyperLinks; _h < _j.length; _h++) {\n var hLink = _j[_h];\n sheetString += ('');\n }\n sheetString += ('');\n }\n /* tslint:disable-next-line:max-line-length */\n sheetString += ('');\n if (sheet.images != undefined && sheet.images.length > 0) {\n this.drawingCount++;\n this.saveDrawings(sheet, sheet.index);\n sheetString += '';\n }\n this.addToArchive(this.saveSheetRelations(sheet), ('xl/worksheets/_rels/sheet' + sheet.index + '.xml.rels'));\n sheetBlob.append(sheetString + '');\n this.addToArchive(sheetBlob.getBlob(), 'xl/worksheets' + '/sheet' + (index + 1) + '.xml');\n };\n Workbook.prototype.saveDrawings = function (sheet, index) {\n var drawings = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetDrawingString = '';\n if (sheet.images !== undefined) {\n var imgId = 0;\n for (var _i = 0, _a = sheet.images; _i < _a.length; _i++) {\n var pic = _a[_i];\n if (pic.height !== undefined && pic.width !== undefined) {\n this.updatelastRowOffset(sheet, pic);\n this.updatelastColumnOffSet(sheet, pic);\n pic.lastRow -= 1;\n pic.lastColumn -= 1;\n }\n else if (pic.lastRow !== undefined && pic.lastColumn !== undefined) {\n pic.lastRowOffset = 0;\n pic.lastColOffset = 0;\n }\n imgId++;\n sheetDrawingString += '';\n sheetDrawingString += '';\n //col\n sheetDrawingString += pic.column - 1;\n sheetDrawingString += '';\n //colOff\n sheetDrawingString += 0;\n sheetDrawingString += '';\n //row\n sheetDrawingString += pic.row - 1;\n sheetDrawingString += '';\n //rowOff\n sheetDrawingString += 0;\n sheetDrawingString += '';\n sheetDrawingString += '';\n //col\n sheetDrawingString += pic.lastColumn;\n sheetDrawingString += '';\n //colOff\n sheetDrawingString += pic.lastColOffset;\n sheetDrawingString += '';\n //row\n sheetDrawingString += pic.lastRow;\n sheetDrawingString += '';\n //rowOff\n sheetDrawingString += pic.lastRowOffset;\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += ' ';\n sheetDrawingString += ' ';\n sheetDrawingString += '';\n /* tslint:disable-next-line:max-line-length */\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '= -3600) {\n sheetDrawingString += ' rot=\"' + (pic.rotation * 60000) + '\"';\n }\n if (pic.verticalFlip != undefined && pic.verticalFlip != false) {\n sheetDrawingString += ' flipV=\"1\"';\n }\n if (pic.horizontalFlip != undefined && pic.horizontalFlip != false) {\n sheetDrawingString += ' flipH=\"1\"';\n }\n sheetDrawingString += '/>';\n sheetDrawingString += '';\n sheetDrawingString += '';\n var imageFile = new BlobHelper();\n var imageData = this.convertBase64toImage(pic.image);\n this.imageCount += 1;\n this.addToArchive(imageData, 'xl/media/image' + this.imageCount + '.png');\n }\n drawings.append(sheetDrawingString);\n drawings.append('');\n this.saveDrawingRelations(sheet);\n this.addToArchive(drawings.getBlob(), 'xl/drawings/drawing' + this.drawingCount + '.xml');\n }\n };\n Workbook.prototype.updatelastRowOffset = function (sheet, picture) {\n var iCurHeight = picture.height;\n var iCurRow = picture.row;\n var iCurOffset = 0;\n while (iCurHeight >= 0) {\n var iRowHeight = 0;\n if (sheet.rows !== undefined && sheet.rows[iCurRow - 1] !== undefined)\n iRowHeight = this.convertToPixels(sheet.rows[iCurRow - 1].height === undefined ? 15 : sheet.rows[iCurRow - 1].height);\n else\n iRowHeight = this.convertToPixels(15);\n var iSpaceInCell = iRowHeight - (iCurOffset * iRowHeight / 256);\n if (iSpaceInCell > iCurHeight) {\n picture.lastRow = iCurRow;\n picture.lastRowOffset = iCurOffset + (iCurHeight * 256 / iRowHeight);\n var rowHiddenHeight = 0;\n if (sheet.rows !== undefined && sheet.rows[iCurRow - 1] !== undefined)\n rowHiddenHeight = this.convertToPixels(sheet.rows[iCurRow - 1].height === undefined ? 15 : sheet.rows[iCurRow - 1].height);\n else\n rowHiddenHeight = this.convertToPixels(15);\n picture.lastRowOffset = (rowHiddenHeight * picture.lastRowOffset) / 256;\n picture.lastRowOffset = Math.round(picture.lastRowOffset / this.unitsProportions[7]);\n break;\n }\n else {\n iCurHeight -= iSpaceInCell;\n iCurRow++;\n iCurOffset = 0;\n }\n }\n };\n Workbook.prototype.updatelastColumnOffSet = function (sheet, picture) {\n var iCurWidth = picture.width;\n var iCurCol = picture.column;\n var iCurOffset = 0;\n while (iCurWidth >= 0) {\n var iColWidth = 0;\n if (sheet.columns !== undefined && sheet.columns[iCurCol - 1] !== undefined)\n iColWidth = this.ColumnWidthToPixels(sheet.columns[iCurCol - 1].width === undefined ? 8.43 : sheet.columns[iCurCol - 1].width);\n else\n iColWidth = this.ColumnWidthToPixels(8.43);\n var iSpaceInCell = iColWidth - (iCurOffset * iColWidth / 1024);\n if (iSpaceInCell > iCurWidth) {\n picture.lastColumn = iCurCol;\n picture.lastColOffset = iCurOffset + (iCurWidth * 1024 / iColWidth);\n var colHiddenWidth = 0;\n if (sheet.columns !== undefined && sheet.columns[iCurCol - 1] !== undefined)\n colHiddenWidth = this.ColumnWidthToPixels(sheet.columns[iCurCol - 1].width === undefined ? 8.43 : sheet.columns[iCurCol - 1].width);\n else\n colHiddenWidth = this.ColumnWidthToPixels(8.43);\n picture.lastColOffset = (colHiddenWidth * picture.lastColOffset) / 1024;\n picture.lastColOffset = Math.round(picture.lastColOffset / this.unitsProportions[7]);\n break;\n }\n else {\n iCurWidth -= iSpaceInCell;\n iCurCol++;\n iCurOffset = 0;\n }\n }\n };\n Workbook.prototype.convertToPixels = function (value) {\n return value * this.unitsProportions[6];\n };\n Workbook.prototype.convertBase64toImage = function (img) {\n var byteStr = window.atob(img);\n var buffer = new ArrayBuffer(byteStr.length);\n var data = new Uint8Array(buffer);\n for (var i = 0; i < byteStr.length; i++) {\n data[i] = byteStr.charCodeAt(i);\n }\n var blob = new Blob([data], { type: 'image/png' });\n return blob;\n };\n Workbook.prototype.saveDrawingRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var drawingRelation = '';\n var length = sheet.images.length;\n var id = this.imageCount - sheet.images.length;\n for (var i = 1; i <= length; i++) {\n id++;\n /* tslint:disable-next-line:max-line-length */\n drawingRelation += '';\n }\n this.addToArchive((drawingRelation + ''), 'xl/drawings/_rels/drawing' + this.drawingCount + '.xml.rels');\n };\n Workbook.prototype.pixelsToColumnWidth = function (pixels) {\n var dDigitWidth = 7;\n var val = (pixels > dDigitWidth + 5) ?\n this.trunc((pixels - 5) / dDigitWidth * 100 + 0.5) / 100 :\n pixels / (dDigitWidth + 5);\n return (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n };\n Workbook.prototype.ColumnWidthToPixels = function (val) {\n var dDigitWidth = 7;\n var fileWidth = (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n return this.trunc(((256 * fileWidth + this.trunc(128 / dDigitWidth)) / 256) * dDigitWidth);\n };\n Workbook.prototype.trunc = function (x) {\n var n = x - x % 1;\n return n === 0 && (x < 0 || (x === 0 && (1 / x !== 1 / 0))) ? -0 : n;\n };\n Workbook.prototype.pixelsToRowHeight = function (pixels) {\n return (pixels * this.unitsProportions[5] / this.unitsProportions[6]);\n };\n Workbook.prototype.saveSheetRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var relStr = '';\n for (var _i = 0, _a = sheet.hyperLinks; _i < _a.length; _i++) {\n var hLink = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n relStr += '';\n }\n if (sheet.images != undefined && sheet.images.length > 0) {\n /* tslint:disable-next-line:max-line-length */\n relStr += '';\n }\n relStr += '';\n return relStr;\n };\n Workbook.prototype.saveSheetView = function (sheet) {\n var paneString = ' 0) {\n /* tslint:disable-next-line:max-line-length */\n var sstStart = '';\n var si = '';\n for (var i = 0; i < length; i++) {\n if (this.sharedString[i].indexOf('') !== 0) {\n si += '';\n si += this.processString(this.sharedString[i]);\n si += '';\n }\n else {\n si += '';\n si += this.sharedString[i];\n si += '';\n }\n }\n si += '';\n this.addToArchive(sstStart + si, 'xl/sharedStrings.xml');\n }\n };\n Workbook.prototype.processString = function (value) {\n if (typeof value == \"string\") {\n if (value.indexOf('&') !== -1) {\n value = value.replace(/&/g, '&');\n }\n if (value.indexOf('<') !== -1) {\n value = value.replace(/') !== -1) {\n value = value.replace(/>/g, '>');\n }\n if (value.indexOf('\\v') !== -1) {\n value = value.replace(/\\v/g, '_x000B_');\n }\n }\n else if (typeof value == \"object\") {\n for (var i = 0; i < value.length; i++) {\n if (value[i].indexOf('&') !== -1) {\n value[i] = value[i].replace(/&/g, '&');\n }\n if (value[i].indexOf('<') !== -1) {\n value[i] = value[i].replace(/') !== -1) {\n value[i] = value[i].replace(/>/g, '>');\n }\n if (value[i].indexOf('\\v') !== -1) {\n value[i] = value[i].replace(/\\v/g, '_x000B_');\n }\n }\n }\n return value;\n };\n Workbook.prototype.saveStyles = function () {\n this.updateCellXfsStyleXfs();\n /* tslint:disable-next-line:max-line-length */\n var styleTemp = '';\n styleTemp += this.saveNumberFormats();\n styleTemp += this.saveFonts();\n styleTemp += this.saveFills();\n styleTemp += this.saveBorders();\n styleTemp += this.saveCellStyleXfs();\n styleTemp += this.saveCellXfs();\n styleTemp += this.saveCellStyles();\n this.addToArchive(styleTemp + '', 'xl/styles.xml');\n };\n Workbook.prototype.updateCellXfsStyleXfs = function () {\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var style = _a[_i];\n var cellXfs = undefined;\n if (style.isGlobalStyle) {\n cellXfs = new CellStyleXfs();\n cellXfs.xfId = (style.index - 1);\n }\n else {\n cellXfs = new CellXfs();\n cellXfs.xfId = 0;\n }\n //Add font\n var compareFontResult = this.isNewFont(style);\n if (!compareFontResult.result) {\n var font = new Font();\n font.b = style.bold;\n font.i = style.italic;\n font.name = style.fontName;\n font.sz = style.fontSize;\n font.u = style.underline;\n font.strike = style.strikeThrough;\n font.color = ('FF' + style.fontColor.replace('#', ''));\n this.mFonts.push(font);\n cellXfs.fontId = this.mFonts.length - 1;\n }\n else {\n cellXfs.fontId = compareFontResult.index;\n }\n //Add fill\n if (style.backColor !== 'none') {\n var backColor = 'FF' + style.backColor.replace('#', '');\n if (this.mFills.has(backColor)) {\n var fillId = this.mFills.get(backColor);\n cellXfs.fillId = fillId;\n }\n else {\n var fillId = this.mFills.size + 2;\n this.mFills.set(backColor, fillId);\n cellXfs.fillId = (fillId);\n }\n }\n else {\n cellXfs.fillId = 0;\n }\n //Add border \n if (!this.isNewBorder(style)) {\n this.mBorders.push(style.borders);\n cellXfs.borderId = this.mBorders.length;\n }\n else {\n cellXfs.borderId = 0;\n }\n //Add Number Format \n if (style.numberFormat !== 'GENERAL') {\n if (this.mNumFmt.has(style.numberFormat)) {\n var numFmt = this.mNumFmt.get(style.numberFormat);\n cellXfs.numFmtId = numFmt.numFmtId;\n }\n else {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n cellXfs.numFmtId = id;\n }\n }\n else {\n if (style.numberFormat === 'GENERAL' && style.numFmtId === 14) {\n cellXfs.numFmtId = 14;\n }\n else {\n cellXfs.numFmtId = 0;\n }\n }\n //Add alignment \n if (!style.isGlobalStyle) {\n cellXfs.applyAlignment = 1;\n }\n cellXfs.alignment = new Alignment();\n cellXfs.alignment.indent = style.indent;\n cellXfs.alignment.horizontal = style.hAlign;\n cellXfs.alignment.vertical = style.vAlign;\n cellXfs.alignment.wrapText = style.wrapText ? 1 : 0;\n cellXfs.alignment.rotation = style.rotation;\n if (style.isGlobalStyle) {\n this.mCellStyleXfs.push(cellXfs);\n this.mCellXfs.push(cellXfs);\n }\n else {\n //Add cellxfs\n this.mCellXfs.push(cellXfs);\n }\n }\n };\n Workbook.prototype.saveNumberFormats = function () {\n if (this.mNumFmt.size >= 1) {\n var numFmtStyle_1 = '';\n this.mNumFmt.forEach(function (value, key) {\n numFmtStyle_1 += '';\n });\n return (numFmtStyle_1 += '');\n }\n else {\n return '';\n }\n };\n Workbook.prototype.saveFonts = function () {\n /* tslint:disable-next-line:max-line-length */\n var fontStyle = '';\n if (this.mFonts.length >= 1) {\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n fontStyle += '';\n if (font.b) {\n fontStyle += '';\n }\n if (font.i) {\n fontStyle += '';\n }\n if (font.u) {\n fontStyle += '';\n }\n if (font.strike) {\n fontStyle += '\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n *\n * @param {ToolbarModel} options - Specifies Toolbar model properties as options.\n * @param { string | HTMLElement} 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 _this.orientationChangeContext = _this.orientationChange.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 *\n * @returns {void}.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n var btnItems = this.element.querySelectorAll('.e-control.e-btn');\n [].slice.call(btnItems).forEach(function (el) {\n if (!isNOU(el) && !isNOU(el.ej2_instances) && !isNOU(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {\n el.ej2_instances[0].destroy();\n }\n });\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 this.destroyItems();\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n this.trgtEle = null;\n this.ctrlTem = null;\n }\n if (this.popObj) {\n this.popObj.destroy();\n detach(this.popObj.element);\n }\n if (this.activeEle) {\n this.activeEle = null;\n }\n this.popObj = null;\n this.tbarAlign = null;\n this.tbarItemsCol = [];\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', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n _super.prototype.destroy.call(this);\n };\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\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 window.addEventListener('orientationchange', this.orientationChangeContext);\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.updateTabIndex('0');\n };\n Toolbar.prototype.updateTabIndex = function (tabIndex) {\n var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n if (!isNOU(ele) && !isNOU(ele.firstElementChild)) {\n var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');\n if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {\n ele.firstElementChild.setAttribute('tabindex', tabIndex);\n }\n }\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 window.removeEventListener('orientationchange', this.orientationChangeContext);\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 if (this.element) {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n }\n if (this.tbarAlign) {\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\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 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 var value = e.action === 'moveUp' ? 'previous' : 'next';\n var ele;\n var nodes;\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 if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {\n popupCheck = e.action === 'end' ? extendedPopup : null;\n }\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\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)) {\n popEle.lastElementChild.firstChild.focus();\n }\n else if (value === 'next' && popEle.lastElementChild === clst) {\n popFrstEle.firstChild.focus();\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 }\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 tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n var 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 *\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 if (value) {\n rootEle.classList.add(CLS_DISABLE);\n }\n else {\n rootEle.classList.remove(CLS_DISABLE);\n }\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));\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 return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);\n };\n Toolbar.prototype.focusFirstVisibleEle = function (nodes) {\n var element;\n var index = 0;\n while (index < nodes.length) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index++;\n }\n return element;\n };\n Toolbar.prototype.focusLastVisibleEle = function (nodes) {\n var element;\n var index = nodes.length - 1;\n while (index >= 0) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index--;\n }\n return element;\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 else if (!isNOU(closest)) {\n var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');\n if (pos === 'next' && tbrItems) {\n this.elementFocus(tbrItems[0]);\n }\n else if (pos === 'previous' && tbrItems) {\n this.elementFocus(tbrItems[tbrItems.length - 1]);\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var clsList = trgt.classList;\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 itemObj = tempItem;\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 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 *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshOverflow();\n });\n }\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',\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) ? 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 innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());\n if (innerPos) {\n if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {\n this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n if (this.isReact) {\n var portals = 'portals';\n this.notify('render-react-toolbar-template', this[\"\" + portals]);\n this.renderReactTemplates();\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\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 if (this.cssClass) {\n addClass([innerItems[0]], this.cssClass.split(' '));\n }\n var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR + ', .' + 'e-vscroll-bar');\n if (scrollEle) {\n scrollEle.removeAttribute('tabindex');\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 *\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 var ariaAttr = {\n 'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',\n 'aria-label': 'overflow'\n };\n attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n var 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[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[parseInt(i.toString(), 10)].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 poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\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[parseInt(index.toString(), 10)]);\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[parseInt(i.toString(), 10)];\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 sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR);\n sepHeight =\n (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);\n }\n var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {\n ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);\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 if (this.cssClass) {\n addClass([ele], this.cssClass.split(' '));\n }\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 if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n popup.appendTo(ele);\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n 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 }\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 if (isOpen) {\n this.add(this.element, CLS_EXTENDEDPOPOPEN);\n }\n else {\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 popupNav.setAttribute('aria-expanded', 'true');\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[parseInt(i.toString(), 10)];\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 var popupOffset = popupEle.getBoundingClientRect();\n if (popupOffset.right > document.documentElement.clientWidth && popupOffset.width > toolEle.getBoundingClientRect().width) {\n popObj.collision = { Y: 'none' };\n popObj.dataBind();\n }\n popObj.refreshPosition();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'false');\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[parseInt(i.toString(), 10)]);\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[parseInt(i.toString(), 10)] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n var sepEle = inEle[parseInt(i.toString(), 10)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n itemPopCount++;\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[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].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', 'button');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {\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 eleSep.style.display = 'unset';\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 setStyle(el, eleStyles);\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = 'none';\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 innerEle = ele.querySelector('.' + CLS_ITEMS);\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\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 }\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 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 var inlineStyles = { minWidth: el.style.minWidth, height: el.style.height, minHeight: el.style.minHeight };\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[parseInt(index.toString(), 10)].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, inlineStyles);\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 var 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 if (this.enableRtl) {\n innerItem[2].style.top = popWid;\n }\n else {\n innerItem[2].style.bottom = popWid;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[2].style.left = popWid;\n }\n else {\n innerItem[2].style.right = popWid;\n }\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 if (this.enableRtl) {\n innerItem[1].style.marginBottom = mrgn;\n }\n else {\n innerItem[1].style.marginTop = mrgn;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[1].style.marginRight = mrgn;\n }\n else {\n innerItem[1].style.marginLeft = mrgn;\n }\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 if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\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[parseInt(i.toString(), 10)];\n if (keyVal === 'class') {\n this.add(element, attr[\"\" + keyVal]);\n }\n else {\n element.setAttribute(keyVal, attr[\"\" + keyVal]);\n }\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n *\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 if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n }\n else {\n ele.classList.add(CLS_DISABLE);\n if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'true');\n }\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[parseInt(a.toString(), 10)];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[parseInt(a.toString(), 10)] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n if (isEnable) {\n removeClass(elements, CLS_DISABLE);\n }\n else {\n addClass(elements, CLS_DISABLE);\n }\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[parseInt(index.toString(), 10)]) {\n return this.tbarEle[parseInt(index.toString(), 10)];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n *\n * @param {ItemModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns {void}.\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n 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[parseInt(algIndex.toString(), 10)];\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[parseInt(algIndex.toString(), 10)];\n ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);\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[parseInt(index.toString(), 10)]);\n }\n this.items.splice(index, 0, item);\n if (item.template) {\n this.tbarEle.splice(this.tbarEle.length - 1, 1);\n }\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n *\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns {void}.\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);\n if (this.tbarAlign) {\n var indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);\n this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);\n }\n if (this.isReact) {\n this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);\n }\n var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');\n if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {\n btnItem.ej2_instances[0].destroy();\n }\n detach(innerItems[parseInt(index.toString(), 10)]);\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 var regEx = new RegExp(/<(?=.*? .*?\\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\\/\\1>/i);\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (typeof (templateProp) === 'string' && regEx.test(val)) {\n innerEle.innerHTML = val;\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 else {\n templateFn = templateCompiler(val);\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, undefined, undefined, this.root);\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 if (item.id) {\n ele.id = item.id;\n }\n else {\n ele.id = getUniqueID('tbr-ipt');\n }\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n var firstChild = innerEle.firstElementChild;\n if (!isNOU(firstChild)) {\n firstChild.setAttribute('tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n firstChild.setAttribute('data-tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n }\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 if (item.id) {\n dom.id = item.id;\n }\n else {\n dom.id = getUniqueID('e-tbr-btn');\n }\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 dom;\n var innerEle = this.createElement('div', { className: CLS_ITEM });\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer && !isNOU(item.tooltipText) ?\n 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', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n dom.setAttribute('aria-disabled', 'false');\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.getDataTabindex = function (ele) {\n return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');\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', this.getDataTabindex(this.activeEle));\n }\n this.activeEle = curEle;\n if (this.getDataTabindex(this.activeEle) === '-1') {\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n this.updateTabIndex('-1');\n curEle.removeAttribute('tabindex');\n }\n else {\n var tabIndex = parseInt(this.getDataTabindex(this.activeEle)) + 1;\n this.activeEle.setAttribute('tabindex', tabIndex.toString());\n }\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - Returns the module name as 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 if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\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 if (this.element.querySelector('.' + CLS_HSCROLLBAR)) {\n this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR).offsetWidth;\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.orientationChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.resize();\n }, 500);\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 Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {\n if (isElement) {\n eleIndex = innerItems.indexOf(ele);\n }\n var nextEle = innerItems[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n var dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');\n if (isHidden && dataTabIndex === '-1') {\n nextEle.firstElementChild.setAttribute('tabindex', '0');\n }\n else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {\n nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);\n }\n break;\n }\n nextEle = innerItems[++eleIndex];\n }\n };\n Toolbar.prototype.clearToolbarTemplate = function (templateEle) {\n if (this.registeredTemplate && this.registeredTemplate[\"\" + 'template']) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[\"\" + 'template'].length; index++) {\n var registeredItem = registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], [registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[parseInt(index.toString(), 10)];\n var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], index);\n break;\n }\n }\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 *\n * @param {ToolbarModel} newProp - It contains new value of the data.\n * @param {ToolbarModel} oldProp - It contains old value of the data.\n * @returns {void}\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n var wid = tEle.offsetWidth;\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)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);\n var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];\n var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + 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[parseInt(index.toString(), 10)].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 if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {\n this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);\n }\n detach(itemCol[parseInt(index.toString(), 10)]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[parseInt(index.toString(), 10)]], index);\n this.items.splice(index, 1);\n if (this.items[parseInt(index.toString(), 10)].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.refreshOverflow();\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 if (newProp.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n else {\n this.remove(tEle, CLS_RTL);\n }\n if (!isNOU(this.scrollModule)) {\n if (newProp.enableRtl) {\n this.add(this.scrollModule.element, CLS_RTL);\n }\n else {\n this.remove(this.scrollModule.element, CLS_RTL);\n }\n }\n if (!isNOU(this.popObj)) {\n if (newProp.enableRtl) {\n this.add(this.popObj.element, CLS_RTL);\n }\n else {\n this.remove(this.popObj.element, CLS_RTL);\n }\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 *\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 ele;\n if (!isElement && isNOU(eleIndex)) {\n return;\n }\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[parseInt(eleIndex.toString(), 10)];\n }\n if (ele) {\n if (value) {\n ele.classList.add(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex')) ||\n ele.firstElementChild.getAttribute('tabindex') !== '-1') {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n }\n else {\n ele.classList.remove(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\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","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_RIGHTOVERLAY = 'e-scroll-right-overlay';\nvar CLS_LEFTOVERLAY = 'e-scroll-left-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n *\n * @param {HScrollModel} options - Specifies HScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the horizontal scroll rendering\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n ele.classList.remove(CLS_DEVICE);\n ele.classList.remove(CLS_RTL);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };\n var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };\n var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n [].slice.call(ele).forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n if (this.enableRtl && this.scrollEle.scrollLeft > 0) {\n this.scrollEle.scrollLeft = 0;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else if (addDisable && removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {HScrollModel} newProp - It contains the new value of data.\n * @param {HScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest as closestElement, removeClass, classList, remove } from '@syncfusion/ej2-base';\nimport { getElementIndex, inArray, parentsUntil, getPosition, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n *\n * The `Reorder` module is used for reordering columns.\n */\nvar Reorder = /** @class */ (function () {\n /**\n * Constructor for the Grid reorder module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Reorder(parent) {\n this.idx = 0;\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.reorderComplete, this.onActionComplete, this);\n this.parent.on(events.columnDrag, this.drag, this);\n this.parent.on(events.columnDragStart, this.dragStart, this);\n this.parent.on(events.columnDragStop, this.dragStop, this);\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.headerRefreshed, this.createReorderElement, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n Reorder.prototype.chkDropPosition = function (srcElem, destElem) {\n var col = this.parent.getColumnByUid(destElem.firstElementChild.getAttribute('e-mappinguid'));\n var bool = col ? !col.lockColumn : true;\n return ((srcElem.parentElement.isEqualNode(destElem.parentElement) || this.parent.enableColumnVirtualization)\n || (this.parent.isFrozenGrid()\n && Array.prototype.indexOf.call(closestElement(srcElem, 'thead').children, srcElem.parentElement)\n === Array.prototype.indexOf.call(closestElement(destElem, 'thead').children, destElem.parentElement)))\n && this.targetParentContainerIndex(srcElem, destElem) > -1 && bool;\n };\n Reorder.prototype.chkDropAllCols = function (srcElem, destElem) {\n var isFound;\n var headers = this.getHeaderCells();\n var header;\n while (!isFound && headers.length > 0) {\n header = headers.pop();\n isFound = srcElem !== header && this.targetParentContainerIndex(srcElem, destElem) > -1;\n }\n return isFound;\n };\n Reorder.prototype.findColParent = function (col, cols, parent) {\n // eslint-disable-next-line no-self-assign\n parent = parent;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (col === cols[parseInt(i.toString(), 10)]) {\n return true;\n }\n else if (cols[parseInt(i.toString(), 10)].columns) {\n var cnt = parent.length;\n parent.push(cols[parseInt(i.toString(), 10)]);\n if (!this.findColParent(col, cols[parseInt(i.toString(), 10)].columns, parent)) {\n parent.splice(cnt, parent.length - cnt);\n }\n else {\n return true;\n }\n }\n }\n return false;\n };\n Reorder.prototype.getColumnsModel = function (cols, isNotStackedHeader) {\n var columnModel = [];\n var subCols = [];\n for (var i = 0, len = cols.length; i < len; i++) {\n if (!isNullOrUndefined(cols[parseInt(i.toString(), 10)])) {\n if (cols[parseInt(i.toString(), 10)].visible) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n else if (isNotStackedHeader) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n if (cols[parseInt(i.toString(), 10)].columns) {\n subCols = subCols.concat(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n }\n if (subCols.length) {\n columnModel = columnModel.concat(this.getColumnsModel(subCols));\n }\n return columnModel;\n };\n Reorder.prototype.headerDrop = function (e) {\n var gObj = this.parent;\n var dropElement = this.element.querySelector('.e-headercelldiv') || this.element.querySelector('.e-stackedheadercelldiv');\n var uId = dropElement.getAttribute('e-mappinguid');\n var column = gObj.getColumnByUid(uId);\n if (!closestElement(e.target, 'th') || (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column });\n return;\n }\n var destElem = closestElement(e.target, '.e-headercell');\n var destElemDiv = destElem.querySelector('.e-headercelldiv') || destElem.querySelector('.e-stackedheadercelldiv');\n var destElemUid = destElemDiv.getAttribute('e-mappinguid');\n if (!isNullOrUndefined(destElemUid)) {\n var destColumn = gObj.getColumnByUid(destElemUid);\n if (isNullOrUndefined(destColumn) || !destColumn.allowReordering || destColumn.lockColumn) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column, destColumn: destColumn });\n return;\n }\n }\n if (destElem && !(!this.chkDropPosition(this.element, destElem) || !this.chkDropAllCols(this.element, destElem))) {\n if (this.parent.enableColumnVirtualization) {\n var columns = this.parent.columns;\n var sourceUid_1 = this.element.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n var col = this.parent.columns.filter(function (col) { return col.uid === sourceUid_1; });\n var colMatchIndex_1 = null;\n var column_1 = col[0];\n var destUid_1 = destElem.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n columns.some(function (col, index) {\n if (col.uid === destUid_1) {\n colMatchIndex_1 = index;\n return col.uid === destUid_1;\n }\n return false;\n });\n if (!isNullOrUndefined(colMatchIndex_1)) {\n this.moveColumns(colMatchIndex_1, column_1);\n }\n }\n else {\n var newIndex = this.targetParentContainerIndex(this.element, destElem);\n var uid = this.element.firstElementChild.getAttribute('e-mappinguid');\n this.destElement = destElem;\n this.parent.notify(events.setReorderDestinationElement, { ele: destElem });\n if (uid) {\n this.moveColumns(newIndex, this.parent.getColumnByUid(uid));\n }\n else {\n var headers = this.getHeaderCells();\n var oldIdx = getElementIndex(this.element, headers);\n var columns = this.getColumnsModel(this.parent.columns);\n this.moveColumns(newIndex, columns[parseInt(oldIdx.toString(), 10)]);\n }\n }\n }\n };\n Reorder.prototype.isActionPrevent = function (gObj) {\n return isActionPrevent(gObj);\n };\n Reorder.prototype.moveColumns = function (destIndex, column, reorderByColumn, preventRefresh) {\n var gObj = this.parent;\n if (this.isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.moveColumns, arg1: destIndex, arg2: column });\n return;\n }\n var parent = this.getColParent(column, this.parent.columns);\n var cols = parent ? parent.columns : this.parent.columns;\n var srcIdx = inArray(column, cols);\n if ((parent || this.parent.lockcolPositionCount) && !reorderByColumn &&\n !this.parent.enableColumnVirtualization) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === column.field) {\n srcIdx = i;\n break;\n }\n }\n var col = this.parent.getColumnByUid(this.destElement.firstElementChild.getAttribute('e-mappinguid'));\n if (col) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === col.field) {\n destIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].headerText === this.destElement.innerText.trim()) {\n destIndex = i;\n }\n }\n }\n }\n if (!gObj.allowReordering || srcIdx === destIndex || srcIdx === -1 || destIndex === -1) {\n return;\n }\n cols.splice(destIndex, 0, cols.splice(srcIdx, 1)[0]);\n var args = { column: column, destIndex: destIndex, columns: cols, parent: parent, cancel: false };\n gObj.notify(events.refreshFrozenColumns, args);\n if (args.cancel) {\n return;\n }\n if (this.parent.isFrozenGrid()) {\n if (this.parent.frozenColumns) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].freeze === 'Left') {\n cols[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n }\n else {\n if (this.parent.getFrozenLeftCount() > destIndex) {\n column.freeze = 'Left';\n }\n else if ((cols.length - this.parent.getFrozenRightColumnsCount()) <= destIndex) {\n column.freeze = 'Right';\n }\n else {\n column.freeze = column.freeze === 'Fixed' ? 'Fixed' : undefined;\n }\n }\n }\n gObj.getColumns(true);\n gObj.notify(events.columnPositionChanged, { fromIndex: destIndex, toIndex: srcIdx });\n if (preventRefresh !== false) {\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'reorder', fromIndex: destIndex, toIndex: srcIdx, toColumnUid: column.uid\n });\n }\n if (this.parent.isFrozenGrid()) {\n var cols_1 = this.parent.columns;\n this.idx = 0;\n this.refreshColumnIndex(cols_1);\n this.parent.notify(events.refreshFrozenPosition, {});\n }\n };\n Reorder.prototype.refreshColumnIndex = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].index = this.idx;\n this.idx++;\n if (cols[parseInt(i.toString(), 10)].columns && cols[parseInt(i.toString(), 10)].columns.length) {\n this.refreshColumnIndex(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n };\n Reorder.prototype.targetParentContainerIndex = function (srcElem, destElem) {\n var cols = this.parent.columns;\n var headers = this.getHeaderCells();\n var stackedHdrColumn = this.parent.getStackedColumns(cols);\n var stackedCols = [];\n if (stackedHdrColumn.length) {\n stackedCols = this.getAllStackedheaderParentColumns(headers);\n }\n var flatColumns = stackedHdrColumn.length && stackedCols.length ?\n this.getColumnsModel(stackedCols) : this.getColumnsModel(cols, true);\n var parent = this.getColParent(flatColumns[getElementIndex(srcElem, headers)], cols);\n cols = parent ? parent.columns : cols;\n return inArray(flatColumns[getElementIndex(destElem, headers)], cols);\n };\n Reorder.prototype.getAllStackedheaderParentColumns = function (headers) {\n var stackedCols = [];\n for (var i = 0; i < headers.length; i++) {\n if (headers[parseInt(i.toString(), 10)].classList.contains('e-hide')) {\n headers.splice(i, 1);\n i--;\n }\n else if (headers[parseInt(i.toString(), 10)].closest('thead').firstChild === headers[parseInt(i.toString(), 10)].parentElement) {\n stackedCols.push(this.parent.getColumnByUid(headers[parseInt(i.toString(), 10)].firstElementChild.getAttribute('e-mappinguid')));\n }\n }\n return stackedCols;\n };\n Reorder.prototype.getHeaderCells = function () {\n return [].slice.call(this.parent.element.getElementsByClassName('e-headercell'));\n };\n Reorder.prototype.getColParent = function (column, columns) {\n var parents = [];\n this.findColParent(column, columns, parents);\n return parents[parents.length - 1];\n };\n Reorder.prototype.reorderSingleColumn = function (fromFName, toFName) {\n var fColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === fromFName; })[0]\n : this.parent.getColumnByField(fromFName);\n var toColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === toFName; })[0]\n : this.parent.getColumnByField(toFName);\n if ((!isNullOrUndefined(fColumn) && (!fColumn.allowReordering || fColumn.lockColumn)) ||\n (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: fColumn, destColumn: toColumn });\n return;\n }\n var column = toColumn;\n var parent = this.getColParent(column, this.parent.columns);\n var columns = parent ? parent.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, fColumn, true);\n }\n };\n Reorder.prototype.reorderMultipleColumns = function (fromFNames, toFName) {\n var toIndex = this.parent.getColumnIndexByField(toFName);\n var toColumn = this.parent.getColumnByField(toFName);\n if (toIndex < 0 || (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n return;\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn)) {\n return;\n }\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByIndex(toIndex);\n var parent_1 = this.getColParent(column, this.parent.columns);\n var columns = parent_1 ? parent_1.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]), true, true);\n }\n if (this.parent.getColumnIndexByField(fromFNames[i + 1]) >= destIndex) {\n toIndex++; //R to L\n }\n }\n };\n Reorder.prototype.moveTargetColumn = function (column, toIndex) {\n if (toIndex > -1) {\n this.moveColumns(toIndex, column, true);\n }\n };\n Reorder.prototype.reorderSingleColumnByTarget = function (fieldName, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByField(fieldName), toIndex);\n };\n Reorder.prototype.reorderMultipleColumnByTarget = function (fieldName, toIndex) {\n for (var i = 0; i < fieldName.length; i++) {\n this.reorderSingleColumnByTarget(fieldName[parseInt(i.toString(), 10)], toIndex);\n }\n };\n /**\n * Changes the position of the Grid columns by field names.\n *\n * @param {string | string[]} fromFName - Defines the origin field names.\n * @param {string} toFName - Defines the destination field name.\n * @returns {void}\n */\n Reorder.prototype.reorderColumns = function (fromFName, toFName) {\n if (typeof fromFName === 'string') {\n this.reorderSingleColumn(fromFName, toFName);\n this.fromCol = fromFName;\n }\n else {\n this.reorderMultipleColumns(fromFName, toFName);\n this.fromCol = fromFName[0];\n }\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByIndex(fromIndex), toIndex);\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {string | string[]} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (typeof fieldName === 'string') {\n this.reorderSingleColumnByTarget(fieldName, toIndex);\n }\n else {\n this.reorderMultipleColumnByTarget(fieldName, toIndex);\n }\n };\n Reorder.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.createReorderElement();\n }\n };\n Reorder.prototype.createReorderElement = function (e) {\n if (e && e.args && e.args.isXaxis) {\n this.setDisplay('none');\n }\n var header = this.parent.element.querySelector('.' + literals.headerContent);\n this.upArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderuparrow e-reorderuparrow', attrs: { style: 'display:none' } }));\n this.downArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderdownarrow e-reorderdownarrow', attrs: { style: 'display:none' } }));\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specified the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete }));\n var target = this.fromCol && this.parent.getColumnHeaderByField(this.fromCol);\n if (target) {\n this.parent.focusModule.onClick({ target: target }, true);\n }\n };\n /**\n * To destroy the reorder\n *\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.upArrow.parentNode) {\n remove(this.upArrow);\n }\n if (this.downArrow.parentNode) {\n remove(this.downArrow);\n }\n this.parent.off(events.headerDrop, this.headerDrop);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.reorderComplete, this.onActionComplete);\n this.parent.off(events.columnDrag, this.drag);\n this.parent.off(events.columnDragStart, this.dragStart);\n this.parent.off(events.columnDragStop, this.dragStop);\n this.parent.off(events.headerRefreshed, this.createReorderElement);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.destroy, this.destroy);\n //call ejdrag and drop destroy\n };\n Reorder.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'leftArrow') {\n e.action = 'ctrlLeftArrow';\n }\n else if (e.action === 'rightArrow') {\n e.action = 'ctrlRightArrow';\n }\n }\n switch (e.action) {\n case 'ctrlLeftArrow':\n case 'ctrlRightArrow':\n // eslint-disable-next-line no-case-declarations\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n var visibleCols = gObj.getVisibleColumns();\n var index = visibleCols.indexOf(column);\n var toCol = e.action === 'ctrlLeftArrow' ? visibleCols[index - 1] : visibleCols[index + 1];\n if (toCol && toCol.field && column.field) {\n this.reorderColumns(column.field, toCol.field);\n }\n }\n break;\n }\n };\n Reorder.prototype.drag = function (e) {\n var gObj = this.parent;\n var target = e.target;\n var closest = closestElement(target, '.e-headercell:not(.e-stackedHeaderCell)');\n var cloneElement = gObj.element.querySelector('.e-cloneproperties');\n var content = gObj.getContent().firstElementChild;\n var isLeft = this.x > getPosition(e.event).x + content.scrollLeft;\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n this.setDisplay('none');\n this.stopTimer();\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n this.updateScrollPostion(e.event);\n if (closest && !closest.isEqualNode(this.element)) {\n target = closest;\n //consider stacked, detail header cell\n var uid = target.querySelector('.e-headercelldiv, .e-stackedheadercelldiv').getAttribute('e-mappinguid');\n if (!(!this.chkDropPosition(this.element, target) || !this.chkDropAllCols(this.element, target)) &&\n gObj.getColumnByUid(uid).allowReordering && e.column.allowReordering) {\n this.updateArrowPosition(target, isLeft);\n classList(target, ['e-allowDrop', 'e-reorderindicate'], []);\n }\n else if (!(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n else {\n if (closest && closest.isEqualNode(this.element) &&\n !((gObj.allowGrouping && e.column.allowGrouping) || e.column.allowReordering)) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else if (!closest && !(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n gObj.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: e.column });\n };\n Reorder.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var x = getPosition(e).x;\n var cliRect = this.parent.element.getBoundingClientRect();\n var cliRectBaseRight = cliRect.right;\n var cliRectBaseLeft = cliRect.left;\n var scrollElem = this.parent.getContent().firstElementChild;\n if (x > cliRectBaseLeft && x < cliRectBaseLeft + 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, true); }, 50);\n }\n else if (x < cliRectBaseRight && x > cliRectBaseRight - 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, false); }, 50);\n }\n };\n Reorder.prototype.setScrollLeft = function (scrollElem, isLeft) {\n var scrollLeft = scrollElem.scrollLeft;\n scrollElem.scrollLeft = scrollElem.scrollLeft + (isLeft ? -5 : 5);\n if (scrollLeft !== scrollElem.scrollLeft) {\n this.setDisplay('none');\n }\n };\n Reorder.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Reorder.prototype.updateArrowPosition = function (target, isLeft) {\n var cliRect = target.getBoundingClientRect();\n var cliRectBase = this.parent.element.getBoundingClientRect();\n if ((isLeft && cliRect.left < cliRectBase.left) || (!isLeft && cliRect.right > cliRectBase.right)) {\n return;\n }\n var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');\n this.upArrow.style.top = isSticky ? cliRect.top + cliRect.height + 'px' : cliRect.top + cliRect.height - cliRectBase.top + 'px';\n this.downArrow.style.top = isSticky ? cliRect.top - 7 + 'px' : cliRect.top - cliRectBase.top - 7 + 'px';\n this.upArrow.style.left = this.downArrow.style.left = isSticky ? (isLeft ? cliRect.left : cliRect.right) - 4 + 'px' :\n (isLeft ? cliRect.left : cliRect.right) - cliRectBase.left - 4 + 'px';\n this.setDisplay('');\n };\n Reorder.prototype.dragStart = function (e) {\n var gObj = this.parent;\n var target = e.target;\n this.element = target.classList.contains('e-headercell') ? target :\n parentsUntil(target, 'e-headercell');\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n var content = gObj.getContent().firstElementChild;\n this.x = getPosition(e.event).x + content.scrollLeft;\n gObj.trigger(events.columnDragStart, {\n target: target, draggableType: 'headercell', column: e.column\n });\n };\n Reorder.prototype.dragStop = function (e) {\n var gObj = this.parent;\n this.setDisplay('none');\n this.stopTimer();\n if (!e.cancel) {\n gObj.trigger(events.columnDrop, { target: e.target, draggableType: 'headercell', column: e.column });\n }\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n };\n Reorder.prototype.setDisplay = function (display) {\n this.upArrow.style.display = display;\n this.downArrow.style.display = display;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} return the module name\n * @private\n */\n Reorder.prototype.getModuleName = function () {\n return 'reorder';\n };\n return Reorder;\n}());\nexport { Reorder };\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})();\nimport { addClass, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { CellRenderer } from './cell-renderer';\nimport { addStickyColumnPosition, appendChildren } from '../base/util';\nimport { destroy, commandColumnDestroy } from '../base/constant';\n/**\n * `CommandColumn` used to render command column in grid\n *\n * @hidden\n */\nvar CommandColumnRenderer = /** @class */ (function (_super) {\n __extends(CommandColumnRenderer, _super);\n function CommandColumnRenderer(parent, locator) {\n var _this = _super.call(this, parent, locator) || this;\n _this.buttonElement = _this.parent.createElement('button', {});\n _this.unbounDiv = _this.parent.createElement('div', { className: 'e-unboundcelldiv', styles: 'display: inline-block' });\n _this.childRefs = [];\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowcell e-unboundcell', attrs: {\n tabindex: '-1', role: 'gridcell'\n }\n });\n _this.parent.on(destroy, _this.destroyButtons, _this);\n _this.parent.on(commandColumnDestroy, _this.destroyButtons, _this);\n return _this;\n }\n CommandColumnRenderer.prototype.destroyButtons = function (args) {\n for (var i = 0; i < this.childRefs.length; i++) {\n if (this.childRefs[parseInt(i.toString(), 10)] && !this.childRefs[parseInt(i.toString(), 10)].isDestroyed) {\n this.childRefs[parseInt(i.toString(), 10)].destroy();\n if (this.childRefs[parseInt(i.toString(), 10)].element) {\n this.childRefs[parseInt(i.toString(), 10)].element.innerHTML = '';\n }\n }\n }\n this.childRefs = [];\n if (args.type === 'refreshCommandColumn') {\n var elem = this.parent.element.querySelectorAll('.e-unboundcell');\n if (elem.length) {\n for (var i = 0; i < elem.length; i++) {\n if (elem[parseInt(i.toString(), 10)]) {\n if (elem[parseInt(i.toString(), 10)].querySelector('.e-unboundcelldiv')) {\n elem[parseInt(i.toString(), 10)].querySelector('.e-unboundcelldiv').innerHTML = '';\n }\n elem[parseInt(i.toString(), 10)].innerHTML = '';\n }\n }\n elem = null;\n }\n }\n else {\n this.parent.off(destroy, this.destroyButtons);\n this.parent.off(commandColumnDestroy, this.destroyButtons);\n }\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {cell
} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @param {boolean} isVirtualEdit - specifies virtual scroll editing\n * @returns {Element} returns the element\n */\n CommandColumnRenderer.prototype.render = function (cell, data, attributes, isVirtualEdit) {\n var node = this.element.cloneNode();\n var uid = 'uid';\n node.appendChild(this.unbounDiv.cloneNode());\n node.setAttribute('aria-label', this.localizer.getConstant('CommandColumnAria') + cell.column.headerText);\n if (cell.column.commandsTemplate) {\n if (this.parent.isReact && typeof (cell.column.commandsTemplate) !== 'string') {\n var tempID = this.parent + 'commandsTemplate';\n cell.column.getColumnTemplate()(data, this.parent, 'commandsTemplate', tempID, null, null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(node.firstElementChild, cell.column.getColumnTemplate()(data));\n }\n }\n else {\n for (var _i = 0, _a = cell.commands; _i < _a.length; _i++) {\n var command = _a[_i];\n node = this.renderButton(node, command, attributes.index, command[\"\" + uid]);\n }\n }\n this.setAttributes(node, cell, attributes);\n if ((!this.parent.enableVirtualization && this.parent.isEdit) || isVirtualEdit) {\n addClass([].slice.call(node.getElementsByClassName('e-edit-delete')), 'e-hide');\n removeClass([].slice.call(node.getElementsByClassName('e-save-cancel')), 'e-hide');\n }\n else {\n addClass([].slice.call(node.getElementsByClassName('e-save-cancel')), 'e-hide');\n removeClass([].slice.call(node.getElementsByClassName('e-edit-delete')), 'e-hide');\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, cell.column, node);\n }\n return node;\n };\n CommandColumnRenderer.prototype.renderButton = function (node, buttonOption, index, uid) {\n var button = this.buttonElement.cloneNode();\n attributes(button, {\n 'id': this.parent.element.id + (buttonOption.type || '') + '_' + index + '_' + uid, 'type': 'button',\n title: !isNullOrUndefined(buttonOption.title) ? buttonOption.title :\n buttonOption.buttonOption.content || this.localizer.getConstant(buttonOption.type) || buttonOption.type,\n 'data-uid': uid\n });\n button.onclick = buttonOption.buttonOption.click;\n buttonOption.buttonOption.cssClass = this.parent.cssClass ?\n buttonOption.buttonOption.cssClass + ' ' + this.parent.cssClass : buttonOption.buttonOption.cssClass;\n var buttonObj = new Button(buttonOption.buttonOption, button);\n this.childRefs.push(buttonObj);\n buttonObj.commandType = buttonOption.type;\n node.firstElementChild.appendChild(buttonObj.element);\n switch (buttonOption.type) {\n case 'Edit':\n case 'Delete':\n addClass([button], ['e-edit-delete', 'e-' + buttonOption.type.toLowerCase() + 'button']);\n break;\n case 'Cancel':\n case 'Save':\n addClass([button], ['e-save-cancel', 'e-' + buttonOption.type.toLowerCase() + 'button']);\n break;\n }\n return node;\n };\n return CommandColumnRenderer;\n}(CellRenderer));\nexport { CommandColumnRenderer };\n","import { closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { click, keyPressed, commandClick, initialEnd, destroy } from '../base/constant';\nimport { CellType } from '../base/enum';\nimport { CommandColumnRenderer } from '../renderer/command-column-renderer';\nimport { getUid } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * `CommandColumn` used to handle the command column actions.\n *\n * @hidden\n */\nvar CommandColumn = /** @class */ (function () {\n function CommandColumn(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.initiateRender();\n this.addEventListener();\n }\n CommandColumn.prototype.initiateRender = function () {\n var cellFac = this.locator.getService('cellRendererFactory');\n cellFac.addCellRenderer(CellType.CommandColumn, new CommandColumnRenderer(this.parent, this.locator));\n };\n CommandColumn.prototype.commandClickHandler = function (e) {\n var gObj = this.parent;\n var target = closest(e.target, 'button');\n if (!target || !closest(e.target, '.e-unboundcell')) {\n return;\n }\n var buttonObj = target.ej2_instances[0];\n var type = buttonObj.commandType;\n var uid = target.getAttribute('data-uid');\n var commandColumn;\n var row = gObj.getRowObjectFromUID(closest(target, '.' + literals.row).getAttribute('data-uid'));\n var cols = this.parent.columnModel;\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].commands) {\n var commandCols = cols[parseInt(i.toString(), 10)].commands;\n for (var j = 0; j < commandCols.length; j++) {\n var idInString = 'uid';\n var typeInString = 'type';\n if (commandCols[parseInt(j.toString(), 10)][\"\" + idInString] === uid && commandCols[parseInt(j.toString(), 10)][\"\" + typeInString] === type) {\n commandColumn = commandCols[parseInt(j.toString(), 10)];\n }\n else {\n var buttons = [].slice.call(closest(target, '.e-unboundcell').querySelectorAll('button'));\n var index = buttons.findIndex(function (ele) { return ele === target; });\n if (index < commandCols.length && commandCols[parseInt(index.toString(), 10)][\"\" + typeInString] === type &&\n String(commandCols[parseInt(j.toString(), 10)][\"\" + idInString]) === uid) {\n commandColumn = commandCols[parseInt(index.toString(), 10)];\n }\n }\n }\n }\n }\n var args = {\n cancel: false,\n target: target,\n commandColumn: commandColumn,\n rowData: isNullOrUndefined(row) ? undefined : row.data\n };\n this.parent.trigger(commandClick, args, function (commandclickargs) {\n if (buttonObj.disabled || !gObj.editModule || commandclickargs.cancel) {\n return;\n }\n switch (type) {\n case 'Edit':\n gObj.editModule.endEdit();\n gObj.editModule.startEdit(closest(target, 'tr'));\n break;\n case 'Cancel':\n gObj.editModule.closeEdit();\n break;\n case 'Save':\n gObj.editModule.endEdit();\n break;\n case 'Delete':\n if (gObj.editSettings.mode !== 'Batch') {\n gObj.editModule.endEdit();\n }\n gObj.commandDelIndex = parseInt(closest(target, 'tr').getAttribute(literals.dataRowIndex), 10);\n gObj.clearSelection();\n //for toogle issue when dbl click\n gObj.selectRow(gObj.commandDelIndex, false);\n gObj.editModule.deleteRecord();\n gObj.commandDelIndex = undefined;\n break;\n }\n });\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n */\n CommandColumn.prototype.getModuleName = function () {\n return 'commandColumn';\n };\n /**\n * To destroy CommandColumn.\n *\n * @function destroy\n * @returns {void}\n */\n CommandColumn.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.removeEventListener();\n };\n CommandColumn.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(click, this.commandClickHandler);\n this.parent.off(keyPressed, this.keyPressHandler);\n this.parent.off(initialEnd, this.load);\n this.parent.off(destroy, this.destroy);\n };\n CommandColumn.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(click, this.commandClickHandler, this);\n this.parent.on(keyPressed, this.keyPressHandler, this);\n this.parent.on(initialEnd, this.load, this);\n this.parent.on(destroy, this.destroy, this);\n };\n CommandColumn.prototype.keyPressHandler = function (e) {\n if (e.action === 'enter' && closest(e.target, '.e-unboundcelldiv')) {\n this.commandClickHandler(e);\n e.preventDefault();\n }\n };\n CommandColumn.prototype.load = function () {\n var uid = 'uid';\n var col = this.parent.columnModel;\n for (var i = 0; i < col.length; i++) {\n if (col[parseInt(i.toString(), 10)].commands) {\n var commandCol = col[parseInt(i.toString(), 10)].commands;\n for (var j = 0; j < commandCol.length; j++) {\n commandCol[parseInt(j.toString(), 10)][\"\" + uid] = getUid('gridcommand');\n }\n }\n }\n };\n return CommandColumn;\n}());\nexport { CommandColumn };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable max-len */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable jsdoc/require-param */\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { measureText, Rect, TextOption, Size, PathOption } from '@syncfusion/ej2-svg-base';\nimport { Font, Border, Margin, ContainerPadding, Location } from '../model/base';\nimport { subtractThickness, Thickness, drawSymbol, ChartLocation, titlePositionX, getTitle, textTrim, getTextAnchor } from '../utils/helper';\nimport { RectOption, textElement, stringToNumber } from '../utils/helper';\nimport { removeElement, showTooltip, getElement, appendChildElement } from '../utils/helper';\n/**\n * Configures the legends in charts.\n */\nvar LegendSettings = /** @class */ (function (_super) {\n __extends(LegendSettings, _super);\n function LegendSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], LegendSettings.prototype, \"visible\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"width\", void 0);\n __decorate([\n Complex({ x: 0, y: 0 }, Location)\n ], LegendSettings.prototype, \"location\", void 0);\n __decorate([\n Property('Auto')\n ], LegendSettings.prototype, \"position\", void 0);\n __decorate([\n Property('Series')\n ], LegendSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(8)\n ], LegendSettings.prototype, \"padding\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"itemPadding\", void 0);\n __decorate([\n Property('Center')\n ], LegendSettings.prototype, \"alignment\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"14px\", fontStyle: 'Normal', fontWeight: '400', color: null }, Font)\n ], LegendSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property(10)\n ], LegendSettings.prototype, \"shapeHeight\", void 0);\n __decorate([\n Property(10)\n ], LegendSettings.prototype, \"shapeWidth\", void 0);\n __decorate([\n Complex({}, Border)\n ], LegendSettings.prototype, \"border\", void 0);\n __decorate([\n Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)\n ], LegendSettings.prototype, \"margin\", void 0);\n __decorate([\n Complex({ left: 0, right: 0, top: 0, bottom: 0 }, ContainerPadding)\n ], LegendSettings.prototype, \"containerPadding\", void 0);\n __decorate([\n Property(8)\n ], LegendSettings.prototype, \"shapePadding\", void 0);\n __decorate([\n Property('transparent')\n ], LegendSettings.prototype, \"background\", void 0);\n __decorate([\n Property(1)\n ], LegendSettings.prototype, \"opacity\", void 0);\n __decorate([\n Property(true)\n ], LegendSettings.prototype, \"toggleVisibility\", void 0);\n __decorate([\n Property(false)\n ], LegendSettings.prototype, \"enableHighlight\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"description\", void 0);\n __decorate([\n Property(3)\n ], LegendSettings.prototype, \"tabIndex\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"title\", void 0);\n __decorate([\n Complex({ fontFamily: null, size: \"14px\", fontStyle: 'Normal', fontWeight: '600', color: null }, Font)\n ], LegendSettings.prototype, \"titleStyle\", void 0);\n __decorate([\n Property('Top')\n ], LegendSettings.prototype, \"titlePosition\", void 0);\n __decorate([\n Property('Normal')\n ], LegendSettings.prototype, \"textWrap\", void 0);\n __decorate([\n Property('Ellipsis')\n ], LegendSettings.prototype, \"textOverflow\", void 0);\n __decorate([\n Property(100)\n ], LegendSettings.prototype, \"maximumTitleWidth\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"maximumLabelWidth\", void 0);\n __decorate([\n Property(true)\n ], LegendSettings.prototype, \"enablePages\", void 0);\n __decorate([\n Property(false)\n ], LegendSettings.prototype, \"isInversed\", void 0);\n __decorate([\n Property(false)\n ], LegendSettings.prototype, \"reverse\", void 0);\n return LegendSettings;\n}(ChildProperty));\nexport { LegendSettings };\n/**\n * Legend base class for Chart and Accumulation chart.\n *\n * @private\n */\nvar BaseLegend = /** @class */ (function () {\n /**\n * Constructor for the dateTime module.\n *\n * @private\n */\n function BaseLegend(chart) {\n this.maxItemHeight = 0;\n this.rowHeights = [];\n this.pageHeights = [];\n this.columnHeights = [];\n this.pageXCollections = []; // pages of x locations\n this.chartRowCount = 1;\n this.legendTitleCollections = [];\n this.legendRegions = [];\n this.pagingRegions = [];\n this.chart = chart;\n this.legend = chart.legendSettings;\n this.legendID = chart.element.id + '_chart_legend';\n this.isChartControl = (chart.getModuleName() === 'chart' || chart.getModuleName() === 'chart3d');\n this.isAccChartControl = (chart.getModuleName() === 'accumulationchart');\n this.isBulletChartControl = (chart.getModuleName() === 'bulletChart');\n this.isStockChartControl = (chart.getModuleName() === 'stockChart');\n this.bulletChart = this.chart;\n this.fivePixel = 5;\n this.rowCount = 0;\n this.pageButtonSize = 8;\n this.maxColumns = 0;\n this.maxWidth = 0;\n this.currentPage = 1;\n this.backwardArrowOpacity = 0;\n this.forwardArrowOpacity = 1;\n this.arrowWidth = (2 * (this.fivePixel + this.pageButtonSize + this.fivePixel));\n this.arrowHeight = this.arrowWidth;\n this.isTop = false;\n this.isTitle = false;\n this.currentPageNumber = 1;\n }\n ;\n /**\n * Calculate the bounds for the legends.\n *\n * @returns {void}\n * @private\n */\n BaseLegend.prototype.calculateLegendBounds = function (rect, availableSize, maxLabelSize) {\n var legend = this.legend;\n var defaultValue = (this.isBulletChartControl) ? '40%' : '20%';\n this.getPosition(legend.position, availableSize);\n this.legendBounds = new Rect(rect.x, rect.y, 0, 0);\n this.isVertical = (this.position === 'Left' || this.position === 'Right');\n this.itemPadding = this.legend.itemPadding ? this.legend.itemPadding : this.isVertical ? this.legend.padding : 20;\n if (this.isVertical) {\n this.legendBounds.height = stringToNumber(legend.height, availableSize.height - (rect.y - this.chart.margin.top)) || rect.height;\n this.legendBounds.width = stringToNumber(legend.width || defaultValue, availableSize.width);\n }\n else {\n this.legendBounds.width = stringToNumber(legend.width, availableSize.width) || rect.width;\n this.legendBounds.height = stringToNumber(legend.height || defaultValue, availableSize.height);\n }\n if (this.chart.getModuleName() === 'chart3d') {\n this.library.get3DLegendBounds(availableSize, this.legendBounds, legend);\n }\n else {\n this.library.getLegendBounds(availableSize, this.legendBounds, legend);\n }\n if (!this.isBulletChartControl) {\n this.legendBounds.width += (this.legend.containerPadding.left + this.legend.containerPadding.right);\n this.legendBounds.height += (this.legend.containerPadding.top + this.legend.containerPadding.bottom);\n }\n this.getLocation(this.position, legend.alignment, this.legendBounds, rect, availableSize, maxLabelSize);\n };\n /**\n * To find legend position based on available size for chart and accumulation chart\n *\n * @param position\n * @param availableSize\n * @param position\n * @param availableSize\n * @returns {void}\n */\n BaseLegend.prototype.getPosition = function (position, availableSize) {\n var chart = this.chart;\n var accumulation = this.chart;\n if (this.isChartControl || this.isBulletChartControl || this.isStockChartControl) {\n this.position = (position !== 'Auto') ? position : 'Bottom';\n }\n else {\n if (position === 'Auto' && ((chart || accumulation).visibleSeries && (chart || accumulation).visibleSeries[0].type === 'Funnel' || (chart || accumulation).visibleSeries[0].type === 'Pyramid')) {\n position = 'Top';\n }\n this.position = (position !== 'Auto') ? position :\n (availableSize.width > availableSize.height ? 'Right' : 'Bottom');\n }\n };\n /**\n * To set bounds for chart and accumulation chart\n *\n * @param computedWidth\n * @param computedHeight\n * @param legend\n * @param legendBounds\n * @param computedWidth\n * @param computedHeight\n * @param legend\n * @param legendBounds\n * @param computedWidth\n * @param computedHeight\n * @param legend\n * @param legendBounds\n * @param computedWidth\n * @param computedHeight\n * @param legend\n * @param legendBounds\n * @returns {void}\n */\n BaseLegend.prototype.setBounds = function (computedWidth, computedHeight, legend, legendBounds) {\n var titleHeight = legend.title && legend.titlePosition === 'Top' ? this.legendTitleSize.height + this.fivePixel : 0;\n if (this.isVertical && this.isPaging && !legend.enablePages && !this.isBulletChartControl) {\n titleHeight = legend.title && legend.titlePosition === 'Top' ? this.legendTitleSize.height + this.fivePixel : 0;\n titleHeight += (this.pageButtonSize + this.fivePixel);\n }\n computedWidth = Math.min(computedWidth, legendBounds.width);\n computedHeight = Math.min(computedHeight, legendBounds.height);\n if (legend.mode === 'Gradient') {\n legendBounds.width = legend.width ? legendBounds.width : this.isVertical ? computedWidth : 0.75 * legendBounds.width;\n legendBounds.height = legend.height ? legendBounds.height : this.isVertical ? 0.75 * legendBounds.height : computedHeight;\n }\n else {\n legendBounds.width = !legend.width ? computedWidth : legendBounds.width;\n legendBounds.height = !legend.height ? computedHeight : legendBounds.height;\n }\n if (!this.isBulletChartControl) {\n if (this.isTop && legend.titleStyle.textOverflow !== 'None') {\n this.calculateLegendTitle(legend, legendBounds);\n legendBounds.height += legend.titleStyle.textOverflow === 'Wrap' && this.legendTitleCollections.length > 1 ?\n (this.legendTitleSize.height - (this.legendTitleSize.height / this.legendTitleCollections.length)) : 0;\n }\n }\n this.rowCount = Math.max(1, Math.ceil((legendBounds.height - legend.padding - titleHeight) /\n (this.maxItemHeight + legend.padding)));\n };\n /**\n * To find legend location based on position, alignment for chart and accumulation chart\n *\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n * @param position\n * @param alignment\n * @param legendBounds\n * @param rect\n * @param availableSize\n * @param maxLabelSize\n */\n BaseLegend.prototype.getLocation = function (position, alignment, legendBounds, rect, availableSize, maxLabelSize) {\n var padding = this.legend.border.width;\n var isBulletChart = this.isBulletChartControl;\n var bulletChart = this.bulletChart;\n var labelIns = bulletChart.labelPosition === 'Inside';\n var ticklIns = bulletChart.tickPosition === 'Inside';\n var isVertical = bulletChart.orientation === 'Vertical';\n var categoryFieldValue = (isBulletChart && bulletChart.categoryField !== '') ?\n maxLabelSize.width + this.chart.border.width + padding * 3 : 0;\n var marginBottom = this.chart.margin.bottom;\n var legendHeight = legendBounds.height + padding + this.legend.margin.top + this.legend.margin.bottom;\n var legendWidth = legendBounds.width + padding + this.legend.margin.left + this.legend.margin.right;\n if (position === 'Bottom') {\n legendBounds.x = this.alignLegend(legendBounds.x, availableSize.width, legendBounds.width, alignment);\n legendBounds.y = rect.y + (rect.height - legendHeight) + padding + this.legend.margin.top;\n legendBounds.y += (isBulletChart && !bulletChart.opposedPosition && !labelIns && !ticklIns\n && !isVertical) ? bulletChart.majorTickLines.height + marginBottom + this.legend.border.width + padding * 2 :\n (isVertical && bulletChart.categoryField !== '') ? maxLabelSize.height + padding * 2 : 0;\n subtractThickness(rect, new Thickness(0, 0, 0, legendHeight));\n }\n else if (position === 'Top') {\n var axisTextSize = void 0;\n if (this.isChartControl) {\n axisTextSize = measureText('100', this.chart.verticalAxes[0].labelStyle, this.chart.themeStyle.legendLabelFont);\n }\n legendBounds.x = this.alignLegend(legendBounds.x, availableSize.width, legendBounds.width, alignment);\n legendBounds.y = rect.y + padding + this.legend.margin.top;\n legendBounds.y -= (isBulletChart && bulletChart.opposedPosition && !labelIns && !ticklIns &&\n !isVertical) ? bulletChart.majorTickLines.height + this.chart.margin.top : 0;\n legendHeight -= (isBulletChart) ? -padding * 2 : (this.isChartControl ? -padding * 2 - axisTextSize.height / 2 : 0);\n subtractThickness(rect, new Thickness(0, 0, legendHeight, 0));\n }\n else if (position === 'Right') {\n legendBounds.x = rect.x + (rect.width - legendBounds.width) - this.legend.margin.right;\n legendBounds.y = rect.y + this.alignLegend(0, availableSize.height - (rect.y + marginBottom), legendBounds.height, alignment);\n legendWidth += (isBulletChart && bulletChart.opposedPosition && !labelIns && !ticklIns &&\n isVertical) ? (this.chart.margin.left + this.chart.margin.right + bulletChart.majorTickLines.height) : 0;\n subtractThickness(rect, new Thickness(0, legendWidth, 0, 0));\n }\n else if (position === 'Left') {\n legendBounds.x = legendBounds.x + this.legend.margin.left;\n legendBounds.y = rect.y + this.alignLegend(0, availableSize.height - (rect.y + marginBottom), legendBounds.height, alignment);\n legendWidth += (isBulletChart && !bulletChart.opposedPosition && !labelIns && !ticklIns &&\n isVertical) ? (legendBounds.x - this.chart.margin.left + padding + bulletChart.majorTickLines.height) :\n (bulletChart.orientation !== 'Vertical' && bulletChart.categoryField !== '') ? categoryFieldValue : 0;\n subtractThickness(rect, new Thickness(legendWidth, 0, 0, 0));\n }\n else {\n legendBounds.x = this.legend.location.x;\n legendBounds.y = this.legend.location.y;\n subtractThickness(rect, new Thickness(0, 0, 0, 0));\n }\n };\n /**\n * To find legend alignment for chart and accumulation chart\n *\n * @param start\n * @param size\n * @param legendSize\n * @param alignment\n * @param start\n * @param size\n * @param legendSize\n * @param alignment\n * @param start\n * @param size\n * @param legendSize\n * @param alignment\n * @param start\n * @param size\n * @param legendSize\n * @param alignment\n */\n BaseLegend.prototype.alignLegend = function (start, size, legendSize, alignment) {\n switch (alignment) {\n case 'Far':\n start = (size - legendSize) - start;\n break;\n case 'Center':\n start = ((size - legendSize) / 2);\n break;\n }\n return start;\n };\n /**\n * Renders the legend.\n *\n * @param chart\n * @param legend\n * @param legendBounds\n * @param redraw\n * @param chart\n * @param legend\n * @param legendBounds\n * @param redraw\n * @param chart\n * @param legend\n * @param legendBounds\n * @param redraw\n * @param chart\n * @param legend\n * @param legendBounds\n * @param redraw\n * @returns {void}\n * @private\n */\n BaseLegend.prototype.renderLegend = function (chart, legend, legendBounds, redraw) {\n var titleHeight = 0;\n var titlePlusArrowWidth = 0;\n var pagingLegendBounds = new Rect(0, 0, 0, 0);\n var requireLegendBounds = new Rect(0, 0, 0, 0);\n var firstLegend = this.findFirstLegendPosition(this.legendCollections);\n var padding = legend.padding;\n this.itemPadding = this.isBulletChartControl ? legend.padding : this.itemPadding;\n var isPaging = legend.enablePages;\n var titlePosition = legend.titlePosition;\n var upArrowHeight = this.isPaging && !legend.enablePages && this.isVertical ? this.pageButtonSize : 0;\n var legendGroup = chart.renderer.createGroup({ id: this.legendID + '_g' });\n var legendTranslateGroup = this.createLegendElements(chart, legendBounds, legendGroup, legend, this.legendID, redraw);\n this.legendRegions = [];\n this.chartRowCount = 1;\n var maxHeight = 0;\n titleHeight = !this.isTitle ? 0 : (this.isTop || this.isVertical ? this.legendTitleSize.height : 0);\n if (this.isChartControl || (this.isAccChartControl && !this.isVertical)) {\n var pageCount = 1;\n var rowHeights = this.rowHeights[0] + padding;\n for (var i = 1; i < this.rowHeights.length; i++) {\n if ((rowHeights + this.rowHeights[i] + padding) > (this.legendBounds.height - this.pageButtonSize - this.maxItemHeight / 2)) {\n this.pageHeights[pageCount - 1] = rowHeights + titleHeight;\n pageCount++;\n rowHeights = 0;\n }\n rowHeights += (this.rowHeights[i] + (this.isVertical ? this.itemPadding : padding));\n }\n this.pageHeights[pageCount - 1] = rowHeights + titleHeight;\n this.totalPages = pageCount;\n }\n for (var i = 0; i < this.legendCollections.length; i++) {\n if (this.legendCollections[i].text !== '') {\n maxHeight = Math.max(this.legendCollections[i].textSize.height, maxHeight);\n break;\n }\n else {\n continue;\n }\n }\n if (!this.isChartControl && !this.isAccChartControl) {\n this.maxItemHeight = Math.max(maxHeight, legend.shapeHeight);\n }\n // For new legend navigation\n if (!isPaging && this.isPaging && !this.isVertical) {\n titlePlusArrowWidth = !this.isTitle ? 0 : titlePosition === 'Left' ? this.legendTitleSize.width : 0;\n titlePlusArrowWidth += (this.pageButtonSize + (2 * this.fivePixel));\n }\n else if (this.isTitle && !this.isPaging && !this.isVertical) {\n titlePlusArrowWidth = titlePosition === ((!this.isRtlEnable) ? 'Left' : 'Right') ? (this.fivePixel + this.legendTitleSize.width) : 0;\n }\n if (chart.legendSettings.mode === 'Gradient' && this.legendCollections.length > 1) {\n this.getLinearLegend(legendBounds, chart, legend, legendTranslateGroup);\n this.totalPages = 1;\n }\n else if (firstLegend !== this.legendCollections.length) {\n var legendSeriesGroup = void 0; // legendItem group for each series group element\n var count = 0;\n var previousLegend = this.legendCollections[firstLegend];\n // starting shape center x,y position && to resolve lint error used new line for declaration\n var startPadding = this.isBulletChartControl ? 0 : titlePlusArrowWidth + padding + (legend.shapeWidth / 2) + legend.containerPadding.left;\n var xLocation = this.isBulletChartControl ? legendBounds.x + titlePlusArrowWidth + padding + (legend.shapeWidth / 2) :\n (!this.isRtlEnable) ? legendBounds.x + startPadding : legendBounds.x + ((this.chart.getModuleName() === 'accumulationchart' && this.isVertical) ? this.maxWidth : legendBounds.width) - startPadding;\n var start = new ChartLocation(xLocation, this.isBulletChartControl ? legendBounds.y + titleHeight + upArrowHeight + padding + (this.maxItemHeight / 2) :\n legendBounds.y + titleHeight + upArrowHeight + padding + (this.maxItemHeight / 2) + legend.containerPadding.top);\n var anchor = chart.isRtlEnabled || chart.enableRtl ? 'end' : 'start';\n var textOptions = new TextOption('', start.x, start.y, anchor);\n var textPadding = legend.shapePadding + this.itemPadding + legend.shapeWidth;\n // initialization for totalPages legend click totalpage again calculate\n this.totalPages = this.totalPages = (this.isAccChartControl || this.isChartControl || this.isBulletChartControl || this.isStockChartControl) ? this.totalPages : 0;\n this.pageXCollections = [];\n this.legendCollections[firstLegend].location = start;\n var legendIndex = void 0;\n if (!legend.enablePages && this.isPaging) {\n var x = start.x - this.fivePixel;\n var y = start.y - this.fivePixel;\n var leftSpace = this.isTitle && !this.isVertical && titlePosition === 'Left' ?\n this.legendTitleSize.width + this.fivePixel : 0;\n var bottomSapce = this.isVertical ? (this.pageButtonSize) + Math.abs(y - legendBounds.y) : 0;\n var rightSpace = this.isTitle && !this.isVertical && titlePosition === 'Right' ?\n this.legendTitleSize.width + this.fivePixel : 0;\n rightSpace += this.isVertical ? 0 : (this.fivePixel + this.pageButtonSize + this.fivePixel);\n pagingLegendBounds = new Rect(x, y, legendBounds.width - rightSpace - leftSpace, legendBounds.height - bottomSapce);\n requireLegendBounds = pagingLegendBounds;\n }\n else {\n requireLegendBounds = legendBounds;\n }\n var legendOption = void 0;\n for (var i = 0; i < this.legendCollections.length; i++) {\n legendOption = this.legendCollections[i];\n legendIndex = !this.isReverse ? count : (this.legendCollections.length - 1) - count;\n if (this.chart.getModuleName() === 'accumulationchart') {\n legendOption.fill = (this.chart || this.chart || this.chart || this.chart).visibleSeries[0].points[legendOption.pointIndex].color;\n }\n if (this.chart.getModuleName() === 'stockChart') {\n legendOption.type = this.chart.visibleSeries[count].type;\n }\n this.accessbilityText = (this.isBulletChartControl) ? 'Legend of bullet chart' + '' + legendOption.text\n : 'Click to show or hide the ' + legendOption.text + ' series';\n if (legendOption.render && legendOption.text && legendOption.text !== '') {\n legendSeriesGroup = chart.renderer.createGroup({\n id: this.legendID + this.generateId(legendOption, '_g_', legendIndex)\n });\n if (legendSeriesGroup) {\n legendSeriesGroup.setAttribute('tabindex', i === 0 ? '0' : '');\n legendSeriesGroup.setAttribute('aria-label', legend.description || (legendOption.text + ' series is ' + (legendOption.visible ? 'showing, press enter to hide the ' : 'hidden, press enter to show the ') + legendOption.text + ' series'));\n legendSeriesGroup.setAttribute('role', 'button');\n legendSeriesGroup.setAttribute('aria-pressed', legendOption.visible ? 'true' : 'false');\n }\n this.library.getRenderPoint(legendOption, start, textPadding, previousLegend, requireLegendBounds, count, firstLegend);\n this.renderSymbol(legendOption, legendSeriesGroup, legendIndex);\n this.renderText(chart, legendOption, legendSeriesGroup, textOptions, count, legendIndex);\n if (legendSeriesGroup) {\n legendSeriesGroup.style.cssText =\n 'pointer-events: bounding-box; cursor: ' + ((!legend.toggleVisibility && (chart.selectionMode === 'None' ||\n chart.highlightMode === 'None' ||\n chart.selectionMode === 'None') || this.isBulletChartControl) ? 'auto' : 'pointer');\n }\n if (legendTranslateGroup) {\n legendTranslateGroup.appendChild(legendSeriesGroup);\n }\n previousLegend = legendOption;\n }\n count++;\n }\n this.totalPages = (this.isPaging && !this.isBulletChartControl && !this.legend.enablePages && !this.isVertical &&\n this.totalPages > this.chartRowCount) ? this.chartRowCount : this.totalPages;\n if (this.isPaging && this.totalPages > 1) {\n this.renderPagingElements(chart, legendBounds, textOptions, legendGroup);\n }\n else {\n this.totalPages = 1;\n }\n }\n appendChildElement(chart.enableCanvas, chart.svgObject, legendGroup, redraw);\n };\n /** @private */\n BaseLegend.prototype.getLinearLegend = function (legendBounds, chart, legend, legendTranslateGroup) {\n var xmlns = 'http://www.w3.org/2000/svg';\n var previousLegend = this.legendCollections[0];\n var nextLegend = this.legendCollections[1];\n var defElement = this.chart.renderer.createDefs();\n var gradientLegendCount = 0;\n var linerGradientEle = document.createElementNS(xmlns, 'linearGradient');\n var opacity = 1;\n var fillColors = [];\n var numberItems = [];\n if (legend.title) {\n if (!this.isVertical) {\n if (legend.titlePosition === 'Left') {\n legendBounds.x += this.legendTitleSize.width;\n legendBounds.width -= this.legendTitleSize.width;\n }\n else if (legend.titlePosition === 'Right') {\n legendBounds.width -= this.legendTitleSize.width;\n }\n else if (legend.titlePosition === 'Top') {\n legendBounds.y += this.legendTitleSize.height;\n legendBounds.height -= this.legendTitleSize.height;\n }\n }\n else {\n legendBounds.y += this.legendTitleSize.height;\n legendBounds.height -= this.legendTitleSize.height;\n }\n }\n for (var _i = 0, _a = this.chart.rangeColorSettings; _i < _a.length; _i++) {\n var colorMap = _a[_i];\n if (numberItems.indexOf(colorMap.start) < 0) {\n numberItems.push(colorMap.start);\n }\n if (colorMap.colors.length > 2) {\n var diffValue = (colorMap.end - colorMap.start);\n var colorsLength = colorMap.colors.length - 1;\n if (diffValue > 0) {\n diffValue = diffValue / colorsLength;\n for (var index = 1; index < colorsLength; index++) {\n var calculatedValue = colorMap.start + (diffValue * index);\n numberItems.push(calculatedValue);\n }\n }\n else {\n for (var index = 1; index < colorsLength; index++) {\n numberItems.push(colorMap.start);\n }\n }\n }\n if (numberItems.indexOf(colorMap.end) < 0) {\n numberItems.push(colorMap.end);\n }\n for (var _b = 0, _c = colorMap.colors; _b < _c.length; _b++) {\n var fillColor = _c[_b];\n if (fillColors.indexOf(fillColor) < 0) {\n fillColors.push(fillColor);\n }\n }\n if (colorMap.colors.length > 0 && colorMap.colors.length < 2) {\n fillColors.push(colorMap.colors[0]);\n }\n }\n var x1 = this.isRtlEnable && !this.isVertical ? '100%' : '0%';\n var x2 = this.isVertical || this.isRtlEnable ? '0%' : '100%';\n var y2 = this.isVertical ? '100%' : '0%';\n linerGradientEle.setAttribute('id', this.generateId(previousLegend, 'linearGradient', gradientLegendCount));\n linerGradientEle.setAttribute('x1', x1);\n linerGradientEle.setAttribute('y1', '0%');\n linerGradientEle.setAttribute('x2', x2);\n linerGradientEle.setAttribute('y2', y2);\n var full = numberItems[numberItems.length - 1] - numberItems[0];\n for (var b = 0; b < fillColors.length; b++) {\n var offsetValue = numberItems[b] - numberItems[0];\n offsetValue = offsetValue / full;\n var stopEle = document.createElementNS(xmlns, 'stop');\n stopEle.setAttribute('offset', offsetValue.toString());\n stopEle.setAttribute('stop-color', fillColors[b]);\n stopEle.setAttribute('stop-opacity', opacity.toString());\n linerGradientEle.appendChild(stopEle);\n }\n var startLabel = previousLegend.text.toString();\n var endLabel = nextLegend.text.toString();\n var startTextSize = measureText(startLabel, legend.textStyle, this.chart.themeStyle.legendLabelFont);\n var endTextSize = measureText(endLabel, legend.textStyle, this.chart.themeStyle.legendLabelFont);\n var textWidth = startTextSize.width > endTextSize.width ? startTextSize.width : endTextSize.width;\n var textHeight = startTextSize.height > endTextSize.height ? startTextSize.height : endTextSize.height;\n var otherSpaces = (2 * textWidth) + (4 * legend.padding);\n var linearBarWidth = legendBounds.width;\n var linearBarHeight = legendBounds.height;\n var xValue = legendBounds.x + textWidth + (2 * legend.padding);\n var yValue = legendBounds.y + legend.padding;\n var startLabelY;\n var endLabelY;\n var startLabelX;\n var endLabelX;\n if (this.isVertical) {\n otherSpaces = (2 * textHeight) + (4 * legend.padding);\n linearBarWidth = legendBounds.width - (2 * legend.padding);\n linearBarHeight = legendBounds.height - otherSpaces;\n xValue = legendBounds.x + legend.padding;\n yValue = legendBounds.y + textHeight + (2 * legend.padding);\n startLabelY = legendBounds.y + legend.padding + textHeight;\n endLabelY = yValue + linearBarHeight + textHeight;\n startLabelX = (legendBounds.x + (legendBounds.width * 0.5)) - (textWidth * 0.5);\n endLabelX = startLabelX;\n if (linearBarWidth > 30) {\n var diffWidth = linearBarWidth - 30;\n linearBarWidth = 30;\n xValue = xValue + (diffWidth / 2);\n }\n }\n else {\n linearBarWidth = legendBounds.width - otherSpaces;\n linearBarHeight = legendBounds.height - (2 * legend.padding);\n startLabelX = legendBounds.x + ((!this.isRtlEnable) ? legend.padding + (textWidth - startTextSize.width) :\n linearBarWidth + (3 * legend.padding) + textWidth);\n endLabelX = legendBounds.x + ((!this.isRtlEnable) ? linearBarWidth + (3 * legend.padding) + textWidth :\n legend.padding + (textWidth - endTextSize.width));\n startLabelY = legendBounds.y + (legendBounds.height * 0.5) + (textHeight * 0.25);\n endLabelY = startLabelY;\n if (linearBarHeight > 30) {\n var diffHeight = linearBarHeight - 30;\n linearBarHeight = 30;\n yValue = yValue + (diffHeight / 2);\n }\n }\n var anchor = chart.enableRtl ? 'end' : '';\n var textOptions = new TextOption('', startLabelX, startLabelY, anchor, startLabel);\n var hiddenColor = '#D3D3D3';\n textOptions.id = this.legendID + this.generateId(previousLegend, '_text_', 1);\n var fontcolor = previousLegend.visible ? legend.textStyle.color || chart.themeStyle.legendLabelFont.color : hiddenColor;\n var isCanvas = this.isStockChartControl ? false : this.chart.enableCanvas;\n textElement(chart.renderer, textOptions, legend.textStyle, fontcolor, legendTranslateGroup, false, false, false, false, \n // tslint:disable-next-line:align\n null, this.currentPageNumber && isCanvas ?\n new Rect(0, -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber), 0, 0) : null, null, null, null, null, this.chart.themeStyle.legendLabelFont);\n textOptions = new TextOption('', endLabelX, endLabelY, anchor, endLabel);\n textOptions.id = this.legendID + this.generateId(previousLegend, '_text_', 2);\n textElement(chart.renderer, textOptions, legend.textStyle, fontcolor, legendTranslateGroup, false, false, false, false, \n // tslint:disable-next-line:align\n null, this.currentPageNumber && isCanvas ?\n new Rect(0, -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber), 0, 0) : null, null, null, null, null, this.chart.themeStyle.legendLabelFont);\n var gradientLegend = chart.renderer.drawRectangle({\n width: linearBarWidth,\n height: linearBarHeight,\n x: xValue,\n y: yValue,\n fill: 'url(#' + this.generateId(previousLegend, 'linearGradient', gradientLegendCount) + ')'\n });\n defElement.appendChild(linerGradientEle);\n legendTranslateGroup.appendChild(defElement);\n legendTranslateGroup.appendChild(gradientLegend);\n };\n /**\n * To find first valid legend text index for chart and accumulation chart\n *\n * @param legendCollection\n * @returns {number}\n * @private\n */\n BaseLegend.prototype.findFirstLegendPosition = function (legendCollection) {\n var count = 0;\n for (var _i = 0, legendCollection_1 = legendCollection; _i < legendCollection_1.length; _i++) {\n var legend = legendCollection_1[_i];\n if (legend.render && legend.text && legend.text !== '') {\n break;\n }\n count++;\n }\n return count;\n };\n /**\n * To get the legend title text width and height.\n *\n * @param legend\n * @param legendBounds\n */\n BaseLegend.prototype.calculateLegendTitle = function (legend, legendBounds) {\n if (legend.title) {\n this.isTop = legend.titlePosition === 'Top';\n var padding = legend.titleStyle.textOverflow === 'Trim' ? 2 * legend.padding : 0;\n if (this.isTop || this.isVertical) {\n this.legendTitleCollections = getTitle(legend.title, legend.titleStyle, (legendBounds.width - padding), this.chart.enableRtl, this.chart.themeStyle.legendTitleFont);\n }\n else {\n this.legendTitleCollections[0] = textTrim(legend.maximumTitleWidth, legend.title, legend.titleStyle, this.chart.enableRtl, this.chart.themeStyle.legendTitleFont);\n }\n var text = this.isTop ? legend.title : this.legendTitleCollections[0];\n this.legendTitleSize = measureText(text, legend.titleStyle, this.chart.themeStyle.legendTitleFont);\n this.legendTitleSize.height *= this.legendTitleCollections.length;\n }\n else {\n this.legendTitleSize = new Size(0, 0);\n }\n };\n /**\n * Render the legend title\n *\n * @param chart\n * @param legend\n * @param legendBounds\n * @param legendGroup\n */\n BaseLegend.prototype.renderLegendTitle = function (chart, legend, legendBounds, legendGroup) {\n var padding = legend.padding;\n var alignment = legend.titleStyle.textAlignment;\n this.isTop = legend.titlePosition === 'Top';\n var anchor = getTextAnchor(legend.titleStyle.textAlignment, chart.enableRtl);\n var x = titlePositionX(legendBounds, legend.titleStyle);\n anchor = this.isTop || this.isVertical ? anchor : (chart.enableRtl) ? 'end' : '';\n x = alignment === 'Near' ? (x + padding) : alignment === 'Far' ? (x - padding) : x;\n x = (this.isTop || this.isVertical) ? x : ((legendBounds.x) + (legend.titlePosition === 'Left' ? 5 :\n (legendBounds.width - this.legendTitleSize.width - 5)));\n var topPadding = (legendBounds.height / 2) + (this.legendTitleSize.height / 4);\n var y = legendBounds.y + (!this.isTop && !this.isVertical ? topPadding :\n (this.legendTitleSize.height / this.legendTitleCollections.length));\n var legendTitleTextOptions = new TextOption(this.legendID + '_title', x, y, anchor, this.legendTitleCollections);\n textElement(chart.renderer, legendTitleTextOptions, legend.titleStyle, legend.titleStyle.color || this.chart.themeStyle.legendTitleFont.color, legendGroup, null, null, null, null, null, null, null, null, null, null, this.chart.themeStyle.legendTitleFont);\n };\n /**\n * To create legend rendering elements for chart and accumulation chart\n *\n * @param chart\n * @param legendBounds\n * @param legendGroup\n * @param legend\n * @param id\n * @param redraw\n */\n BaseLegend.prototype.createLegendElements = function (chart, legendBounds, legendGroup, legend, id, redraw) {\n var padding = legend.padding;\n var options = new RectOption(id + '_element', legend.background, legend.border, legend.opacity, legendBounds);\n var legendItemsGroup = chart.renderer.createGroup({ id: id + '_collections' });\n var isCanvas = this.isStockChartControl ? false : chart.enableCanvas;\n var clippath = chart.renderer.createClipPath({ id: id + '_clipPath' });\n options.width = (this.isRtlEnable && this.chart.getModuleName() === 'accumulationchart' && this.isVertical) ? this.maxWidth : legendBounds.width;\n if (legendGroup) {\n legendGroup.appendChild(chart.renderer.drawRectangle(options));\n }\n else {\n chart.renderer.drawRectangle(options);\n }\n if (legend.title) {\n this.renderLegendTitle(chart, legend, legendBounds, legendGroup);\n }\n if (!isCanvas) {\n legendGroup.appendChild(legendItemsGroup);\n }\n this.legendTranslateGroup = chart.renderer.createGroup({ id: id + '_translate_g' });\n if (!isCanvas) {\n legendItemsGroup.appendChild(this.legendTranslateGroup);\n }\n options.y += (this.isTop ? this.legendTitleSize.height : 0);\n options.id += '_clipPath_rect';\n options.width = ((!this.isChartControl && chart.getModuleName() !== 'bulletChart' && !this.isStockChartControl) && this.isVertical) ? this.maxWidth - padding + legend.containerPadding.left + legend.containerPadding.right\n : legendBounds.width;\n if (!isCanvas) {\n this.clipRect = chart.renderer.drawRectangle(options);\n clippath.appendChild(this.clipRect);\n }\n else {\n this.pagingClipRect = options;\n }\n appendChildElement(isCanvas, chart.svgObject, clippath, redraw);\n if (!isCanvas) {\n legendItemsGroup.style.cssText = 'clip-path:url(#' + clippath.id + ')';\n }\n return this.legendTranslateGroup;\n };\n /**\n * To render legend symbols for chart and accumulation chart\n *\n * @param legendOption\n * @param group\n * @param i\n * @param legendOption\n * @param group\n * @param i\n * @param legendOption\n * @param group\n * @param i\n */\n BaseLegend.prototype.renderSymbol = function (legendOption, group, legendIndex) {\n var control = this.isBulletChartControl ? this.chart : null;\n var symbolColor = legendOption.visible ? legendOption.fill : '#D3D3D3';\n var isStrokeWidth = (this.chart.getModuleName() === 'chart' || this.chart.getModuleName() === 'stockChart') && (((legendOption.shape === 'SeriesType') &&\n (legendOption.type.toLowerCase().indexOf('line') > -1) && (legendOption.type.toLowerCase().indexOf('area') === -1)) ||\n ((legendOption.shape === 'HorizontalLine') || (legendOption.shape === 'VerticalLine') || (legendOption.shape === 'Cross')));\n var isCustomBorder = (this.chart.getModuleName() === 'chart' || this.chart.getModuleName() === 'stockChart') &&\n (legendOption.type === 'Scatter' || legendOption.type === 'Bubble');\n var isCanvas = this.isStockChartControl ? false : this.chart.enableCanvas;\n var borderColor;\n var shape = (legendOption.shape === 'SeriesType') ? legendOption.type : legendOption.shape;\n var strokewidth = isStrokeWidth ? (this.legend.mode === 'Series' ?\n this.chart.visibleSeries[legendIndex].width : this.chart.visibleSeries[0].width) :\n (this.isBulletChartControl && legendOption.shape === 'Multiply') ? 4 : 1;\n var regionPadding;\n shape = shape === 'Scatter' ? legendOption.markerShape : shape;\n if (isCustomBorder && legendIndex < this.chart.visibleSeries.length) {\n var series = this.chart.visibleSeries[legendIndex];\n var seriesBorder = series.border;\n var isLineShapemarker = shape === 'HorizontalLine' || shape === 'VerticalLine';\n borderColor = isLineShapemarker ? symbolColor : seriesBorder.color ? seriesBorder.color : symbolColor;\n strokewidth = isLineShapemarker ? series.width : seriesBorder.width ? seriesBorder.width : 1;\n }\n var symbolOption = new PathOption(this.legendID + this.generateId(legendOption, '_shape_', legendIndex), symbolColor, strokewidth, (isCustomBorder ? borderColor : symbolColor), this.legend.opacity, legendOption.dashArray, '');\n var textSize = measureText(legendOption.text, this.legend.textStyle, this.chart.themeStyle.legendLabelFont);\n var x = this.legend.isInversed && !this.isRtlEnable ? legendOption.location.x + textSize.width + this.legend.shapePadding\n : legendOption.location.x;\n var y = legendOption.location.y;\n if (!isCanvas) {\n group.appendChild(drawSymbol({ x: x, y: y }, shape, new Size(this.legend.shapeWidth, this.legend.shapeHeight), legendOption.url, symbolOption, this.accessbilityText, this.chart.renderer, null, this.isBulletChartControl, control));\n }\n else {\n regionPadding = -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber);\n drawSymbol({ x: x, y: y }, shape, new Size(this.legend.shapeWidth, this.legend.shapeHeight), '', symbolOption, this.accessbilityText, this.chart.renderer, this.currentPageNumber ? new Rect(0, regionPadding, 0, 0) : null, this.isBulletChartControl, control);\n this.legendRegions.push({\n rect: new Rect(legendOption.location.x, legendOption.location.y, this.legend.shapeWidth, this.legend.shapeHeight + regionPadding), index: legendIndex\n });\n }\n if (shape === 'Line' && legendOption.markerVisibility && legendOption.markerShape !== 'Image' ||\n (legendOption.type === 'Doughnut' && shape === 'Doughnut')) {\n symbolOption.id = this.legendID + this.generateId(legendOption, '_shape_marker_', legendIndex);\n shape = legendOption.type === 'Doughnut' ? 'Circle' : legendOption.markerShape;\n symbolOption.fill = legendOption.type === 'Doughnut' ? '#FFFFFF' : symbolOption.fill;\n if (!isCanvas) {\n group.appendChild(drawSymbol({ x: x, y: y }, shape, new Size(this.legend.shapeWidth / 2, this.legend.shapeHeight / 2), '', symbolOption, this.accessbilityText, null, null, this.isBulletChartControl, control));\n }\n else {\n drawSymbol({ x: x, y: y }, shape, new Size(this.legend.shapeWidth / 2, this.legend.shapeHeight / 2), '', symbolOption, this.accessbilityText, this.chart.renderer, this.currentPageNumber ?\n new Rect(0, -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber), 0, 0) : null, this.isBulletChartControl, control);\n }\n }\n };\n /**\n * To render legend text for chart and accumulation chart\n *\n * @param chart\n * @param legendOption\n * @param group\n * @param textOptions\n * @param i\n * @param chart\n * @param legendOption\n * @param group\n * @param textOptions\n * @param i\n * @param chart\n * @param legendOption\n * @param group\n * @param textOptions\n * @param i\n * @param chart\n * @param legendOption\n * @param group\n * @param textOptions\n * @param i\n * @param chart\n * @param legendOption\n * @param group\n * @param textOptions\n * @param i\n */\n BaseLegend.prototype.renderText = function (chart, legendOption, group, textOptions, i, legendIndex) {\n var legend = chart.legendSettings;\n var hiddenColor = '#D3D3D3';\n var fontcolor = legendOption.visible ? legend.textStyle.color || chart.themeStyle.legendLabelFont.color : hiddenColor;\n var isCanvas = this.isStockChartControl ? false : this.chart.enableCanvas;\n textOptions.id = this.legendID + this.generateId(legendOption, '_text_', legendIndex);\n textOptions.text = legendOption.textCollection.length > 0 ? legendOption.textCollection : legendOption.text;\n if (legend.isInversed && !this.isRtlEnable) {\n textOptions.x = legendOption.location.x - (legend.shapeWidth / 2);\n }\n else if (this.isRtlEnable) {\n var textWidth = measureText(legendOption.text, legend.textStyle, this.chart.themeStyle.legendLabelFont).width;\n textOptions.x = legendOption.location.x - ((legendOption.textCollection.length > 1 ? textWidth / legendOption.textCollection.length : textWidth) + legend.shapeWidth / 2 + legend.shapePadding);\n }\n else {\n textOptions.x = legendOption.location.x + (legend.shapeWidth / 2) + legend.shapePadding;\n }\n textOptions.y = legendOption.location.y + this.maxItemHeight / 4;\n var element = textElement(chart.renderer, textOptions, legend.textStyle, fontcolor, group, false, false, false, false, null, this.currentPageNumber && isCanvas ?\n new Rect(0, -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber), 0, 0) : null, null, null, null, null, this.chart.themeStyle.legendLabelFont);\n if (isCanvas) {\n var textSize = measureText(legendOption.text, legend.textStyle, this.chart.themeStyle.legendLabelFont);\n this.legendRegions[i].rect.y = textOptions.y < this.legendRegions[i].rect.y ? textOptions.y : this.legendRegions[i].rect.y;\n this.legendRegions[i].rect.width += textSize.width;\n this.legendRegions[i].rect.height = textSize.height;\n this.legendRegions[i].rect.y -= textSize.height * 0.5;\n this.legendRegions[i].rect.x -= (this.isRtlEnable) ? this.legendRegions[i].rect.width : 0;\n }\n };\n /**\n * To render legend paging elements for chart and accumulation chart\n *\n * @param chart\n * @param bounds\n * @param textOption\n * @param legendGroup\n * @param chart\n * @param bounds\n * @param textOption\n * @param legendGroup\n * @param chart\n * @param bounds\n * @param textOption\n * @param legendGroup\n * @param chart\n * @param bounds\n * @param textOption\n * @param legendGroup\n */\n // tslint:disable-next-line:max-func-body-length\n BaseLegend.prototype.renderPagingElements = function (chart, bounds, textOption, legendGroup) {\n var paginggroup = chart.renderer.createGroup({ id: this.legendID + '_navigation' });\n var isCanvas = this.isStockChartControl ? false : chart.enableCanvas;\n var titleHeight = this.isBulletChartControl ? 0 : this.legendTitleSize.height;\n var grayColor = (this.chart.theme.indexOf('Dark') > -1 || this.chart.theme.indexOf('Contrast') > -1) ? '#FFFFFF' : '#545454';\n var legend = chart.legendSettings; // to solve parameter lint error, legend declaration is here\n var padding = 8; // const padding for paging elements\n var pageUp = this.legendID + (!this.isRtlEnable ? '_pageup' : '_pagedown');\n var pageDown = this.legendID + (!this.isRtlEnable ? '_pagedown' : '_pageup');\n var symbolOption = new PathOption(pageUp, 'transparent', 5, grayColor, 1, '', '');\n var iconSize = this.pageButtonSize;\n // Page left arrow drawing calculation started here\n var rowCount = !legend.enablePages && this.isPaging && !this.isVertical && !this.isBulletChartControl ? 1 :\n (this.rowCount - 1);\n var titleWidth = this.isTitle && legend.titlePosition === 'Left' ? this.legendTitleSize.width : 0;\n this.pagingRegions = [];\n this.backwardArrowOpacity = this.currentPage !== 1 ? 1 : 0;\n this.forwardArrowOpacity = this.currentPage === this.totalPages ? 0 : 1;\n if (!isCanvas) {\n legendGroup.appendChild(paginggroup);\n }\n if (!this.isChartControl && !this.isAccChartControl) {\n if (this.isBulletChartControl || this.isStockChartControl || !this.isVertical) {\n this.totalPages = Math.ceil(this.totalPages / Math.max(1, this.rowCount - 1));\n }\n else {\n this.totalPages = Math.ceil(this.totalPages / this.maxColumns);\n }\n }\n if (paginggroup) {\n paginggroup.style.cursor = 'pointer';\n }\n if ((this.isChartControl || this.isAccChartControl) && !(!legend.enablePages && this.isPaging)) {\n this.clipPathHeight = this.pageHeights[0];\n }\n else {\n this.clipPathHeight = (rowCount * (this.maxItemHeight + legend.padding));\n }\n //this.clipPathHeight = !(this.isChartControl) ? (rowCount * (this.maxItemHeight + legend.padding)) : this.columnHeights[0];\n if (!isCanvas) {\n this.clipRect.setAttribute('height', this.clipPathHeight.toString());\n }\n else {\n //paging clipRect only for canvas mode\n this.pagingClipRect.height = this.legendBounds.height - this.clipPathHeight -\n (this.pagingClipRect.y - this.legendBounds.y) - legend.border.width;\n this.pagingClipRect.y = this.pagingClipRect.y + this.clipPathHeight;\n this.pagingClipRect.x += legend.border.width;\n this.pagingClipRect.width -= (legend.border.width + legend.border.width / 2);\n this.chart.renderer.clearRect(new Rect(this.pagingClipRect.x, this.pagingClipRect.y, this.pagingClipRect.width, this.pagingClipRect.height));\n }\n var pageTextElement;\n var x = (bounds.x + iconSize / 2);\n var y = bounds.y + this.clipPathHeight + ((titleHeight + bounds.height - this.clipPathHeight) / 2);\n if (this.isPaging && !legend.enablePages && !this.isVertical && !this.isBulletChartControl) {\n x = (bounds.x + this.pageButtonSize + titleWidth);\n y = legend.title && this.isTop ? (bounds.y + padding + titleHeight + (iconSize / 1) + 0.5) :\n (bounds.y + padding + iconSize + 0.5);\n }\n var size = measureText(this.totalPages + '/' + this.totalPages, legend.textStyle, this.chart.themeStyle.legendLabelFont);\n var translateX = (this.isRtlEnable) ? legend.border.width + (iconSize / 2) : bounds.width - (2 * (iconSize + padding) + padding + size.width);\n if (!isCanvas) {\n if (this.isVertical && !legend.enablePages && !this.isBulletChartControl) {\n x = bounds.x + (bounds.width / 2);\n y = bounds.y + (iconSize / 2) + (padding / 2) + titleHeight;\n symbolOption.opacity = this.backwardArrowOpacity;\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'UpArrow', new Size(iconSize, iconSize), '', symbolOption, 'UpArrow'));\n }\n else {\n symbolOption.opacity = this.isBulletChartControl ? symbolOption.opacity :\n (legend.enablePages ? 1 : !this.isRtlEnable ? this.backwardArrowOpacity : this.forwardArrowOpacity);\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'LeftArrow', new Size(iconSize, iconSize), '', symbolOption, 'LeftArrow'));\n }\n }\n else {\n drawSymbol({ x: x, y: y }, 'LeftArrow', new Size(iconSize, iconSize), '', symbolOption, 'LeftArrow', this.chart.renderer, new Rect(translateX, 0, 0, 0));\n }\n this.pagingRegions.push(new Rect(!this.isRtlEnable ? x + bounds.width - (2 * (iconSize + padding) + padding + size.width) - iconSize * 0.5 : x, y - iconSize * 0.5, iconSize, iconSize));\n // Page numbering rendering calculation started here\n textOption.x = x + (iconSize / 2) + padding;\n textOption.y = y + (size.height / 4);\n textOption.id = this.legendID + '_pagenumber';\n textOption.text = !this.isRtlEnable ? '1/' + this.totalPages : this.totalPages + '/1';\n var color = (this.chart.theme.indexOf('Dark') > -1 || this.chart.theme.indexOf('Contrast') > -1) ? '#FFFFFF' : legend.textStyle.color || this.chart.themeStyle.legendLabelFont.color;\n if (isCanvas && this.totalNoOfPages) {\n textOption.text = !this.isRtlEnable ? this.currentPageNumber + '/' + this.totalNoOfPages : this.totalNoOfPages + '/' + this.currentPageNumber;\n }\n if (legend.enablePages || this.isBulletChartControl) {\n pageTextElement = textElement(chart.renderer, textOption, legend.textStyle, color, paginggroup, false, false, false, false, null, new Rect(translateX, 0, 0, 0), null, null, null, null, this.chart.themeStyle.legendLabelFont);\n }\n // Page right arrow rendering calculation started here\n x = textOption.x + padding + (iconSize / 2) + size.width;\n if (this.isPaging && !legend.enablePages && !this.isVertical) {\n x = (bounds.x + bounds.width - (this.isBulletChartControl ? this.fivePixel : 0) - this.pageButtonSize - (legend.title && legend.titlePosition === 'Right' ?\n this.legendTitleSize.width + this.fivePixel : 0));\n }\n symbolOption.id = pageDown;\n symbolOption.opacity = !legend.enablePages ? !this.isRtlEnable ? this.forwardArrowOpacity : this.backwardArrowOpacity : 1;\n if (!isCanvas) {\n if (this.isVertical && !legend.enablePages && !this.isBulletChartControl) {\n x = bounds.x + (bounds.width / 2);\n y = bounds.y + bounds.height - (iconSize / 2);\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'DownArrow', new Size(iconSize, iconSize), '', symbolOption, 'DownArrow'));\n }\n else {\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'RightArrow', new Size(iconSize, iconSize), '', symbolOption, 'RightArrow'));\n }\n }\n else {\n drawSymbol({ x: x, y: y }, 'RightArrow', new Size(iconSize, iconSize), '', symbolOption, 'RightArrow', this.chart.renderer, new Rect(translateX, 0, 0, 0));\n }\n this.pagingRegions.push(new Rect(!this.isRtlEnable ? x + (bounds.width - (2 * (iconSize + padding) + padding + size.width) - iconSize * 0.5) : x, y - iconSize * 0.5, iconSize, iconSize));\n if (!isCanvas && (legend.enablePages || this.isBulletChartControl)) {\n //placing the navigation buttons and page numbering in legend right corner\n paginggroup.setAttribute('transform', 'translate(' + translateX + ', ' + 0 + ')');\n }\n else {\n if (this.currentPageNumber === 1 && this.calTotalPage && (legend.enablePages || this.isBulletChartControl)) {\n this.totalNoOfPages = this.totalPages;\n this.calTotalPage = false;\n }\n if (!legend.enablePages && !this.isBulletChartControl) { // For new legend page navigation\n this.translatePage(isCanvas, null, this.currentPage - 1, this.currentPage, legend);\n }\n }\n if (legend.enablePages || this.isBulletChartControl) {\n this.translatePage(isCanvas, pageTextElement, this.currentPage - 1, this.currentPage, legend);\n }\n };\n BaseLegend.prototype.getPageHeight = function (pageHeights, pageCount) {\n var sum = 0;\n for (var i = 0; i < pageCount; i++) {\n sum += pageHeights[i];\n }\n return sum;\n };\n /**\n * To translate legend pages for chart and accumulation chart\n *\n * @param pagingText\n * @param page\n * @param pageNumber\n * @param legend\n * @param pagingText\n * @param page\n * @param pageNumber\n * @param legend\n * @param pagingText\n * @param page\n * @param pageNumber\n * @param legend\n * @param pagingText\n * @param page\n * @param pageNumber\n * @param legend\n */\n BaseLegend.prototype.translatePage = function (isCanvas, pagingText, page, pageNumber, legend) {\n var size = (this.isChartControl || this.isAccChartControl) ? (page ? this.getPageHeight(this.pageHeights, page) : 0) : ((this.clipPathHeight) * page);\n if (!isCanvas && (this.isChartControl || this.isAccChartControl)) {\n this.clipRect.setAttribute('height', this.pageHeights[page].toString());\n if (this.isAccChartControl && this.isPaging && !legend.enablePages && this.isVertical) {\n this.clipRect.setAttribute('height', this.legendBounds.height.toString());\n }\n }\n var translate = 'translate(0,-' + size + ')';\n if (!this.isChartControl && !this.isBulletChartControl && !this.isStockChartControl && this.isVertical) {\n var pageX = this.pageXCollections[page * this.maxColumns];\n size = (!this.isRtlEnable) ? pageX - this.legendBounds.x : (this.legendBounds.x + this.maxWidth) - pageX;\n size = size < 0 ? 0 : size; // to avoid small pixel variation\n translate = ((!this.isRtlEnable) ? 'translate(-' : 'translate(') + size + ',0)';\n }\n if (!this.chart.enableCanvas) {\n this.legendTranslateGroup.setAttribute('transform', translate);\n }\n if (!this.chart.enableCanvas && (legend.enablePages || this.isBulletChartControl)) {\n pagingText.textContent = (pageNumber) + '/' + this.totalPages;\n }\n this.currentPage = pageNumber;\n return size;\n };\n /**\n * To change legend pages for chart and accumulation chart\n *\n * @param event\n * @param pageUp\n * @param event\n * @param pageUp\n */\n BaseLegend.prototype.changePage = function (event, pageUp) {\n var legend = this.chart.legendSettings;\n var backwardArrow = document.getElementById(this.legendID + '_pageup');\n var forwardArrow = document.getElementById(this.legendID + '_pagedown');\n var isCanvas = this.isStockChartControl ? false : this.chart.enableCanvas;\n var pageText = (legend.enablePages || this.isBulletChartControl) ?\n document.getElementById(this.legendID + '_pagenumber') : null;\n var page = (legend.enablePages || this.isBulletChartControl) ? parseInt(pageText.textContent.split('/')[0], 10) :\n this.currentPage;\n if (pageUp && page > 1) {\n this.translatePage(isCanvas, pageText, (page - 2), (page - 1), legend);\n }\n else if (!pageUp && page < this.totalPages) {\n this.translatePage(isCanvas, pageText, page, (page + 1), legend);\n }\n if (this.isPaging && !legend.enablePages && !this.isBulletChartControl) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n this.currentPage === this.totalPages ? this.hideArrow(forwardArrow) : this.showArrow(forwardArrow);\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n this.currentPage === 1 ? this.hideArrow(backwardArrow) : this.showArrow(backwardArrow);\n }\n };\n /**\n * To hide the backward and forward arrow\n *\n * @param arrowElement\n */\n BaseLegend.prototype.hideArrow = function (arrowElement) {\n arrowElement.setAttribute('opacity', '0');\n };\n /**\n * To show the backward and forward arrow\n *\n * @param arrowElement\n */\n BaseLegend.prototype.showArrow = function (arrowElement) {\n arrowElement.setAttribute('opacity', '1');\n };\n /**\n * To find legend elements id based on chart or accumulation chart\n *\n * @param option\n * @param prefix\n * @param count\n * @param option\n * @param prefix\n * @param count\n * @param option\n * @param prefix\n * @param count\n * @private\n */\n BaseLegend.prototype.generateId = function (option, prefix, count) {\n if (this.isChartControl || this.isStockChartControl) {\n return prefix + count;\n }\n else {\n return prefix + option.pointIndex;\n }\n };\n /**\n * To show or hide trimmed text tooltip for legend.\n *\n * @param event\n * @returns {void}\n * @private\n */\n BaseLegend.prototype.move = function (event) {\n var _this = this;\n var x = this.chart.mouseX;\n var y = this.chart.mouseY;\n if (event.target.textContent.indexOf('...') > -1) {\n var targetId = event.target.id.split(this.legendID + '_text_');\n if (targetId.length === 2) {\n var index = parseInt(targetId[1], 10);\n var element = this.chart.element;\n if (!isNaN(index)) {\n if (this.chart.isTouch) {\n removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');\n }\n if (this.isChartControl) {\n showTooltip(this.chart.series[index].name, x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', getElement(this.chart.element.id + '_Secondary_Element'));\n }\n else {\n showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), x + 10, y + 10, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', getElement(this.chart.element.id + '_Secondary_Element'));\n }\n }\n }\n }\n else {\n removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');\n }\n if (this.chart.isTouch) {\n clearTimeout(this.clearTooltip);\n this.clearTooltip = +setTimeout(function () { removeElement(_this.chart.element.id + '_EJ2_Legend_Tooltip'); }, 1000);\n }\n };\n return BaseLegend;\n}());\nexport { BaseLegend };\n/**\n * Class for legend options\n *\n * @private\n */\nvar LegendOptions = /** @class */ (function () {\n function LegendOptions(text, fill, shape, visible, type, url, markerShape, markerVisibility, pointIndex, seriesIndex, dashArray) {\n this.location = { x: 0, y: 0 };\n this.textCollection = [];\n this.text = text;\n this.fill = fill;\n this.shape = shape;\n this.url = url;\n this.visible = visible;\n this.type = type;\n this.markerVisibility = markerVisibility;\n this.markerShape = markerShape;\n this.pointIndex = pointIndex;\n this.seriesIndex = seriesIndex;\n this.dashArray = dashArray;\n }\n return LegendOptions;\n}());\nexport { LegendOptions };\n","const dates = {\r\n addDays: function (date, days) {\r\n date.setDate(date.getDate() + days);\r\n return date;\r\n },\r\n\r\n getTradePeriodName: function (startDate, endDate) {\r\n if (Date.parse(startDate) >= Date.parse(endDate)) {\r\n throw new Error(\"'startDate' must be earlier than the 'endDate'. Please correct the dates.\");\r\n }\r\n\r\n startDate = new Date(startDate);\r\n endDate = new Date(endDate)\r\n\r\n var yearSuffix = startDate.getFullYear().ToString().Substring(2);\r\n var numOfDays = this.getDateDiffInDays(startDate, endDate);\r\n var tradeablePeriod = null;\r\n\r\n // potential M, Q, or CAL periods\r\n if (startDate.getFullYear() === endDate.getFullYear()) {\r\n // month\r\n if (numOfDays <= 31 && numOfDays >= 28) {\r\n startDate = this.addDays(startDate, 1);\r\n tradeablePeriod = startDate.toLocaleString('default', { month: 'short' }) + \"-\" + yearSuffix;\r\n }\r\n\r\n //quarter\r\n if (numOfDays <= 92 && numOfDays >= 90) {\r\n startDate = this.addDays(startDate, 1);\r\n\r\n if (this.getQuarter(startDate) === 1) {\r\n tradeablePeriod = \"Q1-\" + yearSuffix;\r\n } else if (this.getQuarter(startDate) === 2) {\r\n tradeablePeriod = \"Q2-\" + yearSuffix;\r\n } else if (this.getQuarter(startDate) === 3) {\r\n tradeablePeriod = \"Q3-\" + yearSuffix;\r\n } else {\r\n tradeablePeriod = \"Q4-\" + yearSuffix;\r\n }\r\n }\r\n\r\n // summer season\r\n if (numOfDays >= 182 && numOfDays <= 183) {\r\n startDate = this.addDays(startDate, 1);\r\n\r\n if (startDate.toLocaleString('default', { month: 'short' }) === \"Apr\") {\r\n tradeablePeriod = \"Sum-\" + yearSuffix;\r\n }\r\n }\r\n\r\n // calendar\r\n if (numOfDays >= 364 && numOfDays <= 366) {\r\n tradeablePeriod = \"Cal-\" + yearSuffix;\r\n }\r\n } else if (startDate.getFullYear() + 1 === endDate.getFullYear()) {\r\n if (numOfDays >= 182 && numOfDays <= 183) {\r\n startDate = this.addDays(startDate, 1);\r\n\r\n if (startDate.toLocaleString('default', { month: 'short' }) === \"Oct\") {\r\n tradeablePeriod = \"Win-\" + yearSuffix;\r\n }\r\n }\r\n }\r\n\r\n return tradeablePeriod;\r\n },\r\n\r\n getDateDiffInDays: function (startDate, endDate) {\r\n var result = Math.round(Math.abs((startDate - endDate) / (24 * 60 * 60 * 1000))) + 1;\r\n return result;\r\n },\r\n getBusinessDatesCount: function (startDate, endDate) {\r\n if (startDate == undefined || endDate == undefined)\r\n return 0;\r\n\r\n let count = 0;\r\n //set dates to have 0 hours,minutes... as otherwise for october it does the matching and due to daylight saving change it doesnt match the last day and we dont calculate it.\r\n startDate.setHours(0, 0, 0, 0);\r\n endDate.setHours(0, 0, 0, 0);\r\n\r\n const curDate = new Date(startDate.getTime());\r\n while (curDate <= endDate) {\r\n const dayOfWeek = curDate.getDay();\r\n if (dayOfWeek !== 0 && dayOfWeek !== 6) count++;\r\n curDate.setDate(curDate.getDate() + 1);\r\n }\r\n return count;\r\n },\r\n getQuarter: function (date) {\r\n date = new Date(date);\r\n\r\n return Math.floor((date.getMonth() + 3) / 3);\r\n }\r\n}\r\n\r\nexport default dates;","/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * To import utils\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar SvgRenderer = /** @class */ (function () {\n /* End-Properties */\n function SvgRenderer(rootID) {\n //Internal Variables\n this.svgLink = 'http://www.w3.org/2000/svg';\n this.rootId = rootID;\n }\n // method to get the attributes value\n // tslint:disable-next-line:no-any\n SvgRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n }; /* tslint:enable */\n /**\n * To create a Html5 SVG element\n *\n * @param {SVGAttributes} options - Options to create SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createSvg = function (options) {\n if (isNullOrUndefined(options.id)) {\n options.id = this.rootId + '_svg';\n }\n this.svgObj = document.getElementById(options.id);\n if (isNullOrUndefined(document.getElementById(options.id))) {\n this.svgObj = document.createElementNS(this.svgLink, 'svg');\n }\n this.svgObj = this.setElementAttributes(options, this.svgObj);\n this.setSVGSize(options.width, options.height);\n return this.svgObj;\n };\n // method to set the height and width for the SVG element\n SvgRenderer.prototype.setSVGSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width) || this.width <= 0) {\n this.svgObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.svgObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height) || this.height <= 0) {\n this.svgObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.svgObj.setAttribute('height', this.height.toString());\n }\n };\n /**\n * To draw a path\n *\n * @param {PathAttributes} options - Options to draw a path in SVG\n * @returns {Element} It returns a appropriate path\n */\n SvgRenderer.prototype.drawPath = function (options) {\n var path = document.getElementById(options.id);\n if (path === null) {\n path = document.createElementNS(this.svgLink, 'path');\n }\n path = this.setElementAttributes(options, path);\n return path;\n };\n /**\n * To draw a line\n *\n * @param {LineAttributes} options - Options to draw a line in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawLine = function (options) {\n var line = document.getElementById(options.id);\n if (line === null) {\n line = document.createElementNS(this.svgLink, 'line');\n }\n line = this.setElementAttributes(options, line);\n return line;\n };\n /**\n * To draw a rectangle\n *\n * @param {BaseAttibutes} options - Required options to draw a rectangle in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawRectangle = function (options) {\n var rectangle = document.getElementById(options.id);\n if (rectangle === null) {\n rectangle = document.createElementNS(this.svgLink, 'rect');\n }\n rectangle = this.setElementAttributes(options, rectangle);\n return rectangle;\n };\n /**\n * To draw a circle\n *\n * @param {CircleAttributes} options - Required options to draw a circle in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawCircle = function (options) {\n var circle = document.getElementById(options.id);\n if (circle === null) {\n circle = document.createElementNS(this.svgLink, 'circle');\n }\n circle = this.setElementAttributes(options, circle);\n return circle;\n };\n /**\n * To draw a polyline\n *\n * @param {PolylineAttributes} options - Options required to draw a polyline\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawPolyline = function (options) {\n var polyline = document.getElementById(options.id);\n if (polyline === null) {\n polyline = document.createElementNS(this.svgLink, 'polyline');\n }\n polyline = this.setElementAttributes(options, polyline);\n return polyline;\n };\n /**\n * To draw an ellipse\n *\n * @param {EllipseAttributes} options - Options required to draw an ellipse\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawEllipse = function (options) {\n var ellipse = document.getElementById(options.id);\n if (ellipse === null) {\n ellipse = document.createElementNS(this.svgLink, 'ellipse');\n }\n ellipse = this.setElementAttributes(options, ellipse);\n return ellipse;\n };\n /**\n * To draw a polygon\n *\n * @param {PolylineAttributes} options - Options needed to draw a polygon in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawPolygon = function (options) {\n var polygon = document.getElementById(options.id);\n if (polygon === null) {\n polygon = document.createElementNS(this.svgLink, 'polygon');\n }\n polygon = this.setElementAttributes(options, polygon);\n return polygon;\n };\n /**\n * To draw an image\n *\n * @param {ImageAttributes} options - Required options to draw an image in SVG\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawImage = function (options) {\n var img = document.createElementNS(this.svgLink, 'image');\n img.setAttributeNS(null, 'height', options.height.toString());\n img.setAttributeNS(null, 'width', options.width.toString());\n img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);\n img.setAttributeNS(null, 'x', options.x.toString());\n img.setAttributeNS(null, 'y', options.y.toString());\n img.setAttributeNS(null, 'id', options.id);\n img.setAttributeNS(null, 'visibility', options.visibility);\n if (!isNullOrUndefined(this.getOptionValue(options, 'clip-path'))) {\n img.setAttributeNS(null, 'clip-path', this.getOptionValue(options, 'clip-path'));\n }\n if (!isNullOrUndefined(options.preserveAspectRatio)) {\n img.setAttributeNS(null, 'preserveAspectRatio', options.preserveAspectRatio);\n }\n return img;\n };\n /**\n * To draw a text\n *\n * @param {TextAttributes} options - Options needed to draw a text in SVG\n * @param {string} label - Label of the text\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createText = function (options, label) {\n var text = document.createElementNS(this.svgLink, 'text');\n text = this.setElementAttributes(options, text);\n if (!isNullOrUndefined(label)) {\n text.textContent = label;\n }\n return text;\n };\n /**\n * To create a tSpan\n *\n * @param {TextAttributes} options - Options to create tSpan\n * @param {string} label - The text content which is to be rendered in the tSpan\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createTSpan = function (options, label) {\n var tSpan = document.createElementNS(this.svgLink, 'tspan');\n tSpan = this.setElementAttributes(options, tSpan);\n if (!isNullOrUndefined(label)) {\n tSpan.textContent = label;\n }\n return tSpan;\n };\n /**\n * To create a title\n *\n * @param {string} text - The text content which is to be rendered in the title\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createTitle = function (text) {\n var title = document.createElementNS(this.svgLink, 'title');\n title.textContent = text;\n return title;\n };\n /**\n * To create defs element in SVG\n *\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createDefs = function () {\n var defs = document.createElementNS(this.svgLink, 'defs');\n return defs;\n };\n /**\n * To create clip path in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createClipPath = function (options) {\n var clipPath = document.createElementNS(this.svgLink, 'clipPath');\n clipPath = this.setElementAttributes(options, clipPath);\n return clipPath;\n };\n /**\n * To create foreign object in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create foreign object\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createForeignObject = function (options) {\n var foreignObject = document.createElementNS(this.svgLink, 'foreignObject');\n foreignObject = this.setElementAttributes(options, foreignObject);\n return foreignObject;\n };\n /**\n * To create group element in SVG\n *\n * @param {BaseAttibutes} options - Options needed to create group\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createGroup = function (options) {\n var group = document.createElementNS(this.svgLink, 'g');\n group = this.setElementAttributes(options, group);\n return group;\n };\n /**\n * To create pattern in SVG\n *\n * @param {PatternAttributes} options - Required options to create pattern in SVG\n * @param {string} element - Specifies the name of the pattern\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.createPattern = function (options, element) {\n var pattern = document.createElementNS(this.svgLink, element);\n pattern = this.setElementAttributes(options, pattern);\n return pattern;\n };\n /**\n * To create radial gradient in SVG\n *\n * @param {string[]} colors - Specifies the colors required to create radial gradient\n * @param {string} name - Specifies the name of the gradient\n * @param {RadialGradient} options - value for radial gradient\n * @returns {string} It returns color name\n */\n SvgRenderer.prototype.createRadialGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'radialGradient',\n 'cx': options.cx + '%',\n 'cy': options.cy + '%',\n 'r': options.r + '%',\n 'fx': options.fx + '%',\n 'fy': options.fy + '%'\n };\n this.drawGradient('radialGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'radialGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To create linear gradient in SVG\n *\n * @param {GradientColor[]} colors - Array of string specifies the values for color\n * @param {string} name - Specifies the name of the gradient\n * @param {LinearGradient} options - Specifies the options for gradient\n * @returns {string} It returns color name\n */\n SvgRenderer.prototype.createLinearGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'linearGradient',\n 'x1': options.x1 + '%',\n 'y1': options.y1 + '%',\n 'x2': options.x2 + '%',\n 'y2': options.y2 + '%'\n };\n this.drawGradient('linearGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'linearGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To render the gradient element in SVG\n *\n * @param {string} gradientType - Specifies the type of the gradient\n * @param {RadialGradient | LinearGradient} options - Options required to render a gradient\n * @param {string[]} colors - Array of string specifies the values for color\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawGradient = function (gradientType, options, colors) {\n var defs = this.createDefs();\n var gradient = document.createElementNS(this.svgLink, gradientType);\n gradient = this.setElementAttributes(options, gradient);\n for (var i = 0; i < colors.length; i++) {\n var stop_1 = document.createElementNS(this.svgLink, 'stop');\n stop_1.setAttribute('offset', colors[i].colorStop);\n stop_1.setAttribute('stop-color', colors[i].color);\n stop_1.setAttribute('stop-opacity', colors[i].opacity ? (colors[i].opacity) : '1');\n if (!isNullOrUndefined(colors[i].style)) {\n stop_1.style.cssText = colors[i].style;\n }\n gradient.appendChild(stop_1);\n }\n defs.appendChild(gradient);\n return defs;\n };\n /**\n * To render a clip path\n *\n * @param {BaseAttibutes} options - Options required to render a clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n options.id = options.id + '_Rect';\n var rect = this.drawRectangle(options);\n clipPath.appendChild(rect);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To create circular clip path in SVG\n *\n * @param {CircleAttributes} options - Options required to create circular clip path\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.drawCircularClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n options.id = options.id + '_Circle';\n var circle = this.drawCircle(options);\n clipPath.appendChild(circle);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To set the attributes to the element\n *\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {Element} element - The element to which the attributes need to be set\n * @returns {Element} It returns a appropriate element\n */\n SvgRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n for (var i = 0; i < keys.length; i++) {\n if (keys[i] === 'style') {\n element.style.cssText = options[keys[i]];\n }\n else {\n element.setAttribute(keys[i], options[keys[i]]);\n }\n }\n return element;\n };\n /**\n * To create a Html5 canvas element\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n SvgRenderer.prototype.createCanvas = function () {\n return null;\n };\n return SvgRenderer;\n}());\nexport { SvgRenderer };\n","/* eslint-disable no-case-declarations */\n/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * To import utils.\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @private\n */\nvar CanvasRenderer = /** @class */ (function () {\n /* End-Properties */\n function CanvasRenderer(rootID) {\n this.rootId = rootID;\n }\n // method to get the attributes value\n // tslint:disable-next-line:no-any\n CanvasRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n };\n /* tslint:enable */\n /**\n * To create a Html5 canvas element\n *\n * @param {BaseAttibutes} options - Options to create canvas\n * @returns {HTMLCanvasElement} Creating a canvas\n */\n CanvasRenderer.prototype.createCanvas = function (options) {\n var canvasObj = document.createElement('canvas');\n canvasObj.setAttribute('id', this.rootId + '_canvas');\n this.ctx = canvasObj.getContext('2d');\n this.canvasObj = canvasObj;\n this.setCanvasSize(options.width, options.height);\n return this.canvasObj;\n };\n /**\n * To set the width and height for the Html5 canvas element\n *\n * @param {number} width - width of the canvas\n * @param {number} height - height of the canvas\n * @returns {void} Setting canvas size\n */\n CanvasRenderer.prototype.setCanvasSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width)) {\n this.canvasObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.canvasObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height)) {\n this.canvasObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.canvasObj.setAttribute('height', this.height.toString());\n }\n };\n // To set the values to the attributes\n CanvasRenderer.prototype.setAttributes = function (options) {\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n var dashArray = this.getOptionValue(options, 'stroke-dasharray');\n if (!isNullOrUndefined(dashArray)) {\n var dashArrayString = dashArray.split(',');\n this.ctx.setLineDash([parseInt(dashArrayString[0], 10), parseInt(dashArrayString[1], 10)]);\n }\n this.ctx.strokeStyle = this.getOptionValue(options, 'stroke');\n };\n /**\n * To draw a line\n *\n * @param {LineAttributes} options - required options to draw a line on the canvas\n * @returns {void} To draw a line\n */\n CanvasRenderer.prototype.drawLine = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.moveTo(options.x1, options.y1);\n this.ctx.lineTo(options.x2, options.y2);\n this.ctx.stroke();\n this.ctx.restore();\n };\n /**\n * To draw a rectangle\n *\n * @param {RectAttributes} options - required options to draw a rectangle on the canvas.\n * @param {Int32Array} canvasTranslate TO get a translate value of canvas.\n * @returns {void} To draw rectangle.\n */\n CanvasRenderer.prototype.drawRectangle = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n var cornerRadius = options.rx;\n this.ctx.save();\n this.ctx.beginPath();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.globalAlpha = this.getOptionValue(options, 'opacity');\n this.setAttributes(options);\n this.ctx.rect(options.x, options.y, options.width, options.height);\n if (cornerRadius !== null && cornerRadius >= 0) {\n this.drawCornerRadius(options);\n }\n else {\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n this.ctx.fillRect(options.x, options.y, options.width, options.height);\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n return (this.canvasObj);\n };\n // To draw the corner of a rectangle\n CanvasRenderer.prototype.drawCornerRadius = function (options) {\n var cornerRadius = options.rx;\n var x = options.x;\n var y = options.y;\n var width = options.width;\n var height = options.height;\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n if (width < 2 * cornerRadius) {\n cornerRadius = width / 2;\n }\n if (height < 2 * cornerRadius) {\n cornerRadius = height / 2;\n }\n this.ctx.beginPath();\n this.ctx.moveTo(x + width - cornerRadius, y);\n this.ctx.arcTo(x + width, y, x + width, y + height, cornerRadius);\n this.ctx.arcTo(x + width, y + height, x, y + height, cornerRadius);\n this.ctx.arcTo(x, y + height, x, y, cornerRadius);\n this.ctx.arcTo(x, y, x + width, y, cornerRadius);\n this.ctx.closePath();\n this.ctx.fill();\n this.ctx.stroke();\n };\n /**\n * To draw a path on the canvas\n *\n * @param {PathAttributes} options - options needed to draw path.\n * @param {Int32Array} canvasTranslate - Array of numbers to translate the canvas.\n * @returns {Element} To draw a path.\n */\n CanvasRenderer.prototype.drawPath = function (options, canvasTranslate) {\n var path = options.d;\n var dataSplit = path.split(' ');\n var borderWidth = this.getOptionValue(options, 'stroke-width');\n var canvasCtx = this.ctx;\n var flag = true;\n this.ctx.save();\n this.ctx.beginPath();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.globalAlpha = options.opacity ? options.opacity : this.getOptionValue(options, 'fill-opacity');\n this.setAttributes(options);\n for (var i = 0; i < dataSplit.length; i = i + 3) {\n var x1 = parseFloat(dataSplit[i + 1]);\n var y1 = parseFloat(dataSplit[i + 2]);\n switch (dataSplit[i]) {\n case 'M':\n if (!options.innerR && !options.cx) {\n this.ctx.moveTo(x1, y1);\n }\n break;\n case 'L':\n if (!options.innerR) {\n this.ctx.lineTo(x1, y1);\n }\n break;\n case 'Q':\n var q1 = parseFloat(dataSplit[i + 3]);\n var q2 = parseFloat(dataSplit[i + 4]);\n this.ctx.quadraticCurveTo(x1, y1, q1, q2);\n i = i + 2;\n break;\n case 'C':\n var c1 = parseFloat(dataSplit[i + 3]);\n var c2 = parseFloat(dataSplit[i + 4]);\n var c3 = parseFloat(dataSplit[i + 5]);\n var c4 = parseFloat(dataSplit[i + 6]);\n this.ctx.bezierCurveTo(x1, y1, c1, c2, c3, c4);\n i = i + 4;\n break;\n case 'A':\n if (!options.innerR) {\n if (options.cx) {\n this.ctx.arc(options.cx, options.cy, options.radius, 0, 2 * Math.PI, options.counterClockWise);\n }\n else {\n this.ctx.moveTo(options.x, options.y);\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.lineTo(options.x, options.y);\n }\n }\n else if (flag) {\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.arc(options.x, options.y, options.innerR, options.end, options.start, !options.counterClockWise);\n flag = false;\n }\n i = i + 5;\n break;\n case 'z':\n case 'Z':\n this.ctx.closePath();\n //since for loop is incremented by 3, to get next value after 'z' i is decremented for 2.\n i = i - 2;\n break;\n }\n }\n if (options.fill !== 'none' && options.fill !== undefined) {\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n }\n if (borderWidth > 0) {\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n return this.canvasObj;\n };\n /**\n * To draw a text\n *\n * @param {TextAttributes} options - options required to draw text\n * @param {string} label - Specifies the text which has to be drawn on the canvas\n * @param {number} transX - Specifies the text of translate X\n * @param {number} transY - Specifies the text of translate Y\n * @param {number} dy - Specifies the text of translate dy\n * @param {boolean} isTSpan - Specifies the boolean value of span value\n * @returns {void}\n */\n CanvasRenderer.prototype.createText = function (options, label, transX, transY, dy, isTSpan) {\n var fontWeight = this.getOptionValue(options, 'font-weight');\n if (!isNullOrUndefined(fontWeight) && fontWeight.toLowerCase() === 'regular') {\n fontWeight = 'normal';\n }\n var fontSize = this.getOptionValue(options, 'font-size');\n var fontFamily = this.getOptionValue(options, 'font-family');\n var fontStyle = this.getOptionValue(options, 'font-style').toLowerCase();\n var font = (fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily);\n var anchor = this.getOptionValue(options, 'text-anchor');\n var opacity = options.opacity !== undefined ? options.opacity : 1;\n if (anchor === 'middle') {\n anchor = 'center';\n }\n this.ctx.save();\n this.ctx.fillStyle = options.fill;\n this.ctx.font = font;\n this.ctx.textAlign = anchor;\n this.ctx.globalAlpha = opacity;\n if (options.baseline) {\n this.ctx.textBaseline = options.baseline;\n }\n if (!isTSpan) {\n var txtlngth = 0;\n this.ctx.translate(options.x + (txtlngth / 2) + (transX ? transX : 0), options.y + (transY ? transY : 0));\n this.ctx.rotate(options.labelRotation * Math.PI / 180);\n }\n this.ctx.fillText(label, isTSpan ? options.x : 0, isTSpan ? dy : 0);\n this.ctx.restore();\n return this.canvasObj;\n };\n /**\n * To draw circle on the canvas\n *\n * @param {CircleAttributes} options - required options to draw the circle\n * @param {Int32Array} canvasTranslate Translate value of canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawCircle = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.arc(options.cx, options.cy, options.r, 0, 2 * Math.PI);\n this.ctx.fillStyle = options.fill;\n this.ctx.globalAlpha = options.opacity;\n this.ctx.fill();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.setAttributes(options);\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n return this.canvasObj;\n };\n /**\n * To draw polyline\n *\n * @param {PolylineAttributes} options - options needed to draw polyline\n * @returns {void}\n */\n CanvasRenderer.prototype.drawPolyline = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n var points = options.points.split(' ');\n for (var i = 0; i < points.length - 1; i++) {\n var point = points[i].split(',');\n var x = parseFloat(point[0]);\n var y = parseFloat(point[1]);\n if (i === 0) {\n this.ctx.moveTo(x, y);\n }\n else {\n this.ctx.lineTo(x, y);\n }\n }\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n };\n /**\n * To draw an ellipse on the canvas\n *\n * @param {EllipseAttributes} options - options needed to draw ellipse\n * @param {Int32Array} canvasTranslate Translate value of canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawEllipse = function (options, canvasTranslate) {\n var canvasCtx = this.ctx;\n var circumference = Math.max(options.rx, options.ry);\n var scaleX = options.rx / circumference;\n var scaleY = options.ry / circumference;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.translate(options.cx, options.cy);\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.save();\n this.ctx.scale(scaleX, scaleY);\n this.ctx.arc(0, 0, circumference, 0, 2 * Math.PI, false);\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n this.ctx.restore();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n };\n /**\n * To draw an image\n *\n * @param {ImageAttributes} options - options required to draw an image on the canvas\n * @returns {void}\n */\n CanvasRenderer.prototype.drawImage = function (options) {\n this.ctx.save();\n var imageObj = new Image();\n if (!isNullOrUndefined(options.href)) {\n imageObj.src = options.href;\n this.ctx.drawImage(imageObj, options.x, options.y, options.width, options.height);\n }\n this.ctx.restore();\n };\n /**\n * To create a linear gradient\n *\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @returns {string} It returns color\n */\n CanvasRenderer.prototype.createLinearGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvasObj.height);\n }\n var color = this.setGradientValues(colors, myGradient);\n return color;\n };\n /**\n * To create a radial gradient\n *\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @returns {string} It returns gradient color\n */\n CanvasRenderer.prototype.createRadialGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createRadialGradient(0, 0, 0, 0, 0, this.canvasObj.height);\n }\n var colorName = this.setGradientValues(colors, myGradient);\n return colorName;\n };\n // To set the gradient values\n CanvasRenderer.prototype.setGradientValues = function (colors, myGradient) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n for (var i = 0; i <= colors.length - 1; i++) {\n var color = colors[i].color;\n var newColorStop = (colors[i].colorStop).slice(0, -1);\n var stopColor = parseInt(newColorStop, 10) / 100;\n myGradient.addColorStop(stopColor, color);\n }\n colorName = myGradient.toString();\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To set the attributes to the element\n *\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {HTMLElement} element - The element to which the attributes need to be set\n * @returns {HTMLElement} It returns null value\n */\n CanvasRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n var values = Object.keys(options).map(function (key) { return options[key]; });\n for (var i = 0; i < keys.length; i++) {\n element.setAttribute(keys[i], values[i]);\n }\n return null;\n };\n /**\n * To update the values of the canvas element attributes\n *\n * @param {SVGCanvasAttributes} options - Specifies the colors required to create gradient\n * @returns {void}\n */\n CanvasRenderer.prototype.updateCanvasAttributes = function (options) {\n this.setElementAttributes(options, this.canvasObj);\n var ctx = this.ctx;\n if (!isNullOrUndefined(this.dataUrl)) {\n var img_1 = new Image;\n img_1.onload = function () {\n ctx.drawImage(img_1, 0, 0);\n };\n img_1.src = this.dataUrl;\n }\n };\n /**\n * This method clears the given rectangle region\n *\n * @param {Rect} rect The rect parameter as passed\n */\n CanvasRenderer.prototype.clearRect = function (rect) {\n this.ctx.restore();\n this.ctx.clearRect(rect.x, rect.y, rect.width, rect.height);\n };\n /**\n * For canvas rendering in chart\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.createGroup = function () {\n return null;\n };\n /**\n * To render a clip path\n *\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawClipPath = function () {\n return null;\n };\n /**\n * To render a Circular clip path\n *\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawCircularClipPath = function () {\n return null;\n };\n /**\n * Clip method to perform clip in canvas mode\n *\n * @param {BaseAttibutes} options The canvas clip of options\n */\n CanvasRenderer.prototype.canvasClip = function (options) {\n this.ctx.save();\n this.ctx.fillStyle = 'transparent';\n this.ctx.rect(options.x, options.y, options.width, options.height);\n this.ctx.fill();\n this.ctx.clip();\n };\n /**\n * Tp restore the canvas\n */\n CanvasRenderer.prototype.canvasRestore = function () {\n this.ctx.restore();\n };\n /**\n * To draw a polygon\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.drawPolygon = function () {\n return null;\n };\n /**\n * To create defs element in SVG\n * Dummy method for using canvas/svg render in the same variable name in chart control\n *\n * @returns {Element} It returns null\n */\n CanvasRenderer.prototype.createDefs = function () {\n return null;\n };\n /**\n * To create clip path in SVG\n * Dummy method for using canvas/svg render in the same variable name in chart control\n */\n CanvasRenderer.prototype.createClipPath = function () {\n return null;\n };\n /**\n * To create a Html5 SVG element\n * Dummy method for using canvas/svg render in the same variable name in chart control\n *\n * @returns {Element} It returns null\n */\n CanvasRenderer.prototype.createSvg = function () {\n return null;\n };\n return CanvasRenderer;\n}());\nexport { CanvasRenderer };\n","/** @private */\nexport function getTooltipThemeColor(theme) {\n var style;\n switch (theme) {\n case 'Highcontrast':\n case 'HighContrast':\n style = {\n tooltipFill: '#ffffff',\n tooltipBoldLabel: '#000000',\n tooltipLightLabel: '#000000',\n tooltipHeaderLine: '#969696',\n textStyle: { fontFamily: 'Segoe UI', color: '#000000' }\n };\n break;\n case 'MaterialDark':\n case 'FabricDark':\n case 'BootstrapDark':\n style = {\n tooltipFill: theme === 'MaterialDark' ? '#F4F4F4' : theme === 'FabricDark' ? '#A19F9D' : '#F0F0F0',\n tooltipBoldLabel: theme === 'MaterialDark' ? 'rgba(18, 18, 18, 1)' : theme === 'FabricDark' ? '#DADADA' : '#1A1A1A',\n tooltipLightLabel: theme === 'MaterialDark' ? 'rgba(18, 18, 18, 1)' : theme === 'FabricDark' ? '#DADADA' : '#1A1A1A',\n tooltipHeaderLine: '#9A9A9A',\n textStyle: theme === 'MaterialDark' ? { fontFamily: 'Roboto', color: 'rgba(18, 18, 18, 1)' } : theme === 'FabricDark' ? { fontFamily: 'Segoe UI', color: '#DADADA' } : { fontFamily: 'Helvetica', color: '#1A1A1A' }\n };\n break;\n case 'Bootstrap4':\n style = {\n tooltipFill: '#212529',\n tooltipBoldLabel: '#F9FAFB',\n tooltipLightLabel: '#F9FAFB',\n tooltipHeaderLine: 'rgba(255, 255, 255, 0.2)',\n textStyle: { fontFamily: 'Helvetica', color: '#F9FAFB' }\n };\n break;\n case 'Tailwind':\n style = {\n tooltipFill: '#111827',\n tooltipBoldLabel: '#F9FAFB',\n tooltipLightLabel: '#F9FAFB',\n tooltipHeaderLine: '#6B7280',\n textStyle: { fontFamily: 'Inter', color: '#F9FAFB' }\n };\n break;\n case 'TailwindDark':\n style = {\n tooltipFill: '#E9ECEF',\n tooltipBoldLabel: '#1F2937',\n tooltipLightLabel: '#1F2937',\n tooltipHeaderLine: '#9CA3AF',\n textStyle: { fontFamily: 'Inter', color: '#1F2937' }\n };\n break;\n case 'Bootstrap5':\n style = {\n tooltipFill: '#212529',\n tooltipBoldLabel: '#F9FAFB',\n tooltipLightLabel: '#F9FAFB',\n tooltipHeaderLine: '#9CA3AF',\n textStyle: { fontFamily: 'Helvetica', color: '#F9FAFB' }\n };\n break;\n case 'Bootstrap5Dark':\n style = {\n tooltipFill: '#E9ECEF',\n tooltipBoldLabel: '#212529',\n tooltipLightLabel: '#212529',\n tooltipHeaderLine: '#ADB5BD',\n textStyle: { fontFamily: 'Helvetica', color: '#212529' }\n };\n break;\n case 'Fluent':\n style = {\n tooltipFill: '#FFFFFF',\n tooltipBoldLabel: '#323130',\n tooltipLightLabel: '#323130',\n tooltipHeaderLine: '#D2D0CE',\n textStyle: { fontFamily: 'Segoe UI', color: '#323130' }\n };\n break;\n case 'FluentDark':\n style = {\n tooltipFill: '#323130',\n tooltipBoldLabel: '#F3F2F2',\n tooltipLightLabel: '#F3F2F1',\n tooltipHeaderLine: '#3B3A39',\n textStyle: { fontFamily: 'Segoe UI', color: '#F3F2F1' }\n };\n break;\n case 'Material3':\n style = {\n tooltipFill: '#313033',\n tooltipBoldLabel: '#F4EFF4',\n tooltipLightLabel: '#F4EFF4',\n tooltipHeaderLine: '#F4EFF4',\n textStyle: { fontFamily: 'Roboto', color: '#F4EFF4' }\n };\n break;\n case 'Material3Dark':\n style = {\n tooltipFill: '#E6E1E5',\n tooltipBoldLabel: '#313033',\n tooltipLightLabel: '#313033',\n tooltipHeaderLine: '#313033',\n textStyle: { fontFamily: 'Roboto', color: '#313033' }\n };\n break;\n default:\n style = {\n tooltipFill: theme === 'Material' ? '#000816' : theme === 'Fabric' ? '#FFFFFF' : '#212529',\n tooltipBoldLabel: theme === 'Material' ? 'rgba(249, 250, 251, 1)' : theme === 'Fabric' ? '#333333' : '#F9FAFB',\n tooltipLightLabel: theme === 'Material' ? 'rgba(249, 250, 251, 1)' : theme === 'Fabric' ? '#333333' : '#F9FAFB',\n tooltipHeaderLine: theme === 'Fabric' ? '#D2D0CE' : '#ffffff',\n textStyle: theme === 'Material' ? { fontFamily: 'Roboto', color: 'rgba(249, 250, 251, 1)' } : theme === 'Fabric' ? { fontFamily: 'Segoe UI', color: '#333333' } : { fontFamily: 'Helvetica', color: '#F9FAFB' }\n };\n break;\n }\n return style;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { SvgRenderer } from '../svg-render/index';\nimport { createElement, remove, merge } from '@syncfusion/ej2-base';\n/**\n * Function to measure the height and width of the text.\n *\n * @private\n * @param {string} text To get a text\n * @param {FontModel} font To get a font of the text\n * @returns {Size} measureText\n */\nexport function measureText(text, font, themeFontStyle) {\n var breakText = text || ''; // For avoid NuLL value\n var htmlObject = document.getElementById('chartmeasuretext');\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'chartmeasuretext' });\n document.body.appendChild(htmlObject);\n }\n if (typeof (text) === 'string' && (text.indexOf('<') > -1 || text.indexOf('>') > -1)) {\n var textArray = text.split(' ');\n for (var i = 0; i < textArray.length; i++) {\n if (textArray[i].indexOf('
') === -1) {\n textArray[i] = textArray[i].replace(/[<>]/g, '&');\n }\n }\n text = textArray.join(' ');\n }\n htmlObject.innerHTML = (breakText.indexOf('
') > -1 || breakText.indexOf('
') > -1) ? breakText : text;\n htmlObject.style.position = 'fixed';\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontFamily = font.fontFamily || themeFontStyle.fontFamily;\n htmlObject.style.visibility = 'hidden';\n htmlObject.style.top = '-100';\n htmlObject.style.left = '0';\n htmlObject.style.whiteSpace = 'nowrap';\n // For bootstrap line height issue\n htmlObject.style.lineHeight = 'normal';\n return new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n}\n/** @private */\nexport function withInAreaBounds(x, y, areaBounds, width, height) {\n if (width === void 0) { width = 0; }\n if (height === void 0) { height = 0; }\n return (x >= areaBounds.x - width && x <= areaBounds.x + areaBounds.width + width && y >= areaBounds.y - height\n && y <= areaBounds.y + areaBounds.height + height);\n}\n/** @private */\nexport function findDirection(rX, rY, rect, arrowLocation, arrowPadding, top, bottom, left, tipX, tipY, controlName) {\n if (controlName === void 0) { controlName = ''; }\n var direction = '';\n var startX = rect.x;\n var startY = rect.y;\n var width = rect.x + rect.width;\n var height = rect.y + rect.height;\n if (top) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + startY + ' ' + (startX + rX) + ' ' + startY + ' ' +\n ' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + width + ' '\n + startY + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height));\n if (arrowPadding !== 0) {\n if (controlName === 'RangeNavigator') {\n if ((arrowLocation.x - arrowPadding) > width / 2) {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX + arrowPadding) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x) + ' ' + height);\n }\n else {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX - arrowPadding) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + height);\n }\n }\n else {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX) + ' ' + (height + arrowPadding)\n + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + height);\n }\n }\n if ((arrowLocation.x - arrowPadding) > startX) {\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n if (arrowPadding === 0) {\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height + rY) + ' z');\n }\n }\n }\n else if (bottom) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY) + ' L' + ' ' + (arrowLocation.x - arrowPadding) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (tipX) + ' ' + (arrowLocation.y));\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY)\n + ' Q ' + (width) + ' ' + (startY) + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + (width) + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height) +\n ' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + (startX) + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else if (left) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' '\n + (startY) + ' ' + (width) + ' ' + ((controlName === 'RangeNavigator' ? 0 : (startY + rY)) + ' L' + ' ' + (width) + ' ' + (controlName === 'RangeNavigator' ? 0 : (arrowLocation.y - arrowPadding))));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (width + arrowPadding) + ' ' + 0) :\n direction.concat(' L' + ' ' + (width + arrowPadding) + ' ' + (tipY));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y - rY)) :\n direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y + arrowPadding));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' ' + (height) + ' ' + (width - rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat('M' + ' ' + (startX + rX) + ' ' + (startY) + ' Q ' + (startX) + ' '\n + (startY) + ' ' + (startX) + ' ' + ((controlName === 'RangeNavigator' ? 0 : (startY + rY)) + ' L' + ' ' + (startX) + ' ' + (controlName === 'RangeNavigator' ? 0 : (arrowLocation.y - arrowPadding))));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (startX - arrowPadding) + ' ' + 0) :\n direction.concat(' L' + ' ' + (startX - arrowPadding) + ' ' + (tipY));\n direction = (controlName === 'RangeNavigator') ? direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y - rY)) :\n direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y + arrowPadding));\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height - rY) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX + rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (height) + ' Q ' + width + ' '\n + (height) + ' ' + (width) + ' ' + (height - rY) +\n ' L' + ' ' + (width) + ' ' + (startY + rY) + ' Q ' + width + ' '\n + (startY) + ' ' + (width - rX) + ' ' + (startY) + ' z');\n }\n return direction;\n}\n/** @private */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/** @private */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\nvar Side = /** @class */ (function () {\n function Side(bottom, right) {\n this.isRight = right;\n this.isBottom = bottom;\n }\n return Side;\n}());\nexport { Side };\n/** @private */\nvar CustomizeOption = /** @class */ (function () {\n function CustomizeOption(id) {\n this.id = id;\n }\n return CustomizeOption;\n}());\nexport { CustomizeOption };\n/** @private */\nvar TextOption = /** @class */ (function (_super) {\n __extends(TextOption, _super);\n function TextOption(id, x, y, anchor, text, transform, baseLine, labelRotation) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.transform = '';\n _this.baseLine = 'auto';\n _this.labelRotation = 0;\n _this.x = x;\n _this.y = y;\n _this.anchor = anchor;\n _this.text = text;\n _this.transform = transform;\n _this.baseLine = baseLine;\n _this.labelRotation = labelRotation;\n return _this;\n }\n return TextOption;\n}(CustomizeOption));\nexport { TextOption };\n/** @private */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/** @private */\nexport function removeElement(id) {\n var element = getElement(id);\n if (element) {\n remove(element);\n }\n}\n/** @private */\nexport function drawSymbol(location, shape, size, url, options, label) {\n var renderer = new SvgRenderer('');\n var temp = calculateShapes(location, size, shape, options, url);\n var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);\n htmlObject.setAttribute('aria-label', label);\n return htmlObject;\n}\n/** @private */\nexport function calculateShapes(location, size, shape, options, url) {\n var path;\n var functionName = 'Path';\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var x = location.x + (-width / 2);\n var y = location.y + (-height / 2);\n switch (shape) {\n case 'Circle':\n case 'Bubble':\n functionName = 'Ellipse';\n merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });\n break;\n case 'Plus':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +\n (locY + (-height / 2));\n merge(options, { 'd': path, stroke: options.fill });\n break;\n case 'Cross':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' +\n (locY + (-height / 2));\n merge(options, { 'd': path, stroke: options.fill });\n break;\n case 'HorizontalLine':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;\n merge(options, { 'd': path, stroke: options.fill });\n break;\n case 'VerticalLine':\n path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));\n merge(options, { 'd': path, stroke: options.fill });\n break;\n case 'Diamond':\n path = 'M' + ' ' + x + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + locY + ' z';\n merge(options, { 'd': path });\n break;\n case 'Rectangle':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Triangle':\n path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'InvertedTriangle':\n path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Pentagon':\n var eq = 72;\n var xValue = void 0;\n var yValue = void 0;\n for (var i = 0; i <= 5; i++) {\n xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));\n yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));\n if (i === 0) {\n path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';\n }\n else {\n path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');\n }\n }\n path = path.concat('Z');\n merge(options, { 'd': path });\n break;\n case 'Image':\n functionName = 'Image';\n merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });\n break;\n }\n return { renderOption: options, functionName: functionName };\n}\n/** @private */\nvar PathOption = /** @class */ (function (_super) {\n __extends(PathOption, _super);\n function PathOption(id, fill, width, color, opacity, dashArray, d) {\n var _this = _super.call(this, id) || this;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = color;\n _this['stroke-width'] = width;\n _this['stroke-dasharray'] = dashArray;\n _this.d = d;\n return _this;\n }\n return PathOption;\n}(CustomizeOption));\nexport { PathOption };\n/** @private */\nexport function textElement(options, font, color, parent, themeStyle) {\n var renderOptions = {};\n var renderer = new SvgRenderer('');\n renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'fill': color,\n 'font-size': font.size,\n 'font-style': font.fontStyle,\n 'font-family': font.fontFamily || themeStyle.fontFamily,\n 'font-weight': font.fontWeight,\n 'text-anchor': options.anchor,\n 'transform': options.transform,\n 'opacity': font.opacity,\n 'dominant-baseline': options.baseLine\n };\n var text = typeof options.text === 'string' ? options.text : options.text[0];\n var htmlObject = renderer.createText(renderOptions, text);\n if (parent) {\n parent.appendChild(htmlObject);\n }\n return htmlObject;\n}\nvar TooltipLocation = /** @class */ (function () {\n function TooltipLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return TooltipLocation;\n}());\nexport { TooltipLocation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable security/detect-object-injection */\n/* eslint-disable no-useless-escape */\n/* eslint-disable security/detect-non-literal-regexp */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable jsdoc/require-param */\n/* eslint-disable jsdoc/require-returns */\n/* eslint-disable valid-jsdoc */\nimport { NotifyPropertyChanges, Property, Event, Complex, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { extend, compile as templateComplier, Component, resetBlazorTemplate, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { SvgRenderer } from '../svg-render/index';\nimport { ChildProperty, createElement, remove, Browser, Animation, animationMode } from '@syncfusion/ej2-base';\nimport { getTooltipThemeColor } from './interface';\nimport { Size, Rect, Side, measureText, getElement, findDirection, drawSymbol, textElement } from './helper';\nimport { removeElement, TextOption, TooltipLocation, PathOption, withInAreaBounds } from './helper';\n/**\n * Configures the fonts in charts.\n *\n * @private\n */\nvar TextStyle = /** @class */ (function (_super) {\n __extends(TextStyle, _super);\n function TextStyle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], TextStyle.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], TextStyle.prototype, \"color\", void 0);\n __decorate([\n Property('Segoe UI')\n ], TextStyle.prototype, \"fontFamily\", void 0);\n __decorate([\n Property('Normal')\n ], TextStyle.prototype, \"fontWeight\", void 0);\n __decorate([\n Property('Normal')\n ], TextStyle.prototype, \"fontStyle\", void 0);\n __decorate([\n Property(1)\n ], TextStyle.prototype, \"opacity\", void 0);\n return TextStyle;\n}(ChildProperty));\nexport { TextStyle };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar TooltipBorder = /** @class */ (function (_super) {\n __extends(TooltipBorder, _super);\n function TooltipBorder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipBorder.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], TooltipBorder.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], TooltipBorder.prototype, \"dashArray\", void 0);\n return TooltipBorder;\n}(ChildProperty));\nexport { TooltipBorder };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar AreaBounds = /** @class */ (function (_super) {\n __extends(AreaBounds, _super);\n function AreaBounds() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"y\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"width\", void 0);\n __decorate([\n Property(0)\n ], AreaBounds.prototype, \"height\", void 0);\n return AreaBounds;\n}(ChildProperty));\nexport { AreaBounds };\n/**\n * Configures the borders in the chart.\n *\n * @private\n */\nvar ToolLocation = /** @class */ (function (_super) {\n __extends(ToolLocation, _super);\n function ToolLocation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], ToolLocation.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], ToolLocation.prototype, \"y\", void 0);\n return ToolLocation;\n}(ChildProperty));\nexport { ToolLocation };\n/**\n * Represents the Tooltip control.\n * ```html\n *