\n * \n * ```\n * @public\n */\nvar Chart = /** @class */ (function (_super) {\n __extends(Chart, _super);\n /**\n * Constructor for creating the widget\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.singleClickTimer = 0;\n /** @private */\n _this.chartAreaType = 'Cartesian';\n /** @private */\n _this.isRtlEnabled = false;\n _this.chartid = 57723;\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 * Initialize the event handler.\n */\n Chart.prototype.preRender = function () {\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.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 if (this.stockChart.series[0].volume !== '') {\n this.tooltip.format += '
Volume :
${point.volume}';\n }\n }\n this.animateSeries = false;\n }\n };\n Chart.prototype.initPrivateVariable = function () {\n this.animateSeries = true;\n this.delayRedraw = false;\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 if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-chart').length;\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 = { chart: this.isBlazor ? {} : this, theme: this.theme, name: load, cancel: false };\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 };\n Chart.prototype.cartesianChartRendering = function (beforeRenderData) {\n this.theme = this.isBlazor ? beforeRenderData.theme : this.theme;\n this.createChartSvg();\n this.setTheme();\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.allowServerDataBinding = true;\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n Chart.prototype.getLocalizedLabel = function (key) {\n return this.localeObject.getConstant(key);\n };\n /**\n * Animate the series bounds.\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 };\n /**\n * Refresh the chart bounds.\n * @private\n */\n Chart.prototype.refreshBound = function () {\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 };\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 * @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.series[0].type === 'Scatter' || this.series[0].type === 'Bubble') ?\n this.svgRenderer.createGroup({ id: elementId + 'SeriesCollection' }) :\n this.renderer.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.setAttribute('style', '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.setAttribute('style', '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 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);\n if (this.enableCanvas) {\n // To render scatter and bubble series in canvas\n this.renderCanvasSeries(item);\n // To clip the series rect for canvas\n this.renderer.canvasClip(this.chartAxisLayoutPanel.seriesClipRect);\n }\n item.renderSeries(this);\n if (this.enableCanvas) {\n this.renderer.canvasRestore();\n }\n }\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 if (!this.enableCanvas) {\n this.seriesElements.appendChild(appendClipElement(this.redraw, options, this.renderer));\n }\n var seriesSvg = document.getElementById(this.element.id + '_series_svg');\n seriesSvg ? appendChildElement(false, seriesSvg, this.seriesElements, this.redraw) :\n appendChildElement(this.enableCanvas, this.svgObject, this.seriesElements, this.redraw);\n };\n Chart.prototype.renderCanvasSeries = function (item) {\n var svgElement;\n var divElement;\n var canvas;\n if ((item.type === 'Bubble' || item.type === 'Scatter')) {\n svgElement = !svgElement ? this.svgRenderer.createSvg({ id: this.element.id + '_series_svg',\n width: this.availableSize.width, height: this.availableSize.height }) : svgElement;\n divElement = !divElement ? this.createElement('div', { id: this.element.id + '_series' }) : divElement;\n divElement.setAttribute('style', 'position: absolute');\n var mainElement = document.getElementById(this.element.id + '_Secondary_Element');\n divElement.appendChild(svgElement);\n mainElement.appendChild(divElement);\n }\n svgElement = (this.enableCanvas && (item.type === 'Bubble' || item.type === 'Scatter')) ?\n svgElement : this.svgObject;\n canvas = (this.enableCanvas && (item.type === 'Bubble' || item.type === 'Scatter')) ?\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)) {\n this.zoomModule.applyZoomToolkit(this, this.axisCollections);\n }\n };\n /**\n * Render annotation perform here\n * @param redraw\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 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 };\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 = 15;\n var left = margin.left;\n var width = this.availableSize.width - left - margin.right - this.border.width;\n this.titleCollection = [];\n this.subTitleCollection = [];\n if (this.title) {\n this.titleCollection = getTitle(this.title, this.titleStyle, width);\n titleHeight = (measureText(this.title, this.titleStyle).height * this.titleCollection.length) + padding;\n if (this.subTitle) {\n var maxWidth = 0;\n for (var _i = 0, _a = this.titleCollection; _i < _a.length; _i++) {\n var titleText = _a[_i];\n titleWidth = measureText(titleText, this.titleStyle).width;\n maxWidth = titleWidth > maxWidth ? titleWidth : maxWidth;\n }\n this.subTitleCollection = getTitle(this.subTitle, this.subTitleStyle, maxWidth);\n subTitleHeight = (measureText(this.subTitle, this.subTitleStyle).height * this.subTitleCollection.length) +\n padding;\n }\n }\n var top = margin.top + subTitleHeight + titleHeight + this.chartArea.border.width * 0.5;\n var height = this.availableSize.height - top - this.border.width - margin.bottom;\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 ExportUtils(this);\n exportChart.print(id);\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 var type = firstToLowerCase(trendLine.type);\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 * @private\n */\n Chart.prototype.calculateVisibleAxis = function () {\n var axis;\n var series;\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 for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series_1 = _a[_i];\n this.initAxis(series_1, axis, true);\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 var seriesCollection;\n this.visibleSeries = [];\n var colors = this.palettes.length ? this.palettes : getSeriesColor(this.theme);\n var count = colors.length;\n 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 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 && series.yAxisName !== null) ||\n (series.xAxisName !== null && series.yAxisName === null) ||\n (series.xAxisName !== null && series.yAxisName !== null))) {\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.renderTitle = function () {\n var rect;\n var margin = this.margin;\n if (this.title) {\n var alignment = this.titleStyle.textAlignment;\n var getAnchor = alignment === 'Near' ? 'start' : alignment === 'Far' ? 'end' : 'middle';\n var elementSize = measureText(this.title, this.titleStyle);\n rect = new Rect(margin.left, 0, this.availableSize.width - margin.left - margin.right, 0);\n var options = new TextOption(this.element.id + '_ChartTitle', titlePositionX(rect, this.titleStyle), this.margin.top + ((elementSize.height) * 3 / 4), getAnchor, this.titleCollection, '', '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.chartTitle, this.svgObject);\n if (element) {\n element.setAttribute('aria-label', this.description || this.title);\n element.setAttribute('tabindex', this.tabIndex.toString());\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 rect;\n var anchor = function (alignment) {\n return alignment === 'Near' ? 'start' : alignment === 'Far' ? 'end' : 'middle';\n };\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).width;\n maxWidth = titleWidth > maxWidth ? titleWidth : maxWidth;\n }\n var subTitleElementSize = measureText(this.subTitle, this.subTitleStyle);\n rect = new Rect(alignment === 'Center' ? (options.x - maxWidth * 0.5) : alignment === 'Far' ? options.x - maxWidth : options.x, 0, maxWidth, 0);\n var subTitleOptions = new TextOption(this.element.id + '_ChartSubTitle', titlePositionX(rect, this.subTitleStyle), options.y * options.text.length + ((subTitleElementSize.height) * 3 / 4) + padding, anchor(this.subTitleStyle.textAlignment), this.subTitleCollection, '', '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.chartTitle, this.svgObject);\n if (element) {\n element.setAttribute('aria-label', this.description || this.subTitle);\n element.setAttribute('tabindex', this.tabIndex.toString());\n }\n };\n Chart.prototype.renderBorder = function () {\n var width = this.border.width;\n var backGroundImage = this.backgroundImage;\n var fillColor = backGroundImage ? 'transparent' : (this.background || this.themeStyle.background);\n var rect = new RectOption(this.element.id + '_ChartBorder', fillColor, this.border, 1, new Rect(width * 0.5, width * 0.5, 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 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 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 * @param {SeriesModel[]} seriesCollection - Defines the series collection to be added in chart.\n * @return {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 * @param index - Defines the series index to be remove in chart series\n * @return {void}\n */\n Chart.prototype.removeSeries = function (index) {\n this.redraw = false; //fix for remove svg not working when use animatemethod.\n this.series.splice(index, 1);\n this.refresh();\n };\n /**\n * To Clear all series for the chart\n * @return {void}.\n */\n Chart.prototype.clearSeries = function () {\n this.series = [];\n this.refresh();\n };\n /**\n * To add secondary axis for the chart\n * @param {AxisModel[]} axisCollection - Defines the axis collection to be added in chart.\n * @return {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 * @param index - Defines the axis collection to be removed in chart.\n * @return {void}.\n */\n Chart.prototype.removeAxis = function (index) {\n this.redraw = false;\n this.axes.splice(index, 1);\n this.refresh();\n };\n ;\n /**\n * To destroy the widget\n * @method destroy\n * @return {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 /**\n * To fix react timeout destroy issue.\n */\n if (this.element) {\n this.unWireEvents();\n // tslint:disable-next-line:no-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 * @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, 'contextmenu', this.chartRightClick);\n EventHandler.remove(this.element, cancelEvent, this.mouseLeave);\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, 'contextmenu', this.chartRightClick, this);\n EventHandler.add(this.element, cancelEvent, this.mouseLeave, 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 };\n /**\n * Finds the orientation.\n * @return {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 * @return {boolean}\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.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);\n this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\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 * @return {boolean}\n * @private\n */\n Chart.prototype.chartResize = function (e) {\n var _this = this;\n this.animateSeries = false;\n var arg = {\n chart: this.isBlazor ? {} : 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.rotatedDataLabelCollections = [];\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 * @return {boolean}\n * @private\n */\n Chart.prototype.mouseMove = function (e) {\n var pageX;\n var pageY;\n var touchArg;\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 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 * @return {boolean}\n * @private\n */\n Chart.prototype.mouseLeave = function (e) {\n var pageX;\n var pageY;\n var touchArg;\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.setMouseXY(pageX, pageY);\n this.chartOnMouseLeave(e);\n return false;\n };\n /**\n * Handles the mouse leave on chart.\n * @return {boolean}\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 click on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseClick = function (e) {\n var _this = this;\n var element = e.target;\n this.trigger(chartMouseClick, { target: element.id, x: this.mouseX, y: this.mouseY });\n this.clickCount++;\n var timeInterval = 0;\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 * @return {boolean}\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 * @return {boolean}\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 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 * @return {boolean}\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 * @return {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 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);\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n //tslint:disable:max-func-body-length\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;\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.scrollSettingEnabled && (zooming.enableSelectionZooming\n || zooming.enableMouseWheelZooming || zooming.enablePinchZooming || zooming.enablePan || zooming.enableScrollbar)) {\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') {\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 if (this.chartAreaType !== 'PolarRadar' && this.crosshair.enable) {\n modules.push({\n member: 'Crosshair',\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 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 ? 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 remove(this.svgObject);\n return null;\n }\n removeElement(this.element.id + '_Secondary_Element');\n // tslint:disable-next-line:no-any\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 * @return {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 * 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 if (Object.keys(newProp).length === 1 && Object.keys(newProp)[0] === 'indicators') {\n //add valid check,it should happen only when property change is triggered for target series\n return;\n }\n this.animateSeries = false;\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 refreshBounds = this.axisChange(newProp.primaryXAxis);\n if (newProp.primaryXAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryXAxis.crosshairTooltip) {\n refreshBounds = true;\n }\n break;\n case 'primaryYAxis':\n refreshBounds = this.axisChange(newProp.primaryYAxis);\n if (newProp.primaryYAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryYAxis.crosshairTooltip) {\n refreshBounds = true;\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 refreshBounds = refreshBounds || this.axisChange(newProp.axes[index]);\n if (!newProp.axes[index].crosshairTooltip) {\n refreshBounds = true;\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 (series && (series.dataSource || series.query || series.errorBar || series.xName ||\n series.yName || series.size || series.high || series.low || series.open || series.close ||\n series.fill || series.name || series.marker || 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 '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 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);\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 '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 }\n break;\n }\n }\n if (!refreshBounds && renderer) {\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 // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\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(Theme.chartTitleFont, Font)\n ], Chart.prototype, \"titleStyle\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"subTitle\", void 0);\n __decorate([\n Complex(Theme.chartSubTitleFont, Font)\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 Complex({}, ZoomSettings)\n ], Chart.prototype, \"zoomSettings\", 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, \"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","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 * as React from 'react';\nimport { Chart } from '@syncfusion/ej2-charts';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents react Chart Component\n * ```tsx\n *
\n * ```\n */\nvar ChartComponent = /** @class */ (function (_super) {\n __extends(ChartComponent, _super);\n function ChartComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.directivekeys = { 'seriesCollection': { 'series': { 'trendlines': 'trendline', 'segments': 'segment' } }, 'axes': { 'axis': { 'stripLines': 'stripLine', 'multiLevelLabels': { 'multiLevelLabel': { 'categories': 'category' } } } }, 'rows': 'row', 'columns': 'column', 'annotations': 'annotation', 'selectedDataIndexes': 'selectedDataIndex', 'indicators': 'indicator' };\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n ChartComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n };\n return ChartComponent;\n}(Chart));\nexport { ChartComponent };\napplyMixins(ChartComponent, [ComponentBase, React.Component]);\n","import { Animation, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DoubleRange } from '../utils/double-range';\nimport { appendChildElement, redrawElement, pathAnimation, valueToCoefficient, getVisiblePoints } from '../../common/utils/helper';\nimport { getAnimationFunction, getPoint, getMinPointsDelta } from '../../common/utils/helper';\nimport { PathOption, Rect } from '@syncfusion/ej2-svg-base';\nimport { pointRender } from '../../common/model/constants';\n/**\n * Column Series Base\n */\nvar ColumnBase = /** @class */ (function () {\n function ColumnBase() {\n }\n /**\n * To get the position of the column series.\n * @return {DoubleRange}\n * @private\n */\n ColumnBase.prototype.getSideBySideInfo = function (series) {\n if (series.chart.enableSideBySidePlacement && !series.position) {\n this.getSideBySidePositions(series);\n }\n var position = !series.chart.enableSideBySidePlacement ? 0 : series.position;\n var rectCount = !series.chart.enableSideBySidePlacement ? 1 : series.rectCount;\n series.isRectSeries = true;\n var visibleSeries = series.chart.visibleSeries;\n var seriesSpacing = series.chart.enableSideBySidePlacement ? series.columnSpacing : 0; // Column Spacing\n var pointSpacing = (series.columnWidth === null || isNaN(+series.columnWidth)) ? ((series.type === 'Histogram') ? 1 : 0.7) :\n series.columnWidth; // Column width\n var minimumPointDelta = getMinPointsDelta(series.xAxis, visibleSeries);\n var width = minimumPointDelta * pointSpacing;\n var radius;\n var location = (position) / rectCount - 0.5;\n var doubleRange = new DoubleRange(location, location + (1 / rectCount));\n if (!(isNaN(doubleRange.start) || isNaN(doubleRange.end))) {\n doubleRange = new DoubleRange(doubleRange.start * width, doubleRange.end * width);\n radius = seriesSpacing * doubleRange.delta;\n doubleRange = new DoubleRange(doubleRange.start + radius / 2, doubleRange.end - radius / 2);\n }\n return doubleRange;\n };\n /**\n * To get the rect values.\n * @return {Rect}\n * @private\n */\n ColumnBase.prototype.getRectangle = function (x1, y1, x2, y2, series) {\n var point1 = getPoint(x1, y1, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n var point2 = getPoint(x2, y2, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n return new Rect(Math.min(point1.x, point2.x), Math.min(point1.y, point2.y), Math.abs(point2.x - point1.x), Math.abs(point2.y - point1.y));\n };\n /**\n * To get the position of each series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.getSideBySidePositions = function (series) {\n var chart = series.chart;\n for (var _i = 0, _a = chart.columns; _i < _a.length; _i++) {\n var columnItem = _a[_i];\n for (var _b = 0, _c = chart.rows; _b < _c.length; _b++) {\n var item = _c[_b];\n this.findRectPosition(series.findSeriesCollection(columnItem, item, false));\n }\n }\n };\n ColumnBase.prototype.findRectPosition = function (seriesCollection) {\n var stackingGroup = [];\n var vSeries = { rectCount: 0, position: null };\n for (var i = 0; i < seriesCollection.length; i++) {\n var value = seriesCollection[i];\n // tslint:disable-next-line:align\n if (value.type.indexOf('Stacking') !== -1) {\n if (value.stackingGroup) {\n if (stackingGroup[value.stackingGroup] === undefined) {\n value.position = vSeries.rectCount;\n stackingGroup[value.stackingGroup] = vSeries.rectCount++;\n }\n else {\n value.position = stackingGroup[value.stackingGroup];\n }\n }\n else {\n if (vSeries.position === null) {\n value.position = vSeries.rectCount;\n vSeries.position = vSeries.rectCount++;\n }\n else {\n value.position = vSeries.position;\n }\n }\n }\n else {\n value.position = vSeries.rectCount++;\n }\n }\n // tslint:disable-next-line:align\n for (var i = 0; i < seriesCollection.length; i++) {\n var value = seriesCollection[i];\n value.rectCount = vSeries.rectCount;\n }\n };\n /**\n * Updates the symbollocation for points\n * @return void\n * @private\n */\n ColumnBase.prototype.updateSymbolLocation = function (point, rect, series) {\n if (!series.chart.requireInvertedAxis) {\n this.updateXRegion(point, rect, series);\n }\n else {\n this.updateYRegion(point, rect, series);\n }\n if (series.type === 'Histogram') {\n point.minimum = +point.x - series.histogramValues.binWidth / 2;\n point.maximum = +point.x + series.histogramValues.binWidth / 2;\n }\n };\n /**\n * Update the region for the point.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.updateXRegion = function (point, rect, series) {\n point.symbolLocations.push({\n x: rect.x + (rect.width) / 2,\n y: (series.seriesType === 'BoxPlot' || series.seriesType.indexOf('HighLow') !== -1 ||\n (point.yValue >= 0 === !series.yAxis.isInversed)) ? rect.y : (rect.y + rect.height)\n });\n this.getRegion(point, rect, series);\n if (series.type === 'RangeColumn') {\n point.symbolLocations.push({\n x: rect.x + (rect.width) / 2,\n y: rect.y + rect.height\n });\n }\n };\n /**\n * Update the region for the point in bar series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.updateYRegion = function (point, rect, series) {\n point.symbolLocations.push({\n x: (series.seriesType === 'BoxPlot' || series.seriesType.indexOf('HighLow') !== -1 ||\n (point.yValue >= 0 === !series.yAxis.isInversed)) ? rect.x + rect.width : rect.x,\n y: rect.y + rect.height / 2\n });\n this.getRegion(point, rect, series);\n if (series.type === 'RangeColumn') {\n point.symbolLocations.push({\n x: rect.x,\n y: rect.y + rect.height / 2\n });\n }\n };\n /**\n * To render the marker for the series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.renderMarker = function (series) {\n if (series.marker && series.marker.visible) {\n series.chart.markerRender.render(series);\n }\n };\n /**\n * To get the marker region when Y value is 0\n * @param point\n * @param series\n */\n ColumnBase.prototype.getRegion = function (point, rect, series) {\n if (point.y === 0) {\n var markerWidth = (series.marker && series.marker.width) ? series.marker.width : 0;\n var markerHeight = (series.marker && series.marker.height) ? series.marker.height : 0;\n point.regions.push(new Rect(point.symbolLocations[0].x - markerWidth, point.symbolLocations[0].y - markerHeight, 2 * markerWidth, 2 * markerHeight));\n }\n else {\n point.regions.push(rect);\n }\n };\n /**\n * To trigger the point rendering event.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.triggerEvent = function (series, point, fill, border) {\n var argsData = {\n cancel: false, name: pointRender, series: series, point: point,\n fill: series.setPointColor(point, fill),\n border: series.setBorderColor(point, border)\n };\n series.chart.trigger(pointRender, argsData);\n point.color = argsData.fill;\n return argsData;\n };\n /**\n * To draw the rectangle for points.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.drawRectangle = function (series, point, rect, argsData) {\n var chart = series.chart;\n var check = chart.requireInvertedAxis ? rect.height : rect.width;\n if (check <= 0) {\n return null;\n }\n var direction;\n if (point.y === 0) {\n // For 0 values corner radius will not calculate\n direction = this.calculateRoundedRectPath(rect, 0, 0, 0, 0);\n }\n else {\n direction = this.calculateRoundedRectPath(rect, series.cornerRadius.topLeft, series.cornerRadius.topRight, series.cornerRadius.bottomLeft, series.cornerRadius.bottomRight);\n }\n var name = series.category === 'Indicator' ? chart.element.id + '_Indicator_' + series.index + '_' + series.name +\n '_Point_' + point.index : chart.element.id + '_Series_' + series.index + '_Point_' + point.index;\n var previousElement = redrawElement(chart.redraw, name);\n var previousDirection = previousElement ? previousElement.getAttribute('d') : '';\n var options = new PathOption(name, argsData.fill, argsData.border.width, argsData.border.color, series.opacity, series.dashArray, direction);\n var element = chart.renderer.drawPath(options, new Int32Array([series.clipRect.x, series.clipRect.y]));\n switch (series.seriesType) {\n case 'XY':\n element.setAttribute('aria-label', point.x.toString() + ':' + point.yValue.toString());\n break;\n case 'HighLow':\n element.setAttribute('aria-label', point.x.toString() + ':' + point.high.toString() + ':' + point.low.toString());\n break;\n }\n appendChildElement(series.chart.enableCanvas, series.seriesElement, element, chart.redraw);\n if (!series.chart.enableCanvas) {\n pathAnimation(element, direction, chart.redraw, previousDirection, chart.duration);\n }\n };\n /**\n * To animate the series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.animate = function (series) {\n var rectElements = series.seriesElement.childNodes;\n var count = series.category === 'Indicator' ? 0 : 1;\n var visiblePoints = getVisiblePoints(series);\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n if (!point.symbolLocations.length && !(series.type === 'BoxAndWhisker' && point.regions.length)) {\n continue;\n }\n this.animateRect(rectElements[count], series, point);\n count++;\n }\n };\n /**\n * To animate the series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.animateRect = function (element, series, point) {\n var option = series.animation;\n var duration = series.chart.animated ? series.chart.duration : option.duration;\n var effect = getAnimationFunction('Linear');\n var isPlot = point.yValue < 0;\n var x;\n var y;\n var elementHeight = +point.regions[0].height;\n var elementWidth = +point.regions[0].width;\n var centerX;\n var centerY;\n if (!series.chart.requireInvertedAxis) {\n x = +point.regions[0].x;\n if (series.type.indexOf('Stacking') > -1) {\n y = (1 - valueToCoefficient(0, series.yAxis)) * (series.yAxis.rect.height);\n centerX = x;\n centerY = y;\n }\n else {\n y = +point.regions[0].y;\n centerY = (series.seriesType.indexOf('HighLow') !== -1 || series.type.indexOf('Waterfall') !== -1) ? y + elementHeight / 2 :\n (isPlot !== series.yAxis.isInversed) ? y : y + elementHeight;\n centerX = isPlot ? x : x + elementWidth;\n }\n }\n else {\n y = +point.regions[0].y;\n if (series.type.indexOf('Stacking') > -1) {\n x = (valueToCoefficient(0, series.yAxis)) * series.yAxis.rect.width;\n centerX = x;\n centerY = y;\n }\n else {\n x = +point.regions[0].x;\n centerY = isPlot ? y : y + elementHeight;\n centerX = (series.seriesType.indexOf('HighLow') !== -1 || series.type.indexOf('Waterfall') !== -1) ? x + elementWidth / 2 :\n (isPlot !== series.yAxis.isInversed) ? x + elementWidth : x;\n }\n }\n var value;\n if (!isNullOrUndefined(element)) {\n element.style.visibility = 'hidden';\n new Animation({}).animate(element, {\n duration: duration,\n delay: option.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n element.style.visibility = 'visible';\n if (!series.chart.requireInvertedAxis) {\n elementHeight = elementHeight ? elementHeight : 1;\n value = effect(args.timeStamp - args.delay, 0, elementHeight, args.duration);\n element.setAttribute('transform', 'translate(' + centerX + ' ' + centerY +\n ') scale(1,' + (value / elementHeight) + ') translate(' + (-centerX) + ' ' + (-centerY) + ')');\n }\n else {\n elementWidth = elementWidth ? elementWidth : 1;\n value = effect(args.timeStamp - args.delay, 0, elementWidth, args.duration);\n element.setAttribute('transform', 'translate(' + centerX + ' ' + centerY +\n ') scale(' + (value / elementWidth) + ', 1) translate(' + (-centerX) + ' ' + (-centerY) + ')');\n }\n }\n },\n end: function (model) {\n element.setAttribute('transform', 'translate(0,0)');\n var seriesElement = series.seriesElement;\n if (element === seriesElement.lastElementChild || point.index === series.points.length - 1 ||\n (series.type === 'Waterfall' && element === seriesElement.children[seriesElement.childElementCount - 2])) {\n series.chart.trigger('animationComplete', { series: series.chart.isBlazor ? {} : series });\n if (series.type === 'Waterfall') {\n var rectElements = seriesElement.childNodes;\n for (var i = 0; i < rectElements.length; i++) {\n if (rectElements[i].id.indexOf('Connector') !== -1) {\n rectElements[i].style.visibility = 'visible';\n rectElements[i].setAttribute('transform', 'translate(0,0)');\n }\n }\n }\n }\n }\n });\n }\n };\n /**\n * To get rounded rect path direction\n */\n ColumnBase.prototype.calculateRoundedRectPath = function (rect, topLeft, topRight, bottomLeft, bottomRight) {\n return 'M' + ' ' + rect.x + ' ' + (topLeft + rect.y) +\n ' Q ' + rect.x + ' ' + rect.y + ' ' + (rect.x + topLeft) + ' ' +\n rect.y + ' ' + 'L' + ' ' + (rect.x + rect.width - topRight) + ' ' + rect.y +\n ' Q ' + (rect.x + rect.width) + ' ' + rect.y + ' ' +\n (rect.x + rect.width) + ' ' + (rect.y + topRight) + ' ' + 'L ' +\n (rect.x + rect.width) + ' ' + (rect.y + rect.height - bottomRight)\n + ' Q ' + (rect.x + rect.width) + ' ' + (rect.y + rect.height) + ' ' + (rect.x + rect.width - bottomRight) + ' ' +\n (rect.y + rect.height) + ' ' + 'L ' + (rect.x + bottomLeft) + ' ' + (rect.y + rect.height) + ' Q ' + rect.x + ' ' +\n (rect.y + rect.height) + ' ' + rect.x + ' ' + (rect.y + rect.height - bottomLeft) + ' ' + 'L' + ' ' + rect.x + ' ' +\n (topLeft + rect.y) + ' ' + 'Z';\n };\n return ColumnBase;\n}());\nexport { ColumnBase };\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 { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `ColumnSeries` Module used to render the column series.\n */\nvar ColumnSeries = /** @class */ (function (_super) {\n __extends(ColumnSeries, _super);\n function ColumnSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Column series.\n * @return {void}\n * @private\n */\n ColumnSeries.prototype.render = function (series) {\n var rect;\n var sideBySideInfo = this.getSideBySideInfo(series);\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var pointColumn = _a[_i];\n pointColumn.symbolLocations = [];\n pointColumn.regions = [];\n if (pointColumn.visible && withInRange(series.points[pointColumn.index - 1], pointColumn, series.points[pointColumn.index + 1], series)) {\n rect = this.getRectangle(pointColumn.xValue + sideBySideInfo.start, pointColumn.yValue, pointColumn.xValue + sideBySideInfo.end, origin, series);\n var color = series.category === 'Indicator' ? pointColumn.color : series.interior;\n argsData = this.triggerEvent(series, pointColumn, color, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.updateSymbolLocation(pointColumn, rect, series);\n this.drawRectangle(series, pointColumn, rect, argsData);\n }\n }\n }\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n ColumnSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * Get module name.\n */\n ColumnSeries.prototype.getModuleName = function () {\n return 'ColumnSeries';\n /**\n * return the module name\n */\n };\n /**\n * To destroy the column series.\n * @return {void}\n * @private\n */\n ColumnSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return ColumnSeries;\n}(ColumnBase));\nexport { ColumnSeries };\n","import { getAnimationFunction, pathAnimation, getElement } from '../../common/utils/helper';\nimport { Rect } from '@syncfusion/ej2-svg-base';\nimport { Animation, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Base for line type series.\n */\nvar LineBase = /** @class */ (function () {\n /** @private */\n function LineBase(chartModule) {\n this.chart = chartModule;\n }\n /**\n * To improve the chart performance.\n * @return {void}\n * @private\n */\n LineBase.prototype.enableComplexProperty = function (series) {\n var tempPoints = [];\n var tempPoints2 = [];\n var xVisibleRange = series.xAxis.visibleRange;\n var yVisibleRange = series.yAxis.visibleRange;\n var seriesPoints = series.points;\n var areaBounds = series.clipRect;\n var xTolerance = Math.abs(xVisibleRange.delta / areaBounds.width);\n var yTolerance = Math.abs(yVisibleRange.delta / areaBounds.height);\n var prevXValue = (seriesPoints[0] && seriesPoints[0].x > xTolerance) ? 0 : xTolerance;\n var prevYValue = (seriesPoints[0] && seriesPoints[0].y > yTolerance) ? 0 : yTolerance;\n var xVal = 0;\n var yVal = 0;\n for (var _i = 0, seriesPoints_1 = seriesPoints; _i < seriesPoints_1.length; _i++) {\n var currentPoint = seriesPoints_1[_i];\n currentPoint.symbolLocations = [];\n xVal = currentPoint.xValue ? currentPoint.xValue : xVisibleRange.min;\n yVal = currentPoint.yValue ? currentPoint.yValue : yVisibleRange.min;\n if (Math.abs(prevXValue - xVal) >= xTolerance || Math.abs(prevYValue - yVal) >= yTolerance) {\n tempPoints.push(currentPoint);\n prevXValue = xVal;\n prevYValue = yVal;\n }\n }\n var tempPoint;\n for (var i = 0; i < tempPoints.length; i++) {\n tempPoint = tempPoints[i];\n if (isNullOrUndefined(tempPoint.x) || tempPoint.x === '') {\n continue;\n }\n else {\n tempPoints2.push(tempPoint);\n }\n }\n return tempPoints2;\n };\n /**\n * To generate the line path direction\n * @param firstPoint\n * @param secondPoint\n * @param series\n * @param isInverted\n * @param getPointLocation\n * @param startPoint\n */\n LineBase.prototype.getLineDirection = function (firstPoint, secondPoint, series, isInverted, getPointLocation, startPoint) {\n var direction = '';\n if (firstPoint != null) {\n var point1 = getPointLocation(firstPoint.xValue, firstPoint.yValue, series.xAxis, series.yAxis, isInverted, series);\n var point2 = getPointLocation(secondPoint.xValue, secondPoint.yValue, series.xAxis, series.yAxis, isInverted, series);\n direction = startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' +\n 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ';\n }\n return direction;\n };\n /**\n * To append the line path.\n * @return {void}\n * @private\n */\n LineBase.prototype.appendLinePath = function (options, series, clipRect) {\n var element = getElement(options.id);\n var chart = series.chart;\n var previousDirection = element ? element.getAttribute('d') : null;\n var htmlObject = series.chart.renderer.drawPath(options, new Int32Array([series.clipRect.x, series.clipRect.y]));\n if (htmlObject) {\n htmlObject.setAttribute('clip-path', clipRect);\n }\n series.pathElement = htmlObject;\n if (!series.chart.enableCanvas) {\n series.seriesElement.appendChild(htmlObject);\n }\n series.isRectSeries = false;\n pathAnimation(element, options.d, series.chart.redraw, previousDirection, chart.duration);\n };\n /**\n * To render the marker for the series.\n * @return {void}\n * @private\n */\n LineBase.prototype.renderMarker = function (series) {\n if (series.marker && series.marker.visible) {\n series.chart.markerRender.render(series);\n }\n };\n /**\n * To do the progressive animation.\n * @return {void}\n * @private\n */\n LineBase.prototype.doProgressiveAnimation = function (series, option) {\n var animation = new Animation({});\n var path = series.pathElement;\n var strokeDashArray = path.getAttribute('stroke-dasharray');\n var pathLength = series.pathElement.getTotalLength();\n var currentTime;\n path.style.visibility = 'hidden';\n animation.animate(path, {\n duration: option.duration,\n delay: option.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n path.style.visibility = 'visible';\n currentTime = Math.abs(Math.round(((args.timeStamp - args.delay) * pathLength) / args.duration));\n path.setAttribute('stroke-dasharray', currentTime + ',' + pathLength);\n }\n },\n end: function (model) {\n path.setAttribute('stroke-dasharray', strokeDashArray);\n series.chart.trigger('animationComplete', { series: series.chart.isBlazor ? {} : series });\n }\n });\n };\n /**\n * To store the symbol location and region\n * @param point\n * @param series\n * @param isInverted\n * @param getLocation\n */\n LineBase.prototype.storePointLocation = function (point, series, isInverted, getLocation) {\n var markerWidth = (series.marker && series.marker.width) ? series.marker.width : 0;\n var markerHeight = (series.marker && series.marker.height) ? series.marker.height : 0;\n point.symbolLocations.push(getLocation(point.xValue, point.yValue, series.xAxis, series.yAxis, isInverted, series));\n point.regions.push(new Rect(point.symbolLocations[0].x - markerWidth, point.symbolLocations[0].y - markerHeight, 2 * markerWidth, 2 * markerHeight));\n };\n /**\n * To find point with in the visible range\n * @param point\n * @param yAxis\n * @private\n */\n LineBase.prototype.withinYRange = function (point, yAxis) {\n return point.yValue >= yAxis.visibleRange.min && point.yValue <= yAxis.visibleRange.max;\n };\n /**\n * To get first and last visible points\n * @private\n */\n LineBase.prototype.getFirstLastVisiblePoint = function (points) {\n var first = null;\n var last = null;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n if (first === null && point.visible) {\n first = last = point;\n }\n last = point.visible ? point : last;\n }\n return { first: first ? first : points[0], last: last ? last : points[points.length - 1] };\n };\n /**\n * To do the linear animation.\n * @return {void}\n * @private\n */\n LineBase.prototype.doLinearAnimation = function (series, animation) {\n var clipRect = series.clipRectElement.childNodes[0].childNodes[0];\n var duration = series.chart.animated ? series.chart.duration : animation.duration;\n var effect = getAnimationFunction('Linear');\n var elementHeight = +clipRect.getAttribute('height');\n var elementWidth = +clipRect.getAttribute('width');\n var xCenter = +clipRect.getAttribute('x');\n var yCenter = series.chart.requireInvertedAxis ? +clipRect.getAttribute('height') + +clipRect.getAttribute('y') :\n +clipRect.getAttribute('y');\n var value;\n clipRect.style.visibility = 'hidden';\n new Animation({}).animate(clipRect, {\n duration: duration,\n delay: animation.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n clipRect.style.visibility = 'visible';\n if (series.chart.requireInvertedAxis) {\n value = effect(args.timeStamp - args.delay, 0, elementHeight, args.duration);\n clipRect.setAttribute('transform', 'translate(' + xCenter + ' ' + yCenter +\n ') scale(1,' + (value / elementHeight) + ') translate(' + (-xCenter) + ' ' + (-yCenter) + ')');\n }\n else {\n value = effect(args.timeStamp - args.delay, 0, elementWidth, args.duration);\n clipRect.setAttribute('transform', 'translate(' + xCenter + ' ' + yCenter +\n ') scale(' + (value / elementWidth) + ', 1) translate(' + (-xCenter) + ' ' + (-yCenter) + ')');\n }\n }\n },\n end: function (model) {\n clipRect.setAttribute('transform', 'translate(0,0)');\n series.chart.trigger('animationComplete', { series: series.chart.isBlazor ? {} : series });\n }\n });\n };\n return LineBase;\n}());\nexport { LineBase };\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 { withInRange, getPoint, TransformToVisible } from '../../common/utils/helper';\nimport { PathOption } from '@syncfusion/ej2-svg-base';\nimport { LineBase } from './line-base';\n/**\n * `LineSeries` module used to render the line series.\n */\nvar LineSeries = /** @class */ (function (_super) {\n __extends(LineSeries, _super);\n function LineSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Line Series.\n * @return {void}.\n * @private\n */\n LineSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var point1;\n var point2;\n var direction = '';\n var prevPoint = null;\n var startPoint = 'M';\n var options;\n var isPolar = (series.chart && series.chart.chartAreaType === 'PolarRadar');\n var isDrop = (series.emptyPointSettings && series.emptyPointSettings.mode === 'Drop');\n var getCoordinate = isPolar ? TransformToVisible : getPoint;\n var visiblePoints = series.category === 'TrendLine' ? series.points : this.enableComplexProperty(series);\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n point.regions = [];\n point.symbolLocations = [];\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n direction += this.getLineDirection(prevPoint, point, series, isInverted, getCoordinate, startPoint);\n startPoint = prevPoint ? 'L' : startPoint;\n prevPoint = point;\n this.storePointLocation(point, series, isInverted, getCoordinate);\n }\n else {\n prevPoint = isDrop ? prevPoint : null;\n startPoint = isDrop ? startPoint : 'M';\n }\n }\n if (isPolar) {\n if (series.isClosed) {\n var points = this.getFirstLastVisiblePoint(visiblePoints);\n point2 = getCoordinate(points.last.xValue, points.last.yValue, xAxis, yAxis, isInverted, series);\n point1 = getCoordinate(points.first.xValue, points.first.yValue, xAxis, yAxis, isInverted, series);\n direction = direction.concat(startPoint + ' ' + point2.x + ' ' + point2.y + ' ' + 'L' + ' ' + point1.x + ' ' + point1.y);\n }\n }\n var name = series.category === 'Indicator' ? series.chart.element.id + '_Indicator_' + series.index + '_' + series.name :\n series.category === 'TrendLine' ? series.chart.element.id + '_Series_' + series.sourceIndex + '_TrendLine_' + series.index :\n series.chart.element.id + '_Series_' + (series.index === undefined ? series.category : series.index);\n options = new PathOption(name, 'none', series.width, series.interior, series.opacity, series.dashArray, direction);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n LineSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doProgressiveAnimation(series, option);\n };\n /**\n * Get module name.\n */\n LineSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'LineSeries';\n };\n /**\n * To destroy the line series.\n * @return {void}\n * @private\n */\n LineSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return LineSeries;\n}(LineBase));\nexport { LineSeries };\n","/**\n * Resize library\n */\nimport { isNullOrUndefined as isNOU, createElement, EventHandler, detach, Browser } from '@syncfusion/ej2-base';\nvar elementClass = ['north-west', 'north', 'north-east', 'west', 'east', 'south-west', 'south', 'south-east'];\nvar targetElement;\nvar selectedHandler;\nvar originalWidth = 0;\nvar originalHeight = 0;\nvar originalX = 0;\nvar originalY = 0;\nvar originalMouseX = 0;\nvar originalMouseY = 0;\nvar RESIZE_HANDLER = 'e-resize-handle';\nvar FOCUSED_HANDLER = 'e-focused-handle';\nvar RESTRICT_LEFT = ['e-restrict-left'];\nvar RESIZE_WITHIN_VIEWPORT = 'e-resize-viewport';\nvar minHeight;\nvar maxHeight;\nvar minWidth;\nvar maxWidth;\nvar containerElement;\nvar resizeStart = null;\nvar resize = null;\nvar resizeEnd = null;\nvar resizeWestWidth;\nvar setLeft = true;\nvar previousWidth = 0;\nvar setWidth = true;\n// tslint:disable-next-line\nvar proxy;\nvar dialogBorderResize = ['north', 'west', 'east', 'south'];\nexport function createResize(args) {\n resizeStart = args.resizeBegin;\n resize = args.resizing;\n resizeEnd = args.resizeComplete;\n targetElement = getDOMElement(args.element);\n containerElement = getDOMElement(args.boundary);\n var directions = args.direction.split(' ');\n for (var i = 0; i < directions.length; i++) {\n if (dialogBorderResize.indexOf(directions[i]) >= 0 && directions[i]) {\n setBorderResizeElm(directions[i]);\n }\n else if (directions[i].trim() !== '') {\n var resizeHandler = createElement('div', { className: 'e-icons ' + RESIZE_HANDLER + ' ' + 'e-' + directions[i] });\n targetElement.appendChild(resizeHandler);\n }\n }\n minHeight = args.minHeight;\n minWidth = args.minWidth;\n maxWidth = args.maxWidth;\n maxHeight = args.maxHeight;\n if (args.proxy && args.proxy.element && args.proxy.element.classList.contains('e-dialog')) {\n wireEvents(args.proxy);\n }\n else {\n wireEvents();\n }\n}\nfunction setBorderResizeElm(direction) {\n calculateValues();\n var borderBottom = createElement('span', {\n attrs: {\n 'unselectable': 'on', 'contenteditable': 'false'\n }\n });\n borderBottom.setAttribute('class', 'e-dialog-border-resize e-' + direction);\n if (direction === 'south') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.bottom = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'north') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.top = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'east') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.right = '0px';\n borderBottom.style.top = '0px';\n }\n if (direction === 'west') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.left = '0px';\n borderBottom.style.top = '0px';\n }\n targetElement.appendChild(borderBottom);\n}\nfunction getDOMElement(element) {\n var domElement;\n if (!isNOU(element)) {\n if (typeof (element) === 'string') {\n domElement = document.querySelector(element);\n }\n else {\n domElement = element;\n }\n }\n return domElement;\n}\n// tslint:disable-next-line\nfunction wireEvents(args) {\n if (isNOU(args)) {\n args = this;\n }\n var resizers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < resizers.length; i++) {\n selectedHandler = resizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n selectedHandler = borderResizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n }\n}\n/* istanbul ignore next */\nfunction getEventType(e) {\n return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';\n}\n/* istanbul ignore next */\nfunction onMouseDown(e) {\n e.preventDefault();\n targetElement = e.target.parentElement;\n calculateValues();\n originalMouseX = e.pageX;\n originalMouseY = e.pageY;\n e.target.classList.add(FOCUSED_HANDLER);\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, 'mousemove', onMouseMove, this);\n EventHandler.add(document, 'mouseup', onMouseUp, this);\n for (var i = 0; i < RESTRICT_LEFT.length; i++) {\n if (targetElement.classList.contains(RESTRICT_LEFT[i])) {\n setLeft = false;\n }\n else {\n setLeft = true;\n }\n }\n}\n/* istanbul ignore next */\nfunction onMouseUp(e) {\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.remove(target, 'mousemove', onMouseMove);\n EventHandler.remove(target, touchMoveEvent, onMouseMove);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.remove(target, eventName, onMouseMove);\n if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n document.body.querySelector('.' + FOCUSED_HANDLER).classList.remove(FOCUSED_HANDLER);\n }\n if (!isNOU(resizeEnd)) {\n proxy = this;\n resizeEnd(e, proxy);\n }\n EventHandler.remove(document, 'mouseup', onMouseUp);\n EventHandler.remove(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\nfunction calculateValues() {\n originalWidth = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('width').replace('px', ''));\n originalHeight = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('height').replace('px', ''));\n originalX = targetElement.getBoundingClientRect().left;\n originalY = targetElement.getBoundingClientRect().top;\n}\n/* istanbul ignore next */\nfunction onTouchStart(e) {\n targetElement = e.target.parentElement;\n calculateValues();\n var coordinates = e.touches ? e.changedTouches[0] : e;\n originalMouseX = coordinates.pageX;\n originalMouseY = coordinates.pageY;\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, touchMoveEvent, onMouseMove, this);\n EventHandler.add(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\nfunction onMouseMove(e) {\n if (e.target.classList.contains(RESIZE_HANDLER) && e.target.classList.contains(FOCUSED_HANDLER)) {\n selectedHandler = e.target;\n }\n else if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n selectedHandler = document.body.querySelector('.' + FOCUSED_HANDLER);\n }\n if (!isNOU(selectedHandler)) {\n var resizeTowards = '';\n for (var i = 0; i < elementClass.length; i++) {\n if (selectedHandler.classList.contains('e-' + elementClass[i])) {\n resizeTowards = elementClass[i];\n }\n }\n if (!isNOU(resize)) {\n proxy = this;\n resize(e, proxy);\n }\n switch (resizeTowards) {\n case 'south':\n resizeSouth(e);\n break;\n case 'north':\n resizeNorth(e);\n break;\n case 'west':\n resizeWest(e);\n break;\n case 'east':\n resizeEast(e);\n break;\n case 'south-east':\n resizeSouth(e);\n resizeEast(e);\n break;\n case 'south-west':\n resizeSouth(e);\n resizeWest(e);\n break;\n case 'north-east':\n resizeNorth(e);\n resizeEast(e);\n break;\n case 'north-west':\n resizeNorth(e);\n resizeWest(e);\n break;\n default: break;\n }\n }\n}\n/* istanbul ignore next */\nfunction getClientRectValues(element) {\n return element.getBoundingClientRect();\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeSouth(e) {\n var documentHeight = document.documentElement.clientHeight;\n var calculateValue = false;\n var containerRectValues;\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var currentpageY = coordinates.pageY;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && ((documentHeight - currentpageY) >= 0 || (targetRectValues.top < 0))) {\n calculateValue = true;\n }\n var calculatedHeight = originalHeight + (currentpageY - originalMouseY);\n calculatedHeight = (calculatedHeight > minHeight) ? calculatedHeight : minHeight;\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = containerRectValues.top;\n }\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetHeight - containerElement.clientHeight;\n var topWithoutborder = (targetRectValues.top - containerTop) - (borderValue / 2);\n topWithoutborder = (topWithoutborder < 0) ? 0 : topWithoutborder;\n if (targetRectValues.top > 0 && (topWithoutborder + calculatedHeight) > maxHeight) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.height = (maxHeight - parseInt(topWithoutborder.toString(), 10)) + 'px';\n return;\n }\n var targetTop = 0;\n if (calculateValue) {\n if (targetRectValues.top < 0 && (documentHeight + (targetRectValues.height + targetRectValues.top) > 0)) {\n targetTop = targetRectValues.top;\n if ((calculatedHeight + targetTop) <= 30) {\n calculatedHeight = (targetRectValues.height - (targetRectValues.height + targetRectValues.top)) + 30;\n }\n }\n if (((calculatedHeight + targetRectValues.top) >= maxHeight)) {\n targetElement.style.height = targetRectValues.height +\n (documentHeight - (targetRectValues.height + targetRectValues.top)) + 'px';\n }\n var calculatedTop = (isNOU(containerElement)) ? targetTop : topWithoutborder;\n if (calculatedHeight >= minHeight && ((calculatedHeight + calculatedTop) <= maxHeight)) {\n targetElement.style.height = calculatedHeight + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeNorth(e) {\n var calculateValue = false;\n var boundaryRectValues;\n var pageY = (getEventType(e.type) === 'mouse') ? e.pageY : e.touches[0].pageY;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement)) {\n boundaryRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement) && (targetRectValues.top - boundaryRectValues.top) > 0) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageY > 0) {\n calculateValue = true;\n }\n var currentHeight = originalHeight - (pageY - originalMouseY);\n if (calculateValue) {\n if (currentHeight >= minHeight && currentHeight <= maxHeight) {\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = boundaryRectValues.top;\n }\n var top_1 = (originalY - containerTop) + (pageY - originalMouseY);\n top_1 = top_1 > 0 ? top_1 : 1;\n targetElement.style.height = currentHeight + 'px';\n targetElement.style.top = top_1 + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeWest(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var rectValues;\n if (!isNOU(containerElement)) {\n rectValues = getClientRectValues(containerElement);\n }\n var pageX = (getEventType(e.type) === 'mouse') ? e.pageX : e.touches[0].pageX;\n var targetRectValues = getClientRectValues(targetElement);\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetWidth - containerElement.clientWidth;\n var left = isNOU(containerElement) ? 0 : rectValues.left;\n var containerWidth = isNOU(containerElement) ? 0 : rectValues.width;\n if (isNOU(resizeWestWidth)) {\n if (!isNOU(containerElement)) {\n resizeWestWidth = (((targetRectValues.left - left) - borderValue / 2)) + targetRectValues.width;\n resizeWestWidth = resizeWestWidth + (containerWidth - borderValue - resizeWestWidth);\n }\n else {\n resizeWestWidth = documentWidth;\n }\n }\n if (!isNOU(containerElement) &&\n (Math.floor((targetRectValues.left - rectValues.left) + targetRectValues.width +\n (rectValues.right - targetRectValues.right)) - borderValue) <= maxWidth) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageX >= 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth - (pageX - originalMouseX);\n if (setLeft) {\n calculatedWidth = (calculatedWidth > resizeWestWidth) ? resizeWestWidth : calculatedWidth;\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = rectValues.left;\n }\n var left_1 = (originalX - containerLeft) + (pageX - originalMouseX);\n left_1 = (left_1 > 0) ? left_1 : 1;\n if (calculatedWidth !== previousWidth && setWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n if (setLeft) {\n targetElement.style.left = left_1 + 'px';\n if (left_1 === 1) {\n setWidth = false;\n }\n else {\n setWidth = true;\n }\n }\n }\n }\n previousWidth = calculatedWidth;\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeEast(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var containerRectValues;\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var pageX = coordinates.pageX;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement) && (((targetRectValues.left - containerRectValues.left) + targetRectValues.width) < maxWidth\n || (targetRectValues.right - containerRectValues.left) > targetRectValues.width)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && (documentWidth - pageX) > 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth + (pageX - originalMouseX);\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = containerRectValues.left;\n }\n if (((targetRectValues.left - containerLeft) + calculatedWidth) > maxWidth) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.width = maxWidth - (targetRectValues.left - containerLeft) + 'px';\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n }\n}\n/* istanbul ignore next */\nexport function setMinHeight(minimumHeight) {\n minHeight = minimumHeight;\n}\nexport function setMaxWidth(value) {\n maxWidth = value;\n}\nexport function setMaxHeight(value) {\n maxHeight = value;\n}\nexport function removeResize() {\n var handlers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < handlers.length; i++) {\n detach(handlers[i]);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n detach(borderResizers[i]);\n }\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, Collection, L10n, Complex, compile, createElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, append, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';\nimport { SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, PositionData, getZindexPartial } from '../popup/popup';\nimport { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight } from '../common/resize';\nvar ButtonProps = /** @class */ (function (_super) {\n __extends(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate([\n Property('Button')\n ], ButtonProps.prototype, \"type\", void 0);\n __decorate([\n Event()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\nexport { ButtonProps };\n/**\n * Configures the animation properties for both open and close the dialog.\n */\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_TARGET = 'e-dlg-target';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\nvar DLG_UTIL_DEFAULT_TITLE = 'Information';\nvar DLG_UTIL_ROOT = 'e-scroll-disabled';\nvar DLG_UTIL_ALERT = 'e-alert-dialog';\nvar DLG_UTIL_CONFIRM = 'e-confirm-dialog';\nvar DLG_RESIZABLE = 'e-dlg-resizable';\nvar DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';\nvar DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';\nvar DLG_REF_ELEMENT = 'e-dlg-ref-element';\n/**\n * Represents the dialog component that displays the information and get input from the user.\n * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function Dialog(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n if (this.width === '100%') {\n this.element.style.width = '';\n }\n if (this.minHeight !== '') {\n this.element.style.minHeight = this.minHeight.toString();\n }\n if (this.enableResize) {\n this.setResize();\n if (this.animationSettings.effect === 'None') {\n this.getMinHeight();\n }\n }\n this.renderComplete();\n };\n /**\n * Initialize the event handler\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.headerContent = null;\n this.allowMaxHeight = true;\n this.preventVisibility = true;\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.hide(event);\n };\n this.dlgOverlayClickEventHandler = function (event) {\n event.preventFocus = false;\n _this.trigger('overlayClick', event, function (overlayClickEventArgs) {\n if (!overlayClickEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n };\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n this.checkPositionData();\n if (isNullOrUndefined(this.target)) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.target = document.body;\n this.isProtectedOnChange = prevOnChange;\n }\n };\n ;\n Dialog.prototype.isNumberValue = function (value) {\n var isNumber = /^[-+]?\\d*\\.?\\d+$/.test(value);\n return isNumber;\n };\n Dialog.prototype.checkPositionData = function () {\n if (!isNullOrUndefined(this.position)) {\n if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.X);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.X = parseFloat(this.position.X);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.Y);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.Y = parseFloat(this.position.Y);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n }\n };\n Dialog.prototype.getEle = function (list, selector) {\n var element = undefined;\n for (var i = 0; i < list.length; i++) {\n if (list[i].classList.contains(selector)) {\n element = list[i];\n break;\n }\n }\n return element;\n };\n /* istanbul ignore next */\n Dialog.prototype.getMinHeight = function () {\n var computedHeaderHeight = '0px';\n var computedFooterHeight = '0px';\n if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {\n computedHeaderHeight = getComputedStyle(this.headerContent).height;\n }\n var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);\n if (!isNullOrUndefined(footerEle)) {\n computedFooterHeight = getComputedStyle(footerEle).height;\n }\n var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);\n var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);\n setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));\n return (headerHeight + 30 + footerHeight);\n };\n Dialog.prototype.onResizeStart = function (args, dialogObj) {\n dialogObj.trigger('resizeStart', args);\n return args.cancel;\n };\n Dialog.prototype.onResizing = function (args, dialogObj) {\n dialogObj.trigger('resizing', args);\n };\n Dialog.prototype.onResizeComplete = function (args, dialogObj) {\n dialogObj.trigger('resizeStop', args);\n };\n Dialog.prototype.setResize = function () {\n if (this.enableResize) {\n if (this.isBlazorServerRender() && !isNullOrUndefined(this.element.querySelector('.e-icons.e-resize-handle'))) {\n return;\n }\n this.element.classList.add(DLG_RESIZABLE);\n var computedHeight = getComputedStyle(this.element).minHeight;\n var computedWidth = getComputedStyle(this.element).minWidth;\n var direction = '';\n for (var i = 0; i < this.resizeHandles.length; i++) {\n if (this.resizeHandles[i] === 'All') {\n direction = 'south north east west north-east north-west south-east south-west';\n break;\n }\n else {\n var directionValue = '';\n switch (this.resizeHandles[i].toString()) {\n case 'SouthEast':\n directionValue = 'south-east';\n break;\n case 'SouthWest':\n directionValue = 'south-west';\n break;\n case 'NorthEast':\n directionValue = 'north-east';\n break;\n case 'NorthWest':\n directionValue = 'north-west';\n break;\n default:\n directionValue = this.resizeHandles[i].toString();\n break;\n }\n direction += directionValue.toLocaleLowerCase() + ' ';\n }\n }\n if (this.enableRtl && direction.trim() === 'south-east') {\n direction = 'south-west';\n }\n else if (this.enableRtl && direction.trim() === 'south-west') {\n direction = 'south-east';\n }\n if (this.isModal && this.enableRtl) {\n this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);\n }\n else if (this.isModal && this.target === document.body) {\n this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);\n }\n createResize({\n element: this.element,\n direction: direction,\n minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),\n maxHeight: this.targetEle.clientHeight,\n minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),\n maxWidth: this.targetEle.clientWidth,\n boundary: this.target === document.body ? null : this.targetEle,\n resizeBegin: this.onResizeStart.bind(this),\n resizeComplete: this.onResizeComplete.bind(this),\n resizing: this.onResizing.bind(this),\n proxy: this\n });\n this.wireWindowResizeEvent();\n }\n else {\n removeResize();\n this.unWireWindowResizeEvent();\n if (this.isModal) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n else {\n this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);\n }\n this.element.classList.remove(DLG_RESIZABLE);\n }\n };\n Dialog.prototype.getFocusElement = function (target) {\n var value = 'input,select,textarea,button:enabled,a,[contenteditable=\"true\"],[tabindex]';\n var items = target.querySelectorAll(value);\n return { element: items[items.length - 1] };\n };\n /* istanbul ignore next */\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {\n buttonObj = this.getFocusElement(this.ftrTemplateContent);\n }\n if (isNullOrUndefined(this.btnObj) && isNullOrUndefined(this.ftrTemplateContent) && !isNullOrUndefined(this.contentEle)) {\n buttonObj = this.getFocusElement(this.contentEle);\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.hide(event);\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n if (!this.isBlazorServerRender()) {\n addClass([this.element], ROOT);\n }\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n if (!this.isBlazorServerRender()) {\n this.setCSSClass();\n }\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n this.initialRender = true;\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { role: 'dialog' });\n }\n if (this.zIndex === 1000) {\n this.setzIndex(this.element, false);\n this.calculatezIndex = true;\n }\n else {\n this.calculatezIndex = false;\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.element.getElementsByClassName('e-dlg-header-content')[0];\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.contentEle)) {\n this.contentEle = this.element.querySelector('#' + this.element.id + '_dialog-content');\n }\n if (!this.isBlazorServerRender()) {\n this.setTargetContent();\n if (this.header !== '' && !isNullOrUndefined(this.header)) {\n this.setHeader();\n }\n if (this.showCloseIcon) {\n this.renderCloseIcon();\n }\n this.setContent();\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setFooterTemplate();\n }\n else if (!isNullOrUndefined(this.buttons[0].buttonModel)) {\n this.setButton();\n }\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n this.setButton();\n }\n }\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.dlgContainer)) {\n this.dlgContainer = this.element.parentElement;\n for (var i = 0, childNodes = this.dlgContainer.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains('e-dlg-overlay')) {\n this.dlgOverlay = childNodes[i];\n }\n }\n }\n if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true\n && !isNullOrUndefined(this.element.parentElement)) {\n var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;\n this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });\n parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));\n }\n if (!isNullOrUndefined(this.targetEle)) {\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n enableRtl: this.enableRtl,\n open: function (event) {\n var eventArgs = {\n container: _this.isModal ? _this.dlgContainer : _this.element,\n element: _this.element,\n target: _this.target,\n preventFocus: false\n };\n if (_this.enableResize) {\n _this.resetResizeIcon();\n }\n _this.trigger('open', eventArgs, function (openEventArgs) {\n if (!openEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n },\n close: function (event) {\n if (_this.isModal) {\n addClass([_this.dlgOverlay], 'e-fade');\n }\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closeArgs);\n var activeEle = document.activeElement;\n if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {\n activeEle.blur();\n }\n if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n if (!this.isBlazorServerRender()) {\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n }\n if (this.visible) {\n this.show();\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n this.initialRender = false;\n };\n Dialog.prototype.resetResizeIcon = function () {\n var dialogConHeight = this.getMinHeight();\n if (this.targetEle.offsetHeight < dialogConHeight) {\n var className = this.enableRtl ? 'e-south-west' : 'e-south-east';\n var resizeIcon = this.element.querySelector('.' + className);\n if (!isNullOrUndefined(resizeIcon)) {\n resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function (zIndexValue) {\n var zIndex;\n if (isNullOrUndefined(zIndexValue)) {\n zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n }\n else {\n zIndex = zIndexValue;\n }\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (this.isModal) {\n if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {\n this.setPopupPosition();\n }\n else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))\n || (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {\n this.setPopupPosition();\n }\n else {\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n }\n else {\n this.setPopupPosition();\n }\n };\n Dialog.prototype.setPopupPosition = function () {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n this.dragObj = new Draggable(this.element, {\n clone: false,\n isDragScroll: true,\n abort: '.e-dlg-closeicon-btn',\n handle: handleContent,\n dragStart: function (event) {\n _this.trigger('dragStart', event, function (dragEventArgs) {\n if (isBlazor()) {\n dragEventArgs.bindEvents(event.dragElement);\n }\n });\n },\n dragStop: function (event) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.position)) {\n _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);\n }\n // Reset the dialog position after drag completion.\n _this.element.style.position = 'relative';\n }\n _this.trigger('dragStop', event);\n _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n },\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n };\n Dialog.prototype.setButton = function () {\n if (!this.isBlazorServerRender()) {\n this.buttonContent = [];\n this.btnObj = [];\n var primaryBtnFlag = true;\n for (var i = 0; i < this.buttons.length; i++) {\n var buttonType = !isNullOrUndefined(this.buttons[i].type) ? this.buttons[i].type.toLowerCase() : 'button';\n var btn = this.createElement('button', { attrs: { type: buttonType } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n }\n var footerBtn;\n for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {\n footerBtn = childNodes[i].querySelectorAll('button');\n }\n }\n for (var i = 0; i < this.buttons.length; i++) {\n if (!this.isBlazorServerRender()) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n }\n if (this.isBlazorServerRender()) {\n this.ftrTemplateContent = this.element.querySelector('.' + DLG_FOOTER_CONTENT);\n }\n if (!isNullOrUndefined(this.ftrTemplateContent) && typeof (this.buttons[i].click) === 'function' && footerBtn.length > 0) {\n EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);\n }\n if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n this.btnObj[i].element.classList.add('e-flat');\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n }\n };\n Dialog.prototype.setContent = function () {\n attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });\n this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n if (this.innerContentElement) {\n this.contentEle.appendChild(this.innerContentElement);\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {\n var blazorContain = Object.keys(window);\n if (typeof (this.content) === 'string' && !isBlazor()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n else if (this.content instanceof HTMLElement) {\n this.contentEle.appendChild(this.content);\n }\n else {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n }\n if (!isNullOrUndefined(this.headerContent)) {\n this.element.insertBefore(this.contentEle, this.element.children[1]);\n }\n else {\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n }\n if (this.height === 'auto') {\n if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {\n this.element.style.width = formatUnit(this.width);\n }\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setTemplate = function (template, toElement, prop) {\n var templateFn;\n var templateProps;\n var blazorContain = Object.keys(window);\n if (toElement.classList.contains(DLG_HEADER)) {\n templateProps = this.element.id + 'header';\n }\n else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {\n templateProps = this.element.id + 'footerTemplate';\n }\n else {\n templateProps = this.element.id + 'content';\n }\n var templateValue;\n if (!isNullOrUndefined(template.outerHTML)) {\n toElement.appendChild(template);\n }\n else if ((typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {\n templateFn = compile(template);\n templateValue = template;\n }\n else {\n toElement.innerHTML = this.sanitizeHelper(template);\n }\n var fromElements = [];\n if (!isNullOrUndefined(templateFn)) {\n var isString = (isBlazor() &&\n !this.isStringTemplate && (templateValue).indexOf('
Blazor') === 0) ?\n this.isStringTemplate : true;\n for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n };\n /**\n * @hidden\n */\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var dialogItem = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n };\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n };\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\!?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach(function (el) {\n if (el.nodeType !== 8) {\n _this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n };\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n var userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n * @private\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n if (typeof (this.content) === 'function') {\n this.clearTemplate(['content']);\n detach(this.contentEle);\n this.contentEle = null;\n this.setContent();\n }\n else {\n typeof (this.content) === 'string' ? (this.isBlazorServerRender() && (this.contentEle.innerText === '')) ?\n this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :\n this.updateSanitizeContent() : this.contentEle.appendChild(this.content);\n }\n this.setMaxHeight();\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n }\n else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons':\n var buttonCount = this.buttons.length;\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n for (var i = 0; i < buttonCount; i++) {\n if (!isNullOrUndefined(this.buttons[i].buttonModel)) {\n this.footerTemplate = '';\n this.setButton();\n }\n }\n break;\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;\n var positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n break;\n }\n }\n };\n Dialog.prototype.setTarget = function (target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n };\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.zIndex = getZindexPartial(zIndexElement);\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @memberof dialog\n */\n Dialog.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n var classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n var attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (!isNullOrUndefined(this.element) && this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (!isNullOrUndefined(this.popupObj.element) && this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal && !this.isBlazorServerRender()) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.element.children)) {\n for (var i = 0; i <= this.element.children.length; i++) {\n i = i - i;\n detach(this.element.children[i]);\n }\n }\n }\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n if (!this.isBlazorServerRender()) {\n _super.prototype.destroy.call(this);\n }\n else {\n this.isDestroyed = true;\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Dialog.prototype.wireWindowResizeEvent = function () {\n window.addEventListener('resize', this.windowResizeHandler.bind(this));\n };\n Dialog.prototype.unWireWindowResizeEvent = function () {\n window.removeEventListener('resize', this.windowResizeHandler.bind(this));\n };\n /**\n * Binding event to the element while widget creation\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.isBlazorServerRender() && this.showCloseIcon) {\n this.closeIcon = this.element.getElementsByClassName('e-dlg-closeicon-btn')[0];\n }\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n * @return {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @return {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs_1 = isBlazor() ? {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n maxHeight: this.element.style.maxHeight\n } : {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n target: this.target,\n maxHeight: this.element.style.maxHeight\n };\n this.trigger('beforeOpen', eventArgs_1, function (beforeOpenArgs) {\n if (!beforeOpenArgs.cancel) {\n if (_this.element.style.maxHeight !== eventArgs_1.maxHeight) {\n _this.allowMaxHeight = false;\n _this.element.style.maxHeight = eventArgs_1.maxHeight;\n }\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n if (_this.isModal && (!isNullOrUndefined(_this.dlgOverlay))) {\n _this.dlgOverlay.style.display = 'block';\n _this.dlgContainer.style.display = 'flex';\n removeClass([_this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n }\n else {\n _this.dlgContainer.style.position = 'absolute';\n }\n _this.dlgOverlay.style.position = 'absolute';\n _this.element.style.position = 'relative';\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n var openAnimation = {\n name: _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = (_this.isModal) ? _this.element.parentElement : _this.element;\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n setStyleAttribute(_this.element, { 'zIndex': _this.zIndex });\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n _this.animationSettings.effect === 'None' ? _this.popupObj.show() : _this.popupObj.show(openAnimation);\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n * @return {void}\n */\n Dialog.prototype.hide = function (event) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n !isNullOrUndefined(_this.targetEle) ? removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]) :\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n var closeAnimation = {\n name: _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n _this.animationSettings.effect === 'None' ? _this.popupObj.hide() : _this.popupObj.hide(closeAnimation);\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n };\n /**\n * Specifies to view the Full screen Dialog.\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n if (args) {\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n * @param { number } index - Index of the button.\n * @return {Button}\n */\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n };\n __decorate([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"enableResize\", void 0);\n __decorate([\n Property(['South-East'])\n ], Dialog.prototype, \"resizeHandles\", void 0);\n __decorate([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"minHeight\", void 0);\n __decorate([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"destroyed\", void 0);\n Dialog = __decorate([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\nexport { Dialog };\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\nexport var DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n function alert(args) {\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n function confirm(args) {\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n function confirmOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n return options;\n }\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\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/**\n * AccumulationChart file\n */\nimport { Property, Component, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { Internationalization, Event, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';\nimport { remove, extend, isNullOrUndefined, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { Font, Margin, Border, TooltipSettings, Indexes } from '../common/model/base';\nimport { AccumulationSeries, PieCenter } from './model/acc-base';\nimport { Theme, getThemeColor } from '../common/model/theme';\nimport { load, pointClick } from '../common/model/constants';\nimport { pointMove, chartMouseClick, chartMouseDown } from '../common/model/constants';\nimport { chartMouseLeave, chartMouseMove, chartMouseUp, resized, beforeResize } from '../common/model/constants';\nimport { LegendSettings } from '../common/legend/legend';\nimport { subtractRect, indexFinder, appendChildElement, redrawElement, blazorTemplatesReset } from '../common/utils/helper';\nimport { RectOption, showTooltip, ImageOption } from '../common/utils/helper';\nimport { textElement, createSvg, calculateSize, removeElement, firstToLowerCase, withInBounds } from '../common/utils/helper';\nimport { getElement, titlePositionX } from '../common/utils/helper';\nimport { Rect, Size, measureText, TextOption } from '@syncfusion/ej2-svg-base';\nimport { Data } from '../common/model/data';\nimport { AccumulationBase } from './renderer/accumulation-base';\nimport { PieSeries } from './renderer/pie-series';\nimport { AccumulationAnnotationSettings } from './model/acc-base';\nimport { getTitle } from '../common/utils/helper';\nimport { ExportUtils } from '../common/utils/export';\n/**\n * Represents the AccumulationChart control.\n * ```html\n *
\n * \n * ```\n * @public\n */\nvar AccumulationChart = /** @class */ (function (_super) {\n __extends(AccumulationChart, _super);\n /**\n * Constructor for creating the AccumulationChart widget\n * @private\n */\n function AccumulationChart(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.animateselected = false;\n /** @private explode radius internal property */\n _this.explodeDistance = 0;\n _this.chartid = 57724;\n return _this;\n }\n /**\n * Animate the series bounds on data change.\n * @private\n */\n AccumulationChart.prototype.animate = function (duration) {\n this.duration = duration ? duration : 700;\n this.animateselected = true;\n this.animateSeries = false;\n var temIndex = 0;\n var tempcolor = [];\n var tempindex = [];\n var tempindex1 = [];\n var currentSeries = this.visibleSeries[0];\n var datasource = [];\n datasource = currentSeries.dataSource;\n currentSeries.sumOfPoints = 0;\n if (currentSeries.points.length < Object.keys(currentSeries.dataSource).length) {\n this.refresh();\n }\n else if (currentSeries.points.length > Object.keys(currentSeries.dataSource).length) {\n var currentSeries_1 = this.visibleSeries[0];\n currentSeries_1.points = currentSeries_1.points.filter(function (entry1) {\n entry1.visible = false;\n tempindex.push(entry1.index);\n tempcolor.push(entry1.color);\n return (datasource).some(function (entry2) {\n var accPoint = entry2;\n if (entry1.x === accPoint.x) {\n entry1.visible = true;\n tempindex1.push(entry1.index);\n entry1.index = temIndex;\n temIndex++;\n }\n return entry1.x === accPoint.x;\n });\n });\n var missing = tempindex.filter(function (item) { return tempindex1.indexOf(item) < 0; });\n var interval = tempindex.length - missing.length;\n for (var i = (tempindex.length - 1); i >= interval; i--) {\n removeElement('container_Series_0_Point_' + tempindex[i]);\n }\n for (var i = 0; i < currentSeries_1.points.length; i++) {\n currentSeries_1.points[i].y = currentSeries_1.dataSource[i].y;\n currentSeries_1.points[i].color = tempcolor[i];\n currentSeries_1.sumOfPoints += currentSeries_1.dataSource[i].y;\n }\n this.redraw = this.enableAnimation;\n this.animateSeries = false;\n this.calculateBounds();\n this.renderElements();\n }\n else {\n for (var i = 0; i < currentSeries.points.length; i++) {\n currentSeries.points[i].y = currentSeries.dataSource[i][currentSeries.yName];\n currentSeries.points[i].color = currentSeries.dataSource[i][currentSeries.pointColorMapping] != null\n ? currentSeries.dataSource[i][currentSeries.pointColorMapping] : currentSeries.points[i].color;\n currentSeries.sumOfPoints += currentSeries.dataSource[i][currentSeries.yName];\n }\n this.redraw = this.enableAnimation;\n this.animateSeries = false;\n this.removeSvg();\n this.refreshPoints(currentSeries.points);\n this.renderElements();\n }\n };\n Object.defineProperty(AccumulationChart.prototype, \"type\", {\n /** @private */\n get: function () {\n if (this.series && this.series.length) {\n return this.series[0].type;\n }\n return 'Pie';\n },\n enumerable: true,\n configurable: true\n });\n // accumulation chart methods\n /**\n * To create svg object, renderer and binding events for the container.\n */\n AccumulationChart.prototype.preRender = function () {\n var blazor = 'Blazor';\n this.isBlazor = window[blazor];\n this.allowServerDataBinding = false;\n this.unWireEvents();\n this.setCulture();\n this.animateSeries = true;\n if (this.element.id === '') {\n var collection = document.getElementsByClassName('e-accumulationchart').length;\n this.element.id = 'acc_chart_' + this.chartid + '_' + collection;\n }\n calculateSize(this);\n this.wireEvents();\n };\n /**\n * Themeing for chart goes here\n */\n AccumulationChart.prototype.setTheme = function () {\n /*! Set theme for accumulation chart */\n this.themeStyle = getThemeColor(this.theme);\n };\n /**\n * To render the accumulation chart elements\n */\n AccumulationChart.prototype.render = function () {\n var _this = this;\n if (this.element.className.indexOf('e-accumulationchart') === -1) {\n this.element.classList.add('e-accumulationchart');\n }\n var loadEventData = {\n chart: this.isBlazor ? {} : this,\n accumulation: this.isBlazor ? {} : this,\n theme: this.theme, name: load, cancel: false\n };\n this.trigger(load, loadEventData, function () {\n _this.theme = _this.isBlazor ? loadEventData.theme : _this.theme;\n _this.setTheme();\n _this.accBaseModule = new AccumulationBase(_this);\n _this.pieSeriesModule = new PieSeries(_this);\n _this.calculateVisibleSeries();\n _this.processData();\n _this.renderComplete();\n _this.allowServerDataBinding = true;\n });\n };\n /**\n * Method to unbind events for accumulation chart\n */\n AccumulationChart.prototype.unWireEvents = function () {\n /*! Find the Events type */\n var isIE11Pointer = Browser.isPointer;\n var start = Browser.touchStartEvent;\n var move = Browser.touchMoveEvent;\n var stop = Browser.touchEndEvent;\n var cancel = isIE11Pointer ? 'pointerleave' : 'mouseleave';\n /*! UnBind the Event handler */\n EventHandler.remove(this.element, move, this.accumulationMouseMove);\n EventHandler.remove(this.element, stop, this.accumulationMouseEnd);\n EventHandler.remove(this.element, start, this.accumulationMouseStart);\n EventHandler.remove(this.element, 'click', this.accumulationOnMouseClick);\n EventHandler.remove(this.element, 'contextmenu', this.accumulationRightClick);\n EventHandler.remove(this.element, cancel, this.accumulationMouseLeave);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.accumulationResize);\n };\n /**\n * Method to bind events for the accumulation chart\n */\n AccumulationChart.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 isIE11Pointer = Browser.isPointer;\n var start = Browser.touchStartEvent;\n var stop = Browser.touchEndEvent;\n var move = Browser.touchMoveEvent;\n var cancel = isIE11Pointer ? 'pointerleave' : 'mouseleave';\n /*! Bind the Event handler */\n EventHandler.add(this.element, move, this.accumulationMouseMove, this);\n EventHandler.add(this.element, stop, this.accumulationMouseEnd, this);\n EventHandler.add(this.element, start, this.accumulationMouseStart, this);\n EventHandler.add(this.element, 'click', this.accumulationOnMouseClick, this);\n EventHandler.add(this.element, 'contextmenu', this.accumulationRightClick, this);\n EventHandler.add(this.element, cancel, this.accumulationMouseLeave, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.accumulationResize.bind(this));\n new Touch(this.element); // To avoid geasture blocking for browser\n /*! Apply the style for chart */\n this.setStyle(this.element);\n };\n /**\n * Method to set mouse x, y from events\n */\n AccumulationChart.prototype.setMouseXY = function (e) {\n var pageX;\n var pageY;\n var svgRectElement = getElement(this.element.id + '_svg');\n if (svgRectElement && this.element) {\n var svgRect = svgRectElement.getBoundingClientRect();\n var rect = this.element.getBoundingClientRect();\n if (e.type.indexOf('touch') > -1) {\n this.isTouch = true;\n var touchArg = e;\n pageY = touchArg.changedTouches[0].clientY;\n pageX = touchArg.changedTouches[0].clientX;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n pageX = e.clientX;\n pageY = e.clientY;\n }\n this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n }\n };\n /**\n * Handles the mouse end.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseEnd = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible) {\n this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY, this.isTouch);\n }\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.move(e);\n }\n }\n this.notify(Browser.touchEndEvent, e);\n return false;\n };\n /*public removeSvgOffset(x: number, y: number): ChartLocation {\n let rect: ClientRect = this.element.getBoundingClientRect();\n let svgRect: ClientRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n return { x: (x - rect.left) - Math.max(svgRect.left - rect.left, 0), y: (y - rect.top) - Math.max(svgRect.top - rect.top, 0)};\n }*/\n /**\n * Handles the mouse start.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseStart = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseDown, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n return false;\n };\n /**\n * Handles the accumulation chart resize.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationResize = function (e) {\n var _this = this;\n this.animateSeries = false;\n var args = {\n accumulation: this.isBlazor ? {} : this,\n previousSize: new Size(this.availableSize.width, this.availableSize.height),\n name: resized,\n currentSize: new Size(0, 0),\n chart: this.isBlazor ? {} : this,\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) {\n clearTimeout(_this.resizeTo);\n return;\n }\n calculateSize(_this);\n args.currentSize = _this.availableSize;\n _this.trigger(resized, args);\n _this.refreshSeries();\n _this.refreshChart();\n }, 500);\n }\n return false;\n };\n /**\n * Handles the print method for accumulation chart control.\n */\n AccumulationChart.prototype.print = function (id) {\n // To handle the print funtion in IE and Edge browsers\n var clippath = document.getElementById(this.element.id + '_Series_0').style.clipPath;\n document.getElementById(this.element.id + '_Series_0').style.clipPath = '';\n var exportChart = new ExportUtils(this);\n exportChart.print(id);\n document.getElementById(this.element.id + '_Series_0').style.clipPath = clippath;\n };\n /**\n * Export method for the chart.\n */\n AccumulationChart.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 * Applying styles for accumulation chart element\n */\n AccumulationChart.prototype.setStyle = function (element) {\n element.style.touchAction = 'element';\n element.style.msTouchAction = '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 };\n /**\n * Method to set the annotation content dynamically for accumulation.\n */\n AccumulationChart.prototype.setAnnotationValue = function (annotationIndex, content) {\n var annotation = this.annotations[annotationIndex];\n var element;\n var parentNode = getElement(this.element.id + '_Annotation_Collections');\n if (content) {\n annotation.content = content;\n if (parentNode) {\n element = this.createElement('div');\n removeElement(this.element.id + '_Annotation_' + annotationIndex);\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 * Handles the mouse move on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseMove = function (e) {\n if (!getElement(this.element.id + '_svg')) {\n return false;\n }\n this.setMouseXY(e);\n this.trigger(chartMouseMove, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.pointMove) {\n this.triggerPointEvent(pointMove, e.target, e);\n }\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.move(e);\n }\n if (this.accumulationDataLabelModule && this.visibleSeries[0] && this.visibleSeries[0].dataLabel.visible) {\n this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY);\n }\n if (!this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY);\n }\n if (this.enableBorderOnMouseMove && this.type === 'Pie' && this.pieSeriesModule &&\n withInBounds(this.mouseX, this.mouseY, this.initialClipRect)) {\n this.pieSeriesModule.findSeries(e);\n }\n this.notify(Browser.touchMoveEvent, e);\n return false;\n };\n AccumulationChart.prototype.titleTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n var id = (targetId === (this.element.id + '_title') || targetId === (this.element.id + '_subTitle') ||\n targetId === (this.element.id + '_chart_legend_title'));\n if ((event.target.textContent.indexOf('...') > -1) && id) {\n var title = (targetId === (this.element.id + '_title')) ? this.title : (targetId === (this.element.id + '_subTitle')) ?\n 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 /**\n * Handles the mouse click on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationOnMouseClick = function (e) {\n this.setMouseXY(e);\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.click(e);\n }\n if (this.selectionMode !== 'None' && this.accumulationSelectionModule) {\n this.accumulationSelectionModule.calculateSelectedElements(this, e);\n }\n if (this.visibleSeries[0].explode) {\n this.accBaseModule.processExplode(e);\n }\n if (this.enableBorderOnMouseMove && this.pieSeriesModule && this.type === 'Pie') {\n this.pieSeriesModule.findSeries(e);\n }\n this.trigger(chartMouseClick, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.pointClick) {\n this.triggerPointEvent(pointClick, e.target, e);\n }\n return false;\n };\n AccumulationChart.prototype.triggerPointEvent = function (event, element, e) {\n var evt = e;\n var indexes = indexFinder(element.id, true);\n if (indexes.series >= 0 && indexes.point >= 0) {\n this.trigger(event, { series: this.isBlazor ? {} : this.series[indexes.series],\n point: this.series[indexes.series].points[indexes.point],\n seriesIndex: indexes.series, pointIndex: indexes.point,\n x: this.mouseX, y: this.mouseY, pageX: evt.pageX, pageY: evt.pageY });\n }\n };\n /**\n * Handles the mouse right click on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationRightClick = function (event) {\n if (event.buttons === 2 || event.pointerType === 'touch') {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n /**\n * Handles the mouse leave on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseLeave = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseLeave, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n this.notify(Browser.isPointer ? 'pointerleave' : 'mouseleave', e);\n var borderElement = document.getElementById(this.element.id + 'PointHover_Border');\n if (borderElement) {\n this.pieSeriesModule.removeBorder(borderElement, 1000);\n borderElement = null;\n }\n return false;\n };\n /**\n * Method to set culture for chart\n */\n AccumulationChart.prototype.setCulture = function () {\n this.intl = new Internationalization();\n };\n /**\n * Method to create SVG element for accumulation chart.\n */\n AccumulationChart.prototype.createPieSvg = function () {\n this.removeSvg();\n createSvg(this);\n };\n /**\n * To Remove the SVG from accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.removeSvg = function () {\n if (this.redraw) {\n return null;\n }\n blazorTemplatesReset(this);\n removeElement(this.element.id + '_Secondary_Element');\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > 0) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n removeElement('EJ2_legend_tooltip');\n removeElement('EJ2_datalabel_tooltip');\n removeElement(this.element.id + 'PointHover_Border');\n };\n /**\n * Method to create the secondary element for tooltip, datalabel and annotaitons.\n */\n AccumulationChart.prototype.createSecondaryElement = function () {\n var element = redrawElement(this.redraw, this.element.id + '_Secondary_Element') ||\n this.createElement('div', {\n id: this.element.id + '_Secondary_Element',\n styles: 'position: relative'\n });\n appendChildElement(false, this.element, element, this.redraw);\n };\n /**\n * Method to find visible series based on series types\n */\n AccumulationChart.prototype.calculateVisibleSeries = function () {\n this.visibleSeries = [];\n for (var i = 0, length_1 = this.series.length; i < length_1; i++) {\n this.series[i].index = i;\n if (this.series[i].type === this.type && this.visibleSeries.length === 0) {\n this.visibleSeries.push(this.series[i]);\n break;\n }\n }\n };\n /**\n * To find points from dataSource\n */\n AccumulationChart.prototype.processData = function (render) {\n if (render === void 0) { render = true; }\n this.seriesCounts = 0;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n series.dataModule = new Data(series.dataSource || this.dataSource, series.query);\n series.refreshDataManager(this, render);\n }\n };\n /**\n * To refresh the accumulation chart\n * @private\n */\n AccumulationChart.prototype.refreshChart = function () {\n this.doGrouppingProcess();\n this.createPieSvg();\n this.calculateBounds();\n this.renderElements();\n removeElement('chartmeasuretext');\n };\n /**\n * Method to find groupped points\n */\n AccumulationChart.prototype.doGrouppingProcess = function () {\n var series = this.visibleSeries[0];\n if (!isNullOrUndefined(series.resultData) && ((!isNullOrUndefined(series.lastGroupTo) &&\n series.lastGroupTo !== series.groupTo))) {\n series.getPoints(series.resultData, this);\n }\n };\n /**\n * Method to calculate bounds for accumulation chart\n */\n AccumulationChart.prototype.calculateBounds = function () {\n this.initialClipRect = new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height);\n this.titleCollection = [];\n this.subTitleCollection = [];\n var titleHeight = 0;\n var subTitleHeight = 0;\n var maxWidth = 0;\n var titleWidth = 0;\n this.titleCollection = getTitle(this.title, this.titleStyle, this.initialClipRect.width);\n titleHeight = this.title ? measureText(this.title, this.titleStyle).height * this.titleCollection.length : titleHeight;\n if (this.subTitle) {\n for (var _i = 0, _a = this.titleCollection; _i < _a.length; _i++) {\n var titleText = _a[_i];\n titleWidth = measureText(titleText, this.titleStyle).width;\n maxWidth = titleWidth > maxWidth ? titleWidth : maxWidth;\n }\n this.subTitleCollection = getTitle(this.subTitle, this.subTitleStyle, maxWidth);\n subTitleHeight = (measureText(this.subTitle, this.subTitleStyle).height * this.subTitleCollection.length);\n }\n subtractRect(this.initialClipRect, new Rect(0, (subTitleHeight + titleHeight), this.margin.right + this.margin.left, this.margin.bottom + this.margin.top));\n this.calculateLegendBounds();\n };\n /*\n * Method to calculate legend bounds for accumulation chart\n */\n AccumulationChart.prototype.calculateLegendBounds = function () {\n if (!this.accumulationLegendModule || !this.legendSettings.visible) {\n return null;\n }\n this.accumulationLegendModule.getLegendOptions(this, this.visibleSeries);\n this.accumulationLegendModule.calculateLegendBounds(this.initialClipRect, this.availableSize, null);\n };\n /**\n * To render elements for accumulation chart\n * @private\n */\n AccumulationChart.prototype.renderElements = function () {\n this.renderBorder();\n this.createSecondaryElement();\n this.renderSeries();\n this.renderTitle();\n this.renderLegend();\n appendChildElement(false, this.element, this.svgObject, this.redraw);\n this.processSelection();\n this.processExplode();\n this.renderAnnotation();\n this.setSecondaryElementPosition();\n updateBlazorTemplate(this.element.id + '_DataLabel', 'Template', this.series[0].dataLabel);\n this.trigger('loaded', { accumulation: this.isBlazor ? {} : this, chart: this.isBlazor ? {} : this });\n this.animateSeries = false;\n };\n /**\n * To set the left and top position for data label template for center aligned chart\n * @private\n */\n AccumulationChart.prototype.setSecondaryElementPosition = function () {\n var tooltipParent = getElement(this.element.id + '_Secondary_Element');\n if (!tooltipParent) {\n return;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n tooltipParent.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';\n tooltipParent.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';\n };\n /**\n * To render the annotaitions for accumulation series.\n * @private\n */\n AccumulationChart.prototype.renderAnnotation = function () {\n if (this.annotationModule) {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n };\n /**\n * Method to process the explode in accumulation chart\n * @private\n */\n AccumulationChart.prototype.processExplode = function () {\n if (this.redraw) {\n return null;\n }\n if (!this.visibleSeries[0].explode) {\n return null;\n }\n this.accBaseModule.invokeExplode();\n };\n /**\n * Method to render series for accumulation chart\n */\n AccumulationChart.prototype.renderSeries = function () {\n if (!this.redraw) {\n this.svgObject.appendChild(this.renderer.createGroup({ id: this.element.id + '_SeriesCollection' }));\n }\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.visible && this[(firstToLowerCase(series.type) + 'SeriesModule')]) {\n this[(firstToLowerCase(series.type) + 'SeriesModule')].initProperties(this, series);\n series.renderSeries(this, this.redraw);\n }\n }\n };\n /**\n * Method to render border for accumulation chart\n */\n AccumulationChart.prototype.renderBorder = function () {\n var padding = this.border.width;\n appendChildElement(false, this.svgObject, this.renderer.drawRectangle(new RectOption(this.element.id + '_border', this.background || this.themeStyle.background, this.border, 1, new Rect(padding / 2, padding / 2, this.availableSize.width - padding, this.availableSize.height - padding))), this.redraw);\n // to draw back ground image for accumulation chart \n var backGroundImage = this.backgroundImage;\n if (backGroundImage) {\n var image = new ImageOption(this.availableSize.height - padding, this.availableSize.width - padding, backGroundImage, 0, 0, this.element.id + '_background', 'visible', 'none');\n appendChildElement(false, this.svgObject, this.renderer.drawImage(image), this.redraw);\n }\n };\n /**\n * Method to render legend for accumulation chart\n */\n AccumulationChart.prototype.renderLegend = function () {\n if (!this.accumulationLegendModule || !this.legendSettings.visible) {\n return null;\n }\n if (this.accumulationLegendModule.legendCollections.length) {\n if (this.visibleSeries[0].type === 'Pie') {\n this.accumulationLegendModule.getSmartLegendLocation(this.visibleSeries[0].labelBound, this.accumulationLegendModule.legendBounds, this.margin);\n }\n this.accumulationLegendModule.renderLegend(this, this.legendSettings, this.accumulationLegendModule.legendBounds, this.redraw);\n }\n };\n /**\n * To process the selection in accumulation chart\n * @private\n */\n AccumulationChart.prototype.processSelection = function () {\n if (!this.accumulationSelectionModule || this.selectionMode === 'None') {\n return null;\n }\n var selectedDataIndexes = extend([], this.accumulationSelectionModule.selectedDataIndexes, null, true);\n this.accumulationSelectionModule.invokeSelection(this);\n if (selectedDataIndexes.length > 0) {\n this.accumulationSelectionModule.selectedDataIndexes = selectedDataIndexes;\n this.accumulationSelectionModule.redrawSelection(this, this.selectionMode);\n }\n };\n /**\n * To render title for accumulation chart\n */\n AccumulationChart.prototype.renderTitle = function () {\n var rect;\n var margin = this.margin;\n if (!this.title) {\n return null;\n }\n var alignment = this.titleStyle.textAlignment;\n var getAnchor = alignment === 'Near' ? 'start' : alignment === 'Far' ? 'end' : 'middle';\n var titleSize = measureText(this.title, this.titleStyle);\n rect = new Rect(margin.left, 0, this.availableSize.width - margin.left - margin.right, 0);\n var options = new TextOption(this.element.id + '_title', titlePositionX(rect, this.titleStyle), this.margin.top + (titleSize.height * 3 / 4), getAnchor, this.titleCollection, '', 'auto');\n var element = textElement(this.renderer, options, this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitle, this.svgObject, false, this.redraw);\n if (element) {\n element.setAttribute('aria-label', this.title);\n }\n if (this.subTitle) {\n this.renderSubTitle(options);\n }\n };\n AccumulationChart.prototype.renderSubTitle = function (options) {\n var maxWidth = 0;\n var titleWidth = 0;\n var padding = 10;\n var rect;\n var alignment = this.titleStyle.textAlignment;\n var getAnchor = function (alignment) {\n return alignment === 'Near' ? 'start' : alignment === 'Far' ? 'end' : 'middle';\n };\n var subTitleElementSize = measureText(this.subTitle, this.subTitleStyle);\n for (var _i = 0, _a = this.titleCollection; _i < _a.length; _i++) {\n var titleText = _a[_i];\n titleWidth = measureText(titleText, this.titleStyle).width;\n maxWidth = titleWidth > maxWidth ? titleWidth : maxWidth;\n }\n rect = new Rect(alignment === 'Center' ? (options.x - maxWidth / 2) : alignment === 'Far' ? options.x - maxWidth : options.x, 0, maxWidth, 0);\n var subTitleOption = new TextOption(this.element.id + '_subTitle', titlePositionX(rect, this.subTitleStyle), options.y * options.text.length + ((subTitleElementSize.height) * 3 / 4) + padding, getAnchor(this.subTitleStyle.textAlignment), this.subTitleCollection, '', 'auto');\n var element = textElement(this.renderer, subTitleOption, this.subTitleStyle, this.subTitleStyle.color || this.themeStyle.chartTitle, this.svgObject, false, this.redraw);\n };\n /**\n * To get the series parent element\n * @private\n */\n AccumulationChart.prototype.getSeriesElement = function () {\n return this.svgObject.getElementsByTagName('g')[0];\n };\n /**\n * To refresh the all visible series points\n * @private\n */\n AccumulationChart.prototype.refreshSeries = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n this.refreshPoints(series.points);\n }\n };\n /**\n * To refresh points label region and visible\n * @private\n */\n AccumulationChart.prototype.refreshPoints = function (points) {\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n point.labelPosition = null;\n point.labelRegion = null;\n point.labelVisible = true;\n }\n };\n /**\n * To get Module name\n * @private\n */\n AccumulationChart.prototype.getModuleName = function () {\n return 'accumulationchart';\n };\n /**\n * To destroy the accumulationcharts\n * @private\n */\n AccumulationChart.prototype.destroy = function () {\n /**\n * To fix react timeout destroy issue.\n */\n if (this.element) {\n this.unWireEvents();\n _super.prototype.destroy.call(this);\n this.element.classList.remove('e-accumulationchart');\n this.element.innerHTML = '';\n }\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n AccumulationChart.prototype.requiredModules = function () {\n var modules = [];\n var enableAnnotation = false;\n modules.push({\n member: this.type + 'Series',\n args: [this]\n });\n if (this.legendSettings.visible) {\n modules.push({\n member: 'AccumulationLegend',\n args: [this]\n });\n }\n if (this.findDatalabelVisibility()) {\n modules.push({\n member: 'AccumulationDataLabel',\n args: [this]\n });\n }\n if (this.tooltip.enable) {\n modules.push({\n member: 'AccumulationTooltip',\n args: [this]\n });\n }\n if (this.selectionMode !== 'None') {\n modules.push({\n member: 'AccumulationSelection',\n args: [this]\n });\n }\n if (this.enableExport || this.allowExport) {\n modules.push({\n member: 'Export',\n args: [this]\n });\n }\n enableAnnotation = this.annotations.some(function (value) {\n return (value.content !== null);\n });\n if (enableAnnotation) {\n modules.push({\n member: 'Annotation',\n args: [this]\n });\n }\n return modules;\n };\n /**\n * To find datalabel visibility in series\n */\n AccumulationChart.prototype.findDatalabelVisibility = function () {\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.dataLabel.visible) {\n return true;\n }\n }\n return false;\n };\n /**\n * Get visible series for accumulation chart by index\n */\n AccumulationChart.prototype.changeVisibleSeries = 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 * Get the properties to be maintained in the persisted state.\n * @private\n */\n AccumulationChart.prototype.getPersistData = function () {\n return '';\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 AccumulationChart.prototype.onPropertyChanged = function (newProp, oldProp) {\n var update = {\n refreshElements: false, refreshBounds: false\n };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'theme':\n this.animateSeries = true;\n break;\n case 'title':\n case 'subTitle':\n case 'height':\n case 'width':\n case 'margin':\n update.refreshBounds = true;\n break;\n case 'titleStyle':\n if (newProp.titleStyle && (newProp.titleStyle.size || newProp.titleStyle.textOverflow)) {\n update.refreshBounds = true;\n }\n else {\n update.refreshElements = true;\n }\n break;\n case 'subTitleStyle':\n if (newProp.subTitleStyle && (newProp.subTitleStyle.size || newProp.subTitleStyle.textOverflow)) {\n update.refreshBounds = true;\n }\n else {\n update.refreshElements = true;\n }\n break;\n case 'legendSettings':\n update.refreshBounds = true;\n update.refreshElements = true;\n break;\n case 'dataSource':\n this.processData(false);\n update.refreshBounds = true;\n break;\n case 'series':\n if (!this.animateselected) {\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 if (this.isBlazor && (series.startAngle || series.endAngle || series.explodeOffset || series.neckHeight ||\n series.neckWidth || series.radius || series.innerRadius || series.groupMode || series.emptyPointSettings)) {\n blazorProp = true;\n }\n if (newProp.series[i] && (newProp.series[i].dataSource || newProp.series[i].yName || newProp.series[i].xName ||\n newProp.series[i].dataLabel || blazorProp)) {\n extend(this.changeVisibleSeries(this.visibleSeries, i), series, null, true);\n seriesRefresh = true;\n }\n if (newProp.series[i] && newProp.series[i].explodeIndex !== oldProp.series[i].explodeIndex) {\n this.accBaseModule.explodePoints(newProp.series[i].explodeIndex, this);\n this.accBaseModule.deExplodeAll(newProp.series[i].explodeIndex, this.enableAnimation ? 300 : 0);\n }\n }\n if (seriesRefresh) {\n this.processData(false);\n update.refreshBounds = true;\n }\n }\n this.animateselected = false;\n this.redraw = false;\n break;\n case 'locale':\n case 'currencyCode':\n _super.prototype.refresh.call(this);\n break;\n case 'background':\n case 'border':\n case 'annotations':\n case 'enableSmartLabels':\n update.refreshElements = true;\n break;\n case 'isMultiSelect':\n case 'selectedDataIndexes':\n case 'selectionMode':\n if (this.accumulationSelectionModule) {\n if (isNullOrUndefined(this.accumulationSelectionModule.selectedDataIndexes)) {\n this.accumulationSelectionModule.invokeSelection(this);\n }\n else {\n this.accumulationSelectionModule.redrawSelection(this, oldProp.selectionMode);\n }\n }\n break;\n }\n }\n if (!update.refreshBounds && update.refreshElements) {\n this.createPieSvg();\n this.renderElements();\n }\n else if (update.refreshBounds) {\n this.refreshSeries();\n this.createPieSvg();\n this.calculateBounds();\n this.renderElements();\n }\n };\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"title\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"backgroundImage\", void 0);\n __decorate([\n Complex({}, PieCenter)\n ], AccumulationChart.prototype, \"center\", void 0);\n __decorate([\n Property('')\n ], AccumulationChart.prototype, \"dataSource\", void 0);\n __decorate([\n Complex(Theme.chartTitleFont, Font)\n ], AccumulationChart.prototype, \"titleStyle\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"subTitle\", void 0);\n __decorate([\n Complex(Theme.chartSubTitleFont, Font)\n ], AccumulationChart.prototype, \"subTitleStyle\", void 0);\n __decorate([\n Complex({}, LegendSettings)\n ], AccumulationChart.prototype, \"legendSettings\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], AccumulationChart.prototype, \"tooltip\", void 0);\n __decorate([\n Property('None')\n ], AccumulationChart.prototype, \"selectionMode\", void 0);\n __decorate([\n Property('None')\n ], AccumulationChart.prototype, \"highLightMode\", void 0);\n __decorate([\n Property('None')\n ], AccumulationChart.prototype, \"selectionPattern\", void 0);\n __decorate([\n Property('None')\n ], AccumulationChart.prototype, \"highlightPattern\", void 0);\n __decorate([\n Property(true)\n ], AccumulationChart.prototype, \"enableBorderOnMouseMove\", void 0);\n __decorate([\n Property(false)\n ], AccumulationChart.prototype, \"isMultiSelect\", void 0);\n __decorate([\n Property(true)\n ], AccumulationChart.prototype, \"enableAnimation\", void 0);\n __decorate([\n Collection([], Indexes)\n ], AccumulationChart.prototype, \"selectedDataIndexes\", void 0);\n __decorate([\n Complex({}, Margin)\n ], AccumulationChart.prototype, \"margin\", void 0);\n __decorate([\n Property(true)\n ], AccumulationChart.prototype, \"enableSmartLabels\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], AccumulationChart.prototype, \"border\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"background\", void 0);\n __decorate([\n Collection([{}], AccumulationSeries)\n ], AccumulationChart.prototype, \"series\", void 0);\n __decorate([\n Collection([{}], AccumulationAnnotationSettings)\n ], AccumulationChart.prototype, \"annotations\", void 0);\n __decorate([\n Property('Material')\n ], AccumulationChart.prototype, \"theme\", void 0);\n __decorate([\n Property(false)\n ], AccumulationChart.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Property(true)\n ], AccumulationChart.prototype, \"enableExport\", void 0);\n __decorate([\n Property(false)\n ], AccumulationChart.prototype, \"allowExport\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"seriesRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"legendRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"textRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseMove\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseClick\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointClick\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointMove\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseDown\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseLeave\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseUp\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"beforeResize\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"resized\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"afterExport\", void 0);\n __decorate([\n Property('USD')\n ], AccumulationChart.prototype, \"currencyCode\", void 0);\n AccumulationChart = __decorate([\n NotifyPropertyChanges\n ], AccumulationChart);\n return AccumulationChart;\n}(Component));\nexport { AccumulationChart };\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 * as React from 'react';\nimport { AccumulationChart } from '@syncfusion/ej2-charts';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents react AccumulationChart Component\n * ```tsx\n *
\n * ```\n */\nvar AccumulationChartComponent = /** @class */ (function (_super) {\n __extends(AccumulationChartComponent, _super);\n function AccumulationChartComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.directivekeys = { 'accumulationSeriesCollection': 'accumulationSeries', 'accumulationAnnotations': 'accumulationAnnotation' };\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n AccumulationChartComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n };\n return AccumulationChartComponent;\n}(AccumulationChart));\nexport { AccumulationChartComponent };\napplyMixins(AccumulationChartComponent, [ComponentBase, React.Component]);\n"],"sourceRoot":""}