@progress/kendo-angular-charts 18.1.0-develop.3 → 18.1.0-develop.31

package/esm2022/sankey.component.mjs

@@ -11,7 +11,7 @@ import { combineLatest } from 'rxjs';
 import { auditTime, tap } from 'rxjs/operators';
 import { ConfigurationService, THROTTLE_MS } from './common/configuration.service';
 import { copyChanges } from './common/copy-changes';
-import { ThemeService } from './common/theme.service';
+import { SankeyThemeService } from './sankey/theme.service';
 import { toSimpleChanges } from './common/to-simple-changes';
 import { packageMetadata } from './package-metadata';
 import { InstanceEventService } from './sankey/events';
@@ -24,7 +24,7 @@ import { LocalizedMessagesDirective } from './sankey/localization/localized-mess
 import { IntlService } from '@progress/kendo-angular-intl';
 import * as i0 from "@angular/core";
 import * as i1 from "./common/configuration.service";
-import * as i2 from "./common/theme.service";
+import * as i2 from "./sankey/theme.service";
 import * as i3 from "@progress/kendo-angular-l10n";
 import * as i4 from "./sankey/events";
 import * as i5 from "@progress/kendo-angular-intl";
@@ -324,19 +324,13 @@ export class SankeyComponent {
             this.optionsChange = combineLatest([this.configurationService.onChange$, this.themeService.onChange$])
                 .pipe(tap((result) => {
                 this.options = result[0];
-                this.theme = this.loadTheme(result[1]);
+                this.theme = result[1];
             }), auditTime(THROTTLE_MS))
                 .subscribe(() => {
                 this.refresh();
             });
         });
     }
