@progress/kendo-angular-charts 18.1.0-develop.8 → 18.1.0

package/chart/category-axis-item.component.d.ts

@@ -2,6 +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 { OnDestroy } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CollectionItemComponent } from '../common/collection-item.component';
 import { CollectionService } from '../common/collection.service';
@@ -13,9 +14,10 @@ import * as i0 from "@angular/core";
 /**
  * The configuration component for a category axis ([see example]({% slug axes_chart_charts %})).
  */
-export declare class CategoryAxisItemComponent extends CollectionItemComponent implements CategoryAxis {
+export declare class CategoryAxisItemComponent extends CollectionItemComponent implements CategoryAxis, OnDestroy {
     protected configurationService: ConfigurationService;
     protected collectionService: CollectionService;
+    private intl;
     autoBaseUnitSteps: AutoBaseUnitSteps;
     axisCrossingValue: any | any[];
     background: string;
@@ -86,7 +88,9 @@ export declare class CategoryAxisItemComponent extends CollectionItemComponent i
     select: CategoryAxisSelect;
     title: CategoryAxisTitle;
     rangeLabels: CategoryAxisRangeLabels;
+    private intlSubscription;
     constructor(configurationService: ConfigurationService, collectionService: CollectionService, intl: IntlService, localeId: string);
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CategoryAxisItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CategoryAxisItemComponent, "kendo-chart-category-axis-item", never, { "autoBaseUnitSteps": { "alias": "autoBaseUnitSteps"; "required": false; }; "axisCrossingValue": { "alias": "axisCrossingValue"; "required": false; }; "background": { "alias": "background"; "required": false; }; "baseUnit": { "alias": "baseUnit"; "required": false; }; "baseUnitStep": { "alias": "baseUnitStep"; "required": false; }; "categories": { "alias": "categories"; "required": false; }; "color": { "alias": "color"; "required": false; }; "justified": { "alias": "justified"; "required": false; }; "line": { "alias": "line"; "required": false; }; "majorGridLines": { "alias": "majorGridLines"; "required": false; }; "majorTicks": { "alias": "majorTicks"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxDateGroups": { "alias": "maxDateGroups"; "required": false; }; "maxDivisions": { "alias": "maxDivisions"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minorGridLines": { "alias": "minorGridLines"; "required": false; }; "minorTicks": { "alias": "minorTicks"; "required": false; }; "name": { "alias": "name"; "required": false; }; "pane": { "alias": "pane"; "required": false; }; "plotBands": { "alias": "plotBands"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "roundToBaseUnit": { "alias": "roundToBaseUnit"; "required": false; }; "startAngle": { "alias": "startAngle"; "required": false; }; "type": { "alias": "type"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "weekStartDay": { "alias": "weekStartDay"; "required": false; }; "crosshair": { "alias": "crosshair"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "notes": { "alias": "notes"; "required": false; }; "select": { "alias": "select"; "required": false; }; "title": { "alias": "title"; "required": false; }; "rangeLabels": { "alias": "rangeLabels"; "required": false; }; }, {}, never, never, true, never>;
 }

package/chart/x-axis-item.component.d.ts

@@ -2,6 +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 { OnDestroy } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CollectionItemComponent } from '../common/collection-item.component';
 import { CollectionService } from '../common/collection.service';
@@ -13,7 +14,7 @@ import * as i0 from "@angular/core";
  * The configuration component for an X axis
  * ([see example]({% slug api_charts_xaxiscomponent %})).
  */
-export declare class XAxisItemComponent extends CollectionItemComponent implements XAxis {
+export declare class XAxisItemComponent extends CollectionItemComponent implements XAxis, OnDestroy {
     protected configurationService: ConfigurationService;
     protected collectionService: CollectionService;
     protected intl: IntlService;
@@ -57,7 +58,9 @@ export declare class XAxisItemComponent extends CollectionItemComponent implemen
     labels: XAxisLabels;
     notes: XAxisNotes;
     title: XAxisTitle;
+    private intlSubscription;
     constructor(configurationService: ConfigurationService, collectionService: CollectionService, intl: IntlService, localeId: string);
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<XAxisItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<XAxisItemComponent, "kendo-chart-x-axis-item", never, { "axisCrossingValue": { "alias": "axisCrossingValue"; "required": false; }; "background": { "alias": "background"; "required": false; }; "baseUnit": { "alias": "baseUnit"; "required": false; }; "categories": { "alias": "categories"; "required": false; }; "color": { "alias": "color"; "required": false; }; "line": { "alias": "line"; "required": false; }; "majorGridLines": { "alias": "majorGridLines"; "required": false; }; "majorTicks": { "alias": "majorTicks"; "required": false; }; "majorUnit": { "alias": "majorUnit"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minorGridLines": { "alias": "minorGridLines"; "required": false; }; "minorTicks": { "alias": "minorTicks"; "required": false; }; "minorUnit": { "alias": "minorUnit"; "required": false; }; "name": { "alias": "name"; "required": false; }; "narrowRange": { "alias": "narrowRange"; "required": false; }; "pane": { "alias": "pane"; "required": false; }; "plotBands": { "alias": "plotBands"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "startAngle": { "alias": "startAngle"; "required": false; }; "type": { "alias": "type"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "weekStartDay": { "alias": "weekStartDay"; "required": false; }; "crosshair": { "alias": "crosshair"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "notes": { "alias": "notes"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, {}, never, never, true, never>;
 }

package/common/theme.service.d.ts

@@ -2,7 +2,6 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { NgZone } from '@angular/core';
 import { ConfigurationService } from './configuration.service';
 import * as i0 from "@angular/core";
 /**
@@ -10,22 +9,12 @@ import * as i0 from "@angular/core";
  */
 export declare class ThemeService extends ConfigurationService {
     private loaded;
-    private element;
-    constructor(ngZone: NgZone);
+    protected element: HTMLElement;
     loadTheme(): void;
     reset(): void;
-    private readTheme;
-    private readDefaultTheme;
+    protected readTheme(): void;
     private createElement;
     private destroyElement;
-    private setStyle;
-    private setColors;
-    private setInactiveOpacity;
-    private setFonts;
-    private setSeriesColors;
-    private mapColor;
-    private queryColor;
-    private queryStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
 }

package/esm2022/chart/category-axis-item.component.mjs

@@ -18,6 +18,7 @@ import * as i3 from "@progress/kendo-angular-intl";
 export class CategoryAxisItemComponent extends CollectionItemComponent {
     configurationService;
     collectionService;
+    intl;
     autoBaseUnitSteps;
     axisCrossingValue;
     background;
@@ -89,11 +90,22 @@ export 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: i1.ConfigurationService }, { token: i2.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 });

package/esm2022/chart/x-axis-item.component.mjs

@@ -61,12 +61,22 @@ export 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: i1.ConfigurationService }, { token: i2.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 });

package/esm2022/common/theme.service.mjs

@@ -2,94 +2,25 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { ConfigurationService } from './configuration.service';
-import { chartBaseTheme } from '@progress/kendo-charts';
+import { chartBaseTheme, chartTheme, deepExtend } from '@progress/kendo-charts';
 import { chartDefaultTheme } from './chart-default-theme';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
-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
  */
 export 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();
     }
@@ -99,29 +30,21 @@ export 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() {
@@ -130,113 +53,7 @@ export 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: [{
@@ -244,4 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+        }] });

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738337500,
-    version: '18.1.0-develop.8',
+    publishDate: 1739287295,
+    version: '18.1.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/sankey/theme.service.mjs

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { sankeyTheme } from '@progress/kendo-charts';
+import { ThemeService } from '../common/theme.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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'
+                }]
+        }] });

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: 1738337500,
-    version: '18.1.0-develop.8',
+    publishDate: 1739287295,
+    version: '18.1.0',
     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 });
