@progress/kendo-angular-charts 13.0.0-develop.4 → 13.0.0-develop.6

package/fesm2015/progress-kendo-angular-charts.mjs

@@ -18,6 +18,9 @@ import { PopupService, POPUP_CONTAINER, PopupModule } from '@progress/kendo-angu
 import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-intl';
+import { homeIcon } from '@progress/kendo-svg-icons';
+import * as i1$1 from '@progress/kendo-angular-navigation';
+import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
 
 const getTouch = (domEvent) => {
     return {
@@ -370,6 +373,7 @@ class CollectionItemComponent {
         this.configurationService = configurationService;
         this.collectionService = collectionService;
         this.options = {};
+        this.hidden = false;
         this.subscription = configurationService.onFastChange$.subscribe(store => {
             this.options = store;
             this.notify();
@@ -502,6 +506,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: [TemplateRef, { static: false }]
             }] } });
 
+/**
+ * Represents the series [template](link:site.data.urls.angular['templatesyntax'])
+ * within the `<kendo-chart-series-item>` component for creating nested
+ * [Drilldown](slug:drilldown_chart_charts) series.
+ *
+ * When the user clicks on a data point with drilldown data,
+ * the Chart will create a new series based on this template.
+ *
+ * The template context is passes through the following fields:
+ * - `drilldownValue`&mdash;The drilldown field value.
+ * - `point`&mdash;The series point to drill down to.
+ * - `series`&mdash;The series to drill down to.
+ */
+class SeriesDrilldownTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+SeriesDrilldownTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesDrilldownTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SeriesDrilldownTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SeriesDrilldownTemplateDirective, selector: "[kendoChartDrilldownSeries]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesDrilldownTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChartDrilldownSeries]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
 const toggle = (flag) => flag === undefined ? false : !flag;
 /**
  * The configuration component for a series item.
@@ -538,7 +573,7 @@ class SeriesItemComponent extends CollectionItemComponent {
     }
 }
 SeriesItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }], target: i0.ɵɵFactoryTarget.Component });
-SeriesItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: { aggregate: "aggregate", autoFit: "autoFit", axis: "axis", border: "border", categoryAxis: "categoryAxis", categoryField: "categoryField", closeField: "closeField", color: "color", colorField: "colorField", connectors: "connectors", currentField: "currentField", dashType: "dashType", data: "data", downColor: "downColor", downColorField: "downColorField", dynamicHeight: "dynamicHeight", dynamicSlope: "dynamicSlope", errorHighField: "errorHighField", errorLowField: "errorLowField", explodeField: "explodeField", field: "field", fromField: "fromField", gap: "gap", highField: "highField", holeSize: "holeSize", line: "line", lowField: "lowField", lowerField: "lowerField", margin: "margin", maxSize: "maxSize", mean: "mean", meanField: "meanField", median: "median", medianField: "medianField", minSize: "minSize", missingValues: "missingValues", name: "name", neckRatio: "neckRatio", negativeColor: "negativeColor", negativeValues: "negativeValues", noteTextField: "noteTextField", opacity: "opacity", openField: "openField", outliersField: "outliersField", overlay: "overlay", padding: "padding", q1Field: "q1Field", q3Field: "q3Field", segmentSpacing: "segmentSpacing", size: "size", sizeField: "sizeField", spacing: "spacing", stack: "stack", startAngle: "startAngle", style: "style", summaryField: "summaryField", target: "target", toField: "toField", type: "type", upperField: "upperField", visible: "visible", visibleInLegend: "visibleInLegend", visibleInLegendField: "visibleInLegendField", visual: "visual", width: "width", whiskers: "whiskers", xAxis: "xAxis", xErrorHighField: "xErrorHighField", xErrorLowField: "xErrorLowField", xField: "xField", yAxis: "yAxis", yErrorHighField: "yErrorHighField", yErrorLowField: "yErrorLowField", yField: "yField", zIndex: "zIndex", errorBars: "errorBars", extremes: "extremes", highlight: "highlight", labels: "labels", markers: "markers", notes: "notes", outliers: "outliers", tooltip: "tooltip" }, providers: [ConfigurationService], queries: [{ propertyName: "seriesTooltip", first: true, predicate: SeriesTooltipComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SeriesItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: { aggregate: "aggregate", autoFit: "autoFit", axis: "axis", border: "border", categoryAxis: "categoryAxis", categoryField: "categoryField", closeField: "closeField", color: "color", colorField: "colorField", connectors: "connectors", currentField: "currentField", dashType: "dashType", data: "data", downColor: "downColor", downColorField: "downColorField", drilldownField: "drilldownField", dynamicHeight: "dynamicHeight", dynamicSlope: "dynamicSlope", errorHighField: "errorHighField", errorLowField: "errorLowField", explodeField: "explodeField", field: "field", fromField: "fromField", gap: "gap", highField: "highField", holeSize: "holeSize", line: "line", lowField: "lowField", lowerField: "lowerField", margin: "margin", maxSize: "maxSize", mean: "mean", meanField: "meanField", median: "median", medianField: "medianField", minSize: "minSize", missingValues: "missingValues", name: "name", neckRatio: "neckRatio", negativeColor: "negativeColor", negativeValues: "negativeValues", noteTextField: "noteTextField", opacity: "opacity", openField: "openField", outliersField: "outliersField", overlay: "overlay", padding: "padding", q1Field: "q1Field", q3Field: "q3Field", segmentSpacing: "segmentSpacing", size: "size", sizeField: "sizeField", spacing: "spacing", stack: "stack", startAngle: "startAngle", style: "style", summaryField: "summaryField", target: "target", toField: "toField", type: "type", upperField: "upperField", visible: "visible", visibleInLegend: "visibleInLegend", visibleInLegendField: "visibleInLegendField", visual: "visual", width: "width", whiskers: "whiskers", xAxis: "xAxis", xErrorHighField: "xErrorHighField", xErrorLowField: "xErrorLowField", xField: "xField", yAxis: "yAxis", yErrorHighField: "yErrorHighField", yErrorLowField: "yErrorLowField", yField: "yField", zIndex: "zIndex", errorBars: "errorBars", extremes: "extremes", highlight: "highlight", labels: "labels", markers: "markers", notes: "notes", outliers: "outliers", tooltip: "tooltip" }, providers: [ConfigurationService], queries: [{ propertyName: "seriesTooltip", first: true, predicate: SeriesTooltipComponent, descendants: true }, { propertyName: "drilldownTemplate", first: true, predicate: SeriesDrilldownTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -577,6 +612,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], downColorField: [{
                 type: Input
+            }], drilldownField: [{
+                type: Input
             }], dynamicHeight: [{
                 type: Input
             }], dynamicSlope: [{
@@ -716,6 +753,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], seriesTooltip: [{
                 type: ContentChild,
                 args: [SeriesTooltipComponent, { static: false }]
+            }], drilldownTemplate: [{
+                type: ContentChild,
+                args: [SeriesDrilldownTemplateDirective, { static: false }]
             }] } });
 
 const POSITION_MODE = 'absolute';
@@ -1818,11 +1858,125 @@ const packageMetadata = {
     name: '@progress/kendo-angular-charts',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684849649,
-    version: '13.0.0-develop.4',
+    publishDate: 1685095066,
+    version: '13.0.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
+/**
+ * @hidden
+ */
+class CollectionComponent {
+    constructor(configKey, configurationService, collectionService) {
+        this.configKey = configKey;
+        this.configurationService = configurationService;
+        this.collectionService = collectionService;
+        this.items = [];
+        this.subscription = collectionService.onItemChange$.subscribe(changes => this.processChanges(changes));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    ngAfterContentInit() {
+        this.readItems();
+        this.children.changes.subscribe(() => this.readItems());
+    }
+    processChanges(changes) {
+        if (!this.children) {
+            return;
+        }
+        const index = this.children.toArray().filter(s => !s.hidden).indexOf(changes.sender);
+        if (index < 0) {
+            return;
+        }
+        this.items[index] = changes.options;
+        this.change();
+    }
+    readItems() {
+        this.items = this.children.filter(s => !s.hidden).map(s => s.options);
+        this.change();
+    }
+    change() {
+        this.configurationService.notify(new Change(this.configKey, this.items.length === 0 ? undefined : this.items));
+    }
+}
+CollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+CollectionComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CollectionComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CollectionComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }, { type: CollectionService }]; } });
+
+/**
+ * A collection of one or more series items.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-series>
+ *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+class SeriesComponent extends CollectionComponent {
+    constructor(configurationService, collectionService, tooltipTemplateService, viewContainer) {
+        super('series', configurationService, collectionService);
+        this.configurationService = configurationService;
+        this.collectionService = collectionService;
+        this.tooltipTemplateService = tooltipTemplateService;
+        this.viewContainer = viewContainer;
+    }
+    ngAfterContentChecked() {
+        this.readTooltipTemplates();
+    }
+    readTooltipTemplates() {
+        const templates = this.children.map((item) => item.seriesTooltipTemplateRef);
+        this.tooltipTemplateService.setSeriesTemplates(templates);
+    }
+}
+SeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: TooltipTemplateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+SeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SeriesComponent, selector: "kendo-chart-series", providers: [CollectionService], queries: [{ propertyName: "children", predicate: SeriesItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CollectionService],
+                    selector: 'kendo-chart-series',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }, { type: TooltipTemplateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [SeriesItemComponent, { descendants: true }]
+            }] } });
+
+/**
+ * Arguments for the `drilldown` event.
+ *
+ * See [Drilldown Charts](slug:drilldown_chart_charts).
+ */
+class DrilldownEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(e, sender) {
+        super(sender);
+        this.value = e.value;
+        this.point = e.point;
+        this.series = e.series;
+    }
+}
+
 /**
  * Fallback theme in case the Theme Service fails
  * to read the variables from the main theme.
@@ -2347,6 +2501,10 @@ class ChartComponent {
          * To distinguish between the original events, inspect the `e.originalEvent.type` field.
          */
         this.seriesClick = new EventEmitter();
