igniteui-webcomponents-dashboards 5.1.1-beta.0

package/esm2015/lib/igc-dashboard-tile-component.js

@@ -0,0 +1,1147 @@
+import { DashboardTile } from "./DashboardTile";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, fromBrushCollection, toBrushCollection, brushCollectionToString, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
+import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
+import { TypeRegistrar } from "igniteui-webcomponents-core";
+import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { IgcDashboardTileFilterStringErrorsParsingEventArgs } from "./igc-dashboard-tile-filter-string-errors-parsing-event-args";
+import { DashboardTileVisualizationType_$type } from "./DashboardTileVisualizationType";
+import { CrosshairsDisplayMode_$type } from "igniteui-webcomponents-charts";
+import { IgcValueModeCollection } from "igniteui-webcomponents-charts";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
+import { ValueLayerValueMode_$type } from "igniteui-webcomponents-charts";
+import { ValueModeCollection as ValueModeCollection_internal } from "igniteui-webcomponents-charts";
+import { IgcChartSelectedItemCollection } from "igniteui-webcomponents-charts";
+import { ChartSelectedItemCollection as ChartSelectedItemCollection_internal } from "igniteui-webcomponents-charts";
+import { ChartSelection } from "igniteui-webcomponents-charts";
+import { SeriesHighlightedValuesDisplayMode_$type } from "igniteui-webcomponents-core";
+import { TrendLineType_$type } from "igniteui-webcomponents-core";
+import { IgcDashboardTileSummaryDescriptionCollection } from "./igc-dashboard-tile-summary-description-collection";
+import { IgcFilterExpressionCollection } from "igniteui-webcomponents-core";
+import { IgcDashboardTileSortDescriptionCollection } from "./igc-dashboard-tile-sort-description-collection";
+import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
+import { IgcDashboardTileCustomizationCollection } from "./igc-dashboard-tile-customization-collection";
+import { IgcDashboardTileChangingContentEventArgs } from "./igc-dashboard-tile-changing-content-event-args";
+export let IgcDashboardTileComponent = /*@__PURE__*/ (() => {
+    class IgcDashboardTileComponent extends IgcHTMLElement {
+        set height(value) {
+            this._height = value;
+            this.style.height = value;
+            this.notifyContainerResized();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this.style.width = value;
+            this.notifyContainerResized();
+        }
+        get width() {
+            return this._width;
+        }
+        notifyContainerResized() {
+            this.i.notifyContainerResized();
+        }
+        constructor() {
+            super();
+            this._disconnected = false;
+            this._settingAttributes = false;
+            this._attached = false;
+            this._queuedSetAttributes = [];
+            this._updatingFromAttribute = false;
+            this._customizations = null;
+            this._selectedSeriesItems = null;
+            this._valueLines = null;
+            this.__p = null;
+            this._hasUserValues = new Set();
+            this._stylingContainer = null;
+            this._stylingParent = null;
+            this._inStyling = false;
+            this._changingContent = null;
+            this._changingContent_wrapped = null;
+            this._filterStringErrorsParsing = null;
+            this._filterStringErrorsParsing_wrapped = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+            this._portalManager = new PortalManager("DashboardTileContent");
+            this._renderer = new WebComponentRenderer(this, document, true, {}, this._portalManager);
+            this._container = this._renderer.createElement("div");
+            this._renderer.updateRoot(this._container);
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this._container.setStyleProperty("width", "100%");
+            this._container.setStyleProperty("height", "100%");
+            var root;
+            root = this._container;
+            if (this._container.getNativeElement() != null) {
+                root = this._container.getNativeElement();
+            }
+            this._wrapper = this._renderer;
+            var DashboardTile = this.i;
+            this._DashboardTile = DashboardTile;
+            DashboardTile.provideContainer(this._renderer);
+            this._onChildrenChanged();
+            //Checkbox.notifySizeChanged();
+            let mut = new MutationObserver((list) => {
+                for (var mutation of list) {
+                    if (mutation.type == 'childList') {
+                        this._onChildrenChanged();
+                    }
+                }
+            });
+            mut.observe(this, {
+                childList: true
+            });
+            //this._renderer.addSizeWatcher(() => {
+            //    this._checkbox.notifySizeChanged();
+            //});
+        }
+        _onChildrenChanged() {
+            var children = [];
+            for (var i = 0; i < this.childNodes.length; i++) {
+                var child = this.childNodes[i];
+                if (child !== this._container.getNativeElement()) {
+                    children.push(child);
+                }
+            }
+            this._portalManager.onChildrenChanged(children);
+        }
+        // supports angular themes or custom properties set in CSS
+        updateStyle() {
+            this._styling(this, this);
+        }
+        destroy() {
+            this._DashboardTile.destroy();
+            this._wrapper.destroy();
+        }
+        createImplementation() {
+            return new DashboardTile();
+        }
+        disconnectedCallback() {
+            this._disconnected = true;
+            if (this.i) {
+                this.i.onDetachedFromUI();
+            }
+        }
+        connectedCallback() {
+            if (this._disconnected) {
+                this._disconnected = false;
+                if (this.i) {
+                    this.i.onAttachedToUI();
+                }
+                return;
+            }
+            this.classList.add("ig-dashboard-tile");
+            this.classList.add("igc-dashboard-tile");
+            this.appendChild(this._container.getNativeElement());
+            this._attached = true;
+            this.style.display = "block";
+            //this.style.height = this._height;
+            //this.style.width = this._width;
+            this._flushQueuedAttributes();
+            // supports themes or custom properties set in CSS 
+            this._styling(this, this);
+            this.afterContentInit();
+        }
+        afterContentInit() {
+            //this.i.notifySizeChanged();
+        }
+        /**
+         * @hidden
+         */
+        get i() {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */
+        static _createFromInternal(internal) {
+            if (!internal) {
+                return null;
+            }
+            if (!internal.$type) {
+                return null;
+            }
+            let name = internal.$type.name;
+            let externalName = "Igc" + name + "Component";
+            if (!TypeRegistrar.isRegistered(externalName)) {
+                return null;
+            }
+            return TypeRegistrar.create(externalName);
+        }
+        _enqueueSetAttribute(attrName, attrValue) {
+            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+        }
+        _flushQueuedAttributes() {
+            this._settingAttributes = true;
+            for (let i = 0; i < this._queuedSetAttributes.length; i++) {
+                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+            }
+            this._settingAttributes = false;
+            this._queuedSetAttributes.length = 0;
+        }
+        _a(attrName, attrValue) {
+            if (this._updatingFromAttribute) {
+                return;
+            }
+            if (attrValue) {
+                attrValue = attrValue.toString();
+            }
+            this._settingAttributes = true;
+            attrName = toSpinal(attrName);
+            if (this._attached) {
+                this.setAttribute(attrName, attrValue);
+            }
+            else {
+                this._enqueueSetAttribute(attrName, attrValue);
+            }
+            this._settingAttributes = false;
+        }
+        static get observedAttributes() {
+            if (IgcDashboardTileComponent._observedAttributesIgcDashboardTileComponent == null) {
+                let names = getAllPropertyNames(IgcDashboardTileComponent);
+                for (let i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
+                }
+                IgcDashboardTileComponent._observedAttributesIgcDashboardTileComponent = names;
+            }
+            return IgcDashboardTileComponent._observedAttributesIgcDashboardTileComponent;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
+            }
+            let setName = fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
+        }
+        static register() {
+            if (!IgcDashboardTileComponent._isElementRegistered) {
+                IgcDashboardTileComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcDashboardTileComponent.htmlTagName, IgcDashboardTileComponent);
+            }
+        }
+        get actualCustomizations() {
+            if (!this._actualCustomizations) {
+                this._actualCustomizations = [];
+            }
+            return this._actualCustomizations;
+        }
+        get contentCustomizations() {
+            if (!this._contentCustomizations) {
+                this._contentCustomizations = [];
+            }
+            return this._contentCustomizations;
+        }
+        /**
+         * Gets a collection where you can add customization that will be applied to the generated visualizations.
+        */
+        get customizations() {
+            if (this._customizations === null) {
+                let coll = new IgcDashboardTileCustomizationCollection();
+                let inner = coll._innerColl;
+                this._customizations = coll;
+                inner.addListener((sender, e) => {
+                    switch (e.action) {
+                        case NotifyCollectionChangedAction.Add:
+                            this._customizationsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Remove:
+                            this._customizationsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            break;
+                        case NotifyCollectionChangedAction.Replace:
+                            this._customizationsAdapter.removeManualItemAt(e.oldStartingIndex);
+                            this._customizationsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
+                            break;
+                        case NotifyCollectionChangedAction.Reset:
+                            this._customizationsAdapter.clearManualItems();
+                            break;
+                    }
+                });
+                ;
+            }
+            return this._customizations;
+        }
+        /**
+         * Gets or sets text to display above the plot area.
+        */
+        get tileTitle() {
+            return this.i.ge;
+        }
+        set tileTitle(v) {
+            this.i.ge = v;
+        }
+        /**
+         * Gets the initial sorts that are applied to the chart.
+        */
+        get initialSortDescriptions() {
+            const r = this.i.aw;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the initial sorts that are applied to the chart after groupings and summaries are applied.
+        */
+        get initialGroupSortDescriptions() {
+            const r = this.i.av;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the initial groupings that are applied to the chart.
+        */
+        get initialGroupDescriptions() {
+            const r = this.i.au;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the initial filters that are applied to the chart.
+        */
+        get initialFilterExpressions() {
+            const r = this.i.bj;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcFilterExpressionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the initial highlight filters that are applied to the chart.
+        */
+        get initialHighlightFilterExpressions() {
+            const r = this.i.bk;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcFilterExpressionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the initial summaries that are applied to the chart.
+        */
+        get initialSummaryDescriptions() {
+            const r = this.i.a0;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSummaryDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets or sets the sorts to apply to the chart. This property will become ignored if sorts are changed outside of this property.
+        */
+        get initialSorts() {
+            return this.i.f2;
+        }
+        set initialSorts(v) {
+            this.i.f2 = v;
+        }
+        /**
+         * Gets or sets the sorts to apply after grouping has been applied.
+        */
+        get groupSorts() {
+            return this.i.fr;
+        }
+        set groupSorts(v) {
+            this.i.fr = v;
+        }
+        /**
+         * Gets or sets the groupings to apply to the chart. This property will become ignored if sorts are changed outside of this property.
+        */
+        get initialGroups() {
+            return this.i.fy;
+        }
+        set initialGroups(v) {
+            this.i.fy = v;
+        }
+        /**
+         * Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
+        */
+        get initialFilter() {
+            return this.i.fw;
+        }
+        set initialFilter(v) {
+            this.i.fw = v;
+        }
+        /**
+         * Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.
+        */
+        get initialHighlightFilter() {
+            return this.i.f0;
+        }
+        set initialHighlightFilter(v) {
+            this.i.f0 = v;
+        }
+        /**
+         * Gets or sets the summaries to apply to the chart. This property will become ignored if sorts are changed outside of this property.
+        */
+        get initialSummaries() {
+            return this.i.f4;
+        }
+        set initialSummaries(v) {
+            this.i.f4 = v;
+        }
+        /**
+         * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get sortDescriptions() {
+            const r = this.i.ax;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        get groupSortDescriptions() {
+            const r = this.i.at;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get groupDescriptions() {
+            const r = this.i.as;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current filter that is applied to the chart. Collection can be updated to modify the filter for the chart. Once filter expressions are in this collection, the chart will no longer listen for changes on their properties.
+        */
+        get filterExpressions() {
+            const r = this.i.bh;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcFilterExpressionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current highlight filter that is applied to the chart. Collection can be updated to modify the highlight filter for the chart. Once filter expressions are in this collection, the chart will no longer listen for changes on their properties.
+        */
+        get highlightFilterExpressions() {
+            const r = this.i.bi;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcFilterExpressionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current summaries that are applied to the grid.
+        */
+        get summaryDescriptions() {
+            const r = this.i.a1;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgcDashboardTileSummaryDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets or sets a collection of data items used to generate the dashboard tile.
+         * The ItemsSource of this dashboard tile can be a list of objects containing one or more numeric properties.
+         * Additionally, if the objects in the list implement an enumerable interface,
+         * the dashboard tile will attempt to delve into the sub-collections when reading through the data source.
+         * Data binding can be further configured by attributing the data item classes
+         * with the data intent feature.
+        */
+        get dataSource() {
+            return this.i.itemsSource;
+        }
+        set dataSource(v) {
+            this.i.itemsSource = v;
+        }
+        /**
+         * Gets or sets a collection of data items used to generate the dashboard tile.
+         * The HighlightedItemsSource of this dashboard tile can be a list of objects containing one or more numeric properties.
+         * Additionally, if the objects in the list implement an enumerable interface,
+         * the dashboard tile will attempt to delve into the sub-collections when reading through the data source.
+         * Data binding can be further configured by attributing the data item classes
+         * with the data intent feature.
+        */
+        get highlightedDataSource() {
+            return this.i.highlightedItemsSource;
+        }
+        set highlightedDataSource(v) {
+            this.i.highlightedItemsSource = v;
+        }
+        /**
+         * Gets or sets whether the dashboard tile should display mock data when the data source has not been provided, if supported for this type of chart.
+        */
+        get shouldDisplayMockData() {
+            return this.i.de;
+        }
+        set shouldDisplayMockData(v) {
+            this.i.de = ensureBool(v);
+            this._a("shouldDisplayMockData", this.i.de);
+        }
+        /**
+         * Gets or sets whether annotations for the final value of each series is displayed on the axis.
+        */
+        get shouldAvoidAxisAnnotationCollisions() {
+            return this.i.shouldAvoidAxisAnnotationCollisions;
+        }
+        set shouldAvoidAxisAnnotationCollisions(v) {
+            this.i.shouldAvoidAxisAnnotationCollisions = ensureBool(v);
+            this._a("shouldAvoidAxisAnnotationCollisions", this.i.shouldAvoidAxisAnnotationCollisions);
+        }
+        /**
+         * Gets or sets the formula used for calculating trend lines in this chart.
+         * This property applies only to these chart types: point, line, spline, and bubble
+        */
+        get trendLineType() {
+            return this.i.trendLineType;
+        }
+        set trendLineType(v) {
+            this.i.trendLineType = ensureEnum(TrendLineType_$type, v);
+            this._a("trendLineType", enumToString(TrendLineType_$type, this.i.trendLineType));
+        }
+        /**
+         * Gets or sets whether the dashboard tile should use a faded skeleton style for mock data.
+        */
+        get shouldUseSkeletonStyleForMockData() {
+            return this.i.df;
+        }
+        set shouldUseSkeletonStyleForMockData(v) {
+            this.i.df = ensureBool(v);
+            this._a("shouldUseSkeletonStyleForMockData", this.i.df);
+        }
+        /**
+         * Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.
+         * This property applies to Category Chart and Financial Chart controls.
+        */
+        get highlightedValuesDisplayMode() {
+            return this.i.af;
+        }
+        set highlightedValuesDisplayMode(v) {
+            this.i.af = ensureEnum(SeriesHighlightedValuesDisplayMode_$type, v);
+            this._a("highlightedValuesDisplayMode", enumToString(SeriesHighlightedValuesDisplayMode_$type, this.i.af));
+        }
+        /**
+         * Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.
+        */
+        get includedProperties() {
+            return this.i.includedProperties;
+        }
+        set includedProperties(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.includedProperties = v;
+        }
+        /**
+         * Gets the current set of valid visualization types for the data.
+        */
+        get validVisualizationTypes() {
+            return this.i.m;
+        }
+        set validVisualizationTypes(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.m = v;
+        }
+        /**
+         * Gets or sets a set of property paths that should be excluded from consideration by the category chart.
+        */
+        get excludedProperties() {
+            return this.i.excludedProperties;
+        }
+        set excludedProperties(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.excludedProperties = v;
+        }
+        /**
+         * Gets or sets the palette of brushes to use for coloring the dashboard tile.
+         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
+        */
+        get brushes() {
+            return fromBrushCollection(this.i.v);
+        }
+        set brushes(v) {
+            this.i.v = toBrushCollection(v);
+            this._a("brushes", brushCollectionToString(this.i.v));
+        }
+        /**
+         * Gets or sets the palette of brushes to use for outlines on the dashboard tile.
+         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
+        */
+        get outlines() {
+            return fromBrushCollection(this.i.w);
+        }
+        set outlines(v) {
+            this.i.w = toBrushCollection(v);
+            this._a("outlines", brushCollectionToString(this.i.w));
+        }
+        /**
+         * 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 actual palette of brushes to use for coloring the chart series.
+        */
+        get actualBrushes() {
+            return fromBrushCollection(this.i.t);
+        }
+        set actualBrushes(v) {
+            this.i.t = toBrushCollection(v);
+            this._a("actualBrushes", brushCollectionToString(this.i.t));
+        }
+        /**
+         * Gets the actual palette of brushes to use for outlines on the chart series.
+        */
+        get actualOutlines() {
+            return fromBrushCollection(this.i.u);
+        }
+        set actualOutlines(v) {
+            this.i.u = toBrushCollection(v);
+            this._a("actualOutlines", brushCollectionToString(this.i.u));
+        }
+        /**
+         * Gets the brush to use for the Category axis major strokes, if applicable.
+        */
+        get categoryAxisMajorStroke() {
+            return brushToString(this.i.h9);
+        }
+        set categoryAxisMajorStroke(v) {
+            this.i.h9 = stringToBrush(v);
+            this._a("categoryAxisMajorStroke", brushToString(this.i.h9));
+        }
+        /**
+         * Gets or sets what value lines to use in the chart.
+        */
+        get valueLines() {
+            if (this._valueLines === null) {
+                let coll = new IgcValueModeCollection();
+                let innerColl = this.i.valueLines;
+                if (!innerColl) {
+                    innerColl = new ValueModeCollection_internal();
+                }
+                this._valueLines = coll._fromInner(innerColl);
+                this.i.valueLines = innerColl;
+            }
+            return this._valueLines;
+        }
+        set valueLines(v) {
+            if (this._valueLines !== null) {
+                this._valueLines._setSyncTarget(null);
+                this._valueLines = null;
+            }
+            let coll = new IgcValueModeCollection();
+            this._valueLines = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(ValueLayerValueMode_$type);
+            let innerColl = this.i.valueLines;
+            if (!innerColl) {
+                innerColl = new ValueModeCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._valueLines._setSyncTarget(syncColl);
+            this.i.valueLines = innerColl;
+        }
+        /**
+         * Gets or sets the palette of brushes to use for coloring the value lines present in the ValueLines property.
+         * The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection
+        */
+        get valueLinesBrushes() {
+            return fromBrushCollection(this.i.valueLinesBrushes);
+        }
+        set valueLinesBrushes(v) {
+            this.i.valueLinesBrushes = toBrushCollection(v);
+            this._a("valueLinesBrushes", brushCollectionToString(this.i.valueLinesBrushes));
+        }
+        /**
+         * Gets or sets if the auto value callouts should be displayed.
+        */
+        get autoCalloutsVisible() {
+            return this.i.autoCalloutsVisible;
+        }
+        set autoCalloutsVisible(v) {
+            this.i.autoCalloutsVisible = ensureBool(v);
+            this._a("autoCalloutsVisible", this.i.autoCalloutsVisible);
+        }
+        /**
+         * Gets or sets whether annotations are shown along the axis for crosshair values
+        */
+        get crosshairsAnnotationEnabled() {
+            return this.i.crosshairsAnnotationEnabled;
+        }
+        set crosshairsAnnotationEnabled(v) {
+            this.i.crosshairsAnnotationEnabled = ensureBool(v);
+            this._a("crosshairsAnnotationEnabled", this.i.crosshairsAnnotationEnabled);
+        }
+        /**
+         * Gets or sets whether annotations for the final value of each series is displayed on the axis.
+        */
+        get finalValueAnnotationsVisible() {
+            return this.i.finalValueAnnotationsVisible;
+        }
+        set finalValueAnnotationsVisible(v) {
+            this.i.finalValueAnnotationsVisible = ensureBool(v);
+            this._a("finalValueAnnotationsVisible", this.i.finalValueAnnotationsVisible);
+        }
+        /**
+         * Gets or sets the crosshairs to be displayed.
+        */
+        get crosshairsDisplayMode() {
+            return this.i.crosshairsDisplayMode;
+        }
+        set crosshairsDisplayMode(v) {
+            this.i.crosshairsDisplayMode = ensureEnum(CrosshairsDisplayMode_$type, v);
+            this._a("crosshairsDisplayMode", enumToString(CrosshairsDisplayMode_$type, this.i.crosshairsDisplayMode));
+        }
+        /**
+         * Gets or sets the crosshairs to be displayed.
+        */
+        get visualizationType() {
+            return this.i.a6;
+        }
+        set visualizationType(v) {
+            this.i.a6 = ensureEnum(DashboardTileVisualizationType_$type, v);
+            this._a("visualizationType", enumToString(DashboardTileVisualizationType_$type, this.i.a6));
+        }
+        /**
+         * Gets or sets the crosshairs to be displayed.
+        */
+        get validVisualizationTypePriorityThreshold() {
+            return this.i.d7;
+        }
+        set validVisualizationTypePriorityThreshold(v) {
+            this.i.d7 = +v;
+            this._a("validVisualizationTypePriorityThreshold", this.i.d7);
+        }
+        /**
+         * Gets or sets the base built in theme to use for the checkbox.
+        */
+        get baseTheme() {
+            return this.i.bt;
+        }
+        set baseTheme(v) {
+            this.i.bt = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.bt));
+        }
+        /**
+         * Gets or sets the display density to use for the toolbar.
+        */
+        get density() {
+            return this.i.bv;
+        }
+        set density(v) {
+            this.i.bv = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.bv));
+        }
+        /**
+         * Gets or sets the color to use for the background of the component.
+        */
+        get backgroundColor() {
+            return brushToString(this.i.h8);
+        }
+        set backgroundColor(v) {
+            this.i.h8 = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.h8));
+        }
+        get isVisTypeStacked() {
+            return this.i.c9;
+        }
+        get isVisTypeRadial() {
+            return this.i.c8;
+        }
+        findByName(name) {
+            if (this.findEphemera) {
+                if (name && name.indexOf("@@e:") == 0) {
+                    return this.findEphemera(name);
+                }
+            }
+            if (this.customizations != null && this.customizations.findByName && this.customizations.findByName(name)) {
+                return this.customizations.findByName(name);
+            }
+            if (this.initialSortDescriptions != null && this.initialSortDescriptions.findByName && this.initialSortDescriptions.findByName(name)) {
+                return this.initialSortDescriptions.findByName(name);
+            }
+            if (this.initialGroupSortDescriptions != null && this.initialGroupSortDescriptions.findByName && this.initialGroupSortDescriptions.findByName(name)) {
+                return this.initialGroupSortDescriptions.findByName(name);
+            }
+            if (this.initialGroupDescriptions != null && this.initialGroupDescriptions.findByName && this.initialGroupDescriptions.findByName(name)) {
+                return this.initialGroupDescriptions.findByName(name);
+            }
+            if (this.initialFilterExpressions != null && this.initialFilterExpressions.findByName && this.initialFilterExpressions.findByName(name)) {
+                return this.initialFilterExpressions.findByName(name);
+            }
+            if (this.initialHighlightFilterExpressions != null && this.initialHighlightFilterExpressions.findByName && this.initialHighlightFilterExpressions.findByName(name)) {
+                return this.initialHighlightFilterExpressions.findByName(name);
+            }
+            if (this.initialSummaryDescriptions != null && this.initialSummaryDescriptions.findByName && this.initialSummaryDescriptions.findByName(name)) {
+                return this.initialSummaryDescriptions.findByName(name);
+            }
+            if (this.sortDescriptions != null && this.sortDescriptions.findByName && this.sortDescriptions.findByName(name)) {
+                return this.sortDescriptions.findByName(name);
+            }
+            if (this.groupSortDescriptions != null && this.groupSortDescriptions.findByName && this.groupSortDescriptions.findByName(name)) {
+                return this.groupSortDescriptions.findByName(name);
+            }
+            if (this.groupDescriptions != null && this.groupDescriptions.findByName && this.groupDescriptions.findByName(name)) {
+                return this.groupDescriptions.findByName(name);
+            }
+            if (this.filterExpressions != null && this.filterExpressions.findByName && this.filterExpressions.findByName(name)) {
+                return this.filterExpressions.findByName(name);
+            }
+            if (this.highlightFilterExpressions != null && this.highlightFilterExpressions.findByName && this.highlightFilterExpressions.findByName(name)) {
+                return this.highlightFilterExpressions.findByName(name);
+            }
+            if (this.summaryDescriptions != null && this.summaryDescriptions.findByName && this.summaryDescriptions.findByName(name)) {
+                return this.summaryDescriptions.findByName(name);
+            }
+            if (this.selectedSeriesItems != null && this.selectedSeriesItems.findByName && this.selectedSeriesItems.findByName(name)) {
+                return this.selectedSeriesItems.findByName(name);
+            }
+            if (this.valueLines != null && this.valueLines.findByName && this.valueLines.findByName(name)) {
+                return this.valueLines.findByName(name);
+            }
+            return null;
+        }
+        get hasUserValues() {
+            return this._hasUserValues;
+        }
+        __m(propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        }
+        _styling(container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            let genericPrefix = "";
+            let typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = toSpinal("DashboardTileComponent");
+            let additionalPrefixes = [];
+            let prefix = toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            let b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                let basePrefix = toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                let parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                let parentPrefix = toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        }
+        updateSettingsValue(key, value) {
+            this.i.h2(key, value);
+        }
+        getSettingsValue(key) {
+            let iv = this.i.er(key);
+            return (iv);
+        }
+        hasModifiedSettings() {
+            let iv = this.i.ct();
+            return (iv);
+        }
+        clearSettings() {
+            this.i.gr();
+        }
+        removeSettingsValue(key) {
+            this.i.hr(key);
+        }
+        zoomIn(percentage) {
+            this.i.zoomIn(percentage);
+        }
+        /**
+         * Performs zoom out action on the chart by specified percentage of current window rect
+        
+        */
+        zoomOut(percentage) {
+            this.i.zoomOut(percentage);
+        }
+        /**
+         * Resets the zoom level to default.
+        
+        */
+        resetZoom() {
+            this.i.resetZoom();
+        }
+        onUIReady() {
+            this.i.hk();
+        }
+        getDesiredToolbarActions() {
+            let iv = this.i.getDesiredToolbarActions();
+            return (iv);
+        }
+        addCommandAvailabilityListener(listener) {
+            this.i.addCommandAvailabilityListener(listener);
+        }
+        removeCommandAvailabilityListener(listener) {
+            this.i.removeCommandAvailabilityListener(listener);
+        }
+        addCommandStateChangedListener(listener) {
+            this.i.addCommandStateChangedListener(listener);
+        }
+        removeCommandStateChangedListener(listener) {
+            this.i.removeCommandStateChangedListener(listener);
+        }
+        get changingContent() {
+            return this._changingContent;
+        }
+        set changingContent(ev) {
+            if (this._changingContent_wrapped !== null) {
+                this.i.changingContent = delegateRemove(this.i.changingContent, this._changingContent_wrapped);
+                this._changingContent_wrapped = null;
+                this._changingContent = null;
+            }
+            this._changingContent = ev;
+            this._changingContent_wrapped = (o, e) => {
+                let outerArgs = new IgcDashboardTileChangingContentEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeChangingContent) {
+                    this.beforeChangingContent(this, outerArgs);
+                }
+                if (this._changingContent) {
+                    this._changingContent(this, outerArgs);
+                }
+            };
+            this.i.changingContent = delegateCombine(this.i.changingContent, this._changingContent_wrapped);
+            ;
+        }
+        get filterStringErrorsParsing() {
+            return this._filterStringErrorsParsing;
+        }
+        set filterStringErrorsParsing(ev) {
+            if (this._filterStringErrorsParsing_wrapped !== null) {
+                this.i.filterStringErrorsParsing = delegateRemove(this.i.filterStringErrorsParsing, this._filterStringErrorsParsing_wrapped);
+                this._filterStringErrorsParsing_wrapped = null;
+                this._filterStringErrorsParsing = null;
+            }
+            this._filterStringErrorsParsing = ev;
+            this._filterStringErrorsParsing_wrapped = (o, e) => {
+                let outerArgs = new IgcDashboardTileFilterStringErrorsParsingEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeFilterStringErrorsParsing) {
+                    this.beforeFilterStringErrorsParsing(this, outerArgs);
+                }
+                if (this._filterStringErrorsParsing) {
+                    this._filterStringErrorsParsing(this, outerArgs);
+                }
+            };
+            this.i.filterStringErrorsParsing = delegateCombine(this.i.filterStringErrorsParsing, this._filterStringErrorsParsing_wrapped);
+            ;
+        }
+    }
+    IgcDashboardTileComponent._observedAttributesIgcDashboardTileComponent = null;
+    IgcDashboardTileComponent.htmlTagName = "igc-dashboard-tile";
+    IgcDashboardTileComponent._isElementRegistered = false;
+    return IgcDashboardTileComponent;
+})();