-    loadTheme(chartTheme) {
-        return {
-            ...chartTheme,
-            nodeColors: chartTheme.seriesColors,
-        };
-    }
     run(callback, inZone = true, detectChanges) {
         if (inZone) {
             if (detectChanges) {
@@ -375,7 +369,7 @@ export class SankeyComponent {
     get isRTL() {
         return Boolean(this.localizationService.rtl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i3.LocalizationService }, { token: i4.InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurationService }, { token: i2.SankeyThemeService }, { token: i3.LocalizationService }, { token: i4.InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyComponent, isStandalone: true, selector: "kendo-sankey", inputs: { data: "data", links: "links", nodes: "nodes", labels: "labels", title: "title", legend: "legend", tooltip: "tooltip", disableAutoLayout: "disableAutoLayout", navigable: "navigable", popupSettings: "popupSettings" }, outputs: { nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeClick: "nodeClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkClick: "linkClick" }, providers: [
             ConfigurationService,
             LocalizationService,
@@ -433,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, SankeyTooltipPopupComponent, NgIf, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i3.LocalizationService }, { type: i4.InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.IntlService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurationService }, { type: i2.SankeyThemeService }, { type: i3.LocalizationService }, { type: i4.InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.IntlService }]; }, propDecorators: { data: [{
                 type: Input
             }], links: [{
                 type: Input

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

@@ -8,7 +8,7 @@ import { isDocumentAvailable, shouldShowValidationUI, ResizeSensorComponent, Wat
 import * as i3 from '@progress/kendo-angular-intl';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { DateCategoryAxis, DateValueAxis, InstanceObserver, chartBaseTheme, Chart, StockChart, Sparkline, Sankey, createSankeyData } from '@progress/kendo-charts';
+import { DateCategoryAxis, DateValueAxis, InstanceObserver, chartBaseTheme, chartTheme, deepExtend, Chart, StockChart, Sparkline, sankeyTheme, Sankey, createSankeyData } from '@progress/kendo-charts';
 import { exportImage, exportSVG } from '@progress/kendo-drawing';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subject, BehaviorSubject, combineLatest, Subscription } from 'rxjs';
@@ -1937,88 +1937,19 @@ const chartDefaultTheme = () => Object.assign({}, chartBaseTheme(), {
     ]
 });
 
-const font = (style) => `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-const computedBackgroundColor = (element) => window.getComputedStyle(element).backgroundColor;
-const letterPos = (letter) => letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
-const seriesPos = (name) => {
-    const alpha = name.match(/series-([a-z])$/);
-    if (alpha !== null) {
-        return letterPos(alpha[1]);
-    }
-    const num = name.split('--series-')[1];
-    return parseInt(num, 10) - 1;
-};
-const SERIES_COLORS = 30;
-const seriesTemplate = () => {
-    let template = `
-      <div class="k-var--series-a"></div>
-      <div class="k-var--series-b"></div>
-      <div class="k-var--series-c"></div>
-      <div class="k-var--series-d"></div>
-      <div class="k-var--series-e"></div>
-      <div class="k-var--series-f"></div>
-  `;
-    for (let i = 0; i < SERIES_COLORS; i++) {
-        template += `
-      <div class="k-var--series-${i + 1}"></div>`;
-    }
-    return template;
-};
-const template = () => `
-    <div class="k-var--primary"></div>
-    <div class="k-var--primary-contrast"></div>
-    <div class="k-var--base"></div>
-    <div class="k-var--background"></div>
-
-    <div class="k-var--kendo-color-subtle"></div>
-
-    <div class="k-var--normal-background"></div>
-    <div class="k-var--normal-text-color"></div>
-    <div class="k-var--hover-background"></div>
-    <div class="k-var--hover-text-color"></div>
-    <div class="k-var--selected-background"></div>
-    <div class="k-var--selected-text-color"></div>
-    <div class="k-var--chart-error-bars-background"></div>
-    <div class="k-var--chart-notes-background"></div>
-    <div class="k-var--chart-notes-border"></div>
-    <div class="k-var--chart-notes-lines"></div>
-    <div class="k-var--chart-crosshair-background"></div>
-
-    <div class="k-var--chart-inactive"></div>
-    <div class="k-var--chart-major-lines"></div>
-    <div class="k-var--chart-minor-lines"></div>
-    <div class="k-var--chart-area-opacity"></div>
-    <div class="k-var--chart-area-inactive-opacity"></div>
-    <div class="k-var--chart-line-inactive-opacity"></div>
-
-    <div class="k-widget k-chart">
-        <div class="k-var--chart-font"></div>
-        <div class="k-var--chart-title-font"></div>
-        <div class="k-var--chart-pane-title-font"></div>
-        <div class="k-var--chart-label-font"></div>
-    </div>
-
-    <div class="k-var--series-unset"></div>
-    <div class="k-var--series">
-      ${seriesTemplate()}
-    </div>
-`;
 /**
  * @hidden
  */
 class ThemeService extends ConfigurationService {
     loaded = false;
     element;
-    constructor(ngZone) {
-        super(ngZone);
-    }
     loadTheme() {
         if (this.loaded || !isDocumentAvailable()) {
             return;
         }
-        if (!this.readTheme()) {
-            this.readDefaultTheme();
-        }
+        this.createElement();
+        this.readTheme();
+        this.destroyElement();
         this.loaded = true;
         this.next();
     }
@@ -2028,29 +1959,21 @@ class ThemeService extends ConfigurationService {
         this.loadTheme();
     }
     readTheme() {
-        this.createElement();
-        const available = this.queryColor('primary') !==
-            this.queryColor('primary-contrast');
+        let theme = {};
         try {
-            if (available) {
-                this.push(chartBaseTheme());
-                this.setColors();
-                this.setFonts();
-                this.setSeriesColors();
-            }
+            theme = chartTheme(this.element);
         }
-        finally {
-            this.destroyElement();
+        catch {
+            theme = {};
         }
-        return available;
-    }
-    readDefaultTheme() {
-        this.push(chartDefaultTheme());
+        const available = Boolean(theme.chartArea && theme.chartArea.background);
+        const result = available ? deepExtend(chartBaseTheme(), theme) : chartDefaultTheme();
+        this.push(result);
     }
     createElement() {
         const container = this.element = document.createElement('div');
+        container.className = 'k-chart';
         container.style.display = 'none';
-        container.innerHTML = template();
         document.body.appendChild(container);
     }
     destroyElement() {
@@ -2059,113 +1982,7 @@ class ThemeService extends ConfigurationService {
             this.element = undefined;
         }
     }
-    setStyle(key, value) {
-        this.set(key, value);
-    }
-    setColors() {
-        this.mapColor('axisDefaults.crosshair.color', 'chart-crosshair-background');
-        this.mapColor('axisDefaults.labels.color', 'normal-text-color');
-        this.mapColor('axisDefaults.line.color', 'chart-major-lines');
-        this.mapColor('axisDefaults.majorGridLines.color', 'chart-major-lines');
-        this.mapColor('axisDefaults.minorGridLines.color', 'chart-minor-lines');
-        this.mapColor('axisDefaults.notes.icon.background', 'chart-notes-background');
-        this.mapColor('axisDefaults.notes.icon.border.color', 'chart-notes-border');
-        this.mapColor('axisDefaults.notes.line.color', 'chart-notes-lines');
-        this.mapColor('axisDefaults.title.color', 'normal-text-color');
-        this.mapColor('chartArea.background', 'background');
-        this.mapColor('legend.inactiveItems.labels.color', 'chart-inactive');
-        this.mapColor('legend.inactiveItems.markers.color', 'chart-inactive');
-        this.mapColor('legend.labels.color', 'normal-text-color');
-        this.mapColor('legend.title.color', 'normal-text-color');
-        this.mapColor('seriesDefaults.boxPlot.downColor', 'chart-major-lines');
-        this.mapColor('seriesDefaults.boxPlot.mean.color', 'base');
-        this.mapColor('seriesDefaults.boxPlot.median.color', 'base');
-        this.mapColor('seriesDefaults.boxPlot.whiskers.color', 'primary');
-        this.mapColor('seriesDefaults.bullet.target.color', 'normal-text-color');
-        this.mapColor('seriesDefaults.candlestick.downColor', 'normal-text-color');
-        this.mapColor('seriesDefaults.candlestick.line.color', 'normal-text-color');
-        this.mapColor('seriesDefaults.errorBars.color', 'chart-error-bars-background');
-        this.mapColor('seriesDefaults.horizontalWaterfall.line.color', 'chart-major-lines');
-        this.mapColor('seriesDefaults.icon.border.color', 'chart-major-lines');
-        this.mapColor('seriesDefaults.labels.background', 'background');
-        this.mapColor('seriesDefaults.labels.color', 'normal-text-color');
-        this.mapColor('seriesDefaults.notes.icon.background', 'chart-notes-background');
-        this.mapColor('seriesDefaults.notes.icon.border.color', 'chart-notes-border');
-        this.mapColor('seriesDefaults.notes.line.color', 'chart-notes-lines');
-        this.mapColor('seriesDefaults.verticalBoxPlot.downColor', 'chart-major-lines');
-        this.mapColor('seriesDefaults.verticalBoxPlot.mean.color', 'base');
-        this.mapColor('seriesDefaults.verticalBoxPlot.median.color', 'base');
-        this.mapColor('seriesDefaults.verticalBoxPlot.whiskers.color', 'primary');
-        this.mapColor('seriesDefaults.verticalBullet.target.color', 'normal-text-color');
-        this.mapColor('seriesDefaults.waterfall.line.color', 'chart-major-lines');
-        this.mapColor('title.color', 'normal-text-color');
-        this.mapColor('subtitle.color', 'normal-text-color');
-        // Sankey diagram
-        this.mapColor('labels.color', 'normal-text-color');
-        this.mapColor('labels.stroke.color', 'background');
-        // 'k-var--kendo-color-subtle' class does not contain the --kendo-color-subtle variable style
-        const element = this.element?.querySelector('.k-var--kendo-color-subtle');
-        element && (element.style.color = 'var(--kendo-color-subtle)');
-        this.mapColor('links.color', 'kendo-color-subtle', 'color');
-        const opacity = parseFloat(this.queryStyle('chart-area-opacity').opacity);
-        if (!isNaN(opacity)) {
-            this.setStyle('seriesDefaults.area.opacity', opacity);
-            this.setStyle('seriesDefaults.radarArea.opacity', opacity);
-            this.setStyle('seriesDefaults.verticalArea.opacity', opacity);
-            this.setStyle('seriesDefaults.labels.opacity', opacity);
-        }
-        this.setInactiveOpacity(['area', 'verticalArea'], 'chart-area-inactive-opacity');
-        this.setInactiveOpacity(['line', 'verticalLine'], 'chart-line-inactive-opacity');
-    }
-    setInactiveOpacity(seriesTypes, selector) {
-        const inactiveOpacity = parseFloat(this.queryStyle(selector).opacity);
-        if (!isNaN(inactiveOpacity) && inactiveOpacity < 1) {
-            seriesTypes.forEach(type => this.setStyle(`seriesDefaults.${type}.highlight.inactiveOpacity`, inactiveOpacity));
-        }
-    }
-    setFonts() {
-        const defaultFont = font(this.queryStyle('chart-font'));
-        const titleFont = font(this.queryStyle('chart-title-font'));
-        const paneTitleFont = font(this.queryStyle('chart-pane-title-font'));
-        const labelFont = font(this.queryStyle('chart-label-font'));
-        this.setStyle('axisDefaults.labels.font', labelFont);
-        this.setStyle('axisDefaults.notes.label.font', defaultFont);
-        this.setStyle('axisDefaults.title.font', defaultFont);
-        this.setStyle('legend.labels.font', defaultFont);
-        this.setStyle('seriesDefaults.labels.font', labelFont);
-        this.setStyle('seriesDefaults.notes.label.font', defaultFont);
-        this.setStyle('title.font', titleFont);
-        this.setStyle('subtitle.font', paneTitleFont);
-        this.setStyle('paneDefaults.title.font', paneTitleFont);
-        // Sankey diagram
-        this.setStyle('labels.font', defaultFont);
-    }
-    setSeriesColors() {
-        const element = this.element;
-        const series = [].slice.call(element.querySelectorAll('.k-var--series div'));
-        const unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
-        const seriesColors = series.reduce((arr, el) => {
-            const pos = seriesPos(el.className);
-            const color = computedBackgroundColor(el);
-            if (color !== unsetColor) {
-                arr[pos] = color;
-            }
-            return arr;
-        }, [] // Will populate the series colors in this array
-        );
-        this.setStyle('seriesColors', seriesColors);
-    }
-    mapColor(key, varName, styleKey = 'backgroundColor') {
-        this.setStyle(key, this.queryStyle(varName)[styleKey]);
-    }
-    queryColor(varName) {
-        return this.queryStyle(varName).backgroundColor;
-    }
-    queryStyle(varName) {
-        const element = this.element.querySelector(`.k-var--${varName}`);
-        return window.getComputedStyle(element);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, decorators: [{
@@ -2173,7 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+        }] });
 
 /**
  * @hidden
@@ -2909,8 +2726,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738245977,
-    version: '18.1.0-develop.3',
+    publishDate: 1739264428,
+    version: '18.1.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4193,12 +4010,22 @@ class XAxisItemComponent extends CollectionItemComponent {
     labels;
     notes;
     title;
+    intlSubscription;
     constructor(configurationService, collectionService, intl, localeId) {
         super(configurationService, collectionService);
         this.configurationService = configurationService;
         this.collectionService = collectionService;
         this.intl = intl;
-        this.notifyChanges({ weekStartDay: intl.firstDay(localeId) });
+        intl.localeId = localeId;
+        this.notifyChanges({ weekStartDay: intl.firstDay(intl.localeId) });
+        this.intlSubscription = intl.changes.subscribe(() => {
+            this.notifyChanges({ weekStartDay: intl.firstDay(intl.localeId) });
+        });
+    }
+    ngOnDestroy() {
+        if (this.intlSubscription) {
+            this.intlSubscription.unsubscribe();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XAxisItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: i3.IntlService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XAxisItemComponent, isStandalone: true, selector: "kendo-chart-x-axis-item", inputs: { axisCrossingValue: "axisCrossingValue", background: "background", baseUnit: "baseUnit", categories: "categories", color: "color", line: "line", majorGridLines: "majorGridLines", majorTicks: "majorTicks", majorUnit: "majorUnit", max: "max", min: "min", minorGridLines: "minorGridLines", minorTicks: "minorTicks", minorUnit: "minorUnit", name: "name", narrowRange: "narrowRange", pane: "pane", plotBands: "plotBands", reverse: "reverse", startAngle: "startAngle", type: "type", visible: "visible", weekStartDay: "weekStartDay", crosshair: "crosshair", labels: "labels", notes: "notes", title: "title" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -5785,6 +5612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class CategoryAxisItemComponent extends CollectionItemComponent {
     configurationService;
     collectionService;
+    intl;
     autoBaseUnitSteps;
     axisCrossingValue;
     background;
@@ -5856,11 +5684,22 @@ class CategoryAxisItemComponent extends CollectionItemComponent {
     select;
     title;
     rangeLabels;
+    intlSubscription;
     constructor(configurationService, collectionService, intl, localeId) {
         super(configurationService, collectionService);
         this.configurationService = configurationService;
         this.collectionService = collectionService;
-        this.notifyChanges({ weekStartDay: intl.firstDay(localeId) });
+        this.intl = intl;
+        intl.localeId = localeId;
+        this.notifyChanges({ weekStartDay: intl.firstDay(intl.localeId) });
+        this.intlSubscription = intl.changes.subscribe(() => {
+            this.notifyChanges({ weekStartDay: intl.firstDay(intl.localeId) });
+        });
+    }
+    ngOnDestroy() {
+        if (this.intlSubscription) {
+            this.intlSubscription.unsubscribe();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryAxisItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionService }, { token: i3.IntlService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryAxisItemComponent, isStandalone: true, selector: "kendo-chart-category-axis-item", inputs: { autoBaseUnitSteps: "autoBaseUnitSteps", axisCrossingValue: "axisCrossingValue", background: "background", baseUnit: "baseUnit", baseUnitStep: "baseUnitStep", categories: "categories", color: "color", justified: "justified", line: "line", majorGridLines: "majorGridLines", majorTicks: "majorTicks", max: "max", maxDateGroups: "maxDateGroups", maxDivisions: "maxDivisions", min: "min", minorGridLines: "minorGridLines", minorTicks: "minorTicks", name: "name", pane: "pane", plotBands: "plotBands", reverse: "reverse", roundToBaseUnit: "roundToBaseUnit", startAngle: "startAngle", type: "type", visible: "visible", weekStartDay: "weekStartDay", crosshair: "crosshair", labels: "labels", notes: "notes", select: "select", title: "title", rangeLabels: "rangeLabels" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -8745,13 +8584,14 @@ class LegendComponent extends SettingsComponent {
     inactiveItems;
     item;
     title;
+    focusHighlight;
     constructor(configurationService) {
         super('legend', configurationService);
         this.configurationService = configurationService;
         this.markAsVisible();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LegendComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LegendComponent, isStandalone: true, selector: "kendo-chart-legend", inputs: { align: "align", background: "background", border: "border", height: "height", labels: "labels", margin: "margin", offsetX: "offsetX", offsetY: "offsetY", orientation: "orientation", padding: "padding", position: "position", reverse: "reverse", visible: "visible", width: "width", markers: "markers", spacing: "spacing", inactiveItems: "inactiveItems", item: "item", title: "title" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LegendComponent, isStandalone: true, selector: "kendo-chart-legend", inputs: { align: "align", background: "background", border: "border", height: "height", labels: "labels", margin: "margin", offsetX: "offsetX", offsetY: "offsetY", orientation: "orientation", padding: "padding", position: "position", reverse: "reverse", visible: "visible", width: "width", markers: "markers", spacing: "spacing", inactiveItems: "inactiveItems", item: "item", title: "title", focusHighlight: "focusHighlight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
@@ -8799,6 +8639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });
 
 /**
@@ -9136,12 +8978,13 @@ class SeriesDefaultsComponent extends SettingsComponent {
     labels;
     notes;
     tooltip;
+    focusHighlight;
     constructor(configurationService) {
         super('seriesDefaults', configurationService);
         this.configurationService = configurationService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesDefaultsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SeriesDefaultsComponent, isStandalone: true, selector: "kendo-chart-series-defaults", inputs: { border: "border", gap: "gap", highlight: "highlight", overlay: "overlay", spacing: "spacing", stack: "stack", type: "type", visual: "visual", labels: "labels", notes: "notes", tooltip: "tooltip" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SeriesDefaultsComponent, isStandalone: true, selector: "kendo-chart-series-defaults", inputs: { border: "border", gap: "gap", highlight: "highlight", overlay: "overlay", spacing: "spacing", stack: "stack", type: "type", visual: "visual", labels: "labels", notes: "notes", tooltip: "tooltip", focusHighlight: "focusHighlight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesDefaultsComponent, decorators: [{
             type: Component,
@@ -9173,6 +9016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tooltip: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });
 
 /**
@@ -10648,6 +10493,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['breadcrumb', { static: true }]
             }] } });
 
+/**
+ * @hidden
+ */
+class SankeyThemeService extends ThemeService {
+    readTheme() {
+        const theme = sankeyTheme(this.element);
+        this.push(theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * @hidden
  */
@@ -11541,19 +11404,13 @@ class SankeyComponent {
             this.optionsChange = combineLatest([this.configurationService.onChange$, this.themeService.onChange$])
                 .pipe(tap((result) => {
                 this.options = result[0];
-                this.theme = this.loadTheme(result[1]);
+                this.theme = result[1];
             }), auditTime(THROTTLE_MS))
                 .subscribe(() => {
                 this.refresh();
             });
         });
     }
-    loadTheme(chartTheme) {
-        return {
-            ...chartTheme,
-            nodeColors: chartTheme.seriesColors,
-        };
-    }
     run(callback, inZone = true, detectChanges) {
         if (inZone) {
             if (detectChanges) {
@@ -11592,7 +11449,7 @@ class SankeyComponent {
     get isRTL() {
         return Boolean(this.localizationService.rtl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: ConfigurationService }, { token: ThemeService }, { token: i1$1.LocalizationService }, { token: InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i3.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: ConfigurationService }, { token: SankeyThemeService }, { token: i1$1.LocalizationService }, { token: InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i3.IntlService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyComponent, isStandalone: true, selector: "kendo-sankey", inputs: { data: "data", links: "links", nodes: "nodes", labels: "labels", title: "title", legend: "legend", tooltip: "tooltip", disableAutoLayout: "disableAutoLayout", navigable: "navigable", popupSettings: "popupSettings" }, outputs: { nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeClick: "nodeClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkClick: "linkClick" }, providers: [
             ConfigurationService,
             LocalizationService,
@@ -11650,7 +11507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, SankeyTooltipPopupComponent, NgIf, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ConfigurationService }, { type: ThemeService }, { type: i1$1.LocalizationService }, { type: InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3.IntlService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ConfigurationService }, { type: SankeyThemeService }, { type: i1$1.LocalizationService }, { type: InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3.IntlService }]; }, propDecorators: { data: [{
                 type: Input
             }], links: [{
                 type: Input
@@ -11960,12 +11817,13 @@ class SankeyLinksComponent extends SettingsComponent {
     color;
     opacity;
     highlight;
+    focusHighlight;
     constructor(configurationService) {
         super('links', configurationService);
         this.configurationService = configurationService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyLinksComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyLinksComponent, isStandalone: true, selector: "kendo-sankey-links", inputs: { colorType: "colorType", color: "color", opacity: "opacity", highlight: "highlight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyLinksComponent, isStandalone: true, selector: "kendo-sankey-links", inputs: { colorType: "colorType", color: "color", opacity: "opacity", highlight: "highlight", focusHighlight: "focusHighlight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyLinksComponent, decorators: [{
             type: Component,
@@ -11983,6 +11841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], highlight: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });
 
 /**
@@ -12048,12 +11908,13 @@ class SankeyNodesComponent extends SettingsComponent {
     padding;
     width;
     align;
+    focusHighlight;
     constructor(configurationService) {
         super('nodes', configurationService);
         this.configurationService = configurationService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyNodesComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyNodesComponent, isStandalone: true, selector: "kendo-sankey-nodes", inputs: { colorType: "colorType", color: "color", opacity: "opacity", offset: "offset", padding: "padding", width: "width", align: "align" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyNodesComponent, isStandalone: true, selector: "kendo-sankey-nodes", inputs: { colorType: "colorType", color: "color", opacity: "opacity", offset: "offset", padding: "padding", width: "width", align: "align", focusHighlight: "focusHighlight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyNodesComponent, decorators: [{
             type: Component,
@@ -12077,6 +11938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], align: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });
 
 /**

package/option-types/legend.interface.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Border, LegendLabels, Margin, Padding, LegendTitle } from '../common/property-types';
+import { Border, LegendLabels, Margin, Padding, LegendTitle, FocusHighlight } from '../common/property-types';
 import { LegendInactiveItems } from './legend/inactive-items.interface';
 import { LegendItem } from './legend/item.interface';
 import { LegendMarkers } from './legend/markers.interface';
@@ -93,4 +93,8 @@ export interface Legend {
      * By default, the Chart will not render a legend title.
      */
     title?: LegendTitle;
+    /**
+     * The focus highlight configuration options of the Chart legend.
+     */
+    focusHighlight?: FocusHighlight;
 }

package/option-types/series-defaults.interface.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { drawing } from '@progress/kendo-drawing';
-import { Border, Overlay, SeriesHighlight, SeriesStack, SeriesType, SeriesVisualArgs } from '../common/property-types';
+import { Border, FocusHighlight, Overlay, SeriesHighlight, SeriesStack, SeriesType, SeriesVisualArgs } from '../common/property-types';
 import { Series } from '../option-types/series-item.interface';
 import { SeriesDefaultsLabels } from './series-defaults/labels.interface';
 import { SeriesDefaultsNotes } from './series-defaults/notes.interface';
@@ -174,4 +174,8 @@ export interface SeriesDefaults {
      * The configuration options of the Chart series tooltip.
      */
     tooltip?: SeriesDefaultsTooltip;
+    /**
+     * The focus highlight configuration options.
+     */
+    focusHighlight?: FocusHighlight;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-charts",
-  "version": "18.1.0-develop.3",
+  "version": "18.1.0-develop.31",
   "description": "Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -42,7 +42,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1738245977,
+      "publishDate": 1739264428,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -52,19 +52,19 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-drawing": "^1.21.0",
-    "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "18.1.0-develop.3",
-    "@progress/kendo-angular-intl": "18.1.0-develop.3",
-    "@progress/kendo-angular-icons": "18.1.0-develop.3",
-    "@progress/kendo-angular-l10n": "18.1.0-develop.3",
-    "@progress/kendo-angular-popup": "18.1.0-develop.3",
-    "@progress/kendo-angular-navigation": "18.1.0-develop.3",
+    "@progress/kendo-licensing": "^1.4.0",
+    "@progress/kendo-angular-common": "18.1.0-develop.31",
+    "@progress/kendo-angular-intl": "18.1.0-develop.31",
+    "@progress/kendo-angular-icons": "18.1.0-develop.31",
+    "@progress/kendo-angular-l10n": "18.1.0-develop.31",
+    "@progress/kendo-angular-popup": "18.1.0-develop.31",
+    "@progress/kendo-angular-navigation": "18.1.0-develop.31",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.1.0-develop.3",
-    "@progress/kendo-charts": "2.7.0",
+    "@progress/kendo-angular-schematics": "18.1.0-develop.31",
+    "@progress/kendo-charts": "2.7.1",
     "@progress/kendo-svg-icons": "^4.0.0"
   },
   "schematics": "./schematics/collection.json",

package/sankey/api-types/index.d.ts

@@ -13,7 +13,7 @@ export interface SankeyTitle extends Title {
 /**
  * Represents the Sankey legend options.
  */
-export interface SankeyLegend extends Omit<Legend, 'inactiveItems' | 'item'> {
+export interface SankeyLegend extends Omit<Legend, 'inactiveItems' | 'item' | 'focusHighlight'> {
     /**
      * The configuration of the legend items.
      */