+        /**
+         * Fires when the user when the user wants to drill down on a specific point.
+         */
+        this.drilldown = new EventEmitter();
         /**
          * Fires when the user hovers the Chart series ([see example](slug:events_charts)).
          */
@@ -2376,6 +2534,10 @@ class ChartComponent {
          * Can be prevented.
          */
         this.legendItemClick = new EventEmitter();
+        /**
+         * Fires when the drill-down level has changed.
+         */
+        this.drilldownLevelChange = new EventEmitter();
         /**
          * Limits the automatic resizing of the Chart. Sets the maximum number of times per second
          * that the component redraws its content when the size of its container changes.
@@ -2408,10 +2570,33 @@ class ChartComponent {
         this.suppressTransitions = false;
         this.rtl = false;
         this.hostClasses = ['k-chart', 'k-widget'];
+        this.drilldownState = [];
         validatePackage(packageMetadata);
         this.themeService.loadTheme();
         this.refreshWait();
     }
+    /**
+     * Gets or sets the current drill-down level for [Drilldown Charts](slug:drilldown_chart_charts).
+     *
+     * To return to a previous level, set the value to a number less than the current level.
+     * To return to the root chart, set the value to 0.
+     *
+     * Setting the value to a number greater than the current level will have no effect.
+     */
+    get drilldownLevel() {
+        return this.drilldownState.length;
+    }
+    set drilldownLevel(level) {
+        const currentLevel = this.drilldownState.length;
+        if (currentLevel <= level || !this.seriesComponents) {
+            return;
+        }
+        const removed = this.drilldownState.slice(level);
+        removed.forEach(view => view.destroy());
+        this.drilldownState = this.drilldownState.slice(0, currentLevel - removed.length);
+        this.seriesComponents.toArray().slice(-removed.length - 1).forEach(series => series.hidden = false);
+        this.drilldownLevelChange.emit(level);
+    }
     ngOnInit() {
         if (this.element) {
             this.hostClasses.forEach(name => {
@@ -2433,6 +2618,26 @@ class ChartComponent {
         this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
     }
+    onDrilldown(e) {
+        const args = new DrilldownEvent(e, this);
+        this.run(() => this.drilldown.emit(args));
+        if (args.isDefaultPrevented()) {
+            return;
+        }
+        const seriesCollection = this.seriesCollectionComponent.first;
+        const seriesComponent = this.seriesComponents.find((sc) => sc.name === e.series.name);
+        if (seriesComponent.drilldownTemplate) {
+            seriesComponent.hidden = true;
+            const view = seriesCollection.viewContainer.createEmbeddedView(seriesComponent.drilldownTemplate.templateRef, {
+                drilldownValue: e.value,
+                point: e.point,
+                series: e.series
+            });
+            view.markForCheck();
+            this.drilldownState.push(view);
+            this.drilldownLevelChange.emit(this.drilldownLevel);
+        }
+    }
     ngAfterViewChecked() {
         if (this.instance && this.autoResize) {
             this.ngZone.runOutsideAngular(() => {
@@ -2682,6 +2887,10 @@ class ChartComponent {
         if (name === 'resize') {
             return;
         }
+        if (name === 'drilldown') {
+            this.onDrilldown(e);
+            return;
+        }
         const emitter = this.activeEmitter(name);
         if (emitter) {
             const args = this.instanceEventService.create(name, e, this);
@@ -2858,7 +3067,7 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChartComponent, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick" }, providers: [
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChartComponent, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
         ConfigurationService,
         TooltipTemplateService,
         InstanceEventService,
@@ -2867,7 +3076,7 @@ ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: L10N_PREFIX,
             useValue: 'kendo.chart'
         }
-    ], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "seriesCollectionComponent", predicate: SeriesComponent }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
     <div #surface class="k-chart-surface"></div>
     <kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
     </kendo-chart-crosshair-tooltips-container>
@@ -2982,6 +3191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], seriesClick: [{
                 type: Output
+            }], drilldown: [{
+                type: Output
             }], seriesHover: [{
                 type: Output
             }], seriesOver: [{
@@ -2996,10 +3207,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], legendItemClick: [{
                 type: Output
+            }], drilldownLevelChange: [{
+                type: Output
             }], resizeRateLimit: [{
                 type: Input
             }], popupSettings: [{
                 type: Input
+            }], drilldownLevel: [{
+                type: Input
+            }], seriesCollectionComponent: [{
+                type: ContentChildren,
+                args: [SeriesComponent]
             }], seriesComponents: [{
                 type: ContentChildren,
                 args: [SeriesItemComponent, { descendants: true }]
@@ -3331,49 +3549,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- */
-class CollectionComponent {
-    constructor(configKey, configurationService, collectionService) {
-        this.configKey = configKey;
-        this.configurationService = configurationService;
-        this.collectionService = collectionService;
-        this.items = [];
-        this.subscription = collectionService.onItemChange$.subscribe(changes => this.processChanges(changes));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    ngAfterContentInit() {
-        this.readItems();
-        this.children.changes.subscribe(() => this.readItems());
-    }
-    processChanges(changes) {
-        if (!this.children) {
-            return;
-        }
-        const index = this.children.toArray().indexOf(changes.sender);
-        if (index < 0) {
-            return;
-        }
-        this.items[index] = changes.options;
-        this.change();
-    }
-    readItems() {
-        this.items = this.children.map(s => s.options);
-        this.change();
-    }
-    change() {
-        this.configurationService.notify(new Change(this.configKey, this.items.length === 0 ? undefined : this.items));
-    }
-}
-CollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-CollectionComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CollectionComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CollectionComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }, { type: CollectionService }]; } });
-
 /**
  * The configuration component for a category axis ([see example]({% slug axes_chart_charts %})).
  */
@@ -4289,59 +4464,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-/**
- * A collection of one or more series items.
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-chart>
- *       <kendo-chart-series>
- *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
- *         </kendo-chart-series-item>
- *       </kendo-chart-series>
- *     </kendo-chart>
- *   `
- * })
- * class AppComponent {
- * }
- *
- * ```
- */
-class SeriesComponent extends CollectionComponent {
-    constructor(configurationService, collectionService, tooltipTemplateService) {
-        super('series', configurationService, collectionService);
-        this.configurationService = configurationService;
-        this.collectionService = collectionService;
-        this.tooltipTemplateService = tooltipTemplateService;
-    }
-    ngAfterContentChecked() {
-        this.readTooltipTemplates();
-    }
-    readTooltipTemplates() {
-        const templates = this.children.map((item) => item.seriesTooltipTemplateRef);
-        this.tooltipTemplateService.setSeriesTemplates(templates);
-    }
-}
-SeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: TooltipTemplateService }], target: i0.ɵɵFactoryTarget.Component });
-SeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SeriesComponent, selector: "kendo-chart-series", providers: [CollectionService], queries: [{ propertyName: "children", predicate: SeriesItemComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SeriesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [CollectionService],
-                    selector: 'kendo-chart-series',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }, { type: TooltipTemplateService }]; }, propDecorators: { children: [{
-                type: ContentChildren,
-                args: [SeriesItemComponent]
-            }] } });
-
 /**
  * The default options for all series
  * ([see example]({% slug series_chart_charts %}#toc-default-series-configuration)).
@@ -6635,6 +6757,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Navigation Breadcrumb component for Drilldown Charts.
+ *
+ * Use this component to implement navigation for [Drilldown Charts](slug:drilldown_chart_charts).
+ * Use the `chart` input to link the Breadcrumb to the Chart instance.
+ *
+ */
+class ChartBreadcrumbComponent {
+    constructor() {
+        /**
+         * The definition of the breadcrumb root item.
+         *
+         * The default value is `{ icon: 'home', svgIcon: homeIcon, title: 'Home' }`.
+         * (homeIcon is imported from '@progress/kendo-svg-icons')
+         */
+        this.rootItem = { icon: 'home', svgIcon: homeIcon, title: 'Home' };
+    }
+    ngOnInit() {
+        this.items = [this.rootItem];
+        if (this.chart) {
+            this.subscription = this.chart.drilldown.subscribe((e) => {
+                this.items = [...this.items, { text: e.point.category.toString() }];
+            });
+        }
+        else if (isDevMode()) {
+            console.warn('Chart Breadcrumb: No Chart instance supplied. Navigation is inactive.');
+        }
+    }
+    ngOnChanges(changes) {
+        const rootItemChange = changes['rootItem'];
+        if (rootItemChange && this.items) {
+            this.items[0] = rootItemChange.currentValue;
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+    /**
+     * @hidden
+     */
+    onItemClick(target) {
+        const level = this.items.findIndex(item => item === target);
+        this.chart.drilldownLevel = level;
+        this.items = this.items.slice(0, level + 1);
+    }
+}
+ChartBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChartBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChartBreadcrumbComponent, selector: "kendo-chart-breadcrumb", inputs: { chart: "chart", rootItem: "rootItem" }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: ["breadcrumb"], descendants: true, static: true }], exportAs: ["kendoChartBreadcrumb"], usesOnChanges: true, ngImport: i0, template: `
+        <kendo-breadcrumb [items]="items" (itemClick)="onItemClick($event)">
+        </kendo-breadcrumb>
+    `, isInline: true, components: [{ type: i1$1.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "separatorSVGIcon", "collapseMode"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoChartBreadcrumb',
+                    selector: 'kendo-chart-breadcrumb',
+                    template: `
+        <kendo-breadcrumb [items]="items" (itemClick)="onItemClick($event)">
+        </kendo-breadcrumb>
+    `
+                }]
+        }], propDecorators: { chart: [{
+                type: Input
+            }], rootItem: [{
+                type: Input
+            }], breadcrumb: [{
+                type: ViewChild,
+                args: ['breadcrumb', { static: true }]
+            }] } });
+
 /**
  * @hidden
  */
