@progress/kendo-angular-charts 20.1.0-develop.9 → 20.1.1-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/chart-options.interface.d.ts +5 -0
  2. package/chart.component.d.ts +8 -1
  3. package/esm2022/chart/tooltip/base-tooltip.mjs +5 -4
  4. package/esm2022/chart/tooltip/crosshair-tooltips-container.component.mjs +2 -2
  5. package/esm2022/chart/tooltip/tooltip-popup.component.mjs +5 -4
  6. package/esm2022/chart.component.mjs +24 -2
  7. package/esm2022/common/chart-default-theme.mjs +2 -1
  8. package/esm2022/common/theme.service.mjs +1 -1
  9. package/esm2022/common/tooltip-template.service.mjs +1 -1
  10. package/esm2022/package-metadata.mjs +2 -2
  11. package/esm2022/stock-chart.component.mjs +1 -1
  12. package/fesm2022/progress-kendo-angular-charts.mjs +43 -18
  13. package/package.json +10 -10
package/chart-options.interface.d.ts CHANGED
@@ -35,6 +35,11 @@ export interface ChartOptions {
35
35
  * By default, animations are enabled.
36
36
  */
37
37
  transitions?: boolean;
38
+ /**
39
+ * @hidden
40
+ * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
41
+ */
42
+ observeStyles?: boolean;
38
43
  /**
39
44
  * Defines whether the Chart can be zoomed.
40
45
  * Zooming is not available for the `Donut`, `Pie`, `Funnel`, `Pyramid`, `Polar`, and `Radar` series.
package/chart.component.d.ts CHANGED
@@ -112,6 +112,12 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
112
112
  * @default true
113
113
  */
114
114
  noData: boolean;
115
+ /**
116
+ * @hidden
117
+ * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
118
+ * @default true
119
+ */
120
+ observeStyles: boolean;
115
121
  /**
116
122
  * Defines whether the Chart plays animations when it displays the series.
117
123
  * By default, animations are enabled.
@@ -362,6 +368,7 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
362
368
  constructor(configurationService: ConfigurationService, themeService: ThemeService, element: ElementRef, intl: IntlService, localizationService: LocalizationService, ngZone: NgZone, instanceEventService: InstanceEventService, changeDetector: ChangeDetectorRef, renderer: Renderer2);
363
369
  ngOnInit(): void;
364
370
  ngAfterViewInit(): void;
371
+ private onStyleChanged;
365
372
  private onDrilldown;
366
373
  ngAfterViewChecked(): void;
367
374
  ngOnChanges(changes: {
@@ -504,5 +511,5 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
504
511
  protected setDirection(): void;
505
512
  protected get isRTL(): boolean;
506
513
  static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
507
- static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "kendo-chart", ["kendoChart"], { "pannable": { "alias": "pannable"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "seriesColors": { "alias": "seriesColors"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "title": { "alias": "title"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "transitions": { "alias": "transitions"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; "axisDefaults": { "alias": "axisDefaults"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "chartArea": { "alias": "chartArea"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "panes": { "alias": "panes"; "required": false; }; "paneDefaults": { "alias": "paneDefaults"; "required": false; }; "plotArea": { "alias": "plotArea"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesDefaults": { "alias": "seriesDefaults"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueAxis": { "alias": "valueAxis"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "drilldownLevel": { "alias": "drilldownLevel"; "required": false; }; }, { "axisLabelClick": "axisLabelClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "legendItemHover": "legendItemHover"; "legendItemLeave": "legendItemLeave"; "noteClick": "noteClick"; "noteHover": "noteHover"; "noteLeave": "noteLeave"; "paneRender": "paneRender"; "plotAreaClick": "plotAreaClick"; "plotAreaHover": "plotAreaHover"; "plotAreaLeave": "plotAreaLeave"; "render": "render"; "select": "select"; "selectEnd": "selectEnd"; "selectStart": "selectStart"; "seriesClick": "seriesClick"; "drilldown": "drilldown"; "seriesHover": "seriesHover"; "seriesOver": "seriesOver"; "seriesLeave": "seriesLeave"; "zoom": "zoom"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "legendItemClick": "legendItemClick"; "drilldownLevelChange": "drilldownLevelChange"; }, ["donutCenterTemplate", "noDataTemplate", "seriesCollectionComponent", "seriesComponents"], never, true, never>;
514
+ static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "kendo-chart", ["kendoChart"], { "pannable": { "alias": "pannable"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "seriesColors": { "alias": "seriesColors"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "title": { "alias": "title"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "observeStyles": { "alias": "observeStyles"; "required": false; }; "transitions": { "alias": "transitions"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; "axisDefaults": { "alias": "axisDefaults"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "chartArea": { "alias": "chartArea"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "panes": { "alias": "panes"; "required": false; }; "paneDefaults": { "alias": "paneDefaults"; "required": false; }; "plotArea": { "alias": "plotArea"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesDefaults": { "alias": "seriesDefaults"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueAxis": { "alias": "valueAxis"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "drilldownLevel": { "alias": "drilldownLevel"; "required": false; }; }, { "axisLabelClick": "axisLabelClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "legendItemHover": "legendItemHover"; "legendItemLeave": "legendItemLeave"; "noteClick": "noteClick"; "noteHover": "noteHover"; "noteLeave": "noteLeave"; "paneRender": "paneRender"; "plotAreaClick": "plotAreaClick"; "plotAreaHover": "plotAreaHover"; "plotAreaLeave": "plotAreaLeave"; "render": "render"; "select": "select"; "selectEnd": "selectEnd"; "selectStart": "selectStart"; "seriesClick": "seriesClick"; "drilldown": "drilldown"; "seriesHover": "seriesHover"; "seriesOver": "seriesOver"; "seriesLeave": "seriesLeave"; "zoom": "zoom"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "legendItemClick": "legendItemClick"; "drilldownLevelChange": "drilldownLevelChange"; }, ["donutCenterTemplate", "noDataTemplate", "seriesCollectionComponent", "seriesComponents"], never, true, never>;
508
515
  }
package/esm2022/chart/tooltip/base-tooltip.mjs CHANGED
@@ -33,14 +33,15 @@ export class BaseTooltip {
33
33
  const offset = this.position(e.anchor.point);
34
34
  this.style = e.style;
35
35
  if (!this.popupRef) {
36
- this.popupRef = this.popupService.open(Object.assign({
36
+ this.popupRef = this.popupService.open({
37
37
  offset: offset,
38
38
  popupAlign: align,
39
39
  animate: this.animate,
40
40
  content: this.templateRef,
41
41
  collision: COLLISION,
42
- positionMode: POSITION_MODE
43
- }, this.popupSettings));
42
+ positionMode: POSITION_MODE,
43
+ ...this.popupSettings
44
+ });
44
45
  if (this.localizationService.rtl) {
45
46
  this.popupRef.popupElement.setAttribute('dir', 'rtl');
46
47
  }
@@ -65,7 +66,7 @@ export class BaseTooltip {
65
66
  this.hide();
66
67
  }
67
68
  position(offset) {
68
- if (!this.popupSettings || !this.popupSettings.appendTo) {
69
+ if (!this.popupSettings?.appendTo) {
69
70
  return offset;
70
71
  }
71
72
  const appendTo = this.popupSettings.appendTo.element.nativeElement;
package/esm2022/chart/tooltip/crosshair-tooltips-container.component.mjs CHANGED
@@ -76,8 +76,8 @@ export class CrosshairTooltipsContainerComponent {
76
76
  if (options[name]) {
77
77
  const axes = [].concat(options[name]);
78
78
  for (let idx = 0; idx < axes.length; idx++) {
79
- const tooltip = (axes[idx].crosshair || {}).tooltip;
80
- if (tooltip && tooltip.visible) {
79
+ const tooltip = axes[idx].crosshair?.tooltip;
80
+ if (tooltip?.visible) {
81
81
  result.push({
82
82
  index: idx,
83
83
  name: name
package/esm2022/chart/tooltip/tooltip-popup.component.mjs CHANGED
@@ -50,11 +50,12 @@ export class TooltipPopupComponent extends BaseTooltip {
50
50
  }
51
51
  show(e) {
52
52
  this.shared = e.shared;
53
- this.popupClasses = Object.assign({
53
+ this.popupClasses = {
54
54
  [SHARED_TOOLTIP_CLASS]: e.shared,
55
55
  [TOOLTIP_CLASS]: true,
56
- [e.className]: !!e.className
57
- }, this.classNames);
56
+ [e.className]: !!e.className,
57
+ ...this.classNames
58
+ };
58
59
  if (!e.shared) {
59
60
  this.seriesTooltipContext = new TooltipTemplatePoint(e.point, e.format);
60
61
  this.seriesTooltipTemplateRef = this.pointTemplateRef(e.point);
@@ -99,7 +100,7 @@ export class TooltipPopupComponent extends BaseTooltip {
99
100
  for (let idx = 0; idx < points.length; idx++) {
100
101
  const point = points[idx];
101
102
  const template = this.pointTemplateRef(point);
102
- const pointFormat = ((point.options || {}).tooltip || {}).format || format;
103
+ const pointFormat = point.options?.tooltip?.format || format;
103
104
  result.push(new TooltipTemplatePoint(point, pointFormat, template));
104
105
  }
105
106
  return result;
package/esm2022/chart.component.mjs CHANGED
@@ -98,6 +98,12 @@ export class ChartComponent {
98
98
  * @default true
99
99
  */
100
100
  noData = true;
101
+ /**
102
+ * @hidden
103
+ * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
104
+ * @default true
105
+ */
106
+ observeStyles = true;
101
107
  /**
102
108
  * Defines whether the Chart plays animations when it displays the series.
103
109
  * By default, animations are enabled.
@@ -386,6 +392,12 @@ export class ChartComponent {
386
392
  });
387
393
  this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
388
394
  }
395
+ // Initialize observeStyles default value if not already set
396
+ const store = this.configurationService.store;
397
+ if (store.observeStyles === undefined && this.observeStyles !== undefined) {
398
+ store.observeStyles = this.observeStyles;
399
+ this.configurationService.push(store);
400
+ }
389
401
  }
390
402
  ngAfterViewInit() {
391
403
  if (this.canRender) {
@@ -400,6 +412,10 @@ export class ChartComponent {
400
412
  this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
401
413
  this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
402
414
  }
415
+ onStyleChanged() {
416
+ this.suppressTransitions = true;
417
+ this.themeService.reset();
418
+ }
403
419
  onDrilldown(e) {
404
420
  const seriesComponent = this.seriesComponents.find(sc => sc.name === e.series.name);
405
421
  const seriesCollection = this.seriesCollectionComponent.first;
@@ -682,6 +698,10 @@ export class ChartComponent {
682
698
  this.onDrilldown(e);
683
699
  return;
684
700
  }
701
+ if (name === 'styleChanged') {
702
+ this.onStyleChanged();
703
+ return;
704
+ }
685
705
  const emitter = this.activeEmitter(name);
686
706
  if (emitter) {
687
707
  const args = this.instanceEventService.create(name, e, this);
@@ -732,7 +752,7 @@ export class ChartComponent {
732
752
  }
733
753
  }
734
754
  updateOptions() {
735
- this.instance.setOptions(this.options);
755
+ this.instance.setOptions(this.options, this.theme);
736
756
  }
737
757
  /**
738
758
  * @hidden
@@ -857,7 +877,7 @@ export class ChartComponent {
857
877
  return Boolean(this.localizationService.rtl);
858
878
  }
859
879
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: i5.InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
860
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
880
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", observeStyles: "observeStyles", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
861
881
  ConfigurationService,
862
882
  TooltipTemplateService,
863
883
  InstanceEventService,
@@ -952,6 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
952
972
  type: Input
953
973
  }], noData: [{
954
974
  type: Input
975
+ }], observeStyles: [{
976
+ type: Input
955
977
  }], transitions: [{
956
978
  type: Input
957
979
  }], zoomable: [{
package/esm2022/common/chart-default-theme.mjs CHANGED
@@ -9,7 +9,8 @@ import { chartBaseTheme } from '@progress/kendo-charts';
9
9
  *
10
10
  * @hidden
11
11
  */
12
- export const chartDefaultTheme = () => Object.assign({}, chartBaseTheme(), {
12
+ export const chartDefaultTheme = () => ({
13
+ ...chartBaseTheme(),
13
14
  axisDefaults: {
14
15
  crosshair: {
15
16
  color: 'rgba(0, 0, 0, 0.5)'
package/esm2022/common/theme.service.mjs CHANGED
@@ -37,7 +37,7 @@ export class ThemeService extends ConfigurationService {
37
37
  catch {
38
38
  theme = {};
39
39
  }
40
- const available = Boolean(theme.chartArea && theme.chartArea.background);
40
+ const available = Boolean(theme.chartArea?.background);
41
41
  const result = available ? deepExtend(chartBaseTheme(), theme) : chartDefaultTheme();
42
42
  this.push(result);
43
43
  }
package/esm2022/common/tooltip-template.service.mjs CHANGED
@@ -15,7 +15,7 @@ export class TooltipTemplateService {
15
15
  this.template = template;
16
16
  }
17
17
  getTemplate(seriesIndex) {
18
- if (this.seriesTemplates && this.seriesTemplates[seriesIndex]) {
18
+ if (this.seriesTemplates?.[seriesIndex]) {
19
19
  return this.seriesTemplates[seriesIndex];
20
20
  }
21
21
  return this.template;
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1759490945,
14
- version: '20.1.0-develop.9',
13
+ publishDate: 1761222957,
14
+ version: '20.1.1-develop.1',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
package/esm2022/stock-chart.component.mjs CHANGED
@@ -167,7 +167,7 @@ export class StockChartComponent extends ChartComponent {
167
167
  this.redrawSlaves = false;
168
168
  }
169
169
  applyNavigatorDefaults() {
170
- this.options.navigator = Object.assign({}, this.options.navigator, NAVIGATOR_DEFAULTS);
170
+ this.options.navigator = { ...this.options.navigator, ...NAVIGATOR_DEFAULTS };
171
171
  }
172
172
  isDevMode() {
173
173
  return isDevMode();
package/fesm2022/progress-kendo-angular-charts.mjs CHANGED
@@ -1198,14 +1198,15 @@ class BaseTooltip {
1198
1198
  const offset = this.position(e.anchor.point);
1199
1199
  this.style = e.style;
1200
1200
  if (!this.popupRef) {
1201
- this.popupRef = this.popupService.open(Object.assign({
1201
+ this.popupRef = this.popupService.open({
1202
1202
  offset: offset,
1203
1203
  popupAlign: align,
1204
1204
  animate: this.animate,
1205
1205
  content: this.templateRef,
1206
1206
  collision: COLLISION,
1207
- positionMode: POSITION_MODE
1208
- }, this.popupSettings));
1207
+ positionMode: POSITION_MODE,
1208
+ ...this.popupSettings
1209
+ });
1209
1210
  if (this.localizationService.rtl) {
1210
1211
  this.popupRef.popupElement.setAttribute('dir', 'rtl');
1211
1212
  }
@@ -1230,7 +1231,7 @@ class BaseTooltip {
1230
1231
  this.hide();
1231
1232
  }
1232
1233
  position(offset) {
1233
- if (!this.popupSettings || !this.popupSettings.appendTo) {
1234
+ if (!this.popupSettings?.appendTo) {
1234
1235
  return offset;
1235
1236
  }
1236
1237
  const appendTo = this.popupSettings.appendTo.element.nativeElement;
@@ -1403,8 +1404,8 @@ class CrosshairTooltipsContainerComponent {
1403
1404
  if (options[name]) {
1404
1405
  const axes = [].concat(options[name]);
1405
1406
  for (let idx = 0; idx < axes.length; idx++) {
1406
- const tooltip = (axes[idx].crosshair || {}).tooltip;
1407
- if (tooltip && tooltip.visible) {
1407
+ const tooltip = axes[idx].crosshair?.tooltip;
1408
+ if (tooltip?.visible) {
1408
1409
  result.push({
1409
1410
  index: idx,
1410
1411
  name: name
@@ -1680,7 +1681,7 @@ class TooltipTemplateService {
1680
1681
  this.template = template;
1681
1682
  }
1682
1683
  getTemplate(seriesIndex) {
1683
- if (this.seriesTemplates && this.seriesTemplates[seriesIndex]) {
1684
+ if (this.seriesTemplates?.[seriesIndex]) {
1684
1685
  return this.seriesTemplates[seriesIndex];
1685
1686
  }
1686
1687
  return this.template;
@@ -1734,11 +1735,12 @@ class TooltipPopupComponent extends BaseTooltip {
1734
1735
  }
1735
1736
  show(e) {
1736
1737
  this.shared = e.shared;
1737
- this.popupClasses = Object.assign({
1738
+ this.popupClasses = {
1738
1739
  [SHARED_TOOLTIP_CLASS]: e.shared,
1739
1740
  [TOOLTIP_CLASS]: true,
1740
- [e.className]: !!e.className
1741
- }, this.classNames);
1741
+ [e.className]: !!e.className,
1742
+ ...this.classNames
1743
+ };
1742
1744
  if (!e.shared) {
1743
1745
  this.seriesTooltipContext = new TooltipTemplatePoint(e.point, e.format);
1744
1746
  this.seriesTooltipTemplateRef = this.pointTemplateRef(e.point);
@@ -1783,7 +1785,7 @@ class TooltipPopupComponent extends BaseTooltip {
1783
1785
  for (let idx = 0; idx < points.length; idx++) {
1784
1786
  const point = points[idx];
1785
1787
  const template = this.pointTemplateRef(point);
1786
- const pointFormat = ((point.options || {}).tooltip || {}).format || format;
1788
+ const pointFormat = point.options?.tooltip?.format || format;
1787
1789
  result.push(new TooltipTemplatePoint(point, pointFormat, template));
1788
1790
  }
1789
1791
  return result;
@@ -1926,7 +1928,8 @@ class ChartInstanceObserver extends InstanceObserver {
1926
1928
  *
1927
1929
  * @hidden
1928
1930
  */
1929
- const chartDefaultTheme = () => Object.assign({}, chartBaseTheme(), {
1931
+ const chartDefaultTheme = () => ({
1932
+ ...chartBaseTheme(),
1930
1933
  axisDefaults: {
1931
1934
  crosshair: {
1932
1935
  color: 'rgba(0, 0, 0, 0.5)'
@@ -2109,7 +2112,7 @@ class ThemeService extends ConfigurationService {
2109
2112
  catch {
2110
2113
  theme = {};
2111
2114
  }
2112
- const available = Boolean(theme.chartArea && theme.chartArea.background);
2115
+ const available = Boolean(theme.chartArea?.background);
2113
2116
  const result = available ? deepExtend(chartBaseTheme(), theme) : chartDefaultTheme();
2114
2117
  this.push(result);
2115
2118
  }
@@ -2878,8 +2881,8 @@ const packageMetadata = {
2878
2881
  productName: 'Kendo UI for Angular',
2879
2882
  productCode: 'KENDOUIANGULAR',
2880
2883
  productCodes: ['KENDOUIANGULAR'],
2881
- publishDate: 1759490945,
2882
- version: '20.1.0-develop.9',
2884
+ publishDate: 1761222957,
2885
+ version: '20.1.1-develop.1',
2883
2886
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
2884
2887
  };
2885
2888
 
@@ -3128,6 +3131,12 @@ class ChartComponent {
3128
3131
  * @default true
3129
3132
  */
3130
3133
  noData = true;
3134
+ /**
3135
+ * @hidden
3136
+ * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
3137
+ * @default true
3138
+ */
3139
+ observeStyles = true;
3131
3140
  /**
3132
3141
  * Defines whether the Chart plays animations when it displays the series.
3133
3142
  * By default, animations are enabled.
@@ -3416,6 +3425,12 @@ class ChartComponent {
3416
3425
  });
3417
3426
  this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
3418
3427
  }
3428
+ // Initialize observeStyles default value if not already set
3429
+ const store = this.configurationService.store;
3430
+ if (store.observeStyles === undefined && this.observeStyles !== undefined) {
3431
+ store.observeStyles = this.observeStyles;
3432
+ this.configurationService.push(store);
3433
+ }
3419
3434
  }
3420
3435
  ngAfterViewInit() {
3421
3436
  if (this.canRender) {
@@ -3430,6 +3445,10 @@ class ChartComponent {
3430
3445
  this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
3431
3446
  this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
3432
3447
  }
3448
+ onStyleChanged() {
3449
+ this.suppressTransitions = true;
3450
+ this.themeService.reset();
3451
+ }
3433
3452
  onDrilldown(e) {
3434
3453
  const seriesComponent = this.seriesComponents.find(sc => sc.name === e.series.name);
3435
3454
  const seriesCollection = this.seriesCollectionComponent.first;
@@ -3712,6 +3731,10 @@ class ChartComponent {
3712
3731
  this.onDrilldown(e);
3713
3732
  return;
3714
3733
  }
3734
+ if (name === 'styleChanged') {
3735
+ this.onStyleChanged();
3736
+ return;
3737
+ }
3715
3738
  const emitter = this.activeEmitter(name);
3716
3739
  if (emitter) {
3717
3740
  const args = this.instanceEventService.create(name, e, this);
@@ -3762,7 +3785,7 @@ class ChartComponent {
3762
3785
  }
3763
3786
  }
3764
3787
  updateOptions() {
3765
- this.instance.setOptions(this.options);
3788
+ this.instance.setOptions(this.options, this.theme);
3766
3789
  }
3767
3790
  /**
3768
3791
  * @hidden
@@ -3887,7 +3910,7 @@ class ChartComponent {
3887
3910
  return Boolean(this.localizationService.rtl);
3888
3911
  }
3889
3912
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: InstanceEventService$1 }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
3890
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
3913
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", observeStyles: "observeStyles", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
3891
3914
  ConfigurationService,
3892
3915
  TooltipTemplateService,
3893
3916
  InstanceEventService$1,
@@ -3982,6 +4005,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3982
4005
  type: Input
3983
4006
  }], noData: [{
3984
4007
  type: Input
4008
+ }], observeStyles: [{
4009
+ type: Input
3985
4010
  }], transitions: [{
3986
4011
  type: Input
3987
4012
  }], zoomable: [{
@@ -6102,7 +6127,7 @@ class StockChartComponent extends ChartComponent {
6102
6127
  this.redrawSlaves = false;
6103
6128
  }
6104
6129
  applyNavigatorDefaults() {
6105
- this.options.navigator = Object.assign({}, this.options.navigator, NAVIGATOR_DEFAULTS);
6130
+ this.options.navigator = { ...this.options.navigator, ...NAVIGATOR_DEFAULTS };
6106
6131
  }
6107
6132
  isDevMode() {
6108
6133
  return isDevMode();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-charts",
3
- "version": "20.1.0-develop.9",
3
+ "version": "20.1.1-develop.1",
4
4
  "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.",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -42,7 +42,7 @@
42
42
  "package": {
43
43
  "productName": "Kendo UI for Angular",
44
44
  "productCode": "KENDOUIANGULAR",
45
- "publishDate": 1759490945,
45
+ "publishDate": 1761222957,
46
46
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
47
47
  }
48
48
  },
@@ -53,18 +53,18 @@
53
53
  "@angular/platform-browser": "16 - 20",
54
54
  "@progress/kendo-drawing": "^1.21.0",
55
55
  "@progress/kendo-licensing": "^1.7.0",
56
- "@progress/kendo-angular-common": "20.1.0-develop.9",
57
- "@progress/kendo-angular-intl": "20.1.0-develop.9",
58
- "@progress/kendo-angular-icons": "20.1.0-develop.9",
59
- "@progress/kendo-angular-l10n": "20.1.0-develop.9",
60
- "@progress/kendo-angular-popup": "20.1.0-develop.9",
61
- "@progress/kendo-angular-navigation": "20.1.0-develop.9",
56
+ "@progress/kendo-angular-common": "20.1.1-develop.1",
57
+ "@progress/kendo-angular-intl": "20.1.1-develop.1",
58
+ "@progress/kendo-angular-icons": "20.1.1-develop.1",
59
+ "@progress/kendo-angular-l10n": "20.1.1-develop.1",
60
+ "@progress/kendo-angular-popup": "20.1.1-develop.1",
61
+ "@progress/kendo-angular-navigation": "20.1.1-develop.1",
62
62
  "rxjs": "^6.5.3 || ^7.0.0"
63
63
  },
64
64
  "dependencies": {
65
65
  "tslib": "^2.3.1",
66
- "@progress/kendo-angular-schematics": "20.1.0-develop.9",
67
- "@progress/kendo-charts": "2.8.0",
66
+ "@progress/kendo-angular-schematics": "20.1.1-develop.1",
67
+ "@progress/kendo-charts": "2.9.0",
68
68
  "@progress/kendo-svg-icons": "^4.0.0"
69
69
  },
70
70
  "schematics": "./schematics/collection.json",