import * as React from 'react';
import { delegateCombine, delegateRemove } from "igniteui-react-core/ES2015/type";
import { ChartHitTestMode_$type } from "./ChartHitTestMode";
import { WindowResponse_$type } from "./WindowResponse";
import { Visibility_$type } from "igniteui-react-core/ES2015/Visibility";
import { InteractionState_$type } from "igniteui-react-core/ES2015/InteractionState";
import { ModifierKeys_$type } from "igniteui-react-core/ES2015/ModifierKeys";
import { HorizontalAlignment_$type } from "igniteui-react-core/ES2015/HorizontalAlignment";
import { ChartCursorEventArgs } from "./igr-chart-cursor-event-args";
import { DataChartMouseButtonEventArgs } from "./igr-data-chart-mouse-button-event-args";
import { ChartMouseEventArgs } from "./igr-chart-mouse-event-args";
import { RectChangedEventArgs } from "igniteui-react-core/ES2015/igr-rect-changed-event-args";
import { getModifiedProps, isValidProp, fromPoint, toPoint, ensureBool, fromRect, toRect, ensureEnum, brushToString, stringToBrush } from "igniteui-react-core/ES2015/componentUtil";
import { SyncSettings } from "./SyncSettings";
/**
 * Represents a control for viewing series objects.
*/
export class IgrSeriesViewer extends React.Component {
    constructor(props) {
        super(props);
        this._hasUserValues = new Set();
        this._seriesCursorMouseMove = null;
        this._seriesCursorMouseMove_wrapped = null;
        this._seriesMouseLeftButtonDown = null;
        this._seriesMouseLeftButtonDown_wrapped = null;
        this._seriesMouseLeftButtonUp = null;
        this._seriesMouseLeftButtonUp_wrapped = null;
        this._seriesMouseMove = null;
        this._seriesMouseMove_wrapped = null;
        this._seriesMouseEnter = null;
        this._seriesMouseEnter_wrapped = null;
        this._seriesMouseLeave = null;
        this._seriesMouseLeave_wrapped = null;
        this._windowRectChanged = null;
        this._windowRectChanged_wrapped = null;
        this._sizeChanged = null;
        this._sizeChanged_wrapped = null;
        this._gridAreaRectChanged = null;
        this._gridAreaRectChanged_wrapped = null;
        this._implementation = this.createImplementation();
        this._implementation.externalObject = this;
        this.onImplementationCreated();
    }
    createImplementation() {
        return null;
    }
    get i() {
        return this._implementation;
    }
    onImplementationCreated() {
    }
    get hasUserValues() {
        return this._hasUserValues;
    }
    componentDidMount() {
        for (const p of Object.keys(this.props)) {
            if (isValidProp(this, p)) {
                this._hasUserValues.add(p);
                this[p] = this.props[p];
            }
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        const mod = getModifiedProps(this.props, nextProps);
        for (const p of Object.keys(mod)) {
            if (isValidProp(this, p)) {
                this._hasUserValues.add(p);
                this[p] = mod[p];
            }
        }
        return true;
    }
    render() {
        return null;
    }
    /**
     * Gets or sets the cross hair point (in world coordinates)
     * Either or both of the crosshair point's X and Y may be set to double.NaN, in which
     * case the relevant crosshair line is hidden.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     crosshairVisibility="visible"
    *     crosshairPoint={x:.8,y:.2}>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.crosshairPoint = {x:.8,y:.2};
    * ```
    */
    get crosshairPoint() {
        return fromPoint(this.i.mf);
    }
    set crosshairPoint(v) {
        this.i.mf = toPoint(v);
    }
    /**
     * Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     animateSeriesWhenAxisRangeChanges=true>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         transitionInMode="accordionFromBottom"
    *         isTransitionInEnabled=true
    *         transitionInSpeedType="indexScaled"
    *         transitionDuration=1000>
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.animateSeriesWhenAxisRangeChanges = true;
    * ```
    */
    get animateSeriesWhenAxisRangeChanges() {
        return this.i.cc;
    }
    set animateSeriesWhenAxisRangeChanges(v) {
        this.i.cc = ensureBool(v);
    }
    /**
     * Gets the viewport rectangle associated with the SeriesViewer, the physical dimensions of the plot area.
    *
    * ```ts
    * let viewPortRect: IgxRect = this.chart.viewportRect;
    * ```
    */
    get viewportRect() {
        return fromRect(this.i.m0);
    }
    /**
     * Gets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.
    *
    *  ``ts
    * let viewport: IgxRect = this.chart.effectiveViewport;
    *
    * ```
    *
    * ```
    */
    get effectiveViewport() {
        return fromRect(this.i.mr);
    }
    set effectiveViewport(v) {
        this.i.mr = toRect(v);
    }
    /**
     * Represents the subset area within the viewport into which content should be mapped.
     * This is the projection of the current EffectiveViewport into the viewport at current zoom level.
    *
    * ```ts
    * let contentViewport: IgxRect = this.chart.contentViewport;
    * ```
    */
    get contentViewport() {
        return fromRect(this.i.mq);
    }
    /**
     * A rectangle representing the portion of the SeriesViewer currently in view.
     * A rectangle at X=0, Y=0 with a Height and Width of 1 implies the entire plotting area is in view.  A Height and Width of .5 would imply that the view is halfway zoomed in.
    *
    * You can set the `windowRect` to zoom in on an area of interest in the chart.
    *
    * ```ts
    * this.chart.windowRect = {left:0, top:1, width: .5, height: .5};
    * ```
    */
    get windowRect() {
        return fromRect(this.i.m1);
    }
    set windowRect(v) {
        this.i.m1 = toRect(v);
    }
    /**
     * Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.
    */
    get useTiledZooming() {
        return this.i.di;
    }
    set useTiledZooming(v) {
        this.i.di = ensureBool(v);
    }
    /**
     * Gets or sets whether the series viewer should prefer selecting higher resolution tiles over lower resolution tiles when performing tile zooming. Setting this to true will lower performance but increase quality.
    */
    get preferHigherResolutionTiles() {
        return this.i.da;
    }
    set preferHigherResolutionTiles(v) {
        this.i.da = ensureBool(v);
    }
    /**
     * Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.
    */
    get zoomTileCacheSize() {
        return this.i.e5;
    }
    set zoomTileCacheSize(v) {
        this.i.e5 = +v;
    }
    /**
     * Gets or sets the duration the highlighting/de-highlighting effects.
    */
    get highlightingTransitionDuration() {
        return this.i.e4;
    }
    set highlightingTransitionDuration(v) {
        this.i.e4 = +v;
    }
    /**
     * Gets or sets the whether the series viewer can allow the page to pan if a control pan is not possible in the requested direction.
    */
    get isPagePanningAllowed() {
        return this.i.cx;
    }
    set isPagePanningAllowed(v) {
        this.i.cx = ensureBool(v);
    }
    /**
     * Determines the method of hit testing used when mousing over elements in the chart.
    *
    * ```ts
    * this.chart.contentHitTestMode = ChartHitTestMode.Computational;
    * ```
    */
    get contentHitTestMode() {
        return this.i.ap;
    }
    set contentHitTestMode(v) {
        this.i.ap = ensureEnum(ChartHitTestMode_$type, v);
    }
    /**
     * Resolved method of hit testing used when the pointer is over elements in the chart.
    *
    * ```ts
    * let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;
    * ```
    */
    get actualContentHitTestMode() {
        return this.i.ao;
    }
    set actualContentHitTestMode(v) {
        this.i.ao = ensureEnum(ChartHitTestMode_$type, v);
    }
    /**
     * Gets or sets whether all surface interactions with the plot area should be disabled.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isSurfaceInteractionDisabled=true>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get isSurfaceInteractionDisabled() {
        return this.i.cy;
    }
    set isSurfaceInteractionDisabled(v) {
        this.i.cy = ensureBool(v);
    }
    /**
     * Indicates if this SeriesViewer is a map.
    */
    get isMap() {
        return this.i.cw;
    }
    /**
     * The response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete.  The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.
    *
    * ```ts
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     windowResponse="deferred">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get windowResponse() {
        return this.i.ba;
    }
    set windowResponse(v) {
        this.i.ba = ensureEnum(WindowResponse_$type, v);
    }
    /**
     * Sets or gets the minimum width that the window rect is allowed to reach before being clamped.
     * Decrease this value if you want to allow for further zooming into the viewer.
     * If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     windowRectMinWidth=.2>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get windowRectMinWidth() {
        return this.i.ew;
    }
    set windowRectMinWidth(v) {
        this.i.ew = +v;
    }
    /**
     * Sets or gets the Synchronization channel to use for the SeriesViewer.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     isVerticalZoomEnabled=true
    *     syncChannel="channel1"
    *     synchronizeHorizontally=true
    *     synchronizeVertically=true>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * <igx-data-chart
    *     [dataSource]="data"
    *     syncChannel="channel1"
    *     synchronizeHorizontally=true
    *     synchronizeVertically=true>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis2>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis2>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis2"
    *         [yAxis]="yAxis2"
    *         valueMemberPath="value2">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get syncChannel() {
        return this.i.gm;
    }
    set syncChannel(v) {
        this.i.gm = v;
    }
    /**
     * The visibility of the OverviewPlusDetailPane.
    */
    get overviewPlusDetailPaneVisibility() {
        return this.i.m5;
    }
    set overviewPlusDetailPaneVisibility(v) {
        this.i.m5 = ensureEnum(Visibility_$type, v);
    }
    /**
     * Gets or sets the current SeriesViewer's crosshair visibility override.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     crosshairVisibility="visible">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.crosshairVisibility = Visibility.Visible;
    * ```
    */
    get crosshairVisibility() {
        return this.i.m4;
    }
    set crosshairVisibility(v) {
        this.i.m4 = ensureEnum(Visibility_$type, v);
    }
    /**
     * Gets or sets the brush used as the background for the current SeriesViewer object's plot area.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     plotAreaBackground="#F0F8FF">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get plotAreaBackground() {
        return brushToString(this.i.ma);
    }
    set plotAreaBackground(v) {
        this.i.ma = stringToBrush(v);
    }
    /**
     * Gets or sets the DefaultInteraction property.
     * The default interaction state defines the SeriesViewer's response to mouse events.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     defaultInteraction="dragPan">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.defaultInteraction = InteractionState.DragPan;
    * ```
    */
    get defaultInteraction() {
        return this.i.bc;
    }
    set defaultInteraction(v) {
        this.i.bc = ensureEnum(InteractionState_$type, v);
    }
    /**
     * Gets or sets the current SeriesViewer's DragModifier property.
    *
    * `dragModifier` is useful to enable zooming when zooming is not the default interaction.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     defaultInteraction="dragPan"
    *     dragModifier="alt">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.dragModifier = ModifierKeys.Alt;
    * ```
    */
    get dragModifier() {
        return this.i.lx;
    }
    set dragModifier(v) {
        this.i.lx = ensureEnum(ModifierKeys_$type, v);
    }
    /**
     * Gets or sets the current SeriesViewer's PanModifier property.
    *
    * `panModifier` is useful to enable panning when panning is not the default interaction.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     defaultInteraction="dragZoom"
    *     panModifier="alt">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.panModifier = ModifierKeys.Alt;
    * ```
    */
    get panModifier() {
        return this.i.ly;
    }
    set panModifier(v) {
        this.i.ly = ensureEnum(ModifierKeys_$type, v);
    }
    /**
     * Gets or sets the preview rectangle.
     * The preview rectangle may be set to Rect.Empty, in which case the visible preview
     * strokePath is hidden.
    *
    * `previewRect` can be used to highlight an area of importance.
    *
    * ```ts
    * this.chart.previewRect = {left:0,top:0,height:.5,width:.5};
    * ```
    */
    get previewRect() {
        return fromRect(this.i.mw);
    }
    set previewRect(v) {
        this.i.mw = toRect(v);
    }
    /**
     * A number between 0 and 1 determining the position of the horizontal scroll.
     * This property is effectively a shortcut to the X position of the WindowRect property.
    *
    * ```ts
    * this.chart.windowPositionHorizontal = .2;
    * ```
    */
    get windowPositionHorizontal() {
        return this.i.eu;
    }
    set windowPositionHorizontal(v) {
        this.i.eu = +v;
    }
    /**
     * A number between 0 and 1 determining the position of the vertical scroll.
     * This property is effectively a shortcut to the Y position of the WindowRect property.
    *
    * ```ts
    * this.chart.windowPositionVertical = .2;
    * ```
    */
    get windowPositionVertical() {
        return this.i.ev;
    }
    set windowPositionVertical(v) {
        this.i.ev = +v;
    }
    /**
     * Text to display above the plot area.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get chartTitle() {
        return this.i.go;
    }
    set chartTitle(v) {
        this.i.go = v;
    }
    /**
     * Gets or sets the TitleHorizontalAlignment property.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     titleHorizontalAlignment="left"
    *     subtitleHorizontalAlignment="left">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleHorizontalAlignment() {
        return this.i.lw;
    }
    set titleHorizontalAlignment(v) {
        this.i.lw = ensureEnum(HorizontalAlignment_$type, v);
    }
    /**
     * Gets or sets the SubtitleHorizontalAlignment property.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="Date of Sale: 1/1/2018"
    *     titleHorizontalAlignment="left"
    *     subtitleHorizontalAlignment="left">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleHorizontalAlignment() {
        return this.i.lv;
    }
    set subtitleHorizontalAlignment(v) {
        this.i.lv = ensureEnum(HorizontalAlignment_$type, v);
    }
    /**
     * Font settings for the title.
    */
    get titleTextStyle() {
        return this.i.gv;
    }
    set titleTextStyle(v) {
        this.i.gv = v;
    }
    /**
     * Font settings for the subtitle.
    */
    get subtitleTextStyle() {
        return this.i.gj;
    }
    set subtitleTextStyle(v) {
        this.i.gj = v;
    }
    /**
     * Gets or sets the Color used for the Title Text.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     titleTextColor="blue">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleTextColor() {
        return brushToString(this.i.md);
    }
    set titleTextColor(v) {
        this.i.md = stringToBrush(v);
    }
    /**
     * Gets or sets the Color used for the Subtitle Text.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="Date of Sale: 1/1/2018"
    *     subtitleTextColor="blue">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleTextColor() {
        return brushToString(this.i.mc);
    }
    set subtitleTextColor(v) {
        this.i.mc = stringToBrush(v);
    }
    /**
     * Margin applied above the title.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     titleLeftMarging=10
    *     titleTopMargin=10
    *     titleRightMargin=10
    *     titleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleTopMargin() {
        return this.i.es;
    }
    set titleTopMargin(v) {
        this.i.es = +v;
    }
    /**
     * Margin applied to the left of the title.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     titleLeftMarging=10
    *     titleTopMargin=10
    *     titleRightMargin=10
    *     titleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleLeftMargin() {
        return this.i.eq;
    }
    set titleLeftMargin(v) {
        this.i.eq = +v;
    }
    /**
     * Margin applied to the right of the title.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     titleLeftMarging=10
    *     titleTopMargin=10
    *     titleRightMargin=10
    *     titleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleRightMargin() {
        return this.i.er;
    }
    set titleRightMargin(v) {
        this.i.er = +v;
    }
    /**
     * Margin applied below the title.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     titleLeftMarging=10
    *     titleTopMargin=10
    *     titleRightMargin=10
    *     titleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get titleBottomMargin() {
        return this.i.ep;
    }
    set titleBottomMargin(v) {
        this.i.ep = +v;
    }
    /**
     * Margin applied above the subtitle.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     subtitleLeftMarging=10
    *     subtitleTopMargin=10
    *     subtitleRightMargin=10
    *     subtitleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleTopMargin() {
        return this.i.eo;
    }
    set subtitleTopMargin(v) {
        this.i.eo = +v;
    }
    /**
     * Margin applied to the left of the subtitle.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     subtitleLeftMarging=10
    *     subtitleTopMargin=10
    *     subtitleRightMargin=10
    *     subtitleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleLeftMargin() {
        return this.i.em;
    }
    set subtitleLeftMargin(v) {
        this.i.em = +v;
    }
    /**
     * Margin applied to the right of the subtitle.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     subtitleLeftMarging=10
    *     subtitleTopMargin=10
    *     subTitleRightMargin=10
    *     subtitleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleRightMargin() {
        return this.i.en;
    }
    set subtitleRightMargin(v) {
        this.i.en = +v;
    }
    /**
     * Margin applied below the subtitle.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="date of sale: 1/1/2018"
    *     subtitleLeftMarging=10
    *     subtitleTopMargin=10
    *     subtitleRightMargin=10
    *     subtitleBottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitleBottomMargin() {
        return this.i.el;
    }
    set subtitleBottomMargin(v) {
        this.i.el = +v;
    }
    /**
     * Gets or sets the Subtitle property.
     * The Title property defines the Subtitle of the chart
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     title="Items Sold"
    *     subtitle="Date of Sale: 1/1/2018">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get subtitle() {
        return this.i.gc;
    }
    set subtitle(v) {
        this.i.gc = v;
    }
    /**
     * Gets or sets the channel with which to synchronize.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `SyncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get SyncChannel() {
        return this.i.a9 ? this.i.a9.ae : null;
    }
    set SyncChannel(v) {
        this.ensureSyncSettings();
        this.i.a9.ae = v;
    }
    /**
     * Gets or sets the bool used to display the window preview shadow.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `SyncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get SynchronizeVertically() {
        return this.i.a9 ? this.i.a9.ad : false;
    }
    set SynchronizeVertically(v) {
        this.ensureSyncSettings();
        this.i.a9.ad = ensureBool(v);
    }
    /**
     * Gets or sets the bool used to display the window preview shadow.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `SyncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get SynchronizeHorizontally() {
        return this.i.a9 ? this.i.a9.ac : false;
    }
    set SynchronizeHorizontally(v) {
        this.ensureSyncSettings();
        this.i.a9.ac = ensureBool(v);
    }
    ensureSyncSettings() {
        if (this.i.a9) {
            return;
        }
        this.i.a9 = new SyncSettings();
    }
    /**
     * Sets or gets the top margin to use around the chart content.
    *
    * ```html
    *  <igx-data-chart
    *     [dataSource]="data"
    *     leftMargin=20
    *     rightMargin=20
    *     topMargin=30
    *     bottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get topMargin() {
        return this.i.et;
    }
    set topMargin(v) {
        this.i.et = +v;
    }
    /**
     * Sets or gets the left margin to use around the chart content.
    *
    * ```html
    *  <igx-data-chart
    *     [dataSource]="data"
    *     leftMargin=20
    *     rightMargin=20
    *     topMargin=30
    *     bottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get leftMargin() {
        return this.i.ei;
    }
    set leftMargin(v) {
        this.i.ei = +v;
    }
    /**
     * Sets or gets the right margin to use around the chart content.
    *
    * ```html
    *  <igx-data-chart
    *     [dataSource]="data"
    *     leftMargin=20
    *     rightMargin=20
    *     topMargin=30
    *     bottomMargin=20>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    */
    get rightMargin() {
        return this.i.ek;
    }
    set rightMargin(v) {
        this.i.ek = +v;
    }
    /**
     * Sets or gets the bottom margin to use around the chart content.
    *
    * ```ts
    * this.chart.bottomMargin = 50;
    * ```
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     bottomMargin=50>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get bottomMargin() {
        return this.i.ee;
    }
    set bottomMargin(v) {
        this.i.ee = +v;
    }
    /**
     * Sets or gets the automatic width to add when automatically adding margins to the chart.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     autoMarginWidth=50>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.autoMarginWidth = 50;
    * ```
    */
    get autoMarginWidth() {
        return this.i.ed;
    }
    set autoMarginWidth(v) {
        this.i.ed = +v;
    }
    /**
     * Sets or gets the automatic height to add when automatically adding margins to the chart.
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     autoMarginHeight=50>
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-column-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    *  this.chart.autoMarginHeight = 50;
    * ```
    */
    get autoMarginHeight() {
        return this.i.ec;
    }
    set autoMarginHeight(v) {
        this.i.ec = +v;
    }
    /**
     * Gets or sets the IsAntiAliasingEnabledDuringInteraction property.
    */
    get isAntiAliasingEnabledDuringInteraction() {
        return this.i.co;
    }
    set isAntiAliasingEnabledDuringInteraction(v) {
        this.i.co = ensureBool(v);
    }
    /**
     * Gets or sets the scaling value used to affect the pixel density of the control.
     * A higher scaling ratio will produce crisper visuals at the expense of memory.  Lower values will cause the control
     * to appear blurry.
    */
    get pixelScalingRatio() {
        return this.i.ej;
    }
    set pixelScalingRatio(v) {
        this.i.ej = +v;
    }
    /**
     * Method of pixel scaling to use during end user interaction with the chart.
    */
    get interactionPixelScalingRatio() {
        return this.i.eh;
    }
    set interactionPixelScalingRatio(v) {
        this.i.eh = +v;
    }
    /**
     * Uri for the background image to display behind the overview plus detail pane.
    */
    get overviewPlusDetailPaneBackgroundImageUri() {
        return this.i.f0;
    }
    set overviewPlusDetailPaneBackgroundImageUri(v) {
        this.i.f0 = v;
    }
    /**
     * Gets the resolved pixel scaling ratio.
    *
    * A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry
    *
    * ```ts
    * let actualPixelScalingRatio: number = this.chart.actualPixelScalingRatio;
    * ```
    */
    get actualPixelScalingRatio() {
        return this.i.d9;
    }
    set actualPixelScalingRatio(v) {
        this.i.d9 = +v;
    }
    /**
     * Resolved method of pixel scaling to use during end user interaction with the chart.
    *
    * ```ts
    * let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;
    * ```
    */
    get actualInteractionPixelScalingRatio() {
        return this.i.d8;
    }
    set actualInteractionPixelScalingRatio(v) {
        this.i.d8 = +v;
    }
    /**
     * Gets the actual value of the window rectangle, which represents the current zoom level.
    *
    * ```ts
    * let actualWindowRect: IgxRect = this.chart.actualWindowRect;
    * ``
    * ```
    */
    get actualWindowRect() {
        return fromRect(this.i.mn);
    }
    set actualWindowRect(v) {
        this.i.mn = toRect(v);
    }
    /**
     * A number between 0 and 1 determining the position of the horizontal scroll.
     * This property is effectively a shortcut to the Left of the ActualWindowRect property.
    *
    * ```ts
    * let actualWindowPositionHorizontal: number = this.chart.actualWindowPositionHorizontal;
    * ```
    */
    get actualWindowPositionHorizontal() {
        return this.i.ea;
    }
    set actualWindowPositionHorizontal(v) {
        this.i.ea = +v;
    }
    /**
     * A number between 0 and 1 determining the position of the vertical scroll.
     * This property is effectively a shortcut to the Top of the ActualWindowRect property.
    *
    * ```ts
    * let actualWindowPositionVertical: number = this.chart.actualWindowPositionVertical;
    * ``
    * ```
    */
    get actualWindowPositionVertical() {
        return this.i.eb;
    }
    set actualWindowPositionVertical(v) {
        this.i.eb = +v;
    }
    /**
     * Hides the active main tooltip, if displayed.
    
    *
    * ```ts
    * this.chart.hideToolTip();
    * ```
    */
    hideToolTip() {
        this.i.hm();
    }
    /**
     * Manually starts a tiled zoom if one isn't already running.
    
    */
    startTiledZoomingIfNecessary() {
        this.i.j5();
    }
    /**
     * Manually ends a tiled zoom if one is running.
    
    */
    endTiledZoomingIfRunning() {
        this.i.hh();
    }
    /**
     * Clears the tile zoom tile cache so that new tiles will be generated. Only applies if the viewer is using a tile based zoom.
    
    */
    clearTileZoomCache() {
        this.i.hb();
    }
    /**
     * Resets the zoom level to default.
    
    */
    resetZoom() {
        this.i.jz();
    }
    /**
     * Gets actual window scale for horizontal dimension of the control
    
    *
    * ```ts
    * let actualWindowScaleHorizontal: number = chart.getActualWindowScaleHorizontal();
    * ```
    */
    getActualWindowScaleHorizontal() {
        let iv = this.i.ef();
        return (iv);
    }
    /**
     * Gets actual window scale for vertical dimension of the control
    
    *
    * ```ts
    * let actualWindowScaleVertical: number = chart.getActualWindowScaleVertical();
    * ```
    */
    getActualWindowScaleVertical() {
        let iv = this.i.eg();
        return (iv);
    }
    /**
     * Notification from the containing object that the container has been resized.
    
    */
    notifyContainerResized() {
        this.i.notifyContainerResized();
    }
    /**
     * Attaches the given series to the chart.
    
    * @param s  * The series to attach to the chart.
    */
    attachSeries(s) {
        this.i.g9((s == null ? null : s.i));
    }
    notifySetItem(source_, index, oldItem, newItem) {
        this.i.hy(source_, index, oldItem, newItem);
    }
    /**
     * Used to manually notify the SeriesViewer that the data source has reset or cleared its items.  Invoking this method is only necessary if that datasource is not observable.
    
    * @param source_  * The data source which was cleared or reset.
    *
    * ```ts
    * this.chart.notifyClearItems(this.data);
    * ```
    */
    notifyClearItems(source_) {
        this.i.ht(source_);
    }
    notifyInsertItem(source_, index, newItem) {
        this.i.hw(source_, index, newItem);
    }
    notifyRemoveItem(source_, index, oldItem) {
        this.i.hx(source_, index, oldItem);
    }
    /**
     * Release any resources held by the control.
    
    */
    destroy() {
        this.i.destroy();
    }
    /**
     * Use to force the SeriesViewer to finish any deferred work before printing or evaluating its visual.
     * This should only be called if the visual of the SeriesViewer needs to be synchronously saved or evaluated.
     * Calling this method too often will hinder the performance of the SeriesViewer.
    
    *
    * ```ts
    * this.chart.flush();
    * ```
    */
    flush() {
        this.i.flush();
    }
    /**
     * Occurs when the cursors are moved over a series in this SeriesViewer.
    */
    get seriesCursorMouseMove() {
        return this._seriesCursorMouseMove;
    }
    set seriesCursorMouseMove(ev) {
        if (this._seriesCursorMouseMove_wrapped !== null) {
            this.i.seriesCursorMouseMove = delegateRemove(this.i.seriesCursorMouseMove, this._seriesCursorMouseMove_wrapped);
            this._seriesCursorMouseMove_wrapped = null;
            this._seriesCursorMouseMove = null;
        }
        this._seriesCursorMouseMove = ev;
        this._seriesCursorMouseMove_wrapped = (o, e) => {
            let outerArgs = new ChartCursorEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesCursorMouseMove) {
                this.beforeSeriesCursorMouseMove(this, outerArgs);
            }
            if (this._seriesCursorMouseMove) {
                this._seriesCursorMouseMove(this, outerArgs);
            }
        };
        this.i.seriesCursorMouseMove = delegateCombine(this.i.seriesCursorMouseMove, this._seriesCursorMouseMove_wrapped);
    }
    /**
     * Occurs when the left mouse button is pressed while the mouse pointer is over a Series.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (seriesMouseLeftButtonDown)="onSeriesMouseLeftButtonDown($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         thickness=5>
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSeriesMouseLeftButtonDown(event: {sender: any, args: DataChartMouseButtonEventArgs})
    * {
    *     var item = event.args.item;
    * }
    * ```
    */
    get seriesMouseLeftButtonDown() {
        return this._seriesMouseLeftButtonDown;
    }
    set seriesMouseLeftButtonDown(ev) {
        if (this._seriesMouseLeftButtonDown_wrapped !== null) {
            this.i.seriesMouseLeftButtonDown = delegateRemove(this.i.seriesMouseLeftButtonDown, this._seriesMouseLeftButtonDown_wrapped);
            this._seriesMouseLeftButtonDown_wrapped = null;
            this._seriesMouseLeftButtonDown = null;
        }
        this._seriesMouseLeftButtonDown = ev;
        this._seriesMouseLeftButtonDown_wrapped = (o, e) => {
            let outerArgs = new DataChartMouseButtonEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesMouseLeftButtonDown) {
                this.beforeSeriesMouseLeftButtonDown(this, outerArgs);
            }
            if (this._seriesMouseLeftButtonDown) {
                this._seriesMouseLeftButtonDown(this, outerArgs);
            }
        };
        this.i.seriesMouseLeftButtonDown = delegateCombine(this.i.seriesMouseLeftButtonDown, this._seriesMouseLeftButtonDown_wrapped);
    }
    /**
     * Occurs when the left mouse button is released while the mouse pointer is over a Series.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (seriesMouseLeftButtonUp)="onSeriesMouseLeftButtonUp($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         thickness=5>
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSeriesMouseLeftButtonUp(event: {sender: any, args: DataChartMouseButtonEventArgs})
    * {
    *     var item = event.args.item;
    * }
    * ```
    */
    get seriesMouseLeftButtonUp() {
        return this._seriesMouseLeftButtonUp;
    }
    set seriesMouseLeftButtonUp(ev) {
        if (this._seriesMouseLeftButtonUp_wrapped !== null) {
            this.i.seriesMouseLeftButtonUp = delegateRemove(this.i.seriesMouseLeftButtonUp, this._seriesMouseLeftButtonUp_wrapped);
            this._seriesMouseLeftButtonUp_wrapped = null;
            this._seriesMouseLeftButtonUp = null;
        }
        this._seriesMouseLeftButtonUp = ev;
        this._seriesMouseLeftButtonUp_wrapped = (o, e) => {
            let outerArgs = new DataChartMouseButtonEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesMouseLeftButtonUp) {
                this.beforeSeriesMouseLeftButtonUp(this, outerArgs);
            }
            if (this._seriesMouseLeftButtonUp) {
                this._seriesMouseLeftButtonUp(this, outerArgs);
            }
        };
        this.i.seriesMouseLeftButtonUp = delegateCombine(this.i.seriesMouseLeftButtonUp, this._seriesMouseLeftButtonUp_wrapped);
    }
    /**
     * Occurs when the mouse pointer moves while over a Series.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (seriesMouseMove)="onSeriesMouseMove($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         thickness=5>
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSeriesMouseMove(event: {sender: any, args: ChartMouseEventArgs})
    * {
    *     var item = event.args.item;
    * }
    * ```
    */
    get seriesMouseMove() {
        return this._seriesMouseMove;
    }
    set seriesMouseMove(ev) {
        if (this._seriesMouseMove_wrapped !== null) {
            this.i.seriesMouseMove = delegateRemove(this.i.seriesMouseMove, this._seriesMouseMove_wrapped);
            this._seriesMouseMove_wrapped = null;
            this._seriesMouseMove = null;
        }
        this._seriesMouseMove = ev;
        this._seriesMouseMove_wrapped = (o, e) => {
            let outerArgs = new ChartMouseEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesMouseMove) {
                this.beforeSeriesMouseMove(this, outerArgs);
            }
            if (this._seriesMouseMove) {
                this._seriesMouseMove(this, outerArgs);
            }
        };
        this.i.seriesMouseMove = delegateCombine(this.i.seriesMouseMove, this._seriesMouseMove_wrapped);
    }
    /**
     * Occurs when the mouse pointer enters a Series.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (seriesMouseEnter)="onSeriesMouseEnter($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         thickness=5>
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSeriesMouseEnter(event: {sender: any, args: ChartMouseEventArgs})
    * {
    *     var item = event.args.item;
    * }
    * ```
    */
    get seriesMouseEnter() {
        return this._seriesMouseEnter;
    }
    set seriesMouseEnter(ev) {
        if (this._seriesMouseEnter_wrapped !== null) {
            this.i.seriesMouseEnter = delegateRemove(this.i.seriesMouseEnter, this._seriesMouseEnter_wrapped);
            this._seriesMouseEnter_wrapped = null;
            this._seriesMouseEnter = null;
        }
        this._seriesMouseEnter = ev;
        this._seriesMouseEnter_wrapped = (o, e) => {
            let outerArgs = new ChartMouseEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesMouseEnter) {
                this.beforeSeriesMouseEnter(this, outerArgs);
            }
            if (this._seriesMouseEnter) {
                this._seriesMouseEnter(this, outerArgs);
            }
        };
        this.i.seriesMouseEnter = delegateCombine(this.i.seriesMouseEnter, this._seriesMouseEnter_wrapped);
    }
    /**
     * Occurs when the mouse pointer leaves a Series.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (seriesMouseLeave)="onSeriesMouseLeave($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value"
    *         thickness=5>
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSeriesMouseLeave(event: {sender: any, args: ChartMouseEventArgs})
    * {
    *     var item = event.args.item;
    * }
    * ```
    */
    get seriesMouseLeave() {
        return this._seriesMouseLeave;
    }
    set seriesMouseLeave(ev) {
        if (this._seriesMouseLeave_wrapped !== null) {
            this.i.seriesMouseLeave = delegateRemove(this.i.seriesMouseLeave, this._seriesMouseLeave_wrapped);
            this._seriesMouseLeave_wrapped = null;
            this._seriesMouseLeave = null;
        }
        this._seriesMouseLeave = ev;
        this._seriesMouseLeave_wrapped = (o, e) => {
            let outerArgs = new ChartMouseEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSeriesMouseLeave) {
                this.beforeSeriesMouseLeave(this, outerArgs);
            }
            if (this._seriesMouseLeave) {
                this._seriesMouseLeave(this, outerArgs);
            }
        };
        this.i.seriesMouseLeave = delegateCombine(this.i.seriesMouseLeave, this._seriesMouseLeave_wrapped);
    }
    /**
     * Occurs just after the current SeriesViewer's window rectangle is changed.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     isHorizontalZoomEnabled=true
    *     (windowRectChanged)="onWindowRectChanged($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onWindowRectChanged(event: {sender: any, args: RectChangedEventArgs})
    * {
    *     let newRect: IgxRect = event.args.newRect;
    * }
    * ```
    */
    get windowRectChanged() {
        return this._windowRectChanged;
    }
    set windowRectChanged(ev) {
        if (this._windowRectChanged_wrapped !== null) {
            this.i.windowRectChanged = delegateRemove(this.i.windowRectChanged, this._windowRectChanged_wrapped);
            this._windowRectChanged_wrapped = null;
            this._windowRectChanged = null;
        }
        this._windowRectChanged = ev;
        this._windowRectChanged_wrapped = (o, e) => {
            let outerArgs = new RectChangedEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeWindowRectChanged) {
                this.beforeWindowRectChanged(this, outerArgs);
            }
            if (this._windowRectChanged) {
                this._windowRectChanged(this, outerArgs);
            }
        };
        this.i.windowRectChanged = delegateCombine(this.i.windowRectChanged, this._windowRectChanged_wrapped);
    }
    /**
     * Occurs after the size of the series viewer changes.
    *
    * &lt;-- position: content member-->
    *
    * ```html
    * <igx-data-chart
    *     [dataSource]="data"
    *     (sizeChanged)="onSizeChanged($event)">
    *     <igx-category-x-axis
    *         label="label"
    *         #xAxis>
    *     </igx-category-x-axis>
    *     <igx-numeric-y-axis
    *         #yAxis>
    *     </igx-numeric-y-axis>
    *     <igx-line-series
    *         [xAxis]="xAxis"
    *         [yAxis]="yAxis"
    *         valueMemberPath="value">
    *     </igx-line-series>
    * </igx-data-chart>
    * ```
    *
    * &lt;-- position: content member-->
    *
    * ```ts
    * public onSizeChanged(event: {sender: any, args: RectChangedEventArgs})
    * {
    *     let newRect: IgxRect = event.args.newRect;
    * }
    * ```
    */
    get sizeChanged() {
        return this._sizeChanged;
    }
    set sizeChanged(ev) {
        if (this._sizeChanged_wrapped !== null) {
            this.i.sizeChanged = delegateRemove(this.i.sizeChanged, this._sizeChanged_wrapped);
            this._sizeChanged_wrapped = null;
            this._sizeChanged = null;
        }
        this._sizeChanged = ev;
        this._sizeChanged_wrapped = (o, e) => {
            let outerArgs = new RectChangedEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeSizeChanged) {
                this.beforeSizeChanged(this, outerArgs);
            }
            if (this._sizeChanged) {
                this._sizeChanged(this, outerArgs);
            }
        };
        this.i.sizeChanged = delegateCombine(this.i.sizeChanged, this._sizeChanged_wrapped);
    }
    /**
     * Occurs just after the current SeriesViewer's grid area rectangle is changed.
     * The grid area may change as the result of the SeriesViewer being resized, or
     * of an axis being added or changing size, possibly in another SeriesViewer.
    */
    get gridAreaRectChanged() {
        return this._gridAreaRectChanged;
    }
    set gridAreaRectChanged(ev) {
        if (this._gridAreaRectChanged_wrapped !== null) {
            this.i.gridAreaRectChanged = delegateRemove(this.i.gridAreaRectChanged, this._gridAreaRectChanged_wrapped);
            this._gridAreaRectChanged_wrapped = null;
            this._gridAreaRectChanged = null;
        }
        this._gridAreaRectChanged = ev;
        this._gridAreaRectChanged_wrapped = (o, e) => {
            let outerArgs = new RectChangedEventArgs();
            outerArgs._provideImplementation(e);
            if (this.beforeGridAreaRectChanged) {
                this.beforeGridAreaRectChanged(this, outerArgs);
            }
            if (this._gridAreaRectChanged) {
                this._gridAreaRectChanged(this, outerArgs);
            }
        };
        this.i.gridAreaRectChanged = delegateCombine(this.i.gridAreaRectChanged, this._gridAreaRectChanged_wrapped);
    }
}