@@ -10654,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
  */
@@ -11547,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) {
@@ -11598,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,
@@ -11656,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-charts",
-  "version": "18.1.0-develop.8",
+  "version": "18.1.0",
   "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": 1738337500,
+      "publishDate": 1739287295,
       "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.8",
-    "@progress/kendo-angular-intl": "18.1.0-develop.8",
-    "@progress/kendo-angular-icons": "18.1.0-develop.8",
-    "@progress/kendo-angular-l10n": "18.1.0-develop.8",
-    "@progress/kendo-angular-popup": "18.1.0-develop.8",
-    "@progress/kendo-angular-navigation": "18.1.0-develop.8",
+    "@progress/kendo-licensing": "^1.4.0",
+    "@progress/kendo-angular-common": "18.1.0",
+    "@progress/kendo-angular-intl": "18.1.0",
+    "@progress/kendo-angular-icons": "18.1.0",
+    "@progress/kendo-angular-l10n": "18.1.0",
+    "@progress/kendo-angular-popup": "18.1.0",
+    "@progress/kendo-angular-navigation": "18.1.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.1.0-develop.8",
-    "@progress/kendo-charts": "2.7.0",
+    "@progress/kendo-angular-schematics": "18.1.0",
+    "@progress/kendo-charts": "2.7.1",
     "@progress/kendo-svg-icons": "^4.0.0"
   },
   "schematics": "./schematics/collection.json",

