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

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/legend.component.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ConfigurationService } from '../common/configuration.service';
 import { SettingsComponent } from '../common/settings.component';
-import { Border, LegendLabels, Margin, Padding, LegendMarkers, LegendInactiveItems, LegendItem, Legend, LegendTitle } from '../common/property-types';
+import { Border, LegendLabels, Margin, Padding, LegendMarkers, LegendInactiveItems, LegendItem, Legend, LegendTitle, FocusHighlight } from '../common/property-types';
 import * as i0 from "@angular/core";
 /**
  * The configuration options of the Chart legend
@@ -77,7 +77,8 @@ export declare class LegendComponent extends SettingsComponent implements Legend
     inactiveItems: LegendInactiveItems;
     item: LegendItem;
     title: LegendTitle;
+    focusHighlight?: FocusHighlight;
     constructor(configurationService: ConfigurationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<LegendComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LegendComponent, "kendo-chart-legend", never, { "align": { "alias": "align"; "required": false; }; "background": { "alias": "background"; "required": false; }; "border": { "alias": "border"; "required": false; }; "height": { "alias": "height"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "position": { "alias": "position"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "markers": { "alias": "markers"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "inactiveItems": { "alias": "inactiveItems"; "required": false; }; "item": { "alias": "item"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LegendComponent, "kendo-chart-legend", never, { "align": { "alias": "align"; "required": false; }; "background": { "alias": "background"; "required": false; }; "border": { "alias": "border"; "required": false; }; "height": { "alias": "height"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "position": { "alias": "position"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "markers": { "alias": "markers"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "inactiveItems": { "alias": "inactiveItems"; "required": false; }; "item": { "alias": "item"; "required": false; }; "title": { "alias": "title"; "required": false; }; "focusHighlight": { "alias": "focusHighlight"; "required": false; }; }, {}, never, never, true, never>;
 }

package/chart/series-defaults.component.d.ts

@@ -5,7 +5,7 @@
 import { ConfigurationService } from '../common/configuration.service';
 import { drawing } from '@progress/kendo-drawing';
 import { SettingsComponent } from '../common/settings.component';
-import { Border, Overlay, SeriesHighlight, SeriesStack, SeriesType, SeriesVisualArgs } from '../common/property-types';
+import { Border, FocusHighlight, Overlay, SeriesHighlight, SeriesStack, SeriesType, SeriesVisualArgs } from '../common/property-types';
 import { SeriesDefaultsLabels, SeriesDefaultsNotes, SeriesDefaultsTooltip, SeriesDefaults } from '../common/property-types';
 import * as i0 from "@angular/core";
 /**
@@ -41,7 +41,8 @@ export declare class SeriesDefaultsComponent extends SettingsComponent implement
     labels: SeriesDefaultsLabels;
     notes: SeriesDefaultsNotes;
     tooltip: SeriesDefaultsTooltip;
+    focusHighlight?: FocusHighlight;
     constructor(configurationService: ConfigurationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<SeriesDefaultsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SeriesDefaultsComponent, "kendo-chart-series-defaults", never, { "border": { "alias": "border"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "highlight": { "alias": "highlight"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "stack": { "alias": "stack"; "required": false; }; "type": { "alias": "type"; "required": false; }; "visual": { "alias": "visual"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "notes": { "alias": "notes"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SeriesDefaultsComponent, "kendo-chart-series-defaults", never, { "border": { "alias": "border"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "highlight": { "alias": "highlight"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "stack": { "alias": "stack"; "required": false; }; "type": { "alias": "type"; "required": false; }; "visual": { "alias": "visual"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "notes": { "alias": "notes"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "focusHighlight": { "alias": "focusHighlight"; "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/property-types.d.ts

@@ -141,4 +141,4 @@ export { YAxisNotesLabel } from '../option-types/y-axis-item/notes.label.interfa
 export { YAxisTitle } from '../option-types/y-axis-item/title.interface';
 export { YAxis } from '../option-types/y-axis-item.interface';
 export { Zoomable } from '../option-types/zoomable.interface';
-export { type SeriesPattern, type VerticalStripesPattern, type CrosshatchPattern, type DiagonalStripesPattern, type GridPattern, type DotsPattern } from '@progress/kendo-charts';
+export { type SeriesPattern, type VerticalStripesPattern, type CrosshatchPattern, type DiagonalStripesPattern, type GridPattern, type DotsPattern, type FocusHighlight, type FocusHighlightBorder } from '@progress/kendo-charts';

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/legend.component.mjs

@@ -79,13 +79,14 @@ export 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: i1.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,
@@ -133,4 +134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });

package/esm2022/chart/series-defaults.component.mjs

@@ -41,12 +41,13 @@ export 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: i1.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,
@@ -78,4 +79,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tooltip: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });

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: 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/'
 };

package/esm2022/sankey/links.component.mjs

@@ -17,12 +17,13 @@ export 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: i1.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,
@@ -40,4 +41,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], highlight: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });

package/esm2022/sankey/nodes.component.mjs

@@ -29,12 +29,13 @@ export 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: i1.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,
@@ -58,4 +59,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], align: [{
                 type: Input
+            }], focusHighlight: [{
+                type: Input
             }] } });

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'
+                }]
+        }] });