import { Component, EventEmitter, Output, Input } from '@angular/core';
import { HorizontalAlignment_$type } from "igniteui-angular-core";
import { UnknownValuePlotting_$type } from "igniteui-angular-core";
import { TrendLineType_$type } from "igniteui-angular-core";
import { IgxChartSeriesEventArgs } from './igx-chart-series-event-args';
import { brushToString, stringToBrush, toBrushCollection, fromBrushCollection, fromRect, toRect, ensureBool, ensureEnum, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-angular-core";
import { MarkerType_$type } from "./MarkerType";
import { delegateCombine } from "igniteui-angular-core";
import { IgxDomainChartSeriesPointerEventArgs } from './igx-domain-chart-series-pointer-event-args';
import { MarkerTypeCollection as MarkerTypeCollection_internal } from './MarkerTypeCollection';
import { IgxMarkerTypeCollection } from './igx-marker-type-collection';
import { SyncableObservableCollection$1 } from "igniteui-angular-core";
import { ToolTipType_$type } from "./ToolTipType";
import { CrosshairsDisplayMode_$type } from "./CrosshairsDisplayMode";
import { IgxCalloutStyleUpdatingEventArgs } from "./igx-callout-style-updating-event-args";
import { ComputedPlotAreaMarginMode_$type } from './ComputedPlotAreaMarginMode';
import { SeriesHighlightingMode_$type } from './SeriesHighlightingMode';
import { SeriesHighlightingBehavior_$type } from './SeriesHighlightingBehavior';
import { LegendHighlightingMode_$type } from './LegendHighlightingMode';
import { SeriesOutlineMode_$type } from './SeriesOutlineMode';
import { MarkerOutlineMode_$type } from './MarkerOutlineMode';
import { MarkerFillMode_$type } from './MarkerFillMode';
import * as i0 from "@angular/core";
/**
 * Represents a base class for all domain charts that can plot scatter data and shapefiles
*
* ```html
* <igx-category-chart
*       yAxisMinimumValue="0"
*       [dataSource]="data"
*       bottomMargin= 20>
*     </igx-category-chart>
* ```
*/
var IgxDomainChartComponent = /** @class */ /*@__PURE__*/ (function () {
    function IgxDomainChartComponent() {
        this._calloutsDataSource = null;
        this._markerTypes = null;
        this.__p = null;
        this._hasUserValues = new Set();
        this._stylingContainer = null;
        this._stylingParent = null;
        this._inStyling = false;
        this._seriesAdded = null;
        this._seriesRemoved = null;
        this._seriesPointerEnter = null;
        this._seriesPointerLeave = null;
        this._seriesPointerMove = null;
        this._seriesPointerDown = null;
        this._seriesPointerUp = null;
        this._calloutStyleUpdating = null;
        this._zoneRunner = null;
        if (this._styling) {
            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
        }
        this._implementation = this.createImplementation();
        this._implementation.externalObject = this;
        this.onImplementationCreated();
    }
    IgxDomainChartComponent.prototype.createImplementation = function () {
        return null;
    };
    IgxDomainChartComponent.prototype.ngOnInit = function () {
    };
    Object.defineProperty(IgxDomainChartComponent.prototype, "i", {
        get: function () {
            return this._implementation;
        },
        enumerable: false,
        configurable: true
    });
    IgxDomainChartComponent.prototype.onImplementationCreated = function () {
    };
    Object.defineProperty(IgxDomainChartComponent.prototype, "tooltipTemplate", {
        /**
        * Sets or gets the template reference to use for tooltips for all the series.
        *
        *
        */
        get: function () {
            return this.i.tooltipTemplate;
        },
        set: function (v) {
            this.i.tooltipTemplate = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "tooltipTemplates", {
        /**
        * Sets or gets the template references to use for tooltips for all the series, in order.
        *
        *
        */
        get: function () {
            var ret = [];
            if (this.i.tooltipTemplates) {
                for (var ii = 0; ii < this.i.tooltipTemplates.count; ii++) {
                    ret.push(this.i.tooltipTemplates.item(ii));
                }
            }
            return ret;
        },
        set: function (v) {
            this.i.tooltipTemplates.clear();
            if (v) {
                for (var ii = 0; ii < v.length; ii++) {
                    this.i.tooltipTemplates.add(v[ii]);
                }
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "legend", {
        get: function () {
            if (this.i.legend != null)
                return this.i.legend.externalObject;
        },
        set: function (v) {
            if (v != undefined && v != null)
                this.i.legend = v.i;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsDataSource", {
        get: function () {
            return this._calloutsDataSource;
        },
        set: function (value) {
            this._calloutsDataSource = value;
            this.bindCalloutsData();
        },
        enumerable: false,
        configurable: true
    });
    IgxDomainChartComponent.prototype.bindCalloutsData = function () {
        if (this.i != null && this.i !== undefined) {
            this.i.calloutsItemsSource = this._calloutsDataSource;
        }
    };
    Object.defineProperty(IgxDomainChartComponent.prototype, "pixelScalingRatio", {
        /**
     * 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: function () {
            return this.i.dy;
        },
        set: function (v) {
            this.i.dy = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleLeftMargin", {
        /**
         * Gets or sets the left margin of chart title
        *
        *  Use `titleLeftMargin` property for the left margin of chart title.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        * 	titleLeftMargin= 10>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.titleLeftMargin = 10;
        * ```
        */
        get: function () {
            return this.i.eb;
        },
        set: function (v) {
            this.i.eb = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleRightMargin", {
        /**
         * Gets or sets the right margin of chart title
        *
        *  Use `titleLeftMargin` property for the right margin of chart title.
        *
        * ```html
        * <igx-category-chart
        * 		yAxisMinimumValue="0"
        * 		[dataSource]="data"
        * 		titleRightMargin= 10>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.titleRightMargin = 10;
        * ```
        */
        get: function () {
            return this.i.ec;
        },
        set: function (v) {
            this.i.ec = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleTopMargin", {
        /**
         * Gets or sets the top margin of chart title
        *
        *  Use `titleTopMargin` property for the top margin of chart title.
        *
        * ```html
        * <igx-category-chart
        *      yAxisMinimumValue="0"
        *      [dataSource]="data"
        *      title="Countries"
        *      titleTopMargin=10 >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.titleTopMargin = 10;
        * ```
        */
        get: function () {
            return this.i.ed;
        },
        set: function (v) {
            this.i.ed = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleBottomMargin", {
        /**
         * Gets or sets the bottom margin of chart title
        *
        *  Use `titleBottomMargin` property for the bottom margin of chart title.
        *
        * ```html
        * <igx-category-chart
        *    yAxisMinimumValue="0"
        *    [dataSource]="data"
        *    titleBottomMargin= 10 >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.titleBottomMargin = 5;
        * ```
        */
        get: function () {
            return this.i.ea;
        },
        set: function (v) {
            this.i.ea = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleLeftMargin", {
        /**
         * Gets or sets the left margin of chart subtitle
        *
        * Use `subtitleLeftMargin` property for the left margin of chart subtitle.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     subtitleLeftMargin= 20>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleLeftMargin = 20 ;
        * ```
        */
        get: function () {
            return this.i.d6;
        },
        set: function (v) {
            this.i.d6 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleTopMargin", {
        /**
         * Gets or sets the top margin of chart subtitle
        *
        * Use `subtitleTopMargin` property for the top margin of chart subtitle.
        *
        * ```html
        *    <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       subtitle= "This is a subtitle"
        *       subtitleTopMargin=10>
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleTopMargin = 10;
        * ```
        */
        get: function () {
            return this.i.d8;
        },
        set: function (v) {
            this.i.d8 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleRightMargin", {
        /**
         * Gets or sets the right margin of chart subtitle
        *
        * Use `subtitleRightMargin` property for the right margin of chart subtitle.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     subtitleRightMargin= 10>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.subtitleRightMargin = 20 ;
        * ```
        */
        get: function () {
            return this.i.d7;
        },
        set: function (v) {
            this.i.d7 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleBottomMargin", {
        /**
         * Gets or sets the bottom margin of chart subtitle
        *
        * Use `subtitleBottomMargin` property for the bottom margin of chart subtitle.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        * 	subtitleBottomMargin=10>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleBottomMargin = 10 ;
        * ```
        */
        get: function () {
            return this.i.d5;
        },
        set: function (v) {
            this.i.d5 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleTextColor", {
        /**
         * Gets or sets color of chart subtitle
        *
        * Use `subtitleTextColor` property to color the subtitle.
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       subtitle= "This is a subtitle"
        *       subtitleTextColor= 'blue'>
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleTextColor = "#ff0000" ;
        * ```
        */
        get: function () {
            return brushToString(this.i.j0);
        },
        set: function (v) {
            this.i.j0 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleTextColor", {
        /**
         * Gets or sets color of chart title
        *
        *  Use `titleTextColor` property to color the chart title
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       titleTextColor= "red">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.titleTextColor="red" ;
        * ```
        */
        get: function () {
            return brushToString(this.i.j1);
        },
        set: function (v) {
            this.i.j1 = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "leftMargin", {
        /**
         * Gets or sets the left margin of the chart content.
        *
        * Use the 'leftMargin' property for the left margin of the chart content.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       leftMargin=20>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.leftMargin = 20;
        * ```
        */
        get: function () {
            return this.i.dw;
        },
        set: function (v) {
            this.i.dw = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "topMargin", {
        /**
         * Gets or sets the top margin of the chart content.
        *
        * Use `topMargin` property for the margin of the chart content.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     topMargin= 20>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.topMargin=20;
        * ```
        */
        get: function () {
            return this.i.ee;
        },
        set: function (v) {
            this.i.ee = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "rightMargin", {
        /**
         * Gets or sets the right margin of the chart content.
        *
        * Use `rightMargin` property for the right margin of the chart content.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     rightMargin=20>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *   this.chart.rightMargin = 20 ;
        * ```
        */
        get: function () {
            return this.i.d4;
        },
        set: function (v) {
            this.i.d4 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "bottomMargin", {
        /**
         * Gets or sets the bottom margin around the chart content.
        *
        * Use the `bottomMargin` property for the bottom margin around the chart content.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       bottomMargin= 20>
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.bottomMargin=20;
        * ```
        */
        get: function () {
            return this.i.dv;
        },
        set: function (v) {
            this.i.dv = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "transitionDuration", {
        /**
         * Gets or sets the duration used for animating series plots when the data is changing
        *
        * Use the `transitionDuration` property to animating between data values.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     transitionDuration="500">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.transitionDuratio= 500;
        * ```
        */
        get: function () {
            return this.i.en;
        },
        set: function (v) {
            this.i.en = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "transitionEasingFunction", {
        /**
         * Gets or sets the easing function used for animating series plots when the data is changing.
         * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
        *
        * The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     transitionInEasingFunction= "cubic">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.transitionInEasingFunction=  this.cubicFunc;
        *
        * cubicFunc(time: number) : number
        *   {
        *     return time;
        *   }
        * ```
        */
        get: function () {
            return this.i.bk;
        },
        set: function (v) {
            this.i.bk = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleTextStyle", {
        /**
         * Gets or sets CSS font property for the chart subtitle
        *
        * Use `subtitleTextStyle` property for the CSS font of the chart subtitle.
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       subtitle= "This is a subtitle"
        *       subtitleTextStyle ="16pt Verdona">
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleTextStyle= "16pt Verdona";
        * ```
        */
        get: function () {
            return this.i.g2;
        },
        set: function (v) {
            this.i.g2 = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleTextStyle", {
        /**
         * Gets or sets CSS font property for the chart title
        *
        * Use `titleTextStyle` property for the CSS font property of the chart title
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       titleTextStyle= "24pt Verdona">
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.xAxisTitleTextStyle = "24pt Verdona";
        * ```
        */
        get: function () {
            return this.i.hd;
        },
        set: function (v) {
            this.i.hd = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "includedProperties", {
        /**
         * Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
        *
        * The `includedProperties` property used to include the properties for the consideration of the category chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     includedProperties="ProductName,Cost" >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.includedProperties = ["ProductName", "Cost"];
        * ```
        */
        get: function () {
            return this.i.d;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.d = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "excludedProperties", {
        /**
         * Gets or sets a set of property paths that should be excluded from consideration by the category chart.
        *
        * The `excludedProperties` property used for the property paths that should be excluded from consideration by the category chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     excludedProperties="ID">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.excludedProperties = ["ID", "Discount"];
        * ```
        */
        get: function () {
            return this.i.c;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.c = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "brushes", {
        /**
         * Gets or sets the palette of brushes to use for coloring the chart series.
         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
        *
        * Use the `brushes` property to  set the brushes.
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       Brushes="#ff0000, #cc0000, #aa0000">
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.brushes = ["#ff0000","#00ff00"];
        * ```
        */
        get: function () {
            return fromBrushCollection(this.i.n);
        },
        set: function (v) {
            this.i.n = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "outlines", {
        /**
         * Gets or sets the palette of brushes to use for outlines on the chart series.
         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
        *
        *  Use the `outlines` property to sets the palette of brushes to use for outlines on the chart series
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     outlines="#ff0000, #cc0000, #aa0000">
        * </igx-category-chart>
        * ```
        */
        get: function () {
            return fromBrushCollection(this.i.r);
        },
        set: function (v) {
            this.i.r = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "actualBrushes", {
        /**
         * Gets the actual palette of brushes to use for coloring the chart series.
        */
        get: function () {
            return fromBrushCollection(this.i.l);
        },
        set: function (v) {
            this.i.l = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "actualOutlines", {
        /**
         * Gets the actual palette of brushes to use for outlines on the chart series.
        */
        get: function () {
            return fromBrushCollection(this.i.m);
        },
        set: function (v) {
            this.i.m = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "isHorizontalZoomEnabled", {
        /**
         * Gets or sets whether the chart can be horizontally zoomed through user interactions.
        *
        * Use the `isHorizontalZoomEnabled` property to allow chart horizontally zoomed .
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       isHorizontalZoomEnabled=true>
        *   </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.isHorizontalZoomEnabled = true;
        * ```
        */
        get: function () {
            return this.i.cd;
        },
        set: function (v) {
            this.i.cd = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "isVerticalZoomEnabled", {
        /**
         * Gets or sets whether the chart can be vertically zoomed through user interactions.
        *
        * Use the `isVerticalZoomEnabled` property to allow chart zoom vertically.
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       isVerticalZoomEnabled=true>
        *     </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.isVerticalZoomEnabled = true;
        * ```
        */
        get: function () {
            return this.i.cj;
        },
        set: function (v) {
            this.i.cj = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "shouldDisplayMockData", {
        /**
         * Gets or sets whether the chart should display mock data when the data source has not been provided, if supported for this type of chart.
        */
        get: function () {
            return this.i.cm;
        },
        set: function (v) {
            this.i.cm = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "shouldUseSkeletonStyleForMockData", {
        /**
         * Gets or sets whether the chart should use a faded skeleton style for mock data.
        */
        get: function () {
            return this.i.cn;
        },
        set: function (v) {
            this.i.cn = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "isSeriesHighlightingEnabled", {
        /**
         * Gets or sets whether the chart can highlight series through user interactions.
         * This property applies to Category Chart and Financial Chart controls.
        */
        get: function () {
            return this.i.cf;
        },
        set: function (v) {
            this.i.cf = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "windowRect", {
        /**
         * Gets or sets the rectangle representing the current scroll and zoom state of the chart.
         * WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
        *
        * Use `windowRect` property representing the current scroll and zoom state of the chart.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       WindowRect=[0,0,1,1]>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.windowRect =[0,0,1,1];
        * ```
        */
        get: function () {
            return fromRect(this.i.j5);
        },
        set: function (v) {
            this.i.j5 = toRect(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "viewport", {
        /**
         * Gets a rectangle representing the bounds of the plot area.
        *
        * `viewport` property representing the bounds of the plot area.
        *
        * ```ts
        * let viewport:Rect =  this.chart.viewport;
        * ```
        */
        get: function () {
            return fromRect(this.i.j4);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "chartTitle", {
        /**
         * Gets or sets text to display above the plot area.
        *
        * Use the `chartTitle` property to display the text above the plot area.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     title="This is a Title">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.title= "This is a Title";
        * ```
        */
        get: function () {
            return this.i.g6;
        },
        set: function (v) {
            this.i.g6 = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitle", {
        /**
         * Gets or sets text to display below the Title, above the plot area.
        *
        * Use the `subtitle` property to display the text below  and above the plot area.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     subtitle= "This is a subtitle">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.subtitle ="CategoryChart Subtitle" ;
        * ```
        */
        get: function () {
            return this.i.gv;
        },
        set: function (v) {
            this.i.gv = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "titleAlignment", {
        /**
         * Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
        *
        * Use the `titleAlignment` property for the horizontal alignment of the title.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     titleAlignment= "center">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.titleAlignment = HorizontalAlignment.Center;
        * ```
        */
        get: function () {
            return this.i.js;
        },
        set: function (v) {
            this.i.js = ensureEnum(HorizontalAlignment_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "subtitleAlignment", {
        /**
         * Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
        *
        * Use the `subtitleAlignment` property to Gets or sets horizontal alignment.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     subtitleAlignment= "center">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.subtitleAlignment = HorizontalAlignment.Right;
        * ```
        */
        get: function () {
            return this.i.jr;
        },
        set: function (v) {
            this.i.jr = ensureEnum(HorizontalAlignment_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "unknownValuePlotting", {
        /**
         * Gets or sets the behavior that determines how unknown values will be plotted on the chart.
         * Null and Double.NaN are two examples of unknown values.
        *
        * Use the `unknownValuePlotting` property to determines the behavior that how unknown values will be plotted on the chart.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       unknownValuePlotting= "dontPlot">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
        * ```
        */
        get: function () {
            return this.i.bg;
        },
        set: function (v) {
            this.i.bg = ensureEnum(UnknownValuePlotting_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "resolution", {
        /**
         * Gets or sets the rendering resolution for all series in this chart.
         * Where n = Resolution, for every n horizontal pixels, combine all items into a single data point.  When Resolution = 0, all data points will be rendered as graphical objects.  Charts with a higher resolution will have faster performance.
        *
        * Use the `resolution` property if the callouts should be display.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     resolution= 2>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *   this.chart.resolution = 2 ;
        * ```
        */
        get: function () {
            return this.i.d3;
        },
        set: function (v) {
            this.i.d3 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "thickness", {
        /**
         * Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.
        *
        * Use the `thickness` property for the thickness of all the series in this chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     thickness=5>
        * </igx-category-chart>
        * ```
        */
        get: function () {
            return this.i.d9;
        },
        set: function (v) {
            this.i.d9 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "outlineMode", {
        /**
         * Gets or sets the OutlineMode for all series in this chart.
        */
        get: function () {
            return this.i.ba;
        },
        set: function (v) {
            this.i.ba = ensureEnum(SeriesOutlineMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerOutlineMode", {
        /**
         * Gets or sets the MarkerOutlineMode for all series in this chart.
        */
        get: function () {
            return this.i.at;
        },
        set: function (v) {
            this.i.at = ensureEnum(MarkerOutlineMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerFillMode", {
        /**
         * Gets or sets the MarkerFillMode for all series in this chart.
        */
        get: function () {
            return this.i.ar;
        },
        set: function (v) {
            this.i.ar = ensureEnum(MarkerFillMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerFillOpacity", {
        /**
         * Gets or sets the MarkerFillOpacity for all series in this chart.
        */
        get: function () {
            return this.i.dx;
        },
        set: function (v) {
            this.i.dx = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerTypes", {
        /**
         * Gets or sets the marker shapes used for indicating location of data points in this chart.
         * This property applies only to these chart types: point, line, spline, bubble, and polygon
        */
        get: function () {
            if (this._markerTypes === null) {
                var coll = new IgxMarkerTypeCollection();
                var innerColl = this.i.ax;
                if (!innerColl) {
                    innerColl = new MarkerTypeCollection_internal();
                }
                this._markerTypes = coll._fromInner(innerColl);
                this.i.ax = innerColl;
            }
            return this._markerTypes;
        },
        set: function (v) {
            if (this._markerTypes !== null) {
                this._markerTypes._setSyncTarget(null);
                this._markerTypes = null;
            }
            var coll = new IgxMarkerTypeCollection();
            this._markerTypes = coll._fromOuter(v);
            var syncColl = new SyncableObservableCollection$1(MarkerType_$type);
            var innerColl = this.i.ax;
            if (!innerColl) {
                innerColl = new MarkerTypeCollection_internal();
            }
            syncColl._inner = innerColl;
            syncColl.clear();
            this._markerTypes._setSyncTarget(syncColl);
            this.i.ax = innerColl;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerBrushes", {
        /**
         * Gets or sets the palette of brushes used for rendering fill area of data point markers.
         * This property applies only to these chart types: point, line, spline, bubble, and polygon
        *
        * `markerBrushes` property used for rendering fill area of data point markers.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     markerBrushes="#ff0000, #cc0000, #aa0000">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
        * ```
        */
        get: function () {
            return fromBrushCollection(this.i.p);
        },
        set: function (v) {
            this.i.p = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerOutlines", {
        /**
         * Gets or sets the palette of brushes used for rendering outlines of data point markers.
         * This property applies only to these chart types: point, line, spline, bubble, and polygon
        *
        * `markerOutlines` property used for rendering outlines of data point markers.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     markerOutlines="#ff0000, #cc0000, #aa0000">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
        * ```
        */
        get: function () {
            return fromBrushCollection(this.i.q);
        },
        set: function (v) {
            this.i.q = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "markerMaxCount", {
        /**
         * Gets or sets the maximum number of markers displyed in the plot area of the chart.
        *
        * `markerMaxCount` property used to display maximum number of markers in the plot area of the chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     markerMaxCount=100 >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.markerMaxCount = 100 ;
        * ```
        */
        get: function () {
            return this.i.em;
        },
        set: function (v) {
            this.i.em = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "animateSeriesWhenAxisRangeChanges", {
        /**
         * Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
        */
        get: function () {
            return this.i.b2;
        },
        set: function (v) {
            this.i.b2 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "trendLineBrushes", {
        /**
         * Gets or sets the palette of brushes to used for coloring trend lines in this chart.
         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
        *
        * Use the `trendLineBrushes` property for coloring trend lines in the chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     trendLineBrushes="#ff0000,#aa0000">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]	;
        * ```
        */
        get: function () {
            return fromBrushCollection(this.i.t);
        },
        set: function (v) {
            this.i.t = toBrushCollection(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "trendLineType", {
        /**
         * Gets or sets the formula used for calculating trend lines in this chart.
         * This property applies only to these chart types: point, line, spline, and bubble
        *
        * Use the `trendLineType` property for calculating trend lines.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       trendLineType= "cubicFit">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.trendLineType = TrendLineType.CubicFit;
        * ```
        */
        get: function () {
            return this.i.be;
        },
        set: function (v) {
            this.i.be = ensureEnum(TrendLineType_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "trendLineThickness", {
        /**
         * Gets or sets the thickness of the trend lines in this chart.
         * This property applies only to these chart types: point, line, spline, and bubble
        *
        * Use the `trendLineThickness` property for the thickness of the trend lines in the chart.
        *
        * ```html
        * <igx-category-chart
        *     yAxisMinimumValue="0"
        *     [dataSource]="data"
        *     trendLineThickness= 2>
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * this.chart.trendLineThickness=2;
        * ```
        */
        get: function () {
            return this.i.ef;
        },
        set: function (v) {
            this.i.ef = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "alignsGridLinesToPixels", {
        /**
         * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
        *
        * Use `alignsGridLinesToPixels` propert to indicat whether grid and tick lines are aligned to device pixels.
        *
        * ```html
        * <igx-category-chart
        *     [dataSource]="data"
        *     AlignsGridLinesToPixels="true">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  this.chart.alignsGridLinesToPixels= true;
        * ```
        */
        get: function () {
            return this.i.b1;
        },
        set: function (v) {
            this.i.b1 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "plotAreaMarginLeft", {
        /**
         * Margin applied to the Left of the plot area.
        */
        get: function () {
            return this.i.d0;
        },
        set: function (v) {
            this.i.d0 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "plotAreaMarginTop", {
        /**
         * Margin applied to the Top of the plot area.
        */
        get: function () {
            return this.i.d2;
        },
        set: function (v) {
            this.i.d2 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "plotAreaMarginRight", {
        /**
         * Margin applied to the right of the plot area.
        */
        get: function () {
            return this.i.d1;
        },
        set: function (v) {
            this.i.d1 = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "plotAreaMarginBottom", {
        /**
         * Margin applied below the plot area.
        */
        get: function () {
            return this.i.dz;
        },
        set: function (v) {
            this.i.dz = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "computedPlotAreaMarginMode", {
        /**
         * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
        */
        get: function () {
            return this.i.y;
        },
        set: function (v) {
            this.i.y = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "highlightingMode", {
        /**
         * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
        */
        get: function () {
            return this.i.a8;
        },
        set: function (v) {
            this.i.a8 = ensureEnum(SeriesHighlightingMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "highlightingBehavior", {
        /**
         * Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
        */
        get: function () {
            return this.i.a6;
        },
        set: function (v) {
            this.i.a6 = ensureEnum(SeriesHighlightingBehavior_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "legendHighlightingMode", {
        /**
         * Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
        */
        get: function () {
            return this.i.ap;
        },
        set: function (v) {
            this.i.ap = ensureEnum(LegendHighlightingMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "shouldAutoExpandMarginForInitialLabels", {
        /**
         * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
        */
        get: function () {
            return this.i.cl;
        },
        set: function (v) {
            this.i.cl = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "autoExpandMarginExtraPadding", {
        /**
         * Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
        */
        get: function () {
            return this.i.dt;
        },
        set: function (v) {
            this.i.dt = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "autoExpandMarginMaximumValue", {
        /**
         * Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
        */
        get: function () {
            return this.i.du;
        },
        set: function (v) {
            this.i.du = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "trendLinePeriod", {
        get: function () {
            return this.i.eo;
        },
        set: function (v) {
            this.i.eo = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "toolTipType", {
        /**
         * Gets or sets the style of tooltip to be displayed.
        */
        get: function () {
            return this.i.bc;
        },
        set: function (v) {
            this.i.bc = ensureEnum(ToolTipType_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "crosshairsDisplayMode", {
        /**
         * Gets or sets the crosshairs to be displayed.
        */
        get: function () {
            return this.i.aa;
        },
        set: function (v) {
            this.i.aa = ensureEnum(CrosshairsDisplayMode_$type, v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "crosshairsSnapToData", {
        /**
         * Gets or sets whether crosshairs will snap to the nearest data point.
        */
        get: function () {
            return this.i.b7;
        },
        set: function (v) {
            this.i.b7 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "crosshairsAnnotationEnabled", {
        /**
         * Gets or sets whether annotations are shown along the axis for crosshair values
        */
        get: function () {
            return this.i.b6;
        },
        set: function (v) {
            this.i.b6 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "finalValueAnnotationsVisible", {
        /**
         * Gets or sets whether annotations for the final value of each series is displayed on the axis.
        */
        get: function () {
            return this.i.b8;
        },
        set: function (v) {
            this.i.b8 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsVisible", {
        /**
         * Gets or sets if callouts should be displayed.
        */
        get: function () {
            return this.i.b5;
        },
        set: function (v) {
            this.i.b5 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutStyleUpdatingEventEnabled", {
        /**
         * Gets or sets if event annotations should be displayed.
        */
        get: function () {
            return this.i.b4;
        },
        set: function (v) {
            this.i.b4 = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsXMemberPath", {
        /**
         * Gets or sets the member path of the X data for the callouts.
        */
        get: function () {
            return this.i.fo;
        },
        set: function (v) {
            this.i.fo = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsYMemberPath", {
        /**
         * Gets or sets the member path of the Y data for the callouts.
        */
        get: function () {
            return this.i.fq;
        },
        set: function (v) {
            this.i.fq = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsLabelMemberPath", {
        /**
         * Gets or sets the member path of the label data for the callouts.
        */
        get: function () {
            return this.i.fk;
        },
        set: function (v) {
            this.i.fk = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutsContentMemberPath", {
        /**
         * Gets or sets the member path of the content data for the callouts.
        */
        get: function () {
            return this.i.fh;
        },
        set: function (v) {
            this.i.fh = v;
        },
        enumerable: false,
        configurable: true
    });
    IgxDomainChartComponent.prototype.findByName = function (name) {
        if (this.legend && this.legend.name && this.legend.name == name) {
            return this.legend;
        }
        if (this.markerTypes != null && this.markerTypes.findByName && this.markerTypes.findByName(name)) {
            return this.markerTypes.findByName(name);
        }
        return null;
    };
    Object.defineProperty(IgxDomainChartComponent.prototype, "hasUserValues", {
        get: function () {
            return this._hasUserValues;
        },
        enumerable: false,
        configurable: true
    });
    IgxDomainChartComponent.prototype.__m = function (propertyName) {
        if (!this._inStyling) {
            this._hasUserValues.add(propertyName);
        }
    };
    IgxDomainChartComponent.prototype._styling = function (container, component, parent) {
        if (this._inStyling) {
            return;
        }
        this._inStyling = true;
        this._stylingContainer = container;
        this._stylingParent = component;
        var genericPrefix = "";
        var typeName = this.i.$type.name;
        if (typeName.indexOf("Xam") === 0) {
            typeName = typeName.substring(3);
        }
        genericPrefix = toSpinal("DomainChartComponent");
        var additionalPrefixes = [];
        var prefix = toSpinal(typeName);
        additionalPrefixes.push(prefix + "-");
        var b = this.i.$type.baseType;
        while (b && b.name != "Object" &&
            b.name != "Base" &&
            b.name != "Control" &&
            b.Name != "DependencyObject" &&
            b.Name != "FrameworkElement") {
            typeName = b.name;
            if (typeName.indexOf("Xam") === 0) {
                typeName = typeName.substring(3);
            }
            var basePrefix = toSpinal(typeName);
            additionalPrefixes.push(basePrefix + "-");
            b = b.baseType;
        }
        if (parent) {
            var parentTypeName = parent.i.$type.name;
            if (parentTypeName.indexOf("Xam") === 0) {
                parentTypeName = parentTypeName.substring(3);
            }
            var parentPrefix = toSpinal(parentTypeName);
            additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
            additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
        }
        initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
        if (this._otherStyling) {
            this._otherStyling(container, component, parent);
        }
        this._inStyling = false;
    };
    /**
 * Provides a container for this control

*
* `provideContainer` method provide container for the control.
*
* ```ts
*     this.chart.provideContainer("Container");
* ```
*/
    IgxDomainChartComponent.prototype.provideContainer = function (container) {
        this.i.provideContainer(container);
    };
    /**
     * Destroy this control
    
    *
    * Use the `destroy` property to destroy the chart.
    *
    * ```ts
    * this.chart.destroy();
    * ```
    */
    IgxDomainChartComponent.prototype.destroy = function () {
        this.i.destroy();
    };
    /**
     * Called when the control has been resized.
    
    *
    * `notifyResized` method Called when the control has been resized.
    *
    * ```ts
    * this.chart.notifyResized();
    * ```
    */
    IgxDomainChartComponent.prototype.notifyResized = function () {
        this.i.notifyResized();
    };
    IgxDomainChartComponent.prototype.notifyVisualPropertiesChanged = function () {
        this.i.iq();
    };
    /**
     * Forces any pending refresh to the chart to be finished.
    
    *
    * Method `flush` used to Forces any pending deferred work to render on the chart before continuing.
    *
    * ```ts
    * this.chart.flush();
    * ```
    */
    IgxDomainChartComponent.prototype.flush = function () {
        this.i.h0();
    };
    /**
     * Hides the active main tooltip, if displayed.
    
    *
    * Use the `hideToolTip` method to hide the active tooltip.
    *
    * ```ts
    * this.chart.hideToolTip();
    * ```
    */
    IgxDomainChartComponent.prototype.hideToolTip = function () {
        this.i.h3();
    };
    IgxDomainChartComponent.prototype.notifySetItem = function (source_, index, oldItem, newItem) {
        this.i.ip(source_, index, oldItem, newItem);
    };
    /**
     * Used to manually notify the chart that the data source has reset or cleared its items.
    
    *
    * Use `notifyClearItems` method to notifies the chart that the items have been cleared from an associated data source.
    *
    * ```ts
    * this.chart.notifyClearItems(this.data);
    * ```
    */
    IgxDomainChartComponent.prototype.notifyClearItems = function (source_) {
        this.i.ik(source_);
    };
    IgxDomainChartComponent.prototype.notifyInsertItem = function (source_, index, newItem) {
        this.i.il(source_, index, newItem);
    };
    IgxDomainChartComponent.prototype.notifyRemoveItem = function (source_, index, oldItem) {
        this.i.im(source_, index, oldItem);
    };
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesAdded", {
        /**
         * Event raised when a series is initialized and added to this chart.
        *
        * `SeriesAdded` event raised when a series is initialized and added to this chart.
        *
        * ```html
        *  <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesAdded)="CategoryChart_SeriesAdded()"
        *      >
        * </igx-category-chart>
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesAdded == null) {
                this._seriesAdded = new EventEmitter();
                this.i.seriesAdded = delegateCombine(this.i.seriesAdded, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxChartSeriesEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesAdded) {
                            _this.beforeSeriesAdded(_this, outerArgs);
                        }
                        _this._seriesAdded.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesAdded;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesRemoved", {
        /**
         * Event raised when a series is removed from this chart.
        *
        * `SeriesRemoved` event raised when a series is removed from this chart.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesRemoved)="CategoryChart_seriesRemoved()">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
        *   {
        *
        *   }
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesRemoved == null) {
                this._seriesRemoved = new EventEmitter();
                this.i.seriesRemoved = delegateCombine(this.i.seriesRemoved, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxChartSeriesEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesRemoved) {
                            _this.beforeSeriesRemoved(_this, outerArgs);
                        }
                        _this._seriesRemoved.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesRemoved;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesPointerEnter", {
        /**
         * Occurs when the pointer enters a Series.
        *
        * `SeriesPointerEnter` event raised when the pointer enters a Series.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesPointerEnter)="CategoryChart_seriesPointerEnter()" >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
        *   {
        *
        *   }
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesPointerEnter == null) {
                this._seriesPointerEnter = new EventEmitter();
                this.i.seriesPointerEnter = delegateCombine(this.i.seriesPointerEnter, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxDomainChartSeriesPointerEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesPointerEnter) {
                            _this.beforeSeriesPointerEnter(_this, outerArgs);
                        }
                        _this._seriesPointerEnter.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesPointerEnter;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesPointerLeave", {
        /**
         * Occurs when the pointer leaves a Series.
        *
        * `SeriesPointerLeave` event raised when the pointer leaves a Series.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesPointerLeave)= "CategoryChart_seriesPointerLeave()" >
        * </igx-category-chart>
        * ```
        *
        * ```ts
        * CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
        *   {
        *
        *   }
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesPointerLeave == null) {
                this._seriesPointerLeave = new EventEmitter();
                this.i.seriesPointerLeave = delegateCombine(this.i.seriesPointerLeave, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxDomainChartSeriesPointerEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesPointerLeave) {
                            _this.beforeSeriesPointerLeave(_this, outerArgs);
                        }
                        _this._seriesPointerLeave.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesPointerLeave;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesPointerMove", {
        /**
         * Occurs when the pointer moves over a Series.
        *
        * `SeriesPointerMove` event raised when the pointer moves over a Series.
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *        (seriesPointerMove)="CategoryChart_seriesPointerMove()">
        * </igx-category-chart>
        * ```
        *
        * ```ts
        *  CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
        *   {
        *
        *   }
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesPointerMove == null) {
                this._seriesPointerMove = new EventEmitter();
                this.i.seriesPointerMove = delegateCombine(this.i.seriesPointerMove, function (o, e) {
                    var outerArgs = new IgxDomainChartSeriesPointerEventArgs();
                    outerArgs._provideImplementation(e);
                    if (_this.beforeSeriesPointerMove) {
                        _this.beforeSeriesPointerMove(_this, outerArgs);
                    }
                    _this._seriesPointerMove.emit({
                        sender: _this,
                        args: outerArgs
                    });
                });
            }
            return this._seriesPointerMove;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesPointerDown", {
        /**
         * Occurs when the pointer is pressed down over a Series.
        *
        * `SeriesPointerDown` event raised when the pointer is pressed down over a Series
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesPointerDown)="CategoryChart_seriesPointerDown()" >
        * </igx-category-chart>
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesPointerDown == null) {
                this._seriesPointerDown = new EventEmitter();
                this.i.seriesPointerDown = delegateCombine(this.i.seriesPointerDown, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxDomainChartSeriesPointerEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesPointerDown) {
                            _this.beforeSeriesPointerDown(_this, outerArgs);
                        }
                        _this._seriesPointerDown.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesPointerDown;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "seriesPointerUp", {
        /**
         * Occurs when the pointer is released over a Series.
        *
        * `SeriesPointerUp` event raised when the pointer is released over a Series.
        *
        * ```ts
        *  CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
        *   {
        *
        *   }
        * ```
        *
        * ```html
        * <igx-category-chart
        *       yAxisMinimumValue="0"
        *       [dataSource]="data"
        *       (seriesPointerUp)="CategoryChart_seriesPointerUp()" >
        * </igx-category-chart>
        * ```
        */
        get: function () {
            var _this = this;
            if (this._seriesPointerUp == null) {
                this._seriesPointerUp = new EventEmitter();
                this.i.seriesPointerUp = delegateCombine(this.i.seriesPointerUp, function (o, e) {
                    _this._runInZone(function () {
                        var outerArgs = new IgxDomainChartSeriesPointerEventArgs();
                        outerArgs._provideImplementation(e);
                        if (_this.beforeSeriesPointerUp) {
                            _this.beforeSeriesPointerUp(_this, outerArgs);
                        }
                        _this._seriesPointerUp.emit({
                            sender: _this,
                            args: outerArgs
                        });
                    });
                });
            }
            return this._seriesPointerUp;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgxDomainChartComponent.prototype, "calloutStyleUpdating", {
        /**
         * Occurs when the style of a callout is updated.
        */
        get: function () {
            var _this = this;
            if (this._calloutStyleUpdating == null) {
                this._calloutStyleUpdating = new EventEmitter();
                this.i.calloutStyleUpdating = delegateCombine(this.i.calloutStyleUpdating, function (o, e) {
                    var outerArgs = new IgxCalloutStyleUpdatingEventArgs();
                    outerArgs._provideImplementation(e);
                    if (_this.beforeCalloutStyleUpdating) {
                        _this.beforeCalloutStyleUpdating(_this, outerArgs);
                    }
                    _this._calloutStyleUpdating.emit({
                        sender: _this,
                        args: outerArgs
                    });
                });
            }
            return this._calloutStyleUpdating;
        },
        enumerable: false,
        configurable: true
    });
    IgxDomainChartComponent.prototype._runInZone = function (act) {
        if (this._zoneRunner != null) {
            this._zoneRunner(act);
        }
        else {
            act();
        }
    };
    IgxDomainChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: IgxDomainChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    IgxDomainChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: IgxDomainChartComponent, selector: "ng-component", inputs: { tooltipTemplate: "tooltipTemplate", tooltipTemplates: "tooltipTemplates", legend: "legend", calloutsDataSource: "calloutsDataSource", pixelScalingRatio: "pixelScalingRatio", titleLeftMargin: "titleLeftMargin", titleRightMargin: "titleRightMargin", titleTopMargin: "titleTopMargin", titleBottomMargin: "titleBottomMargin", subtitleLeftMargin: "subtitleLeftMargin", subtitleTopMargin: "subtitleTopMargin", subtitleRightMargin: "subtitleRightMargin", subtitleBottomMargin: "subtitleBottomMargin", subtitleTextColor: "subtitleTextColor", titleTextColor: "titleTextColor", leftMargin: "leftMargin", topMargin: "topMargin", rightMargin: "rightMargin", bottomMargin: "bottomMargin", transitionDuration: "transitionDuration", transitionEasingFunction: "transitionEasingFunction", subtitleTextStyle: "subtitleTextStyle", titleTextStyle: "titleTextStyle", includedProperties: "includedProperties", excludedProperties: "excludedProperties", brushes: "brushes", outlines: "outlines", actualBrushes: "actualBrushes", actualOutlines: "actualOutlines", isHorizontalZoomEnabled: "isHorizontalZoomEnabled", isVerticalZoomEnabled: "isVerticalZoomEnabled", shouldDisplayMockData: "shouldDisplayMockData", shouldUseSkeletonStyleForMockData: "shouldUseSkeletonStyleForMockData", isSeriesHighlightingEnabled: "isSeriesHighlightingEnabled", windowRect: "windowRect", chartTitle: "chartTitle", subtitle: "subtitle", titleAlignment: "titleAlignment", subtitleAlignment: "subtitleAlignment", unknownValuePlotting: "unknownValuePlotting", resolution: "resolution", thickness: "thickness", outlineMode: "outlineMode", markerOutlineMode: "markerOutlineMode", markerFillMode: "markerFillMode", markerFillOpacity: "markerFillOpacity", markerTypes: "markerTypes", markerBrushes: "markerBrushes", markerOutlines: "markerOutlines", markerMaxCount: "markerMaxCount", animateSeriesWhenAxisRangeChanges: "animateSeriesWhenAxisRangeChanges", trendLineBrushes: "trendLineBrushes", trendLineType: "trendLineType", trendLineThickness: "trendLineThickness", alignsGridLinesToPixels: "alignsGridLinesToPixels", plotAreaMarginLeft: "plotAreaMarginLeft", plotAreaMarginTop: "plotAreaMarginTop", plotAreaMarginRight: "plotAreaMarginRight", plotAreaMarginBottom: "plotAreaMarginBottom", computedPlotAreaMarginMode: "computedPlotAreaMarginMode", highlightingMode: "highlightingMode", highlightingBehavior: "highlightingBehavior", legendHighlightingMode: "legendHighlightingMode", shouldAutoExpandMarginForInitialLabels: "shouldAutoExpandMarginForInitialLabels", autoExpandMarginExtraPadding: "autoExpandMarginExtraPadding", autoExpandMarginMaximumValue: "autoExpandMarginMaximumValue", trendLinePeriod: "trendLinePeriod", toolTipType: "toolTipType", crosshairsDisplayMode: "crosshairsDisplayMode", crosshairsSnapToData: "crosshairsSnapToData", crosshairsAnnotationEnabled: "crosshairsAnnotationEnabled", finalValueAnnotationsVisible: "finalValueAnnotationsVisible", calloutsVisible: "calloutsVisible", calloutStyleUpdatingEventEnabled: "calloutStyleUpdatingEventEnabled", calloutsXMemberPath: "calloutsXMemberPath", calloutsYMemberPath: "calloutsYMemberPath", calloutsLabelMemberPath: "calloutsLabelMemberPath", calloutsContentMemberPath: "calloutsContentMemberPath" }, outputs: { seriesAdded: "seriesAdded", seriesRemoved: "seriesRemoved", seriesPointerEnter: "seriesPointerEnter", seriesPointerLeave: "seriesPointerLeave", seriesPointerMove: "seriesPointerMove", seriesPointerDown: "seriesPointerDown", seriesPointerUp: "seriesPointerUp", calloutStyleUpdating: "calloutStyleUpdating" }, ngImport: i0, template: "", isInline: true });
    return IgxDomainChartComponent;
}());
export { IgxDomainChartComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: IgxDomainChartComponent, decorators: [{
            type: Component,
            args: [{
                    template: "",
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { tooltipTemplate: [{
                type: Input
            }], tooltipTemplates: [{
                type: Input
            }], legend: [{
                type: Input
            }], calloutsDataSource: [{
                type: Input
            }], pixelScalingRatio: [{
                type: Input
            }], titleLeftMargin: [{
                type: Input
            }], titleRightMargin: [{
                type: Input
            }], titleTopMargin: [{
                type: Input
            }], titleBottomMargin: [{
                type: Input
            }], subtitleLeftMargin: [{
                type: Input
            }], subtitleTopMargin: [{
                type: Input
            }], subtitleRightMargin: [{
                type: Input
            }], subtitleBottomMargin: [{
                type: Input
            }], subtitleTextColor: [{
                type: Input
            }], titleTextColor: [{
                type: Input
            }], leftMargin: [{
                type: Input
            }], topMargin: [{
                type: Input
            }], rightMargin: [{
                type: Input
            }], bottomMargin: [{
                type: Input
            }], transitionDuration: [{
                type: Input
            }], transitionEasingFunction: [{
                type: Input
            }], subtitleTextStyle: [{
                type: Input
            }], titleTextStyle: [{
                type: Input
            }], includedProperties: [{
                type: Input
            }], excludedProperties: [{
                type: Input
            }], brushes: [{
                type: Input
            }], outlines: [{
                type: Input
            }], actualBrushes: [{
                type: Input
            }], actualOutlines: [{
                type: Input
            }], isHorizontalZoomEnabled: [{
                type: Input
            }], isVerticalZoomEnabled: [{
                type: Input
            }], shouldDisplayMockData: [{
                type: Input
            }], shouldUseSkeletonStyleForMockData: [{
                type: Input
            }], isSeriesHighlightingEnabled: [{
                type: Input
            }], windowRect: [{
                type: Input
            }], chartTitle: [{
                type: Input
            }], subtitle: [{
                type: Input
            }], titleAlignment: [{
                type: Input
            }], subtitleAlignment: [{
                type: Input
            }], unknownValuePlotting: [{
                type: Input
            }], resolution: [{
                type: Input
            }], thickness: [{
                type: Input
            }], outlineMode: [{
                type: Input
            }], markerOutlineMode: [{
                type: Input
            }], markerFillMode: [{
                type: Input
            }], markerFillOpacity: [{
                type: Input
            }], markerTypes: [{
                type: Input
            }], markerBrushes: [{
                type: Input
            }], markerOutlines: [{
                type: Input
            }], markerMaxCount: [{
                type: Input
            }], animateSeriesWhenAxisRangeChanges: [{
                type: Input
            }], trendLineBrushes: [{
                type: Input
            }], trendLineType: [{
                type: Input
            }], trendLineThickness: [{
                type: Input
            }], alignsGridLinesToPixels: [{
                type: Input
            }], plotAreaMarginLeft: [{
                type: Input
            }], plotAreaMarginTop: [{
                type: Input
            }], plotAreaMarginRight: [{
                type: Input
            }], plotAreaMarginBottom: [{
                type: Input
            }], computedPlotAreaMarginMode: [{
                type: Input
            }], highlightingMode: [{
                type: Input
            }], highlightingBehavior: [{
                type: Input
            }], legendHighlightingMode: [{
                type: Input
            }], shouldAutoExpandMarginForInitialLabels: [{
                type: Input
            }], autoExpandMarginExtraPadding: [{
                type: Input
            }], autoExpandMarginMaximumValue: [{
                type: Input
            }], trendLinePeriod: [{
                type: Input
            }], toolTipType: [{
                type: Input
            }], crosshairsDisplayMode: [{
                type: Input
            }], crosshairsSnapToData: [{
                type: Input
            }], crosshairsAnnotationEnabled: [{
                type: Input
            }], finalValueAnnotationsVisible: [{
                type: Input
            }], calloutsVisible: [{
                type: Input
            }], calloutStyleUpdatingEventEnabled: [{
                type: Input
            }], calloutsXMemberPath: [{
                type: Input
            }], calloutsYMemberPath: [{
                type: Input
            }], calloutsLabelMemberPath: [{
                type: Input
            }], calloutsContentMemberPath: [{
                type: Input
            }], seriesAdded: [{
                type: Output
            }], seriesRemoved: [{
                type: Output
            }], seriesPointerEnter: [{
                type: Output
            }], seriesPointerLeave: [{
                type: Output
            }], seriesPointerMove: [{
                type: Output
            }], seriesPointerDown: [{
                type: Output
            }], seriesPointerUp: [{
                type: Output
            }], calloutStyleUpdating: [{
                type: Output
            }] } });
//# sourceMappingURL=igx-domain-chart-component.js.map
