igniteui-webcomponents-charts 5.1.1 → 5.2.0

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

@@ -12,6 +12,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';
 export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
     class IgcFunnelChartComponent extends IgcHTMLElement {
         set height(value) {
@@ -41,11 +46,14 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
             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;
@@ -226,59 +234,59 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
      * Gets or sets the value member path for the funnel chart.
     */
         get valueMemberPath() {
-            return this.i.dv;
+            return this.i.dw;
         }
         set valueMemberPath(v) {
-            this.i.dv = v;
+            this.i.dw = v;
         }
         /**
          * Gets or sets the highlighted value member path for the funnel chart.
         */
         get highlightedValueMemberPath() {
-            return this.i.cr;
+            return this.i.cs;
         }
         set highlightedValueMemberPath(v) {
-            this.i.cr = v;
+            this.i.cs = v;
         }
         /**
          * Gets the actual opacity of the primary needle while highlighting
         */
         get actualHighlightValueOpacity() {
-            return this.i.bw;
+            return this.i.bx;
         }
         set actualHighlightValueOpacity(v) {
-            this.i.bw = +v;
-            this._a("actualHighlightValueOpacity", this.i.bw);
+            this.i.bx = +v;
+            this._a("actualHighlightValueOpacity", this.i.bx);
         }
         /**
          * Gets or sets the opacity while highlighting
         */
         get highlightValueOpacity() {
-            return this.i.b0;
+            return this.i.b1;
         }
         set highlightValueOpacity(v) {
-            this.i.b0 = +v;
-            this._a("highlightValueOpacity", this.i.b0);
+            this.i.b1 = +v;
+            this._a("highlightValueOpacity", this.i.b1);
         }
         /**
          * Gets whether and how to display the highlighted value.
         */
         get actualHighlightValueDisplayMode() {
-            return this.i.a2;
+            return this.i.a5;
         }
         set actualHighlightValueDisplayMode(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));
         }
         /**
          * Gets or sets whether and how to display the highlighted value.
         */
         get highlightValueDisplayMode() {
-            return this.i.a3;
+            return this.i.a6;
         }
         set highlightValueDisplayMode(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));
         }
         /**
          * Gets or sets the palette of brushes to use for coloring the slices.
@@ -304,233 +312,263 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
          * Gets or sets the percentage (from near 0 to 1) of space the bottom edge of the funnel should take.
         */
         get bottomEdgeWidth() {
-            return this.i.by;
+            return this.i.bz;
         }
         set bottomEdgeWidth(v) {
-            this.i.by = +v;
-            this._a("bottomEdgeWidth", this.i.by);
+            this.i.bz = +v;
+            this._a("bottomEdgeWidth", this.i.bz);
         }
         /**
          * Gets or sets the InnerLabel mapping property for the current series object.
         */
         get innerLabelMemberPath() {
-            return this.i.cy;
+            return this.i.cz;
         }
         set innerLabelMemberPath(v) {
-            this.i.cy = v;
+            this.i.cz = v;
         }
         /**
          * Gets or sets the OuterLabel mapping property for the current series object.
         */
         get outerLabelMemberPath() {
-            return this.i.c9;
+            return this.i.da;
         }
         set outerLabelMemberPath(v) {
-            this.i.c9 = v;
+            this.i.da = v;
         }
         /**
          * Gets or sets whether the inner labels are visible.
         */
         get innerLabelVisibility() {
-            return this.i.ft;
+            return this.i.fv;
         }
         set innerLabelVisibility(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));
         }
         /**
          * Gets or sets whether the outer labels are visible.
         */
         get outerLabelVisibility() {
-            return this.i.fu;
+            return this.i.fw;
         }
         set outerLabelVisibility(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));
         }
         /**
          * Gets or sets which side of the chart the outer labels should appear.
         */
         get outerLabelAlignment() {
-            return this.i.au;
+            return this.i.ax;
         }
         set outerLabelAlignment(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));
         }
         /**
          * Gets or sets how the heights of the funnel slices should be configured.
         */
         get funnelSliceDisplay() {
-            return this.i.ak;
+            return this.i.an;
         }
         set funnelSliceDisplay(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));
         }
         /**
          * 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 formatInnerLabel() {
-            return this.i.b8;
+            return this.i.b9;
         }
         set formatInnerLabel(v) {
-            this.i.b8 = v;
+            this.i.b9 = v;
         }
         /**
          * 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 formatOuterLabel() {
-            return this.i.b9;
+            return this.i.ca;
         }
         set formatOuterLabel(v) {
-            this.i.b9 = v;
+            this.i.ca = v;
         }
         /**
          * Gets or sets how long the animations should take to run.
         */
         get transitionDuration() {
-            return this.i.ca;
+            return this.i.cb;
         }
         set transitionDuration(v) {
-            this.i.ca = +v;
-            this._a("transitionDuration", this.i.ca);
+            this.i.cb = +v;
+            this._a("transitionDuration", this.i.cb);
         }
         /**
          * Gets or sets if the funnel should be rendered inverted.
         */
         get isInverted() {
-            return this.i.bk;
+            return this.i.bn;
         }
         set isInverted(v) {
-            this.i.bk = ensureBool(v);
-            this._a("isInverted", this.i.bk);
+            this.i.bn = ensureBool(v);
+            this._a("isInverted", this.i.bn);
         }
         /**
          * Gets or sets whether to use a Bezier curve to define the funnel.
         */
         get useBezierCurve() {
-            return this.i.bl;
+            return this.i.bo;
         }
         set useBezierCurve(v) {
-            this.i.bl = ensureBool(v);
-            this._a("useBezierCurve", this.i.bl);
+            this.i.bo = ensureBool(v);
+            this._a("useBezierCurve", this.i.bo);
         }
         /**
          * Gets or sets whether to allow slices to be selected.
         */
         get allowSliceSelection() {
-            return this.i.be;
+            return this.i.bh;
         }
         set allowSliceSelection(v) {
-            this.i.be = ensureBool(v);
-            this._a("allowSliceSelection", this.i.be);
+            this.i.bh = ensureBool(v);
+            this._a("allowSliceSelection", this.i.bh);
         }
         /**
          * Gets or sets whether to use the unselected style on unselected slices.
         */
         get useUnselectedStyle() {
-            return this.i.bn;
+            return this.i.bq;
         }
         set useUnselectedStyle(v) {
-            this.i.bn = ensureBool(v);
-            this._a("useUnselectedStyle", this.i.bn);
+            this.i.bq = ensureBool(v);
+            this._a("useUnselectedStyle", this.i.bq);
         }
         /**
          * Gets or sets the fill brush.
         */
         get selectedSliceFill() {
-            return this.i.fr ? this.i.fr.fill : null;
+            return this.i.ft ? this.i.ft.fill : null;
         }
         set selectedSliceFill(v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.fill = v;
+            this.i.ft.fill = v;
         }
         /**
          * Gets or sets the stroke brush.
         */
         get selectedSliceStroke() {
-            return this.i.fr ? this.i.fr.stroke : null;
+            return this.i.ft ? this.i.ft.stroke : null;
         }
         set selectedSliceStroke(v) {
             this.ensureSelectedSliceStyle();
-            this.i.fr.stroke = v;
+            this.i.ft.stroke = v;
         }
         /**
          * Gets or sets the stroke thickness.
         */
         get selectedSliceStrokeThickness() {
-            return this.i.fr ? this.i.fr.strokeThickness : NaN;
+            return this.i.ft ? this.i.ft.strokeThickness : NaN;
         }
         set selectedSliceStrokeThickness(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);
         }
         /**
          * Gets or sets the opacity.
         */
         get selectedSliceOpacity() {
-            return this.i.fr ? this.i.fr.opacity : NaN;
+            return this.i.ft ? this.i.ft.opacity : NaN;
         }
         set selectedSliceOpacity(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);
         }
         ensureSelectedSliceStyle() {
-            if (this.i.fr) {
+            if (this.i.ft) {
                 return;
             }
-            this.i.fr = new Style();
+            this.i.ft = new Style();
         }
         /**
          * Gets or sets the fill brush.
         */
         get unselectedSliceFill() {
-            return this.i.fs ? this.i.fs.fill : null;
+            return this.i.fu ? this.i.fu.fill : null;
         }
         set unselectedSliceFill(v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.fill = v;
+            this.i.fu.fill = v;
         }
         /**
          * Gets or sets the stroke brush.
         */
         get unselectedSliceStroke() {
-            return this.i.fs ? this.i.fs.stroke : null;
+            return this.i.fu ? this.i.fu.stroke : null;
         }
         set unselectedSliceStroke(v) {
             this.ensureUnselectedSliceStyle();
-            this.i.fs.stroke = v;
+            this.i.fu.stroke = v;
         }
         /**
          * Gets or sets the stroke thickness.
         */
         get unselectedSliceStrokeThickness() {
-            return this.i.fs ? this.i.fs.strokeThickness : NaN;
+            return this.i.fu ? this.i.fu.strokeThickness : NaN;
         }
         set unselectedSliceStrokeThickness(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);
         }
         /**
          * Gets or sets the opacity.
         */
         get unselectedSliceOpacity() {
-            return this.i.fs ? this.i.fs.opacity : NaN;
+            return this.i.fu ? this.i.fu.opacity : NaN;
         }
         set unselectedSliceOpacity(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);
         }
         ensureUnselectedSliceStyle() {
-            if (this.i.fs) {
+            if (this.i.fu) {
                 return;
             }
-            this.i.fs = new Style();
+            this.i.fu = new Style();
+        }
+        /**
+         * Represents the current selected items.
+        */
+        get selectedItems() {
+            if (this._selectedItems === null) {
+                let coll = new IgcFunnelChartSelectedItemsCollection();
+                let innerColl = this.i.selectedItems;
+                if (!innerColl) {
+                    innerColl = new FunnelChartSelectedItemsCollection_internal();
+                }
+                this._selectedItems = coll._fromInner(innerColl);
+            }
+            return this._selectedItems;
+        }
+        set selectedItems(v) {
+            if (this._selectedItems !== null) {
+                this._selectedItems._setSyncTarget(null);
+                this._selectedItems = null;
+            }
+            let coll = new IgcFunnelChartSelectedItemsCollection();
+            this._selectedItems = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(Base.$type);
+            let innerColl = this.i.selectedItems;
+            if (!innerColl) {
+                innerColl = new FunnelChartSelectedItemsCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedItems._setSyncTarget(syncColl);
         }
         /**
          * Gets or sets the LegendItemBadgeTemplate to use for the legend items.
@@ -545,39 +583,39 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
          * Gets or sets whether to use the outer labels to identify the legend items.
         */
         get useOuterLabelsForLegend() {
-            return this.i.bm;
+            return this.i.bp;
         }
         set useOuterLabelsForLegend(v) {
-            this.i.bm = ensureBool(v);
-            this._a("useOuterLabelsForLegend", this.i.bm);
+            this.i.bp = ensureBool(v);
+            this._a("useOuterLabelsForLegend", this.i.bp);
         }
         /**
          * Gets or sets the text style for inner labels
         */
         get textStyle() {
-            return this.i.dk;
+            return this.i.dl;
         }
         set textStyle(v) {
-            this.i.dk = v;
+            this.i.dl = v;
         }
         /**
          * Gets or sets the text style for outer labels
         */
         get outerLabelTextStyle() {
-            return this.i.dc;
+            return this.i.dd;
         }
         set outerLabelTextStyle(v) {
-            this.i.dc = v;
+            this.i.dd = v;
         }
         /**
          * Gets or sets the thickness of outline around slices.
         */
         get outlineThickness() {
-            return this.i.b1;
+            return this.i.b2;
         }
         set outlineThickness(v) {
-            this.i.b1 = +v;
-            this._a("outlineThickness", this.i.b1);
+            this.i.b2 = +v;
+            this._a("outlineThickness", this.i.b2);
         }
         /**
          * Gets or sets the scaling value used to affect the pixel density of the control.
@@ -585,31 +623,31 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
          * to appear blurry.
         */
         get pixelScalingRatio() {
-            return this.i.b3;
+            return this.i.b4;
         }
         set pixelScalingRatio(v) {
-            this.i.b3 = +v;
-            this._a("pixelScalingRatio", this.i.b3);
+            this.i.b4 = +v;
+            this._a("pixelScalingRatio", this.i.b4);
         }
         /**
          * Gets or sets the brush used for the outer labels.
         */
         get outerLabelTextColor() {
-            return brushToString(this.i.fn);
+            return brushToString(this.i.fp);
         }
         set outerLabelTextColor(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));
         }
         /**
          * Gets or sets the brush used for the inner labels.
         */
         get textColor() {
-            return brushToString(this.i.fo);
+            return brushToString(this.i.fq);
         }
         set textColor(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));
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -679,7 +717,7 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
     
     */
         flush() {
-            this.i.dz();
+            this.i.d0();
         }
         /**
          * Provides container for funnel chart
@@ -696,7 +734,7 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
             this.i.notifyResized();
         }
         notifySetItem(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.
@@ -704,29 +742,55 @@ export let IgcFunnelChartComponent = /*@__PURE__*/ (() => {
         
         */
         notifyClearItems(source_) {
-            this.i.d5(source_);
+            this.i.d6(source_);
         }
         notifyInsertItem(source_, index, newItem) {
-            this.i.d7(source_, index, newItem);
+            this.i.d8(source_, index, newItem);
         }
         notifyRemoveItem(source_, index, oldItem) {
-            this.i.d8(source_, index, oldItem);
+            this.i.d9(source_, index, oldItem);
         }
         /**
          * Toggle selection of item at index.
         
         */
         toggleSelection(index) {
-            this.i.em(index);
+            this.i.eo(index);
         }
         /**
          * Exports and serializes the chart visuals.
         
         */
         exportSerializedVisualData() {
-            let iv = this.i.cl();
+            let iv = this.i.cm();
             return (iv);
         }
+        /**
+         * Raised when the SelectedItems collection has changed.
+        */
+        get selectedItemsChanged() {
+            return this._selectedItemsChanged;
+        }
+        set selectedItemsChanged(ev) {
+            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 = (o, e) => {
+                let 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);
+            ;
+        }
         /**
          * Event which is raised when a slice is clicked.
          * Function takes first argument null and second argument ui.