igniteui-webcomponents-charts 4.7.2 → 4.8.1-alpha.0

package/esm2015/lib/igc-series-viewer-component.js

@@ -2,6 +2,8 @@ import { IgcHTMLElement } from "igniteui-webcomponents-core";
 import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
 import { MarkerAutomaticBehavior_$type } from "./MarkerAutomaticBehavior";
 import { SeriesHighlightingMode_$type } from "./SeriesHighlightingMode";
+import { SeriesSelectionMode_$type } from "./SeriesSelectionMode";
+import { SeriesSelectionBehavior_$type } from "./SeriesSelectionBehavior";
 import { SeriesViewerScrollbarMode_$type } from "./SeriesViewerScrollbarMode";
 import { SeriesViewerHorizontalScrollbarPosition_$type } from "./SeriesViewerHorizontalScrollbarPosition";
 import { SeriesViewerVerticalScrollbarPosition_$type } from "./SeriesViewerVerticalScrollbarPosition";
@@ -16,6 +18,7 @@ import { ZoomCoercionMode_$type } from "./ZoomCoercionMode";
 import { InteractionState_$type } from "igniteui-webcomponents-core";
 import { ModifierKeys_$type } from "igniteui-webcomponents-core";
 import { SeriesHighlightedValuesDisplayMode_$type } from "./SeriesHighlightedValuesDisplayMode";
+import { IgcChartSelectedItemCollection } from "./igc-chart-selected-item-collection";
 import { HorizontalAlignment_$type } from "igniteui-webcomponents-core";
 import { IgcPlotAreaMouseButtonEventArgs } from "./igc-plot-area-mouse-button-event-args";
 import { IgcPlotAreaMouseEventArgs } from "./igc-plot-area-mouse-event-args";
@@ -24,10 +27,14 @@ import { IgcDataChartMouseButtonEventArgs } from "./igc-data-chart-mouse-button-
 import { IgcChartMouseEventArgs } from "./igc-chart-mouse-event-args";
 import { IgcSeriesViewerManipulationEventArgs } from "./igc-series-viewer-manipulation-event-args";
 import { IgcRectChangedEventArgs } from "igniteui-webcomponents-core";
+import { IgcSeriesViewerSelectedSeriesItemsChangedEventArgs } from "./igc-series-viewer-selected-series-items-changed-event-args";
 import { IgcRefreshCompletedEventArgs } from "./igc-refresh-completed-event-args";
 import { IgcImageCapturedEventArgs } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, toBrushCollection, fromBrushCollection, brushCollectionToString, ensureEnum, enumToString, fromPoint, toPoint, pointToString, ensureBool, brushToString, stringToBrush, fromRect, toRect, rectToString, initializePropertiesFromCss } from "igniteui-webcomponents-core";
+import { ChartSelectedItemCollection as ChartSelectedItemCollection_internal } from "./ChartSelectedItemCollection";
+import { ChartSelection } from "./ChartSelection";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
 /**
  * Represents a control for viewing series objects.
 */
@@ -66,6 +73,8 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this._attached = false;
             this._queuedSetAttributes = [];
             this._updatingFromAttribute = false;
+            this._selectedSeriesItems = null;
+            this._focusedSeriesItems = null;
             this.__p = null;
             this._hasUserValues = new Set();
             this._stylingContainer = null;
@@ -89,6 +98,8 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this._seriesMouseLeftButtonDown_wrapped = null;
             this._seriesMouseLeftButtonUp = null;
             this._seriesMouseLeftButtonUp_wrapped = null;
+            this._seriesClick = null;
+            this._seriesClick_wrapped = null;
             this._seriesMouseMove = null;
             this._seriesMouseMove_wrapped = null;
             this._seriesMouseEnter = null;
@@ -107,6 +118,10 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this._actualWindowRectChanged_wrapped = null;
             this._gridAreaRectChanged = null;
             this._gridAreaRectChanged_wrapped = null;
+            this._selectedSeriesItemsChanged = null;
+            this._selectedSeriesItemsChanged_wrapped = null;
+            this._focusedSeriesItemsChanged = null;
+            this._focusedSeriesItemsChanged_wrapped = null;
             this._refreshCompleted = null;
             this._refreshCompleted_wrapped = null;
             this._imageCaptured = null;