package/sankey/theme.service.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ThemeService } from '../common/theme.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class SankeyThemeService extends ThemeService {
+    protected readTheme(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SankeyThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SankeyThemeService>;
+}

package/sankey.component.d.ts

@@ -7,7 +7,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Group, ImageExportOptions, SVGExportOptions } from '@progress/kendo-drawing';
 import { Subscription } from 'rxjs';
 import { ConfigurationService } from './common/configuration.service';
-import { ThemeService } from './common/theme.service';
+import { SankeyThemeService } from './sankey/theme.service';
 import { InstanceEventService, SankeyLinkEvent, SankeyNodeEvent } from './sankey/events';
 import { Sankey, SankeyEvent, SankeyTooltipEvent } from '@progress/kendo-charts';
 import { SankeyExportVisualOptions, SankeyLabelDefaults, SankeyLinkDefaults, SankeyNodeDefaults, SankeyTooltip } from './sankey/api-types';
@@ -50,7 +50,7 @@ import * as i0 from "@angular/core";
 export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDestroy {
     protected element: ElementRef;
     configurationService: ConfigurationService;
-    themeService: ThemeService;
+    themeService: SankeyThemeService;
     protected localizationService: LocalizationService;
     protected instanceEventService: InstanceEventService;
     protected ngZone: NgZone;
@@ -141,7 +141,7 @@ export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDest
     protected destroyed: boolean;
     protected subscriptions: Subscription;
     protected rtl: boolean;
-    constructor(element: ElementRef, configurationService: ConfigurationService, themeService: ThemeService, localizationService: LocalizationService, instanceEventService: InstanceEventService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, intlService: IntlService);
+    constructor(element: ElementRef, configurationService: ConfigurationService, themeService: SankeyThemeService, localizationService: LocalizationService, instanceEventService: InstanceEventService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, intlService: IntlService);
     ngAfterViewInit(): void;
     ngOnChanges(changes: {
         [propertyName: string]: SimpleChange;
@@ -203,7 +203,6 @@ export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDest
     protected get instanceOptions(): any;
     protected activeEmitter(name: string): any;
     protected refreshWait(): void;
-    protected loadTheme(chartTheme: any): any;
     protected run(callback: any, inZone?: boolean, detectChanges?: boolean): void;
     protected detectChanges(): void;
     protected intlChange(): void;