igniteui-webcomponents-charts 5.1.1 → 5.2.0

package/esm5/lib/igc-funnel-chart-component.js

@@ -13,6 +13,11 @@ import { IgcFunnelSliceClickedEventArgs } from './igc-funnel-slice-clicked-event
 import { IgcFunnelSliceEventArgs } from './igc-funnel-slice-event-args';
 import { Style } from "igniteui-webcomponents-core";
 import { HighlightedValueDisplayMode_$type } from "igniteui-webcomponents-core";
+import { Base } from "igniteui-webcomponents-core";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
+import { IgcFunnelChartSelectedItemsCollection } from './igc-funnel-chart-selected-items-collection';
+import { FunnelChartSelectedItemsCollection as FunnelChartSelectedItemsCollection_internal } from './FunnelChartSelectedItemsCollection';
+import { IgcFunnelChartSelectedItemsChangedEventArgs } from './igc-funnel-chart-selected-items-changed-event-args';
 var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgcFunnelChartComponent, _super);
     function IgcFunnelChartComponent() {
@@ -23,11 +28,14 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._attached = false;
         _this._queuedSetAttributes = [];
         _this._updatingFromAttribute = false;
+        _this._selectedItems = null;
         _this.__p = null;
         _this._hasUserValues = new Set();
         _this._stylingContainer = null;
         _this._stylingParent = null;
         _this._inStyling = false;
+        _this._selectedItemsChanged = null;
+        _this._selectedItemsChanged_wrapped = null;
         _this._sliceClicked = null;
         _this._sliceClicked_wrapped = null;
         _this._sliceEnter = null;
@@ -253,10 +261,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Gets or sets the value member path for the funnel chart.
     */
         get: function () {
-            return this.i.dv;
+            return this.i.dw;
         },
         set: function (v) {
-            this.i.dv = v;
+            this.i.dw = v;
         },
         enumerable: false,
         configurable: true
@@ -266,10 +274,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the highlighted value member path for the funnel chart.
         */
         get: function () {
-            return this.i.cr;
+            return this.i.cs;
         },
         set: function (v) {
-            this.i.cr = v;
+            this.i.cs = v;
         },
         enumerable: false,
         configurable: true
@@ -279,11 +287,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual opacity of the primary needle while highlighting
         */
         get: function () {
-            return this.i.bw;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bw = +v;
-            this._a("actualHighlightValueOpacity", this.i.bw);
+            this.i.bx = +v;
+            this._a("actualHighlightValueOpacity", this.i.bx);
         },
         enumerable: false,
         configurable: true
@@ -293,11 +301,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity while highlighting
         */
         get: function () {
-            return this.i.b0;
+            return this.i.b1;
         },
         set: function (v) {
-            this.i.b0 = +v;
-            this._a("highlightValueOpacity", this.i.b0);
+            this.i.b1 = +v;
+            this._a("highlightValueOpacity", this.i.b1);
         },
         enumerable: false,
         configurable: true
@@ -307,11 +315,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets whether and how to display the highlighted value.
         */
         get: function () {
-            return this.i.a2;
+            return this.i.a5;
         },
         set: function (v) {
-            this.i.a2 = ensureEnum(HighlightedValueDisplayMode_$type, v);
-            this._a("actualHighlightValueDisplayMode", enumToString(HighlightedValueDisplayMode_$type, this.i.a2));
+            this.i.a5 = ensureEnum(HighlightedValueDisplayMode_$type, v);
+            this._a("actualHighlightValueDisplayMode", enumToString(HighlightedValueDisplayMode_$type, this.i.a5));
         },
         enumerable: false,
         configurable: true
@@ -321,11 +329,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether and how to display the highlighted value.
         */
         get: function () {
-            return this.i.a3;
+            return this.i.a6;
         },
         set: function (v) {
-            this.i.a3 = ensureEnum(HighlightedValueDisplayMode_$type, v);
-            this._a("highlightValueDisplayMode", enumToString(HighlightedValueDisplayMode_$type, this.i.a3));
+            this.i.a6 = ensureEnum(HighlightedValueDisplayMode_$type, v);
+            this._a("highlightValueDisplayMode", enumToString(HighlightedValueDisplayMode_$type, this.i.a6));
         },
         enumerable: false,
         configurable: true
@@ -363,11 +371,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the percentage (from near 0 to 1) of space the bottom edge of the funnel should take.
         */
         get: function () {
-            return this.i.by;
+            return this.i.bz;
         },
         set: function (v) {
-            this.i.by = +v;
-            this._a("bottomEdgeWidth", this.i.by);
+            this.i.bz = +v;
+            this._a("bottomEdgeWidth", this.i.bz);
         },
         enumerable: false,
         configurable: true
@@ -377,10 +385,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the InnerLabel mapping property for the current series object.
         */
         get: function () {
-            return this.i.cy;
+            return this.i.cz;
         },
         set: function (v) {
-            this.i.cy = v;
+            this.i.cz = v;
         },
         enumerable: false,
         configurable: true
@@ -390,10 +398,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the OuterLabel mapping property for the current series object.
         */
         get: function () {
-            return this.i.c9;
+            return this.i.da;
         },
         set: function (v) {
-            this.i.c9 = v;
+            this.i.da = v;
         },
         enumerable: false,
         configurable: true
@@ -403,11 +411,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the inner labels are visible.
         */
         get: function () {
-            return this.i.ft;
+            return this.i.fv;
         },
         set: function (v) {
-            this.i.ft = ensureEnum(Visibility_$type, v);
-            this._a("innerLabelVisibility", enumToString(Visibility_$type, this.i.ft));
+            this.i.fv = ensureEnum(Visibility_$type, v);
+            this._a("innerLabelVisibility", enumToString(Visibility_$type, this.i.fv));
         },
         enumerable: false,
         configurable: true
@@ -417,11 +425,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the outer labels are visible.
         */
         get: function () {
-            return this.i.fu;
+            return this.i.fw;
         },
         set: function (v) {
-            this.i.fu = ensureEnum(Visibility_$type, v);
-            this._a("outerLabelVisibility", enumToString(Visibility_$type, this.i.fu));
+            this.i.fw = ensureEnum(Visibility_$type, v);
+            this._a("outerLabelVisibility", enumToString(Visibility_$type, this.i.fw));
         },
         enumerable: false,
         configurable: true
@@ -431,11 +439,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets which side of the chart the outer labels should appear.
         */
         get: function () {
-            return this.i.au;
+            return this.i.ax;
         },
         set: function (v) {
-            this.i.au = ensureEnum(OuterLabelAlignment_$type, v);
-            this._a("outerLabelAlignment", enumToString(OuterLabelAlignment_$type, this.i.au));
+            this.i.ax = ensureEnum(OuterLabelAlignment_$type, v);
+            this._a("outerLabelAlignment", enumToString(OuterLabelAlignment_$type, this.i.ax));
         },
         enumerable: false,
         configurable: true
@@ -445,11 +453,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how the heights of the funnel slices should be configured.
         */
         get: function () {
-            return this.i.ak;
+            return this.i.an;
         },
         set: function (v) {
-            this.i.ak = ensureEnum(FunnelSliceDisplay_$type, v);
-            this._a("funnelSliceDisplay", enumToString(FunnelSliceDisplay_$type, this.i.ak));
+            this.i.an = ensureEnum(FunnelSliceDisplay_$type, v);
+            this._a("funnelSliceDisplay", enumToString(FunnelSliceDisplay_$type, this.i.an));
         },
         enumerable: false,
         configurable: true
@@ -459,10 +467,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the formatter function for inner labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
         */
         get: function () {
-            return this.i.b8;
+            return this.i.b9;
         },
         set: function (v) {
-            this.i.b8 = v;
+            this.i.b9 = v;
         },
         enumerable: false,
         configurable: true
@@ -472,10 +480,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the formatter function for outer labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
         */
         get: function () {
-            return this.i.b9;
+            return this.i.ca;
         },
         set: function (v) {
-            this.i.b9 = v;
+            this.i.ca = v;
         },
         enumerable: false,
         configurable: true
@@ -485,11 +493,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how long the animations should take to run.
         */
         get: function () {
-            return this.i.ca;
+            return this.i.cb;
         },
         set: function (v) {
-            this.i.ca = +v;
-            this._a("transitionDuration", this.i.ca);
+            this.i.cb = +v;
+            this._a("transitionDuration", this.i.cb);
         },
         enumerable: false,
         configurable: true
@@ -499,11 +507,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if the funnel should be rendered inverted.
         */
         get: function () {
-            return this.i.bk;
+            return this.i.bn;
         },
         set: function (v) {
-            this.i.bk = ensureBool(v);
-            this._a("isInverted", this.i.bk);
+            this.i.bn = ensureBool(v);
+            this._a("isInverted", this.i.bn);
         },
         enumerable: false,
         configurable: true
@@ -513,11 +521,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to use a Bezier curve to define the funnel.
         */
         get: function () {
-            return this.i.bl;
+            return this.i.bo;
         },
         set: function (v) {
-            this.i.bl = ensureBool(v);
-            this._a("useBezierCurve", this.i.bl);
+            this.i.bo = ensureBool(v);
+            this._a("useBezierCurve", this.i.bo);
         },
         enumerable: false,
         configurable: true
@@ -527,11 +535,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to allow slices to be selected.
         */
         get: function () {
-            return this.i.be;
+            return this.i.bh;
         },
         set: function (v) {
-            this.i.be = ensureBool(v);
-            this._a("allowSliceSelection", this.i.be);
+            this.i.bh = ensureBool(v);
+            this._a("allowSliceSelection", this.i.bh);
         },
         enumerable: false,
         configurable: true
@@ -541,11 +549,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to use the unselected style on unselected slices.
         */
         get: function () {
-            return this.i.bn;
+            return this.i.bq;
         },
         set: function (v) {
-            this.i.bn = ensureBool(v);
-            this._a("useUnselectedStyle", this.i.bn);
+            this.i.bq = ensureBool(v);
+            this._a("useUnselectedStyle", this.i.bq);
         },
         enumerable: false,
         configurable: true
@@ -555,11 +563,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the fill brush.
         */
         get: function () {
-            return this.i.fr ? this.i.fr.fill : null;
+            return this.i.ft ? this.i.ft.fill : null;
         },
         set: function (v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.fill = v;
+            this.i.ft.fill = v;
         },
         enumerable: false,
         configurable: true
@@ -569,11 +577,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke brush.
         */
         get: function () {
-            return this.i.fr ? this.i.fr.stroke : null;
+            return this.i.ft ? this.i.ft.stroke : null;
         },
         set: function (v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.stroke = v;
+            this.i.ft.stroke = v;
         },
         enumerable: false,
         configurable: true
@@ -583,12 +591,12 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke thickness.
         */
         get: function () {
-            return this.i.fr ? this.i.fr.strokeThickness : NaN;
+            return this.i.ft ? this.i.ft.strokeThickness : NaN;
         },
         set: function (v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.strokeThickness = +v;
-            this._a("selectedSliceStrokeThickness", this.i.fr.strokeThickness);
+            this.i.ft.strokeThickness = +v;
+            this._a("selectedSliceStrokeThickness", this.i.ft.strokeThickness);
         },
         enumerable: false,
         configurable: true
@@ -598,32 +606,32 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity.
         */
         get: function () {
-            return this.i.fr ? this.i.fr.opacity : NaN;
+            return this.i.ft ? this.i.ft.opacity : NaN;
         },
         set: function (v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.opacity = +v;
-            this._a("selectedSliceOpacity", this.i.fr.opacity);
+            this.i.ft.opacity = +v;
+            this._a("selectedSliceOpacity", this.i.ft.opacity);
         },
         enumerable: false,
         configurable: true
     });
     IgcFunnelChartComponent.prototype.ensureSelectedSliceStyle = function () {
-        if (this.i.fr) {
+        if (this.i.ft) {
             return;
         }
-        this.i.fr = new Style();
+        this.i.ft = new Style();
     };
     Object.defineProperty(IgcFunnelChartComponent.prototype, "unselectedSliceFill", {
         /**
          * Gets or sets the fill brush.
         */
         get: function () {
-            return this.i.fs ? this.i.fs.fill : null;
+            return this.i.fu ? this.i.fu.fill : null;
         },
         set: function (v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.fill = v;
+            this.i.fu.fill = v;
         },
         enumerable: false,
         configurable: true
@@ -633,11 +641,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke brush.
         */
         get: function () {
-            return this.i.fs ? this.i.fs.stroke : null;
+            return this.i.fu ? this.i.fu.stroke : null;
         },
         set: function (v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.stroke = v;
+            this.i.fu.stroke = v;
         },
         enumerable: false,
         configurable: true
@@ -647,12 +655,12 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke thickness.
         */
         get: function () {
-            return this.i.fs ? this.i.fs.strokeThickness : NaN;
+            return this.i.fu ? this.i.fu.strokeThickness : NaN;
         },
         set: function (v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.strokeThickness = +v;
-            this._a("unselectedSliceStrokeThickness", this.i.fs.strokeThickness);
+            this.i.fu.strokeThickness = +v;
+            this._a("unselectedSliceStrokeThickness", this.i.fu.strokeThickness);
         },
         enumerable: false,
         configurable: true
@@ -662,22 +670,56 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity.
         */
         get: function () {
-            return this.i.fs ? this.i.fs.opacity : NaN;
+            return this.i.fu ? this.i.fu.opacity : NaN;
         },
         set: function (v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.opacity = +v;
-            this._a("unselectedSliceOpacity", this.i.fs.opacity);
+            this.i.fu.opacity = +v;
+            this._a("unselectedSliceOpacity", this.i.fu.opacity);
         },
         enumerable: false,
         configurable: true
     });
     IgcFunnelChartComponent.prototype.ensureUnselectedSliceStyle = function () {
-        if (this.i.fs) {
+        if (this.i.fu) {
             return;
         }
-        this.i.fs = new Style();
+        this.i.fu = new Style();
     };
+    Object.defineProperty(IgcFunnelChartComponent.prototype, "selectedItems", {
+        /**
+         * Represents the current selected items.
+        */
+        get: function () {
+            if (this._selectedItems === null) {
+                var coll = new IgcFunnelChartSelectedItemsCollection();
+                var innerColl = this.i.selectedItems;
+                if (!innerColl) {
+                    innerColl = new FunnelChartSelectedItemsCollection_internal();
+                }
+                this._selectedItems = coll._fromInner(innerColl);
+            }
+            return this._selectedItems;
+        },
+        set: function (v) {
+            if (this._selectedItems !== null) {
+                this._selectedItems._setSyncTarget(null);
+                this._selectedItems = null;
+            }
+            var coll = new IgcFunnelChartSelectedItemsCollection();
+            this._selectedItems = coll._fromOuter(v);
+            var syncColl = new SyncableObservableCollection$1(Base.$type);
+            var innerColl = this.i.selectedItems;
+            if (!innerColl) {
+                innerColl = new FunnelChartSelectedItemsCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedItems._setSyncTarget(syncColl);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcFunnelChartComponent.prototype, "legendItemBadgeTemplate", {
         /**
          * Gets or sets the LegendItemBadgeTemplate to use for the legend items.
@@ -696,11 +738,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to use the outer labels to identify the legend items.
         */
         get: function () {
-            return this.i.bm;
+            return this.i.bp;
         },
         set: function (v) {
-            this.i.bm = ensureBool(v);
-            this._a("useOuterLabelsForLegend", this.i.bm);
+            this.i.bp = ensureBool(v);
+            this._a("useOuterLabelsForLegend", this.i.bp);
         },
         enumerable: false,
         configurable: true
@@ -710,10 +752,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text style for inner labels
         */
         get: function () {
-            return this.i.dk;
+            return this.i.dl;
         },
         set: function (v) {
-            this.i.dk = v;
+            this.i.dl = v;
         },
         enumerable: false,
         configurable: true
@@ -723,10 +765,10 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text style for outer labels
         */
         get: function () {
-            return this.i.dc;
+            return this.i.dd;
         },
         set: function (v) {
-            this.i.dc = v;
+            this.i.dd = v;
         },
         enumerable: false,
         configurable: true
@@ -736,11 +778,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the thickness of outline around slices.
         */
         get: function () {
-            return this.i.b1;
+            return this.i.b2;
         },
         set: function (v) {
-            this.i.b1 = +v;
-            this._a("outlineThickness", this.i.b1);
+            this.i.b2 = +v;
+            this._a("outlineThickness", this.i.b2);
         },
         enumerable: false,
         configurable: true
@@ -752,11 +794,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * to appear blurry.
         */
         get: function () {
-            return this.i.b3;
+            return this.i.b4;
         },
         set: function (v) {
-            this.i.b3 = +v;
-            this._a("pixelScalingRatio", this.i.b3);
+            this.i.b4 = +v;
+            this._a("pixelScalingRatio", this.i.b4);
         },
         enumerable: false,
         configurable: true
@@ -766,11 +808,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the brush used for the outer labels.
         */
         get: function () {
-            return brushToString(this.i.fn);
+            return brushToString(this.i.fp);
         },
         set: function (v) {
-            this.i.fn = stringToBrush(v);
-            this._a("outerLabelTextColor", brushToString(this.i.fn));
+            this.i.fp = stringToBrush(v);
+            this._a("outerLabelTextColor", brushToString(this.i.fp));
         },
         enumerable: false,
         configurable: true
@@ -780,11 +822,11 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the brush used for the inner labels.
         */
         get: function () {
-            return brushToString(this.i.fo);
+            return brushToString(this.i.fq);
         },
         set: function (v) {
-            this.i.fo = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.fo));
+            this.i.fq = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.fq));
         },
         enumerable: false,
         configurable: true
@@ -861,7 +903,7 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
 
 */
     IgcFunnelChartComponent.prototype.flush = function () {
-        this.i.dz();
+        this.i.d0();
     };
     /**
      * Provides container for funnel chart
@@ -878,7 +920,7 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this.i.notifyResized();
     };
     IgcFunnelChartComponent.prototype.notifySetItem = function (source_, index, oldItem, newItem) {
-        this.i.ea(source_, index, oldItem, newItem);
+        this.i.eb(source_, index, oldItem, newItem);
     };
     /**
      * Manually notifies the chart's data source that the data it has bound to has been cleared and needs to be re-examined.
@@ -886,29 +928,60 @@ var IgcFunnelChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcFunnelChartComponent.prototype.notifyClearItems = function (source_) {
-        this.i.d5(source_);
+        this.i.d6(source_);
     };
     IgcFunnelChartComponent.prototype.notifyInsertItem = function (source_, index, newItem) {
-        this.i.d7(source_, index, newItem);
+        this.i.d8(source_, index, newItem);
     };
     IgcFunnelChartComponent.prototype.notifyRemoveItem = function (source_, index, oldItem) {
-        this.i.d8(source_, index, oldItem);
+        this.i.d9(source_, index, oldItem);
     };
     /**
      * Toggle selection of item at index.
     
     */
     IgcFunnelChartComponent.prototype.toggleSelection = function (index) {
-        this.i.em(index);
+        this.i.eo(index);
     };
     /**
      * Exports and serializes the chart visuals.
     
     */
     IgcFunnelChartComponent.prototype.exportSerializedVisualData = function () {
-        var iv = this.i.cl();
+        var iv = this.i.cm();
         return (iv);
     };
+    Object.defineProperty(IgcFunnelChartComponent.prototype, "selectedItemsChanged", {
+        /**
+         * Raised when the SelectedItems collection has changed.
+        */
+        get: function () {
+            return this._selectedItemsChanged;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._selectedItemsChanged_wrapped !== null) {
+                this.i.selectedItemsChanged = delegateRemove(this.i.selectedItemsChanged, this._selectedItemsChanged_wrapped);
+                this._selectedItemsChanged_wrapped = null;
+                this._selectedItemsChanged = null;
+            }
+            this._selectedItemsChanged = ev;
+            this._selectedItemsChanged_wrapped = function (o, e) {
+                var outerArgs = new IgcFunnelChartSelectedItemsChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeSelectedItemsChanged) {
+                    _this.beforeSelectedItemsChanged(_this, outerArgs);
+                }
+                if (_this._selectedItemsChanged) {
+                    _this._selectedItemsChanged(_this, outerArgs);
+                }
+            };
+            this.i.selectedItemsChanged = delegateCombine(this.i.selectedItemsChanged, this._selectedItemsChanged_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcFunnelChartComponent.prototype, "sliceClicked", {
         /**
          * Event which is raised when a slice is clicked.