@@ -239,11 +254,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the marker mode used for assigning a marker type to series when the marker type is automatic.
         */
         get markerAutomaticBehavior() {
-            return this.i.bd;
+            return this.i.bg;
         }
         set markerAutomaticBehavior(v) {
-            this.i.bd = ensureEnum(MarkerAutomaticBehavior_$type, v);
-            this._a("markerAutomaticBehavior", enumToString(MarkerAutomaticBehavior_$type, this.i.bd));
+            this.i.bg = ensureEnum(MarkerAutomaticBehavior_$type, v);
+            this._a("markerAutomaticBehavior", enumToString(MarkerAutomaticBehavior_$type, this.i.bg));
         }
         /**
          * Gets or sets the cross hair point (in world coordinates)
@@ -257,11 +272,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get crosshairPoint() {
-            return fromPoint(this.i.ti);
+            return fromPoint(this.i.u8);
         }
         set crosshairPoint(v) {
-            this.i.ti = toPoint(v);
-            this._a("crosshairPoint", pointToString(this.i.ti));
+            this.i.u8 = toPoint(v);
+            this._a("crosshairPoint", pointToString(this.i.u8));
         }
         /**
          * Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.
@@ -273,329 +288,359 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get animateSeriesWhenAxisRangeChanges() {
-            return this.i.dw;
+            return this.i.eg;
         }
         set animateSeriesWhenAxisRangeChanges(v) {
-            this.i.dw = ensureBool(v);
-            this._a("animateSeriesWhenAxisRangeChanges", this.i.dw);
+            this.i.eg = ensureBool(v);
+            this._a("animateSeriesWhenAxisRangeChanges", this.i.eg);
         }
         /**
          * Gets or sets whether to sync the vertical aspect of the window with the contained series content. This is only supported for a subset of the available series.
         */
         get isWindowSyncedToVisibleRange() {
-            return this.i.et;
+            return this.i.fd;
         }
         set isWindowSyncedToVisibleRange(v) {
-            this.i.et = ensureBool(v);
-            this._a("isWindowSyncedToVisibleRange", this.i.et);
+            this.i.fd = ensureBool(v);
+            this._a("isWindowSyncedToVisibleRange", this.i.fd);
         }
         /**
          * Gets or sets whether calling SimulateHover should shift the crosshair point.
         */
         get shouldSimulateHoverMoveCrosshairPoint() {
-            return this.i.fe;
+            return this.i.fz;
         }
         set shouldSimulateHoverMoveCrosshairPoint(v) {
-            this.i.fe = ensureBool(v);
-            this._a("shouldSimulateHoverMoveCrosshairPoint", this.i.fe);
+            this.i.fz = ensureBool(v);
+            this._a("shouldSimulateHoverMoveCrosshairPoint", this.i.fz);
         }
         /**
-         * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
+         * Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
         */
         get highlightingMode() {
-            return this.i.bv;
+            return this.i.by;
         }
         set highlightingMode(v) {
-            this.i.bv = ensureEnum(SeriesHighlightingMode_$type, v);
-            this._a("highlightingMode", enumToString(SeriesHighlightingMode_$type, this.i.bv));
+            this.i.by = ensureEnum(SeriesHighlightingMode_$type, v);
+            this._a("highlightingMode", enumToString(SeriesHighlightingMode_$type, this.i.by));
+        }
+        /**
+         * Gets or sets the selection mode to use for the series in the component, when supported.
+        */
+        get selectionMode() {
+            return this.i.cb;
+        }
+        set selectionMode(v) {
+            this.i.cb = ensureEnum(SeriesSelectionMode_$type, v);
+            this._a("selectionMode", enumToString(SeriesSelectionMode_$type, this.i.cb));
+        }
+        /**
+         * Gets or sets the selection behavior to use for the series in the component, when supported.
+        */
+        get selectionBehavior() {
+            return this.i.b6;
+        }
+        set selectionBehavior(v) {
+            this.i.b6 = ensureEnum(SeriesSelectionBehavior_$type, v);
+            this._a("selectionBehavior", enumToString(SeriesSelectionBehavior_$type, this.i.b6));
+        }
+        /**
+         * Gets or sets the focus mode to use for the series in the component, when supported.
+        */
+        get focusMode() {
+            return this.i.b9;
+        }
+        set focusMode(v) {
+            this.i.b9 = ensureEnum(SeriesSelectionMode_$type, v);
+            this._a("focusMode", enumToString(SeriesSelectionMode_$type, this.i.b9));
         }
         /**
          * Gets or sets the horizontal scrollbar mode to use for the series viewer.
         */
         get horizontalViewScrollbarMode() {
-            return this.i.b5;
+            return this.i.ch;
         }
         set horizontalViewScrollbarMode(v) {
-            this.i.b5 = ensureEnum(SeriesViewerScrollbarMode_$type, v);
-            this._a("horizontalViewScrollbarMode", enumToString(SeriesViewerScrollbarMode_$type, this.i.b5));
+            this.i.ch = ensureEnum(SeriesViewerScrollbarMode_$type, v);
+            this._a("horizontalViewScrollbarMode", enumToString(SeriesViewerScrollbarMode_$type, this.i.ch));
         }
         /**
          * Gets or sets the vertical scrollbar mode to use for the series viewer.
         */
         get verticalViewScrollbarMode() {
-            return this.i.b6;
+            return this.i.ci;
         }
         set verticalViewScrollbarMode(v) {
-            this.i.b6 = ensureEnum(SeriesViewerScrollbarMode_$type, v);
-            this._a("verticalViewScrollbarMode", enumToString(SeriesViewerScrollbarMode_$type, this.i.b6));
+            this.i.ci = ensureEnum(SeriesViewerScrollbarMode_$type, v);
+            this._a("verticalViewScrollbarMode", enumToString(SeriesViewerScrollbarMode_$type, this.i.ci));
         }
         /**
          * Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarPosition() {
-            return this.i.b2;
+            return this.i.ce;
         }
         set horizontalViewScrollbarPosition(v) {
-            this.i.b2 = ensureEnum(SeriesViewerHorizontalScrollbarPosition_$type, v);
-            this._a("horizontalViewScrollbarPosition", enumToString(SeriesViewerHorizontalScrollbarPosition_$type, this.i.b2));
+            this.i.ce = ensureEnum(SeriesViewerHorizontalScrollbarPosition_$type, v);
+            this._a("horizontalViewScrollbarPosition", enumToString(SeriesViewerHorizontalScrollbarPosition_$type, this.i.ce));
         }
         /**
          * Gets or sets the position to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarPosition() {
-            return this.i.b7;
+            return this.i.cl;
         }
         set verticalViewScrollbarPosition(v) {
-            this.i.b7 = ensureEnum(SeriesViewerVerticalScrollbarPosition_$type, v);
-            this._a("verticalViewScrollbarPosition", enumToString(SeriesViewerVerticalScrollbarPosition_$type, this.i.b7));
+            this.i.cl = ensureEnum(SeriesViewerVerticalScrollbarPosition_$type, v);
+            this._a("verticalViewScrollbarPosition", enumToString(SeriesViewerVerticalScrollbarPosition_$type, this.i.cl));
         }
         /**
          * Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarFill() {
-            return brushToString(this.i.s6);
+            return brushToString(this.i.uv);
         }
         set horizontalViewScrollbarFill(v) {
-            this.i.s6 = stringToBrush(v);
-            this._a("horizontalViewScrollbarFill", brushToString(this.i.s6));
+            this.i.uv = stringToBrush(v);
+            this._a("horizontalViewScrollbarFill", brushToString(this.i.uv));
         }
         /**
          * Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarOutline() {
-            return brushToString(this.i.s7);
+            return brushToString(this.i.uw);
         }
         set horizontalViewScrollbarOutline(v) {
-            this.i.s7 = stringToBrush(v);
-            this._a("horizontalViewScrollbarOutline", brushToString(this.i.s7));
+            this.i.uw = stringToBrush(v);
+            this._a("horizontalViewScrollbarOutline", brushToString(this.i.uw));
         }
         /**
          * Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarStrokeThickness() {
-            return this.i.gy;
+            return this.i.hp;
         }
         set horizontalViewScrollbarStrokeThickness(v) {
-            this.i.gy = +v;
-            this._a("horizontalViewScrollbarStrokeThickness", this.i.gy);
+            this.i.hp = +v;
+            this._a("horizontalViewScrollbarStrokeThickness", this.i.hp);
         }
         /**
          * Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarMaxOpacity() {
-            return this.i.gx;
+            return this.i.ho;
         }
         set horizontalViewScrollbarMaxOpacity(v) {
-            this.i.gx = +v;
-            this._a("horizontalViewScrollbarMaxOpacity", this.i.gx);
+            this.i.ho = +v;
+            this._a("horizontalViewScrollbarMaxOpacity", this.i.ho);
         }
         /**
          * Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarCornerRadius() {
-            return this.i.gu;
+            return this.i.hl;
         }
         set horizontalViewScrollbarCornerRadius(v) {
-            this.i.gu = +v;
-            this._a("horizontalViewScrollbarCornerRadius", this.i.gu);
+            this.i.hl = +v;
+            this._a("horizontalViewScrollbarCornerRadius", this.i.hl);
         }
         /**
          * Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarHeight() {
-            return this.i.gv;
+            return this.i.hm;
         }
         set horizontalViewScrollbarHeight(v) {
-            this.i.gv = +v;
-            this._a("horizontalViewScrollbarHeight", this.i.gv);
+            this.i.hm = +v;
+            this._a("horizontalViewScrollbarHeight", this.i.hm);
         }
         /**
          * Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarInset() {
-            return this.i.gw;
+            return this.i.hn;
         }
         set horizontalViewScrollbarInset(v) {
-            this.i.gw = +v;
-            this._a("horizontalViewScrollbarInset", this.i.gw);
+            this.i.hn = +v;
+            this._a("horizontalViewScrollbarInset", this.i.hn);
         }
         /**
          * Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarTrackStartInset() {
-            return this.i.g0;
+            return this.i.hr;
         }
         set horizontalViewScrollbarTrackStartInset(v) {
-            this.i.g0 = +v;
-            this._a("horizontalViewScrollbarTrackStartInset", this.i.g0);
+            this.i.hr = +v;
+            this._a("horizontalViewScrollbarTrackStartInset", this.i.hr);
         }
         /**
          * Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarTrackEndInset() {
-            return this.i.gz;
+            return this.i.hq;
         }
         set horizontalViewScrollbarTrackEndInset(v) {
-            this.i.gz = +v;
-            this._a("horizontalViewScrollbarTrackEndInset", this.i.gz);
+            this.i.hq = +v;
+            this._a("horizontalViewScrollbarTrackEndInset", this.i.hq);
         }
         /**
          * Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.
         */
         get horizontalViewScrollbarShouldAddAutoTrackInsets() {
-            return this.i.d9;
+            return this.i.et;
         }
         set horizontalViewScrollbarShouldAddAutoTrackInsets(v) {
-            this.i.d9 = ensureBool(v);
-            this._a("horizontalViewScrollbarShouldAddAutoTrackInsets", this.i.d9);
+            this.i.et = ensureBool(v);
+            this._a("horizontalViewScrollbarShouldAddAutoTrackInsets", this.i.et);
         }
         /**
          * Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarFill() {
-            return brushToString(this.i.tf);
+            return brushToString(this.i.u5);
         }
         set verticalViewScrollbarFill(v) {
-            this.i.tf = stringToBrush(v);
-            this._a("verticalViewScrollbarFill", brushToString(this.i.tf));
+            this.i.u5 = stringToBrush(v);
+            this._a("verticalViewScrollbarFill", brushToString(this.i.u5));
         }
         /**
          * Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarOutline() {
-            return brushToString(this.i.tg);
+            return brushToString(this.i.u6);
         }
         set verticalViewScrollbarOutline(v) {
-            this.i.tg = stringToBrush(v);
-            this._a("verticalViewScrollbarOutline", brushToString(this.i.tg));
+            this.i.u6 = stringToBrush(v);
+            this._a("verticalViewScrollbarOutline", brushToString(this.i.u6));
         }
         /**
          * Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarStrokeThickness() {
-            return this.i.hk;
+            return this.i.ib;
         }
         set verticalViewScrollbarStrokeThickness(v) {
-            this.i.hk = +v;
-            this._a("verticalViewScrollbarStrokeThickness", this.i.hk);
+            this.i.ib = +v;
+            this._a("verticalViewScrollbarStrokeThickness", this.i.ib);
         }
         /**
          * Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarMaxOpacity() {
-            return this.i.hj;
+            return this.i.ia;
         }
         set verticalViewScrollbarMaxOpacity(v) {
-            this.i.hj = +v;
-            this._a("verticalViewScrollbarMaxOpacity", this.i.hj);
+            this.i.ia = +v;
+            this._a("verticalViewScrollbarMaxOpacity", this.i.ia);
         }
         /**
          * Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarCornerRadius() {
-            return this.i.hh;
+            return this.i.h8;
         }
         set verticalViewScrollbarCornerRadius(v) {
-            this.i.hh = +v;
-            this._a("verticalViewScrollbarCornerRadius", this.i.hh);
+            this.i.h8 = +v;
+            this._a("verticalViewScrollbarCornerRadius", this.i.h8);
         }
         /**
          * Gets or sets the width to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarWidth() {
-            return this.i.hn;
+            return this.i.ie;
         }
         set verticalViewScrollbarWidth(v) {
-            this.i.hn = +v;
-            this._a("verticalViewScrollbarWidth", this.i.hn);
+            this.i.ie = +v;
+            this._a("verticalViewScrollbarWidth", this.i.ie);
         }
         /**
          * Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarInset() {
-            return this.i.hi;
+            return this.i.h9;
         }
         set verticalViewScrollbarInset(v) {
-            this.i.hi = +v;
-            this._a("verticalViewScrollbarInset", this.i.hi);
+            this.i.h9 = +v;
+            this._a("verticalViewScrollbarInset", this.i.h9);
         }
         /**
          * Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarTrackStartInset() {
-            return this.i.hm;
+            return this.i.id;
         }
         set verticalViewScrollbarTrackStartInset(v) {
-            this.i.hm = +v;
-            this._a("verticalViewScrollbarTrackStartInset", this.i.hm);
+            this.i.id = +v;
+            this._a("verticalViewScrollbarTrackStartInset", this.i.id);
         }
         /**
          * Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarTrackEndInset() {
-            return this.i.hl;
+            return this.i.ic;
         }
         set verticalViewScrollbarTrackEndInset(v) {
-            this.i.hl = +v;
-            this._a("verticalViewScrollbarTrackEndInset", this.i.hl);
+            this.i.ic = +v;
+            this._a("verticalViewScrollbarTrackEndInset", this.i.ic);
         }
         /**
          * Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.
         */
         get verticalViewScrollbarShouldAddAutoTrackInsets() {
-            return this.i.fn;
+            return this.i.gb;
         }
         set verticalViewScrollbarShouldAddAutoTrackInsets(v) {
-            this.i.fn = ensureBool(v);
-            this._a("verticalViewScrollbarShouldAddAutoTrackInsets", this.i.fn);
+            this.i.gb = ensureBool(v);
+            this._a("verticalViewScrollbarShouldAddAutoTrackInsets", this.i.gb);
         }
         /**
-         * Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
+         * Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
         */
         get highlightingBehavior() {
-            return this.i.bt;
+            return this.i.bw;
         }
         set highlightingBehavior(v) {
-            this.i.bt = ensureEnum(SeriesHighlightingBehavior_$type, v);
-            this._a("highlightingBehavior", enumToString(SeriesHighlightingBehavior_$type, this.i.bt));
+            this.i.bw = ensureEnum(SeriesHighlightingBehavior_$type, v);
+            this._a("highlightingBehavior", enumToString(SeriesHighlightingBehavior_$type, this.i.bw));
         }
         /**
          * Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
         */
         get legendHighlightingMode() {
-            return this.i.ba;
+            return this.i.bd;
         }
         set legendHighlightingMode(v) {
-            this.i.ba = ensureEnum(LegendHighlightingMode_$type, v);
-            this._a("legendHighlightingMode", enumToString(LegendHighlightingMode_$type, this.i.ba));
+            this.i.bd = ensureEnum(LegendHighlightingMode_$type, v);
+            this._a("legendHighlightingMode", enumToString(LegendHighlightingMode_$type, this.i.bd));
         }
         /**
          * Gets or sets type of legend badges representing all series displayed in a legend linked to this component
          * This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series
         */
         get legendItemBadgeShape() {
-            return this.i.bc;
+            return this.i.bf;
         }
         set legendItemBadgeShape(v) {
-            this.i.bc = ensureEnum(LegendItemBadgeShape_$type, v);
-            this._a("legendItemBadgeShape", enumToString(LegendItemBadgeShape_$type, this.i.bc));
+            this.i.bf = ensureEnum(LegendItemBadgeShape_$type, v);
+            this._a("legendItemBadgeShape", enumToString(LegendItemBadgeShape_$type, this.i.bf));
         }
         /**
          * Gets or sets the mode of legend badges representing all series in this chart.
          * This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series
         */
         get legendItemBadgeMode() {
-            return this.i.bb;
+            return this.i.be;
         }
         set legendItemBadgeMode(v) {
-            this.i.bb = ensureEnum(LegendItemBadgeMode_$type, v);
-            this._a("legendItemBadgeMode", enumToString(LegendItemBadgeMode_$type, this.i.bb));
+            this.i.be = ensureEnum(LegendItemBadgeMode_$type, v);
+            this._a("legendItemBadgeMode", enumToString(LegendItemBadgeMode_$type, this.i.be));
         }
         /**
          * Gets the viewport rectangle associated with the SeriesViewer, the physical dimensions of the plot area.
         */
         get viewportRect() {
-            return fromRect(this.i.t6);
+            return fromRect(this.i.vw);
         }
         /**
          * Gets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.
@@ -608,18 +653,18 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get effectiveViewport() {
-            return fromRect(this.i.tv);
+            return fromRect(this.i.vl);
         }
         set effectiveViewport(v) {
-            this.i.tv = toRect(v);
-            this._a("effectiveViewport", rectToString(this.i.tv));
+            this.i.vl = toRect(v);
+            this._a("effectiveViewport", rectToString(this.i.vl));
         }
         /**
          * Represents the subset area within the viewport into which content should be mapped.
          * This is the projection of the current EffectiveViewport into the viewport at current zoom level.
         */
         get contentViewport() {
-            return fromRect(this.i.tu);
+            return fromRect(this.i.vk);
         }
         /**
          * A rectangle representing the portion of the SeriesViewer currently in view.
@@ -632,41 +677,41 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowRect() {
-            return fromRect(this.i.t7);
+            return fromRect(this.i.vx);
         }
         set windowRect(v) {
-            this.i.t7 = toRect(v);
-            this._a("windowRect", rectToString(this.i.t7));
+            this.i.vx = toRect(v);
+            this._a("windowRect", rectToString(this.i.vx));
         }
         /**
          * Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.
         */
         get useTiledZooming() {
-            return this.i.fm;
+            return this.i.ga;
         }
         set useTiledZooming(v) {
-            this.i.fm = ensureBool(v);
-            this._a("useTiledZooming", this.i.fm);
+            this.i.ga = ensureBool(v);
+            this._a("useTiledZooming", this.i.ga);
         }
         /**
          * Gets or sets whether the series viewer should prefer selecting higher resolution tiles over lower resolution tiles when performing tile zooming. Setting this to true will lower performance but increase quality.
         */
         get preferHigherResolutionTiles() {
-            return this.i.e9;
+            return this.i.ft;
         }
         set preferHigherResolutionTiles(v) {
-            this.i.e9 = ensureBool(v);
-            this._a("preferHigherResolutionTiles", this.i.e9);
+            this.i.ft = ensureBool(v);
+            this._a("preferHigherResolutionTiles", this.i.ft);
         }
         /**
          * Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.
         */
         get zoomTileCacheSize() {
-            return this.i.h3;
+            return this.i.iy;
         }
         set zoomTileCacheSize(v) {
-            this.i.h3 = +v;
-            this._a("zoomTileCacheSize", this.i.h3);
+            this.i.iy = +v;
+            this._a("zoomTileCacheSize", this.i.iy);
         }
         /**
          * Gets or sets the duration the highlighting/de-highlighting effects.
@@ -678,31 +723,51 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get highlightingTransitionDuration() {
-            return this.i.h1;
+            return this.i.iv;
         }
         set highlightingTransitionDuration(v) {
-            this.i.h1 = +v;
-            this._a("highlightingTransitionDuration", this.i.h1);
+            this.i.iv = +v;
+            this._a("highlightingTransitionDuration", this.i.iv);
+        }
+        /**
+         * Gets or sets the duration the selection/de-Selection effects.
+        */
+        get selectionTransitionDuration() {
+            return this.i.ix;
+        }
+        set selectionTransitionDuration(v) {
+            this.i.ix = +v;
+            this._a("selectionTransitionDuration", this.i.ix);
+        }
+        /**
+         * Gets or sets the duration the Focus/de-Focus effects.
+        */
+        get focusTransitionDuration() {
+            return this.i.it;
+        }
+        set focusTransitionDuration(v) {
+            this.i.it = +v;
+            this._a("focusTransitionDuration", this.i.it);
         }
         /**
          * Gets or sets the duration of the scrollbar effects.
         */
         get scrollbarsAnimationDuration() {
-            return this.i.h2;
+            return this.i.iw;
         }
         set scrollbarsAnimationDuration(v) {
-            this.i.h2 = +v;
-            this._a("scrollbarsAnimationDuration", this.i.h2);
+            this.i.iw = +v;
+            this._a("scrollbarsAnimationDuration", this.i.iw);
         }
         /**
          * Gets or sets the whether the series viewer can allow the page to pan if a control pan is not possible in the requested direction.
         */
         get isPagePanningAllowed() {
-            return this.i.eo;
+            return this.i.e8;
         }
         set isPagePanningAllowed(v) {
-            this.i.eo = ensureBool(v);
-            this._a("isPagePanningAllowed", this.i.eo);
+            this.i.e8 = ensureBool(v);
+            this._a("isPagePanningAllowed", this.i.e8);
         }
         /**
          * Determines the method of hit testing used when mousing over elements in the chart.
@@ -742,17 +807,17 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get isSurfaceInteractionDisabled() {
-            return this.i.ep;
+            return this.i.e9;
         }
         set isSurfaceInteractionDisabled(v) {
-            this.i.ep = ensureBool(v);
-            this._a("isSurfaceInteractionDisabled", this.i.ep);
+            this.i.e9 = ensureBool(v);
+            this._a("isSurfaceInteractionDisabled", this.i.e9);
         }
         /**
          * Indicates if this SeriesViewer is a map.
         */
         get isMap() {
-            return this.i.en;
+            return this.i.e7;
         }
         /**
          * The response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete.  The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.
@@ -765,11 +830,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowResponse() {
-            return this.i.cb;
+            return this.i.cp;
         }
         set windowResponse(v) {
-            this.i.cb = ensureEnum(WindowResponse_$type, v);
-            this._a("windowResponse", enumToString(WindowResponse_$type, this.i.cb));
+            this.i.cp = ensureEnum(WindowResponse_$type, v);
+            this._a("windowResponse", enumToString(WindowResponse_$type, this.i.cp));
         }
         /**
          * Sets or gets the minimum width that the window rect is allowed to reach before being clamped.
@@ -784,11 +849,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowRectMinWidth() {
-            return this.i.hr;
+            return this.i.ij;
         }
         set windowRectMinWidth(v) {
-            this.i.hr = +v;
-            this._a("windowRectMinWidth", this.i.hr);
+            this.i.ij = +v;
+            this._a("windowRectMinWidth", this.i.ij);
         }
         /**
          * Sets or gets the minimum height that the window rect is allowed to reach before being clamped.
@@ -797,31 +862,31 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
          * This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)
         */
         get windowRectMinHeight() {
-            return this.i.hq;
+            return this.i.ii;
         }
         set windowRectMinHeight(v) {
-            this.i.hq = +v;
-            this._a("windowRectMinHeight", this.i.hq);
+            this.i.ii = +v;
+            this._a("windowRectMinHeight", this.i.ii);
         }
         /**
          * Gets the actual minimum width that the window rect is allowed to reach before being clamped.
         */
         get actualWindowRectMinWidth() {
-            return this.i.gm;
+            return this.i.hd;
         }
         set actualWindowRectMinWidth(v) {
-            this.i.gm = +v;
-            this._a("actualWindowRectMinWidth", this.i.gm);
+            this.i.hd = +v;
+            this._a("actualWindowRectMinWidth", this.i.hd);
         }
         /**
          * Gets the actual minimum height that the window rect is allowed to reach before being clamped.
         */
         get actualWindowRectMinHeight() {
-            return this.i.gl;
+            return this.i.hc;
         }
         set actualWindowRectMinHeight(v) {
-            this.i.gl = +v;
-            this._a("actualWindowRectMinHeight", this.i.gl);
+            this.i.hc = +v;
+            this._a("actualWindowRectMinHeight", this.i.hc);
         }
         /**
          * Sets or gets minimum pixel width that the window is allowed to reach before being clamped.
@@ -830,11 +895,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
          * This property is overridden by the WindowRectMinWidth property
         */
         get windowSizeMinWidth() {
-            return this.i.ht;
+            return this.i.il;
         }
         set windowSizeMinWidth(v) {
-            this.i.ht = +v;
-            this._a("windowSizeMinWidth", this.i.ht);
+            this.i.il = +v;
+            this._a("windowSizeMinWidth", this.i.il);
         }
         /**
          * Sets or gets minimum pixel height that the window is allowed to reach before being clamped.
@@ -843,11 +908,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
          * This property is overridden by the WindowRectMinHeight property
         */
         get windowSizeMinHeight() {
-            return this.i.hs;
+            return this.i.ik;
         }
         set windowSizeMinHeight(v) {
-            this.i.hs = +v;
-            this._a("windowSizeMinHeight", this.i.hs);
+            this.i.ik = +v;
+            this._a("windowSizeMinHeight", this.i.ik);
         }
         /**
          * Gets or sets the current SeriesViewer's crosshair visibility override.
@@ -859,41 +924,41 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get crosshairVisibility() {
-            return this.i.ub;
+            return this.i.v1;
         }
         set crosshairVisibility(v) {
-            this.i.ub = ensureEnum(Visibility_$type, v);
-            this._a("crosshairVisibility", enumToString(Visibility_$type, this.i.ub));
+            this.i.v1 = ensureEnum(Visibility_$type, v);
+            this._a("crosshairVisibility", enumToString(Visibility_$type, this.i.v1));
         }
         /**
          * Gets or sets the current SeriesViewer's crosshair horizontal brush override.
         */
         get horizontalCrosshairBrush() {
-            return brushToString(this.i.s5);
+            return brushToString(this.i.uu);
         }
         set horizontalCrosshairBrush(v) {
-            this.i.s5 = stringToBrush(v);
-            this._a("horizontalCrosshairBrush", brushToString(this.i.s5));
+            this.i.uu = stringToBrush(v);
+            this._a("horizontalCrosshairBrush", brushToString(this.i.uu));
         }
         /**
          * Gets or sets the current SeriesViewer's crosshair vertical brush override.
         */
         get verticalCrosshairBrush() {
-            return brushToString(this.i.te);
+            return brushToString(this.i.u4);
         }
         set verticalCrosshairBrush(v) {
-            this.i.te = stringToBrush(v);
-            this._a("verticalCrosshairBrush", brushToString(this.i.te));
+            this.i.u4 = stringToBrush(v);
+            this._a("verticalCrosshairBrush", brushToString(this.i.u4));
         }
         /**
-         * Gets or sets zoom is contrained to within the axes. Setting this to false is a preview feature at the present time.
+         * Gets or sets zoom is constrained to within the axes. Setting this to false is a preview feature at the present time.
         */
         get zoomCoercionMode() {
-            return this.i.cf;
+            return this.i.ct;
         }
         set zoomCoercionMode(v) {
-            this.i.cf = ensureEnum(ZoomCoercionMode_$type, v);
-            this._a("zoomCoercionMode", enumToString(ZoomCoercionMode_$type, this.i.cf));
+            this.i.ct = ensureEnum(ZoomCoercionMode_$type, v);
+            this._a("zoomCoercionMode", enumToString(ZoomCoercionMode_$type, this.i.ct));
         }
         /**
          * Gets or sets the brush used as the background for the current SeriesViewer object's plot area.
@@ -905,11 +970,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get plotAreaBackground() {
-            return brushToString(this.i.s8);
+            return brushToString(this.i.ux);
         }
         set plotAreaBackground(v) {
-            this.i.s8 = stringToBrush(v);
-            this._a("plotAreaBackground", brushToString(this.i.s8));
+            this.i.ux = stringToBrush(v);
+            this._a("plotAreaBackground", brushToString(this.i.ux));
         }
         /**
          * Gets or sets the DefaultInteraction property.
@@ -922,22 +987,22 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get defaultInteraction() {
-            return this.i.ci;
+            return this.i.cw;
         }
         set defaultInteraction(v) {
-            this.i.ci = ensureEnum(InteractionState_$type, v);
-            this._a("defaultInteraction", enumToString(InteractionState_$type, this.i.ci));
+            this.i.cw = ensureEnum(InteractionState_$type, v);
+            this._a("defaultInteraction", enumToString(InteractionState_$type, this.i.cw));
         }
         /**
          * Gets or sets the RightButtonDefaultInteraction property.
          * The default interaction state defines the SeriesViewer's response to right button mouse events.
         */
         get rightButtonDefaultInteraction() {
-            return this.i.ck;
+            return this.i.cy;
         }
         set rightButtonDefaultInteraction(v) {
-            this.i.ck = ensureEnum(InteractionState_$type, v);
-            this._a("rightButtonDefaultInteraction", enumToString(InteractionState_$type, this.i.ck));
+            this.i.cy = ensureEnum(InteractionState_$type, v);
+            this._a("rightButtonDefaultInteraction", enumToString(InteractionState_$type, this.i.cy));
         }
         /**
          * Gets or sets the current SeriesViewer's DragModifier property.
@@ -949,11 +1014,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get dragModifier() {
-            return this.i.sr;
+            return this.i.uf;
         }
         set dragModifier(v) {
-            this.i.sr = ensureEnum(ModifierKeys_$type, v);
-            this._a("dragModifier", enumToString(ModifierKeys_$type, this.i.sr));
+            this.i.uf = ensureEnum(ModifierKeys_$type, v);
+            this._a("dragModifier", enumToString(ModifierKeys_$type, this.i.uf));
         }
         /**
          * Gets or sets the current SeriesViewer's PanModifier property.
@@ -965,11 +1030,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get panModifier() {
-            return this.i.ss;
+            return this.i.ug;
         }
         set panModifier(v) {
-            this.i.ss = ensureEnum(ModifierKeys_$type, v);
-            this._a("panModifier", enumToString(ModifierKeys_$type, this.i.ss));
+            this.i.ug = ensureEnum(ModifierKeys_$type, v);
+            this._a("panModifier", enumToString(ModifierKeys_$type, this.i.ug));
         }
         /**
          * Gets or sets the preview rectangle.
@@ -983,21 +1048,87 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get previewRect() {
-            return fromRect(this.i.t1);
+            return fromRect(this.i.vr);
         }
         set previewRect(v) {
-            this.i.t1 = toRect(v);
-            this._a("previewRect", rectToString(this.i.t1));
+            this.i.vr = toRect(v);
+            this._a("previewRect", rectToString(this.i.vr));
         }
         /**
          * Gets or sets whether and how to display highlighted values for the series by default. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.
         */
         get highlightedValuesDisplayMode() {
-            return this.i.bq;
+            return this.i.bt;
         }
         set highlightedValuesDisplayMode(v) {
-            this.i.bq = ensureEnum(SeriesHighlightedValuesDisplayMode_$type, v);
-            this._a("highlightedValuesDisplayMode", enumToString(SeriesHighlightedValuesDisplayMode_$type, this.i.bq));
+            this.i.bt = ensureEnum(SeriesHighlightedValuesDisplayMode_$type, v);
+            this._a("highlightedValuesDisplayMode", enumToString(SeriesHighlightedValuesDisplayMode_$type, this.i.bt));
+        }
+        /**
+         * Gets the currently selected data items.  Adding or removing data items from this collection will
+         * select or deselect the visuals associated with those items.
+        */
+        get selectedSeriesItems() {
+            if (this._selectedSeriesItems === null) {
+                let coll = new IgcChartSelectedItemCollection();
+                let innerColl = this.i.selectedSeriesItems;
+                if (!innerColl) {
+                    innerColl = new ChartSelectedItemCollection_internal();
+                }
+                this._selectedSeriesItems = coll._fromInner(innerColl);
+                this.i.selectedSeriesItems = innerColl;
+            }
+            return this._selectedSeriesItems;
+        }
+        set selectedSeriesItems(v) {
+            if (this._selectedSeriesItems !== null) {
+                this._selectedSeriesItems._setSyncTarget(null);
+                this._selectedSeriesItems = null;
+            }
+            let coll = new IgcChartSelectedItemCollection();
+            this._selectedSeriesItems = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(ChartSelection.$type);
+            let innerColl = this.i.selectedSeriesItems;
+            if (!innerColl) {
+                innerColl = new ChartSelectedItemCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedSeriesItems._setSyncTarget(syncColl);
+            this.i.selectedSeriesItems = innerColl;
+        }
+        /**
+         * Gets the currently focused data items.  Adding or removing data items from this collection will
+         * focus or blur the visuals associated with those items.
+        */
+        get focusedSeriesItems() {
+            if (this._focusedSeriesItems === null) {
+                let coll = new IgcChartSelectedItemCollection();
+                let innerColl = this.i.focusedSeriesItems;
+                if (!innerColl) {
+                    innerColl = new ChartSelectedItemCollection_internal();
+                }
+                this._focusedSeriesItems = coll._fromInner(innerColl);
+                this.i.focusedSeriesItems = innerColl;
+            }
+            return this._focusedSeriesItems;
+        }
+        set focusedSeriesItems(v) {
+            if (this._focusedSeriesItems !== null) {
+                this._focusedSeriesItems._setSyncTarget(null);
+                this._focusedSeriesItems = null;
+            }
+            let coll = new IgcChartSelectedItemCollection();
+            this._focusedSeriesItems = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(ChartSelection.$type);
+            let innerColl = this.i.focusedSeriesItems;
+            if (!innerColl) {
+                innerColl = new ChartSelectedItemCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._focusedSeriesItems._setSyncTarget(syncColl);
+            this.i.focusedSeriesItems = innerColl;
         }
         /**
          * A number between 0 and 1 determining the position of the horizontal scroll.
@@ -1008,11 +1139,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowPositionHorizontal() {
-            return this.i.ho;
+            return this.i.ig;
         }
         set windowPositionHorizontal(v) {
-            this.i.ho = +v;
-            this._a("windowPositionHorizontal", this.i.ho);
+            this.i.ig = +v;
+            this._a("windowPositionHorizontal", this.i.ig);
         }
         /**
          * A number between 0 and 1 determining the position of the vertical scroll.
@@ -1023,11 +1154,31 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowPositionVertical() {
-            return this.i.hp;
+            return this.i.ih;
         }
         set windowPositionVertical(v) {
-            this.i.hp = +v;
-            this._a("windowPositionVertical", this.i.hp);
+            this.i.ih = +v;
+            this._a("windowPositionVertical", this.i.ih);
+        }
+        /**
+         * Gets or sets the selection brush to use for the series.
+        */
+        get selectionBrush() {
+            return brushToString(this.i.u1);
+        }
+        set selectionBrush(v) {
+            this.i.u1 = stringToBrush(v);
+            this._a("selectionBrush", brushToString(this.i.u1));
+        }
+        /**
+         * Gets or sets the Focus brush to use for the series.
+        */
+        get focusBrush() {
+            return brushToString(this.i.uk);
+        }
+        set focusBrush(v) {
+            this.i.uk = stringToBrush(v);
+            this._a("focusBrush", brushToString(this.i.uk));
         }
         /**
          * Text to display above the plot area.
@@ -1039,10 +1190,10 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get chartTitle() {
-            return this.i.ko;
+            return this.i.lo;
         }
         set chartTitle(v) {
-            this.i.ko = v;
+            this.i.lo = v;
         }
         /**
          * Gets or sets the TitleHorizontalAlignment property.
@@ -1054,11 +1205,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleHorizontalAlignment() {
-            return this.i.sq;
+            return this.i.ue;
         }
         set titleHorizontalAlignment(v) {
-            this.i.sq = ensureEnum(HorizontalAlignment_$type, v);
-            this._a("titleHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.sq));
+            this.i.ue = ensureEnum(HorizontalAlignment_$type, v);
+            this._a("titleHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.ue));
         }
         /**
          * Gets or sets the SubtitleHorizontalAlignment property.
@@ -1070,29 +1221,29 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleHorizontalAlignment() {
-            return this.i.sp;
+            return this.i.ud;
         }
         set subtitleHorizontalAlignment(v) {
-            this.i.sp = ensureEnum(HorizontalAlignment_$type, v);
-            this._a("subtitleHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.sp));
+            this.i.ud = ensureEnum(HorizontalAlignment_$type, v);
+            this._a("subtitleHorizontalAlignment", enumToString(HorizontalAlignment_$type, this.i.ud));
         }
         /**
          * Font settings for the title.
         */
         get titleTextStyle() {
-            return this.i.kv;
+            return this.i.lv;
         }
         set titleTextStyle(v) {
-            this.i.kv = v;
+            this.i.lv = v;
         }
         /**
          * Font settings for the subtitle.
         */
         get subtitleTextStyle() {
-            return this.i.kj;
+            return this.i.lj;
         }
         set subtitleTextStyle(v) {
-            this.i.kj = v;
+            this.i.lj = v;
         }
         /**
          * Gets or sets the Color used for the Title Text.
@@ -1104,11 +1255,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleTextColor() {
-            return brushToString(this.i.td);
+            return brushToString(this.i.u3);
         }
         set titleTextColor(v) {
-            this.i.td = stringToBrush(v);
-            this._a("titleTextColor", brushToString(this.i.td));
+            this.i.u3 = stringToBrush(v);
+            this._a("titleTextColor", brushToString(this.i.u3));
         }
         /**
          * Gets or sets the Color used for the Subtitle Text.
@@ -1120,11 +1271,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleTextColor() {
-            return brushToString(this.i.tc);
+            return brushToString(this.i.u2);
         }
         set subtitleTextColor(v) {
-            this.i.tc = stringToBrush(v);
-            this._a("subtitleTextColor", brushToString(this.i.tc));
+            this.i.u2 = stringToBrush(v);
+            this._a("subtitleTextColor", brushToString(this.i.u2));
         }
         /**
          * Margin applied above the title.
@@ -1136,11 +1287,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleTopMargin() {
-            return this.i.hf;
+            return this.i.h6;
         }
         set titleTopMargin(v) {
-            this.i.hf = +v;
-            this._a("titleTopMargin", this.i.hf);
+            this.i.h6 = +v;
+            this._a("titleTopMargin", this.i.h6);
         }
         /**
          * Margin applied to the left of the title.
@@ -1152,11 +1303,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleLeftMargin() {
-            return this.i.hd;
+            return this.i.h4;
         }
         set titleLeftMargin(v) {
-            this.i.hd = +v;
-            this._a("titleLeftMargin", this.i.hd);
+            this.i.h4 = +v;
+            this._a("titleLeftMargin", this.i.h4);
         }
         /**
          * Margin applied to the right of the title.
@@ -1168,11 +1319,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleRightMargin() {
-            return this.i.he;
+            return this.i.h5;
         }
         set titleRightMargin(v) {
-            this.i.he = +v;
-            this._a("titleRightMargin", this.i.he);
+            this.i.h5 = +v;
+            this._a("titleRightMargin", this.i.h5);
         }
         /**
          * Margin applied below the title.
@@ -1184,11 +1335,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get titleBottomMargin() {
-            return this.i.hc;
+            return this.i.h3;
         }
         set titleBottomMargin(v) {
-            this.i.hc = +v;
-            this._a("titleBottomMargin", this.i.hc);
+            this.i.h3 = +v;
+            this._a("titleBottomMargin", this.i.h3);
         }
         /**
          * Margin applied above the subtitle.
@@ -1200,11 +1351,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleTopMargin() {
-            return this.i.hb;
+            return this.i.h2;
         }
         set subtitleTopMargin(v) {
-            this.i.hb = +v;
-            this._a("subtitleTopMargin", this.i.hb);
+            this.i.h2 = +v;
+            this._a("subtitleTopMargin", this.i.h2);
         }
         /**
          * Margin applied to the left of the subtitle.
@@ -1216,11 +1367,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleLeftMargin() {
-            return this.i.g9;
+            return this.i.h0;
         }
         set subtitleLeftMargin(v) {
-            this.i.g9 = +v;
-            this._a("subtitleLeftMargin", this.i.g9);
+            this.i.h0 = +v;
+            this._a("subtitleLeftMargin", this.i.h0);
         }
         /**
          * Margin applied to the right of the subtitle.
@@ -1232,11 +1383,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleRightMargin() {
-            return this.i.ha;
+            return this.i.h1;
         }
         set subtitleRightMargin(v) {
-            this.i.ha = +v;
-            this._a("subtitleRightMargin", this.i.ha);
+            this.i.h1 = +v;
+            this._a("subtitleRightMargin", this.i.h1);
         }
         /**
          * Margin applied below the subtitle.
@@ -1248,11 +1399,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitleBottomMargin() {
-            return this.i.g8;
+            return this.i.hz;
         }
         set subtitleBottomMargin(v) {
-            this.i.g8 = +v;
-            this._a("subtitleBottomMargin", this.i.g8);
+            this.i.hz = +v;
+            this._a("subtitleBottomMargin", this.i.hz);
         }
         /**
          * Gets or sets the Subtitle property.
@@ -1265,10 +1416,10 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get subtitle() {
-            return this.i.kc;
+            return this.i.lc;
         }
         set subtitle(v) {
-            this.i.kc = v;
+            this.i.lc = v;
         }
         /**
          * Sets or gets the top margin to use around the chart content.
@@ -1280,11 +1431,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get topMargin() {
-            return this.i.hg;
+            return this.i.h7;
         }
         set topMargin(v) {
-            this.i.hg = +v;
-            this._a("topMargin", this.i.hg);
+            this.i.h7 = +v;
+            this._a("topMargin", this.i.h7);
         }
         /**
          * Sets or gets the left margin to use around the chart content.
@@ -1296,11 +1447,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get leftMargin() {
-            return this.i.g2;
+            return this.i.ht;
         }
         set leftMargin(v) {
-            this.i.g2 = +v;
-            this._a("leftMargin", this.i.g2);
+            this.i.ht = +v;
+            this._a("leftMargin", this.i.ht);
         }
         /**
          * Sets or gets the right margin to use around the chart content.
@@ -1312,11 +1463,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get rightMargin() {
-            return this.i.g7;
+            return this.i.hy;
         }
         set rightMargin(v) {
-            this.i.g7 = +v;
-            this._a("rightMargin", this.i.g7);
+            this.i.hy = +v;
+            this._a("rightMargin", this.i.hy);
         }
         /**
          * Sets or gets the bottom margin to use around the chart content.
@@ -1328,11 +1479,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get bottomMargin() {
-            return this.i.gp;
+            return this.i.hg;
         }
         set bottomMargin(v) {
-            this.i.gp = +v;
-            this._a("bottomMargin", this.i.gp);
+            this.i.hg = +v;
+            this._a("bottomMargin", this.i.hg);
         }
         /**
          * Sets or gets the automatic width to add when automatically adding margins to the chart.
@@ -1344,11 +1495,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get autoMarginWidth() {
-            return this.i.go;
+            return this.i.hf;
         }
         set autoMarginWidth(v) {
-            this.i.go = +v;
-            this._a("autoMarginWidth", this.i.go);
+            this.i.hf = +v;
+            this._a("autoMarginWidth", this.i.hf);
         }
         /**
          * Sets or gets the automatic height to add when automatically adding margins to the chart.
@@ -1358,21 +1509,21 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get autoMarginHeight() {
-            return this.i.gn;
+            return this.i.he;
         }
         set autoMarginHeight(v) {
-            this.i.gn = +v;
-            this._a("autoMarginHeight", this.i.gn);
+            this.i.he = +v;
+            this._a("autoMarginHeight", this.i.he);
         }
         /**
          * Gets or sets the IsAntiAliasingEnabledDuringInteraction property.
         */
         get isAntiAliasingEnabledDuringInteraction() {
-            return this.i.ee;
+            return this.i.ey;
         }
         set isAntiAliasingEnabledDuringInteraction(v) {
-            this.i.ee = ensureBool(v);
-            this._a("isAntiAliasingEnabledDuringInteraction", this.i.ee);
+            this.i.ey = ensureBool(v);
+            this._a("isAntiAliasingEnabledDuringInteraction", this.i.ey);
         }
         /**
          * Gets or sets the scaling value used to affect the pixel density of the control.
@@ -1380,21 +1531,21 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
          * to appear blurry.
         */
         get pixelScalingRatio() {
-            return this.i.g3;
+            return this.i.hu;
         }
         set pixelScalingRatio(v) {
-            this.i.g3 = +v;
-            this._a("pixelScalingRatio", this.i.g3);
+            this.i.hu = +v;
+            this._a("pixelScalingRatio", this.i.hu);
         }
         /**
          * Method of pixel scaling to use during end user interaction with the chart.
         */
         get interactionPixelScalingRatio() {
-            return this.i.g1;
+            return this.i.hs;
         }
         set interactionPixelScalingRatio(v) {
-            this.i.g1 = +v;
-            this._a("interactionPixelScalingRatio", this.i.g1);
+            this.i.hs = +v;
+            this._a("interactionPixelScalingRatio", this.i.hs);
         }
         /**
          * Gets the resolved pixel scaling ratio.
@@ -1406,11 +1557,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get actualPixelScalingRatio() {
-            return this.i.gi;
+            return this.i.g9;
         }
         set actualPixelScalingRatio(v) {
-            this.i.gi = +v;
-            this._a("actualPixelScalingRatio", this.i.gi);
+            this.i.g9 = +v;
+            this._a("actualPixelScalingRatio", this.i.g9);
         }
         /**
          * Resolved method of pixel scaling to use during end user interaction with the chart.
@@ -1420,31 +1571,31 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get actualInteractionPixelScalingRatio() {
-            return this.i.gh;
+            return this.i.g8;
         }
         set actualInteractionPixelScalingRatio(v) {
-            this.i.gh = +v;
-            this._a("actualInteractionPixelScalingRatio", this.i.gh);
+            this.i.g8 = +v;
+            this._a("actualInteractionPixelScalingRatio", this.i.g8);
         }
         /**
-         * Gets or sets a whether the chart should pan its content when zooing in passed max zoom level.
+         * Gets or sets a whether the chart should pan its content when zooming in passed max zoom level.
         */
         get shouldPanOnMaximumZoom() {
-            return this.i.fd;
+            return this.i.fy;
         }
         set shouldPanOnMaximumZoom(v) {
-            this.i.fd = ensureBool(v);
-            this._a("shouldPanOnMaximumZoom", this.i.fd);
+            this.i.fy = ensureBool(v);
+            this._a("shouldPanOnMaximumZoom", this.i.fy);
         }
         /**
          * Gets the actual value of the window rectangle, which represents the current zoom level.
         */
         get actualWindowRect() {
-            return fromRect(this.i.tr);
+            return fromRect(this.i.vh);
         }
         set actualWindowRect(v) {
-            this.i.tr = toRect(v);
-            this._a("actualWindowRect", rectToString(this.i.tr));
+            this.i.vh = toRect(v);
+            this._a("actualWindowRect", rectToString(this.i.vh));
         }
         /**
          * A number between 0 and 1 determining the position of the horizontal scroll.
@@ -1455,11 +1606,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get actualWindowPositionHorizontal() {
-            return this.i.gj;
+            return this.i.ha;
         }
         set actualWindowPositionHorizontal(v) {
-            this.i.gj = +v;
-            this._a("actualWindowPositionHorizontal", this.i.gj);
+            this.i.ha = +v;
+            this._a("actualWindowPositionHorizontal", this.i.ha);
         }
         /**
          * A number between 0 and 1 determining the position of the vertical scroll.
@@ -1471,11 +1622,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get actualWindowPositionVertical() {
-            return this.i.gk;
+            return this.i.hb;
         }
         set actualWindowPositionVertical(v) {
-            this.i.gk = +v;
-            this._a("actualWindowPositionVertical", this.i.gk);
+            this.i.hb = +v;
+            this._a("actualWindowPositionVertical", this.i.hb);
         }
         get isDetached() {
             return this.i.isDetached;
@@ -1492,6 +1643,12 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             if (this.legend && this.legend.name && this.legend.name == name) {
                 return this.legend;
             }
+            if (this.selectedSeriesItems != null && this.selectedSeriesItems.findByName && this.selectedSeriesItems.findByName(name)) {
+                return this.selectedSeriesItems.findByName(name);
+            }
+            if (this.focusedSeriesItems != null && this.focusedSeriesItems.findByName && this.focusedSeriesItems.findByName(name)) {
+                return this.focusedSeriesItems.findByName(name);
+            }
             return null;
         }
         get hasUserValues() {
@@ -1572,10 +1729,10 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         hideToolTip() {
-            this.i.mb();
+            this.i.nh();
         }
         simulateHover(point) {
-            this.i.pg(toPoint(point));
+            this.i.qy(toPoint(point));
         }
         queueForAnimationIdle(action, version) {
             this.i.queueForAnimationIdle(action, version);
@@ -1593,45 +1750,45 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         
         */
         startTiledZoomingIfNecessary() {
-            this.i.pi();
+            this.i.q0();
         }
         /**
          * Manually ends a tiled zoom if one is running.
         
         */
         endTiledZoomingIfRunning() {
-            this.i.l5();
+            this.i.m5();
         }
         /**
          * Clears the tile zoom tile cache so that new tiles will be generated. Only applies if the viewer is using a tile based zoom.
         
         */
         clearTileZoomCache() {
-            this.i.lz();
+            this.i.mz();
         }
         /**
          * Performs zoom in action on the chart by specified percentage of current window rect
         
         */
         zoomIn(percentage) {
-            this.i.p0(percentage);
+            this.i.rh(percentage);
         }
         /**
          * Performs zoom out action on the chart by specified percentage of current window rect
         
         */
         zoomOut(percentage) {
-            this.i.p1(percentage);
+            this.i.ri(percentage);
         }
         /**
          * Resets the zoom level to default.
         
         */
         resetZoom() {
-            this.i.pa();
+            this.i.qq();
         }
         cancelManipulation() {
-            this.i.lu();
+            this.i.mu();
         }
         /**
          * Gets actual window scale for horizontal dimension of the control
@@ -1642,7 +1799,7 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         getActualWindowScaleHorizontal() {
-            let iv = this.i.gs();
+            let iv = this.i.hj();
             return (iv);
         }
         /**
@@ -1654,7 +1811,7 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         getActualWindowScaleVertical() {
-            let iv = this.i.gt();
+            let iv = this.i.hk();
             return (iv);
         }
         /**
@@ -1670,10 +1827,10 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * @param s  * The series to attach to the chart.
         */
         attachSeries(s) {
-            this.i.ls((s == null ? null : s.i));
+            this.i.ms((s == null ? null : s.i));
         }
         notifySetItem(source_, index, oldItem, newItem) {
-            this.i.mu(source_, index, oldItem, newItem);
+            this.i.n0(source_, index, oldItem, newItem);
         }
         /**
          * Used to manually notify the SeriesViewer that the data source has reset or cleared its items.  Invoking this method is only necessary if that datasource is not observable.
@@ -1685,13 +1842,13 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
         * ```
         */
         notifyClearItems(source_) {
-            this.i.ml(source_);
+            this.i.nr(source_);
         }
         notifyInsertItem(source_, index, newItem) {
-            this.i.ms(source_, index, newItem);
+            this.i.ny(source_, index, newItem);
         }
         notifyRemoveItem(source_, index, oldItem) {
-            this.i.mt(source_, index, oldItem);
+            this.i.nz(source_, index, oldItem);
         }
         /**
          * Release any resources held by the control.
@@ -1701,11 +1858,11 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this.i.destroy();
         }
         getCurrentActualWindowRect() {
-            let iv = this.i.tx();
+            let iv = this.i.vn();
             return fromRect(iv);
         }
         renderToImage(width, height) {
-            let iv = this.i.h5(width, height);
+            let iv = this.i.i0(width, height);
             return (iv);
         }
         /**
@@ -1722,7 +1879,7 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this.i.flush();
         }
         captureImage(settings) {
-            this.i.lv((settings == null ? null : settings.i));
+            this.i.mv((settings == null ? null : settings.i));
         }
         /**
          * Occurs when the left mouse button is pressed while the mouse pointer is over the plot area.
@@ -1989,6 +2146,32 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this.i.seriesMouseLeftButtonUp = delegateCombine(this.i.seriesMouseLeftButtonUp, this._seriesMouseLeftButtonUp_wrapped);
             ;
         }
+        /**
+         * Occurs when the left mouse button is released while the mouse pointer is over a Series.
+        */
+        get seriesClick() {
+            return this._seriesClick;
+        }
+        set seriesClick(ev) {
+            if (this._seriesClick_wrapped !== null) {
+                this.i.seriesClick = delegateRemove(this.i.seriesClick, this._seriesClick_wrapped);
+                this._seriesClick_wrapped = null;
+                this._seriesClick = null;
+            }
+            this._seriesClick = ev;
+            this._seriesClick_wrapped = (o, e) => {
+                let outerArgs = new IgcDataChartMouseButtonEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeSeriesClick) {
+                    this.beforeSeriesClick(this, outerArgs);
+                }
+                if (this._seriesClick) {
+                    this._seriesClick(this, outerArgs);
+                }
+            };
+            this.i.seriesClick = delegateCombine(this.i.seriesClick, this._seriesClick_wrapped);
+            ;
+        }
         /**
          * Occurs when the mouse pointer moves while over a Series.
         *
@@ -2283,6 +2466,58 @@ export let IgcSeriesViewerComponent = /*@__PURE__*/ (() => {
             this.i.gridAreaRectChanged = delegateCombine(this.i.gridAreaRectChanged, this._gridAreaRectChanged_wrapped);
             ;
         }
+        /**
+         * Raised when the SelectedItems collection has changed.
+        */
+        get selectedSeriesItemsChanged() {
+            return this._selectedSeriesItemsChanged;
+        }
+        set selectedSeriesItemsChanged(ev) {
+            if (this._selectedSeriesItemsChanged_wrapped !== null) {
+                this.i.selectedSeriesItemsChanged = delegateRemove(this.i.selectedSeriesItemsChanged, this._selectedSeriesItemsChanged_wrapped);
+                this._selectedSeriesItemsChanged_wrapped = null;
+                this._selectedSeriesItemsChanged = null;
+            }
+            this._selectedSeriesItemsChanged = ev;
+            this._selectedSeriesItemsChanged_wrapped = (o, e) => {
+                let outerArgs = new IgcSeriesViewerSelectedSeriesItemsChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeSelectedSeriesItemsChanged) {
+                    this.beforeSelectedSeriesItemsChanged(this, outerArgs);
+                }
+                if (this._selectedSeriesItemsChanged) {
+                    this._selectedSeriesItemsChanged(this, outerArgs);
+                }
+            };
+            this.i.selectedSeriesItemsChanged = delegateCombine(this.i.selectedSeriesItemsChanged, this._selectedSeriesItemsChanged_wrapped);
+            ;
+        }
+        /**
+         * Raised when the SelectedItems collection has changed.
+        */
+        get focusedSeriesItemsChanged() {
+            return this._focusedSeriesItemsChanged;
+        }
+        set focusedSeriesItemsChanged(ev) {
+            if (this._focusedSeriesItemsChanged_wrapped !== null) {
+                this.i.focusedSeriesItemsChanged = delegateRemove(this.i.focusedSeriesItemsChanged, this._focusedSeriesItemsChanged_wrapped);
+                this._focusedSeriesItemsChanged_wrapped = null;
+                this._focusedSeriesItemsChanged = null;
+            }
+            this._focusedSeriesItemsChanged = ev;
+            this._focusedSeriesItemsChanged_wrapped = (o, e) => {
+                let outerArgs = new IgcSeriesViewerSelectedSeriesItemsChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeFocusedSeriesItemsChanged) {
+                    this.beforeFocusedSeriesItemsChanged(this, outerArgs);
+                }
+                if (this._focusedSeriesItemsChanged) {
+                    this._focusedSeriesItemsChanged(this, outerArgs);
+                }
+            };
+            this.i.focusedSeriesItemsChanged = delegateCombine(this.i.focusedSeriesItemsChanged, this._focusedSeriesItemsChanged_wrapped);
+            ;
+        }
         /**
          * Raised when the SeriesViewer's processing for an update has completed.
         */