@@ -6663,6 +6858,7 @@ const CHART_DIRECTIVES = [
     CategoryAxisSelectComponent,
     CategoryAxisTitleComponent,
     ChartAreaComponent,
+    ChartBreadcrumbComponent,
     LegendComponent,
     LegendInactiveItemsComponent,
     LegendItemComponent,
@@ -6681,6 +6877,7 @@ const CHART_DIRECTIVES = [
     SeriesDefaultsNotesIconComponent,
     SeriesDefaultsNotesLabelComponent,
     SeriesDefaultsTooltipComponent,
+    SeriesDrilldownTemplateDirective,
     SeriesErrorBarsComponent,
     SeriesExtremesComponent,
     SeriesHighlightComponent,
@@ -6864,6 +7061,14 @@ class StockChartComponent extends ChartComponent {
         this.instanceEventService = instanceEventService;
         this.changeDetector = changeDetector;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.drilldown = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.drilldownLevelChange = new EventEmitter();
         /**
          * Fires when the navigator range is changed.
          */
@@ -6872,6 +7077,12 @@ class StockChartComponent extends ChartComponent {
         this.hostClasses = ['k-chart', 'k-stockchart'];
         validatePackage(packageMetadata);
     }
+    /**
+     * @hidden
+     */
+    get drilldownLevel() {
+        return this.drilldownState.length;
+    }
     /**
      * If called, the navigator pane is not redrawn the next time the StockChart options are updated.
      * The method is useful if you need to update only the main series data for the selected period.
@@ -6911,7 +7122,7 @@ class StockChartComponent extends ChartComponent {
     }
 }
 StockChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StockChartComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: StockInstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-StockChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StockChartComponent, selector: "kendo-stockchart", inputs: { navigator: "navigator", pannable: "pannable", zoomable: "zoomable" }, outputs: { navigatorFilter: "navigatorFilter" }, providers: [
+StockChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StockChartComponent, selector: "kendo-stockchart", inputs: { navigator: "navigator", pannable: "pannable", zoomable: "zoomable", drilldownLevel: "drilldownLevel" }, outputs: { drilldown: "drilldown", drilldownLevelChange: "drilldownLevelChange", navigatorFilter: "navigatorFilter" }, providers: [
         ConfigurationService,
         TooltipTemplateService,
         { provide: RootConfigurationService, useExisting: ConfigurationService },
@@ -6961,6 +7172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], zoomable: [{
                 type: Input
+            }], drilldown: [{
+                type: Output
+            }], drilldownLevelChange: [{
+                type: Output
+            }], drilldownLevel: [{
+                type: Input
             }], navigatorFilter: [{
                 type: Output
             }] } });
@@ -7395,7 +7612,7 @@ class NavigatorSeriesItemComponent extends SeriesItemComponent {
     }
 }
 NavigatorSeriesItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigatorSeriesItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }], target: i0.ɵɵFactoryTarget.Component });
-NavigatorSeriesItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigatorSeriesItemComponent, selector: "kendo-chart-navigator-series-item", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NavigatorSeriesItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigatorSeriesItemComponent, selector: "kendo-chart-navigator-series-item", inputs: { drilldownField: "drilldownField" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigatorSeriesItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -7404,7 +7621,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-chart-navigator-series-item',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }]; } });
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }]; }, propDecorators: { drilldownField: [{
+                type: Input
+            }] } });
 
 /**
  * A collection of one or more navigator series items.
@@ -7442,16 +7661,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class NavigatorSeriesComponent extends SeriesComponent {
-    constructor(configurationService, collectionService, tooltipTemplateService) {
-        super(configurationService, collectionService, tooltipTemplateService);
+    constructor(configurationService, collectionService, tooltipTemplateService, viewContainer) {
+        super(configurationService, collectionService, tooltipTemplateService, viewContainer);
         this.configurationService = configurationService;
         this.collectionService = collectionService;
         this.tooltipTemplateService = tooltipTemplateService;
+        this.viewContainer = viewContainer;
     }
     readTooltipTemplates() {
     }
 }
-NavigatorSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigatorSeriesComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: TooltipTemplateService }], target: i0.ɵɵFactoryTarget.Component });
+NavigatorSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigatorSeriesComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: TooltipTemplateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 NavigatorSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigatorSeriesComponent, selector: "kendo-chart-navigator-series", providers: [CollectionService], queries: [{ propertyName: "children", predicate: NavigatorSeriesItemComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigatorSeriesComponent, decorators: [{
             type: Component,
@@ -7461,7 +7681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-chart-navigator-series',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }, { type: TooltipTemplateService }]; }, propDecorators: { children: [{
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }, { type: TooltipTemplateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { children: [{
                 type: ContentChildren,
                 args: [NavigatorSeriesItemComponent]
             }] } });
@@ -7782,6 +8002,14 @@ class SparklineComponent extends ChartComponent {
         this.instanceEventService = instanceEventService;
         this.changeDetector = changeDetector;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.drilldown = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.drilldownLevelChange = new EventEmitter();
         /**
          * @hidden
          */
@@ -7795,6 +8023,12 @@ class SparklineComponent extends ChartComponent {
         this.hostClasses = ['k-sparkline', 'k-widget'];
         validatePackage(packageMetadata);
     }
+    /**
+     * @hidden
+     */
+    get drilldownLevel() {
+        return this.drilldownState.length;
+    }
     createInstance(element, observer) {
         this.instance = new Sparkline(element, Sparkline.normalizeOptions(this.options), this.theme, {
             intlService: this.intl,
@@ -7808,7 +8042,7 @@ class SparklineComponent extends ChartComponent {
     }
 }
 SparklineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SparklineComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SparklineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SparklineComponent, selector: "kendo-sparkline", inputs: { type: "type", data: "data" }, providers: [
+SparklineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SparklineComponent, selector: "kendo-sparkline", inputs: { type: "type", data: "data", drilldownLevel: "drilldownLevel" }, outputs: { drilldown: "drilldown", drilldownLevelChange: "drilldownLevelChange" }, providers: [
         ConfigurationService,
         TooltipTemplateService,
         InstanceEventService,
@@ -7856,6 +8090,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], data: [{
                 type: Input
+            }], drilldown: [{
+                type: Output
+            }], drilldownLevelChange: [{
+                type: Output
+            }], drilldownLevel: [{
+                type: Input
             }] } });
 
 /**
@@ -7890,16 +8130,16 @@ const SPARKLINE_DIRECTIVES = [
 class ChartModule {
 }
 ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartModule, declarations: [ChartComponent, TooltipPopupComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, CrosshairTooltipsContainerComponent, CrosshairTooltipComponent, DonutCenterTemplateDirective, AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisRangeLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, LegendComponent, LegendInactiveItemsComponent, LegendItemComponent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PanesComponent, PanesTitleComponent, PlotAreaComponent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SubtitleComponent, TitleComponent, TooltipComponent, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent], imports: [CommonModule, PopupModule, ResizeSensorModule], exports: [ChartComponent, TooltipPopupComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, CrosshairTooltipsContainerComponent, CrosshairTooltipComponent, DonutCenterTemplateDirective, AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisRangeLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, LegendComponent, LegendInactiveItemsComponent, LegendItemComponent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PanesComponent, PanesTitleComponent, PlotAreaComponent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SubtitleComponent, TitleComponent, TooltipComponent, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent] });
+ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartModule, declarations: [ChartComponent, TooltipPopupComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, CrosshairTooltipsContainerComponent, CrosshairTooltipComponent, DonutCenterTemplateDirective, AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisRangeLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, ChartBreadcrumbComponent, LegendComponent, LegendInactiveItemsComponent, LegendItemComponent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PanesComponent, PanesTitleComponent, PlotAreaComponent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesDrilldownTemplateDirective, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SubtitleComponent, TitleComponent, TooltipComponent, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent], imports: [CommonModule, BreadCrumbModule, PopupModule, ResizeSensorModule], exports: [ChartComponent, TooltipPopupComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, CrosshairTooltipsContainerComponent, CrosshairTooltipComponent, DonutCenterTemplateDirective, AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisRangeLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, ChartBreadcrumbComponent, LegendComponent, LegendInactiveItemsComponent, LegendItemComponent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PanesComponent, PanesTitleComponent, PlotAreaComponent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesDrilldownTemplateDirective, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SubtitleComponent, TitleComponent, TooltipComponent, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent] });
 ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartModule, providers: [
         ThemeService
-    ], imports: [[CommonModule, PopupModule, ResizeSensorModule]] });
+    ], imports: [[CommonModule, BreadCrumbModule, PopupModule, ResizeSensorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CHART_DIRECTIVES],
                     exports: [CHART_DIRECTIVES],
-                    imports: [CommonModule, PopupModule, ResizeSensorModule],
+                    imports: [CommonModule, BreadCrumbModule, PopupModule, ResizeSensorModule],
                     providers: [
                         ThemeService
                     ]
@@ -8019,5 +8259,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, AxisLabelClickEvent, CHART_DIRECTIVES, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisRangeLabelsComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, ChartComponent, ChartModule, ChartsModule, CollectionService, ConfigurationService, CrosshairTooltipComponent, CrosshairTooltipsContainerComponent, DonutCenterTemplateDirective, DragEndEvent, DragEvent, DragStartEvent, LegendComponent, LegendInactiveItemsComponent, LegendItemClickEvent, LegendItemComponent, LegendItemHoverEvent, LegendItemLeaveEvent, NavigatorCategoryAxisComponent, NavigatorCategoryAxisCrosshairComponent, NavigatorCategoryAxisCrosshairTooltipComponent, NavigatorCategoryAxisLabelsComponent, NavigatorCategoryAxisNotesComponent, NavigatorCategoryAxisNotesIconComponent, NavigatorCategoryAxisNotesLabelComponent, NavigatorCategoryAxisSelectComponent, NavigatorCategoryAxisTitleComponent, NavigatorComponent, NavigatorFilterEvent, NavigatorHintComponent, NavigatorPaneComponent, NavigatorPaneTitleComponent, NavigatorSelectComponent, NavigatorSeriesComponent, NavigatorSeriesErrorBarsComponent, NavigatorSeriesExtremesComponent, NavigatorSeriesHighlightComponent, NavigatorSeriesItemComponent, NavigatorSeriesLabelsComponent, NavigatorSeriesLabelsFromComponent, NavigatorSeriesLabelsToComponent, NavigatorSeriesMarkersComponent, NavigatorSeriesNotesComponent, NavigatorSeriesNotesIconComponent, NavigatorSeriesNotesLabelComponent, NavigatorSeriesOutliersComponent, NavigatorSeriesTooltipComponent, NoteClickEvent, NoteHoverEvent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PaneRenderEvent, PanesComponent, PanesTitleComponent, PlotAreaClickEvent, PlotAreaComponent, PlotAreaHoverEvent, RenderEvent, SPARKLINE_DIRECTIVES, STOCK_CHART_DIRECTIVES, SelectEndEvent, SelectEvent, SelectStartEvent, SeriesClickEvent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesHoverEvent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, SparklineComponent, SparklineModule, StockChartComponent, StockChartModule, SubtitleComponent, TitleComponent, TooltipComponent, TooltipPopupComponent, TooltipTemplateService, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, WeekStartDay, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomEndEvent, ZoomEvent, ZoomStartEvent, ZoomableComponent };
+export { AxisDefaultsComponent, AxisDefaultsCrosshairComponent, AxisDefaultsCrosshairTooltipComponent, AxisDefaultsLabelsComponent, AxisDefaultsTitleComponent, AxisLabelClickEvent, CHART_DIRECTIVES, CategoryAxisComponent, CategoryAxisCrosshairComponent, CategoryAxisCrosshairTooltipComponent, CategoryAxisItemComponent, CategoryAxisLabelsComponent, CategoryAxisNotesComponent, CategoryAxisNotesIconComponent, CategoryAxisNotesLabelComponent, CategoryAxisRangeLabelsComponent, CategoryAxisSelectComponent, CategoryAxisTitleComponent, ChartAreaComponent, ChartBreadcrumbComponent, ChartComponent, ChartModule, ChartsModule, CollectionService, ConfigurationService, CrosshairTooltipComponent, CrosshairTooltipsContainerComponent, DonutCenterTemplateDirective, DragEndEvent, DragEvent, DragStartEvent, DrilldownEvent, LegendComponent, LegendInactiveItemsComponent, LegendItemClickEvent, LegendItemComponent, LegendItemHoverEvent, LegendItemLeaveEvent, NavigatorCategoryAxisComponent, NavigatorCategoryAxisCrosshairComponent, NavigatorCategoryAxisCrosshairTooltipComponent, NavigatorCategoryAxisLabelsComponent, NavigatorCategoryAxisNotesComponent, NavigatorCategoryAxisNotesIconComponent, NavigatorCategoryAxisNotesLabelComponent, NavigatorCategoryAxisSelectComponent, NavigatorCategoryAxisTitleComponent, NavigatorComponent, NavigatorFilterEvent, NavigatorHintComponent, NavigatorPaneComponent, NavigatorPaneTitleComponent, NavigatorSelectComponent, NavigatorSeriesComponent, NavigatorSeriesErrorBarsComponent, NavigatorSeriesExtremesComponent, NavigatorSeriesHighlightComponent, NavigatorSeriesItemComponent, NavigatorSeriesLabelsComponent, NavigatorSeriesLabelsFromComponent, NavigatorSeriesLabelsToComponent, NavigatorSeriesMarkersComponent, NavigatorSeriesNotesComponent, NavigatorSeriesNotesIconComponent, NavigatorSeriesNotesLabelComponent, NavigatorSeriesOutliersComponent, NavigatorSeriesTooltipComponent, NoteClickEvent, NoteHoverEvent, PaneComponent, PaneDefaultsComponent, PaneDefaultsTitleComponent, PaneRenderEvent, PanesComponent, PanesTitleComponent, PlotAreaClickEvent, PlotAreaComponent, PlotAreaHoverEvent, RenderEvent, SPARKLINE_DIRECTIVES, STOCK_CHART_DIRECTIVES, SelectEndEvent, SelectEvent, SelectStartEvent, SeriesClickEvent, SeriesComponent, SeriesDefaultsComponent, SeriesDefaultsLabelsComponent, SeriesDefaultsLabelsFromComponent, SeriesDefaultsLabelsToComponent, SeriesDefaultsNotesComponent, SeriesDefaultsNotesIconComponent, SeriesDefaultsNotesLabelComponent, SeriesDefaultsTooltipComponent, SeriesDrilldownTemplateDirective, SeriesErrorBarsComponent, SeriesExtremesComponent, SeriesHighlightComponent, SeriesHoverEvent, SeriesItemComponent, SeriesLabelsComponent, SeriesLabelsFromComponent, SeriesLabelsToComponent, SeriesMarkersComponent, SeriesNotesComponent, SeriesNotesIconComponent, SeriesNotesLabelComponent, SeriesOutliersComponent, SeriesTooltipComponent, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective, SparklineComponent, SparklineModule, StockChartComponent, StockChartModule, SubtitleComponent, TitleComponent, TooltipComponent, TooltipPopupComponent, TooltipTemplateService, ValueAxisComponent, ValueAxisCrosshairComponent, ValueAxisCrosshairTooltipComponent, ValueAxisItemComponent, ValueAxisLabelsComponent, ValueAxisNotesComponent, ValueAxisNotesIconComponent, ValueAxisNotesLabelComponent, ValueAxisTitleComponent, WeekStartDay, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomEndEvent, ZoomEvent, ZoomStartEvent, ZoomableComponent };