@progress/kendo-react-gauges 12.3.0-develop.2 → 12.3.0-develop.4

package/ArcGauge.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),g=require("./BaseGauge.js"),l=require("@progress/kendo-charts"),h=require("./ArcCenter.js"),o=require("@progress/kendo-drawing"),m=require("@progress/kendo-react-common");function p(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const c=p(i);class d extends c.Component{constructor(){super(...arguments),this._baseGauge=null,this.gaugeType=l.ArcGauge,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{value:t,color:n,colors:s,opacity:a,scale:u}=this.props;return Object.assign({},e,{value:t,color:n,colors:s,opacity:a,scale:u})}}get gaugeInstance(){return this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge?this._baseGauge.surface:null}get element(){return this._baseGauge?this._baseGauge.element:null}render(){const{children:e,arcCenterRender:t,centerRender:n,className:s,...a}=this.props;return c.createElement(g.BaseGauge,{...a,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:u=>{this._baseGauge=u},gaugeConstructor:this.gaugeType,getTarget:this.getTarget,className:m.classNames("k-gauge k-arcgauge",s)},e,c.createElement(h.ArcCenter,{render:n||t}))}exportVisual(e){return this.gaugeInstance!==null&&this.element?o.drawDOM(this.element,e):Promise.resolve(new o.Group)}}exports.ArcGauge=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),l=require("./BaseGauge.js"),h=require("@progress/kendo-charts"),m=require("./ArcCenter.js"),c=require("@progress/kendo-drawing"),p=require("@progress/kendo-react-common"),b=require("./utils/css-variables.js");function d(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const o=d(g);class f extends o.Component{constructor(){super(...arguments),this._baseGauge=null,this.gaugeType=h.ArcGauge,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{value:t,color:s,colors:n,opacity:a,scale:u}=this.props,i={...e,value:t,color:s,colors:n,opacity:a,scale:u};return this.element?b.resolveGaugeColorsVariables(i,this.element):i}}get gaugeInstance(){return this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge?this._baseGauge.surface:null}get element(){return this._baseGauge?this._baseGauge.element:null}render(){const{children:e,arcCenterRender:t,centerRender:s,className:n,...a}=this.props;return o.createElement(l.BaseGauge,{...a,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:u=>{this._baseGauge=u},gaugeConstructor:this.gaugeType,getTarget:this.getTarget,className:p.classNames("k-gauge k-arcgauge",n)},e,o.createElement(m.ArcCenter,{render:s||t}))}exportVisual(e){return this.gaugeInstance!==null&&this.element?c.drawDOM(this.element,e):Promise.resolve(new c.Group)}}exports.ArcGauge=f;

package/ArcGauge.mjs

@@ -6,22 +6,24 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as u from "react";
-import { BaseGauge as i } from "./BaseGauge.mjs";
+import { BaseGauge as o } from "./BaseGauge.mjs";
 import { ArcGauge as g } from "@progress/kendo-charts";
-import { ArcCenter as o } from "./ArcCenter.mjs";
-import { drawDOM as c, Group as l } from "@progress/kendo-drawing";
-import { classNames as m } from "@progress/kendo-react-common";
-class _ extends u.Component {
+import { ArcCenter as l } from "./ArcCenter.mjs";
+import { drawDOM as m, Group as c } from "@progress/kendo-drawing";
+import { classNames as p } from "@progress/kendo-react-common";
+import { resolveGaugeColorsVariables as h } from "./utils/css-variables.mjs";
+class O extends u.Component {
   constructor() {
     super(...arguments), this._baseGauge = null, this.gaugeType = g, this.getTarget = () => this, this.deriveOptionsFromParent = (e) => {
-      const { value: r, color: t, colors: s, opacity: a, scale: n } = this.props;
-      return Object.assign({}, e, {
+      const { value: r, color: t, colors: s, opacity: a, scale: n } = this.props, i = {
+        ...e,
         value: r,
         color: t,
         colors: s,
         opacity: a,
         scale: n
-      });
+      };
+      return this.element ? h(i, this.element) : i;
     };
   }
   /**
@@ -48,7 +50,7 @@ class _ extends u.Component {
   render() {
     const { children: e, arcCenterRender: r, centerRender: t, className: s, ...a } = this.props;
     return /* @__PURE__ */ u.createElement(
-      i,
+      o,
       {
         ...a,
         deriveOptionsFromParent: this.deriveOptionsFromParent,
@@ -57,10 +59,10 @@ class _ extends u.Component {
         },
         gaugeConstructor: this.gaugeType,
         getTarget: this.getTarget,
-        className: m("k-gauge k-arcgauge", s)
+        className: p("k-gauge k-arcgauge", s)
       },
       e,
-      /* @__PURE__ */ u.createElement(o, { render: t || r })
+      /* @__PURE__ */ u.createElement(l, { render: t || r })
     );
   }
   /**
@@ -70,9 +72,9 @@ class _ extends u.Component {
    * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
    */
   exportVisual(e) {
-    return this.gaugeInstance !== null && this.element ? c(this.element, e) : Promise.resolve(new l());
+    return this.gaugeInstance !== null && this.element ? m(this.element, e) : Promise.resolve(new c());
   }
 }
 export {
-  _ as ArcGauge
+  O as ArcGauge
 };

package/BaseGauge.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),m=require("prop-types"),u=require("@progress/kendo-react-intl"),v=require("./store/store.js"),f=require("./store/reducer.js"),A=require("./utils/common.js"),o=require("@progress/kendo-react-common"),P=require("./GaugeContext.js"),S=require("./package-metadata.js"),D=require("@progress/kendo-charts");function R(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const a=R(k),g=class g extends a.Component{constructor(e){super(e),this.gaugeInstance=null,this.surface=null,this._element=null,this.themeStore={},this.themeUnsubscriber=Function.prototype,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{this.gaugeInstance!==null&&(this.gaugeInstance.resize(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!o.validatePackage(S.packageMetadata,{component:"Gauge"}),this.licenseMessage=o.getLicenseMessage(S.packageMetadata),this.themeStore=v.createStore(f.themeReducer),this.observersStore=v.createStore(f.observersReducer),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.element&&(this.themeStore.dispatch({type:"push",payload:D.gaugeTheme(this.element)}),this.instantiateCoreGauge()),this.themeUnsubscriber=this.themeStore.subscribe(this.refresh.bind(this)),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{dir:t,children:s,deriveOptionsFromParent:r,getTarget:d,gaugeConstructor:q,className:x,renderAs:O,...h}=this.props,{dir:M,children:W,deriveOptionsFromParent:T,getTarget:j,gaugeConstructor:F,className:G,renderAs:b,...I}=e;if(this.gaugeInstance!==null){const l=u.provideIntlService(this),y=this.gaugeInstance.contextService,C=l.locale!==y._intlService.locale,p=A.isOptionsChanged(I,h),i=h;C&&(this.gaugeInstance.contextService._intlService=l,this.gaugeInstance.contextService.format._intlService=l,p||this.gaugeInstance.noTransitionsRedraw()),p||(O||"svg")!==(b||"svg")?this.refresh():Object.keys(h).indexOf("pointer")>-1?Array.isArray(i.pointer)?this.refreshAllValues(i.pointer.map(w=>w.value)):this.refreshValue((i.pointer||{}).value):this.refreshValue(i.value),e.dir!==t&&this.gaugeInstance.setDirection(this.getDirection(t)),this.trigger("render",{sender:this})}}componentWillUnmount(){this.themeUnsubscriber();const e=this.gaugeInstance&&this.gaugeInstance.surfaceElement;e&&e.parentNode&&e.parentNode.removeChild(e),this.gaugeInstance!==null&&(this.gaugeInstance.destroy(),this.gaugeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:s}=this.props,r=Object.assign({},e,{position:"relative"});return a.createElement(P.GaugeContext.Provider,{value:this.contextValue},a.createElement("div",{style:r,ref:d=>{this._element=d},className:t},s,this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,{message:this.licenseMessage})))}instantiateCoreGauge(){const{dir:e,gaugeConstructor:t}=this.props,s=this.getGaugeOptions();this.gaugeInstance=new t(this.element,s,this.themeStore.getState(),{rtl:this.getDirection(e),intlService:u.provideIntlService(this),sender:this})}refresh(){if(this.gaugeInstance!==null){const e=this.themeStore.getState(),t=this.getGaugeOptions();this.gaugeInstance.setOptions(t,e)}}refreshValue(e){this.gaugeInstance.value(e)}refreshAllValues(e){this.gaugeInstance.allValues(e)}getDirection(e){return(e!==void 0?e:o.canUseDOM&&window.getComputedStyle(this.element).direction||"ltr")==="rtl"}getGaugeOptions(){const{renderAs:e,transitions:t,deriveOptionsFromParent:s}=this.props;let r=Object.assign({renderAs:e,transitions:t});return s&&(r=s(r)),r}trigger(e,t){const s=this.observersStore.getState();for(let r=0;r<s.length;r++)s[r].trigger(e,t)}};g.propTypes={dir:m.string,renderAs:m.oneOf(["svg","canvas"])},g.defaultProps={renderAs:"svg"};let c=g;u.registerForIntl(c);exports.BaseGauge=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),m=require("prop-types"),u=require("@progress/kendo-react-intl"),v=require("./store/store.js"),f=require("./store/reducer.js"),A=require("./utils/common.js"),o=require("@progress/kendo-react-common"),P=require("./GaugeContext.js"),S=require("./package-metadata.js"),D=require("@progress/kendo-charts");function R(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const a=R(k),g=class g extends a.Component{constructor(e){super(e),this.gaugeInstance=null,this.surface=null,this._element=null,this.themeStore={},this.themeUnsubscriber=Function.prototype,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{this.gaugeInstance!==null&&(this.gaugeInstance.resize(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!o.validatePackage(S.packageMetadata,{component:"Gauge"}),this.licenseMessage=o.getLicenseMessage(S.packageMetadata),this.themeStore=v.createStore(f.themeReducer),this.observersStore=v.createStore(f.observersReducer),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.element&&(this.themeStore.dispatch({type:"push",payload:D.gaugeTheme(this.element)}),this.instantiateCoreGauge()),this.themeUnsubscriber=this.themeStore.subscribe(this.refresh.bind(this)),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{dir:t,children:s,deriveOptionsFromParent:r,getTarget:d,gaugeConstructor:q,className:x,renderAs:O,...h}=this.props,{dir:M,children:W,deriveOptionsFromParent:T,getTarget:F,gaugeConstructor:G,className:V,renderAs:b,...I}=e;if(this.gaugeInstance!==null){const l=u.provideIntlService(this),y=this.gaugeInstance.contextService,C=l.locale!==y._intlService.locale,p=A.isOptionsChanged(I,h),i=h;C&&(this.gaugeInstance.contextService._intlService=l,this.gaugeInstance.contextService.format._intlService=l,p||this.gaugeInstance.noTransitionsRedraw()),p||(O||"svg")!==(b||"svg")?this.refresh():Object.keys(h).indexOf("pointer")>-1?Array.isArray(i.pointer)?this.refreshAllValues(i.pointer.map(w=>w.value)):this.refreshValue((i.pointer||{}).value):this.refreshValue(i.value),e.dir!==t&&this.gaugeInstance.setDirection(this.getDirection(t)),this.trigger("render",{sender:this})}}componentWillUnmount(){this.themeUnsubscriber();const e=this.gaugeInstance&&this.gaugeInstance.surfaceElement;e&&e.parentNode&&e.parentNode.removeChild(e),this.gaugeInstance!==null&&(this.gaugeInstance.destroy(),this.gaugeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:s}=this.props,r={...e,position:"relative"};return a.createElement(P.GaugeContext.Provider,{value:this.contextValue},a.createElement("div",{style:r,ref:d=>{this._element=d},className:t},s,this.showLicenseWatermark&&a.createElement(o.WatermarkOverlay,{message:this.licenseMessage})))}instantiateCoreGauge(){const{dir:e,gaugeConstructor:t}=this.props,s=this.getGaugeOptions();this.gaugeInstance=new t(this.element,s,this.themeStore.getState(),{rtl:this.getDirection(e),intlService:u.provideIntlService(this),sender:this})}refresh(){if(this.gaugeInstance!==null){const e=this.themeStore.getState(),t=this.getGaugeOptions();this.gaugeInstance.setOptions(t,e)}}refreshValue(e){this.gaugeInstance.value(e)}refreshAllValues(e){this.gaugeInstance.allValues(e)}getDirection(e){return(e!==void 0?e:o.canUseDOM&&window.getComputedStyle(this.element).direction||"ltr")==="rtl"}getGaugeOptions(){const{renderAs:e,transitions:t,deriveOptionsFromParent:s}=this.props;let r={renderAs:e,transitions:t};return s&&(r=s(r)),r}trigger(e,t){const s=this.observersStore.getState();for(let r=0;r<s.length;r++)s[r].trigger(e,t)}};g.propTypes={dir:m.string,renderAs:m.oneOf(["svg","canvas"])},g.defaultProps={renderAs:"svg"};let c=g;u.registerForIntl(c);exports.BaseGauge=c;

package/BaseGauge.mjs

@@ -59,8 +59,8 @@ const o = class o extends n.Component {
       ...S
     } = e;
     if (this.gaugeInstance !== null) {
-      const c = m(this), O = this.gaugeInstance.contextService, I = c.locale !== O._intlService.locale, l = A(S, a), i = a;
-      I && (this.gaugeInstance.contextService._intlService = c, this.gaugeInstance.contextService.format._intlService = c, l || this.gaugeInstance.noTransitionsRedraw()), l || (v || "svg") !== (f || "svg") ? this.refresh() : Object.keys(a).indexOf("pointer") > -1 ? Array.isArray(i.pointer) ? this.refreshAllValues(i.pointer.map((b) => b.value)) : this.refreshValue((i.pointer || {}).value) : this.refreshValue(i.value), e.dir !== t && this.gaugeInstance.setDirection(this.getDirection(t)), this.trigger("render", { sender: this });
+      const c = m(this), I = this.gaugeInstance.contextService, O = c.locale !== I._intlService.locale, l = A(S, a), i = a;
+      O && (this.gaugeInstance.contextService._intlService = c, this.gaugeInstance.contextService.format._intlService = c, l || this.gaugeInstance.noTransitionsRedraw()), l || (v || "svg") !== (f || "svg") ? this.refresh() : Object.keys(a).indexOf("pointer") > -1 ? Array.isArray(i.pointer) ? this.refreshAllValues(i.pointer.map((b) => b.value)) : this.refreshValue((i.pointer || {}).value) : this.refreshValue(i.value), e.dir !== t && this.gaugeInstance.setDirection(this.getDirection(t)), this.trigger("render", { sender: this });
     }
   }
   /**
@@ -75,7 +75,7 @@ const o = class o extends n.Component {
    * @hidden
    */
   render() {
-    const { style: e = {}, className: t, children: s } = this.props, r = Object.assign({}, e, { position: "relative" });
+    const { style: e = {}, className: t, children: s } = this.props, r = { ...e, position: "relative" };
     return /* @__PURE__ */ n.createElement(F.Provider, { value: this.contextValue }, /* @__PURE__ */ n.createElement(
       "div",
       {
@@ -132,10 +132,10 @@ const o = class o extends n.Component {
    */
   getGaugeOptions() {
     const { renderAs: e, transitions: t, deriveOptionsFromParent: s } = this.props;
-    let r = Object.assign({
+    let r = {
       renderAs: e,
       transitions: t
-    });
+    };
     return s && (r = s(r)), r;
   }
   /**

package/LinearGauge.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("./BaseGauge.js"),o=require("@progress/kendo-charts"),g=require("@progress/kendo-drawing"),c=require("@progress/kendo-react-common");function l(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const s=l(u);class p extends s.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:n}=this.props;return Object.assign({},e,{pointer:t,scale:n})}}get gaugeInstance(){return this._baseGauge!==null?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge!==null?this._baseGauge.surface:null}get element(){return this._baseGauge!==null?this._baseGauge.element:null}render(){const{children:e,className:t,...n}=this.props;return s.createElement(i.BaseGauge,{...n,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:a=>{this._baseGauge=a},gaugeConstructor:o.LinearGauge,getTarget:this.getTarget,className:c.classNames("k-gauge",t)},e)}exportVisual(e){return this.gaugeInstance!==null?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new g.Group)}}exports.LinearGauge=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("./BaseGauge.js"),o=require("@progress/kendo-charts"),l=require("@progress/kendo-drawing"),g=require("@progress/kendo-react-common"),c=require("./utils/css-variables.js");function m(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=m(u);class p extends a.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props,n={...e,pointer:t,scale:s};return this.element?c.resolveGaugeColorsVariables(n,this.element):n}}get gaugeInstance(){return this._baseGauge!==null?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge!==null?this._baseGauge.surface:null}get element(){return this._baseGauge!==null?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return a.createElement(i.BaseGauge,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:n=>{this._baseGauge=n},gaugeConstructor:o.LinearGauge,getTarget:this.getTarget,className:g.classNames("k-gauge",t)},e)}exportVisual(e){return this.gaugeInstance!==null?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new l.Group)}}exports.LinearGauge=p;

package/LinearGauge.mjs

@@ -5,19 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as s from "react";
+import * as a from "react";
 import { BaseGauge as n } from "./BaseGauge.mjs";
 import { LinearGauge as u } from "@progress/kendo-charts";
 import { Group as i } from "@progress/kendo-drawing";
-import { classNames as g } from "@progress/kendo-react-common";
-class h extends s.Component {
+import { classNames as o } from "@progress/kendo-react-common";
+import { resolveGaugeColorsVariables as g } from "./utils/css-variables.mjs";
+class f extends a.Component {
   constructor() {
     super(...arguments), this._baseGauge = null, this.getTarget = () => this, this.deriveOptionsFromParent = (e) => {
-      const { pointer: r, scale: t } = this.props;
-      return Object.assign({}, e, {
-        pointer: r,
-        scale: t
-      });
+      const { pointer: t, scale: s } = this.props, r = {
+        ...e,
+        pointer: t,
+        scale: s
+      };
+      return this.element ? g(r, this.element) : r;
     };
   }
   /**
@@ -42,18 +44,18 @@ class h extends s.Component {
    * @hidden
    */
   render() {
-    const { children: e, className: r, ...t } = this.props;
-    return /* @__PURE__ */ s.createElement(
+    const { children: e, className: t, ...s } = this.props;
+    return /* @__PURE__ */ a.createElement(
       n,
       {
-        ...t,
+        ...s,
         deriveOptionsFromParent: this.deriveOptionsFromParent,
-        ref: (a) => {
-          this._baseGauge = a;
+        ref: (r) => {
+          this._baseGauge = r;
         },
         gaugeConstructor: u,
         getTarget: this.getTarget,
-        className: g("k-gauge", r)
+        className: o("k-gauge", t)
       },
       e
     );
@@ -69,5 +71,5 @@ class h extends s.Component {
   }
 }
 export {
-  h as LinearGauge
+  f as LinearGauge
 };

package/RadialGauge.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("./BaseGauge.js"),o=require("@progress/kendo-charts"),g=require("@progress/kendo-drawing"),l=require("@progress/kendo-react-common");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const s=c(u);class p extends s.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:a}=this.props;return Object.assign({},e,{pointer:t,scale:a})}}get gaugeInstance(){return this._baseGauge!==null?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge!==null?this._baseGauge.surface:null}get element(){return this._baseGauge!==null?this._baseGauge.element:null}render(){const{children:e,className:t,...a}=this.props;return s.createElement(i.BaseGauge,{...a,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:n=>{this._baseGauge=n},gaugeConstructor:o.RadialGauge,getTarget:this.getTarget,className:l.classNames("k-gauge",t)},e)}exportVisual(e){return this.gaugeInstance!==null?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new g.Group)}}exports.RadialGauge=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("./BaseGauge.js"),o=require("@progress/kendo-charts"),l=require("@progress/kendo-drawing"),g=require("@progress/kendo-react-common"),c=require("./utils/css-variables.js");function m(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const n=m(u);class p extends n.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props,a={...e,pointer:t,scale:s};return this.element?c.resolveGaugeColorsVariables(a,this.element):a}}get gaugeInstance(){return this._baseGauge!==null?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge!==null?this._baseGauge.surface:null}get element(){return this._baseGauge!==null?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return n.createElement(i.BaseGauge,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:a=>{this._baseGauge=a},gaugeConstructor:o.RadialGauge,getTarget:this.getTarget,className:g.classNames("k-gauge",t)},e)}exportVisual(e){return this.gaugeInstance!==null?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new l.Group)}}exports.RadialGauge=p;

package/RadialGauge.mjs

@@ -5,19 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as s from "react";
+import * as a from "react";
 import { BaseGauge as n } from "./BaseGauge.mjs";
 import { RadialGauge as u } from "@progress/kendo-charts";
 import { Group as i } from "@progress/kendo-drawing";
-import { classNames as g } from "@progress/kendo-react-common";
-class h extends s.Component {
+import { classNames as o } from "@progress/kendo-react-common";
+import { resolveGaugeColorsVariables as l } from "./utils/css-variables.mjs";
+class f extends a.Component {
   constructor() {
     super(...arguments), this._baseGauge = null, this.getTarget = () => this, this.deriveOptionsFromParent = (e) => {
-      const { pointer: t, scale: r } = this.props;
-      return Object.assign({}, e, {
-        pointer: t,
-        scale: r
-      });
+      const { pointer: r, scale: s } = this.props, t = {
+        ...e,
+        pointer: r,
+        scale: s
+      };
+      return this.element ? l(t, this.element) : t;
     };
   }
   /**
@@ -42,18 +44,18 @@ class h extends s.Component {
    * @hidden
    */
   render() {
-    const { children: e, className: t, ...r } = this.props;
-    return /* @__PURE__ */ s.createElement(
+    const { children: e, className: r, ...s } = this.props;
+    return /* @__PURE__ */ a.createElement(
       n,
       {
-        ...r,
+        ...s,
         deriveOptionsFromParent: this.deriveOptionsFromParent,
-        ref: (a) => {
-          this._baseGauge = a;
+        ref: (t) => {
+          this._baseGauge = t;
         },
         gaugeConstructor: u,
         getTarget: this.getTarget,
-        className: g("k-gauge", t)
+        className: o("k-gauge", r)
       },
       e
     );
@@ -69,5 +71,5 @@ class h extends s.Component {
   }
 }
 export {
-  h as RadialGauge
+  f as RadialGauge
 };

package/dist/cdn/js/kendo-react-gauges.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-common"),require("@progress/kendo-charts"),require("@progress/kendo-drawing")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-intl","@progress/kendo-react-common","@progress/kendo-charts","@progress/kendo-drawing"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactGauges={},e.React,e.PropTypes,e.KendoReactIntl,e.KendoReactCommon,e.KendoCharts,e.KendoDrawing)}(this,(function(e,t,s,r,n,a,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var l=o(t);const u=e=>{let t,s,r=[];const a=a=>{t=e(t,a),n.canUseDOM&&(window.clearTimeout(s),s=window.setTimeout((()=>r.forEach((e=>e()))),16.666666666666668))};return a({}),{getState:()=>t,dispatch:a,subscribe:e=>(r.push(e),()=>r=r.filter((t=>t!==e)))}},c=(e,t)=>{if(!t.type)return{};switch(t.type){case"set":return h.themeItem(e,t);case"push":return Object.assign(e,t.payload);default:return e}},g=(e,t)=>{if(!t.type)return[];switch(t.type){case"add":return[...e,t.payload];case"remove":return e.filter((e=>e!==t.payload));default:return e}},h={configurationItem:(e,t)=>Object.assign(e,{[t.gaugeKey]:t.payload}),collectionConfigurationItem(e,t){let s=!1;const[r,n]=t.gaugeCollectionIdxKey.split("_"),a=e[r].map(((e,r)=>parseInt(n,10)===r?(s=!0,t.payload):e));return!1===s&&a.splice(parseInt(n,10),0,t.payload),Object.assign(e,{[r]:a})},themeItem(e,t){let s={};const r=Object.assign(s,e),{field:n,value:a}=t.payload,i=n.split(".");let o=i.shift();for(;i.length>0;)s=s[o]=s[o]||{},o=i.shift();return s[o]=a,r}},p=e=>"object"==typeof e,d=(e,t)=>{if(Object.keys(e).length!==Object.keys(t).length)return!0;for(const s in e)if("value"!==s&&e.hasOwnProperty(s)){const r=e[s],n=t[s];if(p(r)&&p(n)?d(r,n):r!==n)return!0}return!1},m=(e,t)=>{if(!e||!t||(e=[].concat(e),t=[].concat(t),e.length!==t.length))return!0;for(let s=0;s<e.length;s++)if(d(e[s],t[s]))return!0;return!1},f=l.createContext(null);f.displayName="GaugeContext";const v=Object.freeze({name:"@progress/kendo-react-gauges",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.3.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),b=class extends l.Component{constructor(e){super(e),this.gaugeInstance=null,this.surface=null,this._element=null,this.themeStore={},this.themeUnsubscriber=Function.prototype,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{null!==this.gaugeInstance&&(this.gaugeInstance.resize(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!n.validatePackage(v,{component:"Gauge"}),this.licenseMessage=n.getLicenseMessage(v),this.themeStore=u(c),this.observersStore=u(g),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.element&&(this.themeStore.dispatch({type:"push",payload:a.gaugeTheme(this.element)}),this.instantiateCoreGauge()),this.themeUnsubscriber=this.themeStore.subscribe(this.refresh.bind(this)),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{dir:t,children:s,deriveOptionsFromParent:n,getTarget:a,gaugeConstructor:i,className:o,renderAs:l,...u}=this.props,{dir:c,children:g,deriveOptionsFromParent:h,getTarget:p,gaugeConstructor:d,className:f,renderAs:v,...b}=e;if(null!==this.gaugeInstance){const s=r.provideIntlService(this),n=this.gaugeInstance.contextService,a=s.locale!==n._intlService.locale,i=m(b,u),o=u;a&&(this.gaugeInstance.contextService._intlService=s,this.gaugeInstance.contextService.format._intlService=s,i||this.gaugeInstance.noTransitionsRedraw()),i||(l||"svg")!==(v||"svg")?this.refresh():Object.keys(u).indexOf("pointer")>-1?Array.isArray(o.pointer)?this.refreshAllValues(o.pointer.map((e=>e.value))):this.refreshValue((o.pointer||{}).value):this.refreshValue(o.value),e.dir!==t&&this.gaugeInstance.setDirection(this.getDirection(t)),this.trigger("render",{sender:this})}}componentWillUnmount(){this.themeUnsubscriber();const e=this.gaugeInstance&&this.gaugeInstance.surfaceElement;e&&e.parentNode&&e.parentNode.removeChild(e),null!==this.gaugeInstance&&(this.gaugeInstance.destroy(),this.gaugeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:s}=this.props,r=Object.assign({},e,{position:"relative"});return l.createElement(f.Provider,{value:this.contextValue},l.createElement("div",{style:r,ref:e=>{this._element=e},className:t},s,this.showLicenseWatermark&&l.createElement(n.WatermarkOverlay,{message:this.licenseMessage})))}instantiateCoreGauge(){const{dir:e,gaugeConstructor:t}=this.props,s=this.getGaugeOptions();this.gaugeInstance=new t(this.element,s,this.themeStore.getState(),{rtl:this.getDirection(e),intlService:r.provideIntlService(this),sender:this})}refresh(){if(null!==this.gaugeInstance){const e=this.themeStore.getState(),t=this.getGaugeOptions();this.gaugeInstance.setOptions(t,e)}}refreshValue(e){this.gaugeInstance.value(e)}refreshAllValues(e){this.gaugeInstance.allValues(e)}getDirection(e){return"rtl"===(void 0!==e?e:n.canUseDOM&&window.getComputedStyle(this.element).direction||"ltr")}getGaugeOptions(){const{renderAs:e,transitions:t,deriveOptionsFromParent:s}=this.props;let r=Object.assign({renderAs:e,transitions:t});return s&&(r=s(r)),r}trigger(e,t){const s=this.observersStore.getState();for(let r=0;r<s.length;r++)s[r].trigger(e,t)}};b.propTypes={dir:s.string,renderAs:s.oneOf(["svg","canvas"])},b.defaultProps={renderAs:"svg"};let y=b;r.registerForIntl(y);const O=class extends l.Component{constructor(e){super(e),this.state={arcCenterStyles:null,arcCenterValue:{value:0,color:""}},this._element=null,this.gaugeObserver=new a.InstanceObserver(this,{render:"onRender"})}componentDidMount(){var e;null==(e=this.context)||e.observersStore.dispatch({type:"add",payload:this.gaugeObserver})}render(){const{render:e}=this.props,{arcCenterStyles:t,arcCenterValue:s}=this.state,r=t||{zIndex:-1};let n=null;return e&&(n=l.createElement("div",{className:"k-arcgauge-label",ref:e=>{this._element=e},style:r},e(s.value,s.color))),n}onRender(e){if(!this._element)return;const t=e.sender.gaugeInstance,s=this._element.offsetWidth,r=this._element.offsetHeight,n=t.centerLabelPosition(s,r);this.setState({arcCenterStyles:{left:n.left,top:n.top},arcCenterValue:{value:t.value(),color:t.currentColor()}})}};O.contextType=f;let I=O;class G extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.gaugeType=a.ArcGauge,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{value:t,color:s,colors:r,opacity:n,scale:a}=this.props;return Object.assign({},e,{value:t,color:s,colors:r,opacity:n,scale:a})}}get gaugeInstance(){return this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge?this._baseGauge.surface:null}get element(){return this._baseGauge?this._baseGauge.element:null}render(){const{children:e,arcCenterRender:t,centerRender:s,className:r,...a}=this.props;return l.createElement(y,{...a,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:this.gaugeType,getTarget:this.getTarget,className:n.classNames("k-gauge k-arcgauge",r)},e,l.createElement(I,{render:s||t}))}exportVisual(e){return null!==this.gaugeInstance&&this.element?i.drawDOM(this.element,e):Promise.resolve(new i.Group)}}let _=class extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props;return Object.assign({},e,{pointer:t,scale:s})}}get gaugeInstance(){return null!==this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return null!==this._baseGauge?this._baseGauge.surface:null}get element(){return null!==this._baseGauge?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return l.createElement(y,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:a.LinearGauge,getTarget:this.getTarget,className:n.classNames("k-gauge",t)},e)}exportVisual(e){return null!==this.gaugeInstance?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new i.Group)}};class C extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props;return Object.assign({},e,{pointer:t,scale:s})}}get gaugeInstance(){return null!==this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return null!==this._baseGauge?this._baseGauge.surface:null}get element(){return null!==this._baseGauge?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return l.createElement(y,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:a.RadialGauge,getTarget:this.getTarget,className:n.classNames("k-gauge",t)},e)}exportVisual(e){return null!==this.gaugeInstance?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new i.Group)}}e.ArcGauge=G,e.CircularGauge=class extends G{constructor(){super(...arguments),this.gaugeType=a.CircularGauge}},e.LinearGauge=_,e.RadialGauge=C}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-common"),require("@progress/kendo-charts"),require("@progress/kendo-drawing")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-intl","@progress/kendo-react-common","@progress/kendo-charts","@progress/kendo-drawing"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactGauges={},e.React,e.PropTypes,e.KendoReactIntl,e.KendoReactCommon,e.KendoCharts,e.KendoDrawing)}(this,(function(e,t,s,r,n,a,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var l=o(t);const c=e=>{let t,s,r=[];const a=a=>{t=e(t,a),n.canUseDOM&&(window.clearTimeout(s),s=window.setTimeout((()=>r.forEach((e=>e()))),16.666666666666668))};return a({}),{getState:()=>t,dispatch:a,subscribe:e=>(r.push(e),()=>r=r.filter((t=>t!==e)))}},u=(e,t)=>{if(!t.type)return{};switch(t.type){case"set":return h.themeItem(e,t);case"push":return{...e,...t.payload};default:return e}},g=(e,t)=>{if(!t.type)return[];switch(t.type){case"add":return[...e,t.payload];case"remove":return e.filter((e=>e!==t.payload));default:return e}},h={configurationItem:(e,t)=>({...e,[t.gaugeKey]:t.payload}),collectionConfigurationItem(e,t){let s=!1;const[r,n]=t.gaugeCollectionIdxKey.split("_"),a=e[r].map(((e,r)=>parseInt(n,10)===r?(s=!0,t.payload):e));return!1===s&&a.splice(parseInt(n,10),0,t.payload),{...e,[r]:a}},themeItem(e,t){let s={};const r={...s,...e},{field:n,value:a}=t.payload,i=n.split(".");let o=i.shift();for(;i.length>0;)s=s[o]=s[o]||{},o=i.shift();return s[o]=a,r}},p=e=>"object"==typeof e,d=(e,t)=>{if(Object.keys(e).length!==Object.keys(t).length)return!0;for(const s in e)if("value"!==s&&e.hasOwnProperty(s)){const r=e[s],n=t[s];if(p(r)&&p(n)?d(r,n):r!==n)return!0}return!1},m=l.createContext(null);m.displayName="GaugeContext";const f=Object.freeze({name:"@progress/kendo-react-gauges",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.3.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),y=class extends l.Component{constructor(e){super(e),this.gaugeInstance=null,this.surface=null,this._element=null,this.themeStore={},this.themeUnsubscriber=Function.prototype,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{null!==this.gaugeInstance&&(this.gaugeInstance.resize(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!n.validatePackage(f,{component:"Gauge"}),this.licenseMessage=n.getLicenseMessage(f),this.themeStore=c(u),this.observersStore=c(g),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.element&&(this.themeStore.dispatch({type:"push",payload:a.gaugeTheme(this.element)}),this.instantiateCoreGauge()),this.themeUnsubscriber=this.themeStore.subscribe(this.refresh.bind(this)),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{dir:t,children:s,deriveOptionsFromParent:n,getTarget:a,gaugeConstructor:i,className:o,renderAs:l,...c}=this.props,{dir:u,children:g,deriveOptionsFromParent:h,getTarget:p,gaugeConstructor:m,className:f,renderAs:y,...b}=e;if(null!==this.gaugeInstance){const s=r.provideIntlService(this),n=this.gaugeInstance.contextService,a=s.locale!==n._intlService.locale,i=((e,t)=>{if(!e||!t||(e=[].concat(e),t=[].concat(t),e.length!==t.length))return!0;for(let s=0;s<e.length;s++)if(d(e[s],t[s]))return!0;return!1})(b,c),o=c;a&&(this.gaugeInstance.contextService._intlService=s,this.gaugeInstance.contextService.format._intlService=s,i||this.gaugeInstance.noTransitionsRedraw()),i||(l||"svg")!==(y||"svg")?this.refresh():Object.keys(c).indexOf("pointer")>-1?Array.isArray(o.pointer)?this.refreshAllValues(o.pointer.map((e=>e.value))):this.refreshValue((o.pointer||{}).value):this.refreshValue(o.value),e.dir!==t&&this.gaugeInstance.setDirection(this.getDirection(t)),this.trigger("render",{sender:this})}}componentWillUnmount(){this.themeUnsubscriber();const e=this.gaugeInstance&&this.gaugeInstance.surfaceElement;e&&e.parentNode&&e.parentNode.removeChild(e),null!==this.gaugeInstance&&(this.gaugeInstance.destroy(),this.gaugeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:s}=this.props,r={...e,position:"relative"};return l.createElement(m.Provider,{value:this.contextValue},l.createElement("div",{style:r,ref:e=>{this._element=e},className:t},s,this.showLicenseWatermark&&l.createElement(n.WatermarkOverlay,{message:this.licenseMessage})))}instantiateCoreGauge(){const{dir:e,gaugeConstructor:t}=this.props,s=this.getGaugeOptions();this.gaugeInstance=new t(this.element,s,this.themeStore.getState(),{rtl:this.getDirection(e),intlService:r.provideIntlService(this),sender:this})}refresh(){if(null!==this.gaugeInstance){const e=this.themeStore.getState(),t=this.getGaugeOptions();this.gaugeInstance.setOptions(t,e)}}refreshValue(e){this.gaugeInstance.value(e)}refreshAllValues(e){this.gaugeInstance.allValues(e)}getDirection(e){return"rtl"===(void 0!==e?e:n.canUseDOM&&window.getComputedStyle(this.element).direction||"ltr")}getGaugeOptions(){const{renderAs:e,transitions:t,deriveOptionsFromParent:s}=this.props;let r={renderAs:e,transitions:t};return s&&(r=s(r)),r}trigger(e,t){const s=this.observersStore.getState();for(let r=0;r<s.length;r++)s[r].trigger(e,t)}};y.propTypes={dir:s.string,renderAs:s.oneOf(["svg","canvas"])},y.defaultProps={renderAs:"svg"};let b=y;r.registerForIntl(b);const v=class extends l.Component{constructor(e){super(e),this.state={arcCenterStyles:null,arcCenterValue:{value:0,color:""}},this._element=null,this.gaugeObserver=new a.InstanceObserver(this,{render:"onRender"})}componentDidMount(){var e;null==(e=this.context)||e.observersStore.dispatch({type:"add",payload:this.gaugeObserver})}render(){const{render:e}=this.props,{arcCenterStyles:t,arcCenterValue:s}=this.state,r=t||{zIndex:-1};let n=null;return e&&(n=l.createElement("div",{className:"k-arcgauge-label",ref:e=>{this._element=e},style:r},e(s.value,s.color))),n}onRender(e){if(!this._element)return;const t=e.sender.gaugeInstance,s=this._element.offsetWidth,r=this._element.offsetHeight,n=t.centerLabelPosition(s,r);this.setState({arcCenterStyles:{left:n.left,top:n.top},arcCenterValue:{value:t.value(),color:t.currentColor()}})}};v.contextType=m;let I=v;const G=(e,t)=>{if(!(e=>"string"==typeof e&&(e.startsWith("--")||e.startsWith("var(")&&e.endsWith(")")))(e))return e;const s=t||document.documentElement,r=getComputedStyle(s);let n;if(e.startsWith("var(")&&e.endsWith(")")){n=e.slice(4,-1).trim();const t=n.indexOf(",");t>-1&&(n=n.substring(0,t).trim())}else{if(!e.startsWith("--"))return e;n=e}return r.getPropertyValue(n).trim()||e},O=(e,t)=>Array.isArray(e)?e.map((e=>((e,t)=>{if(!e||"object"!=typeof e)return e;const s={...e};return"string"==typeof e.color&&(s.color=G(e.color,t)),s})(e,t))):e,k=(e,t)=>{if(!e||"object"!=typeof e)return e;const s={...e};return"string"==typeof e.color&&(s.color=G(e.color,t)),s},T=(e,t)=>{if(!e||"object"!=typeof e)return e;const s={...e};return"string"==typeof e.color&&(s.color=G(e.color,t)),Array.isArray(e.colors)&&(s.colors=O(e.colors,t)),e.pointer&&(s.pointer=((e,t)=>e&&(Array.isArray(e)?e.map((e=>k(e,t))):k(e,t)))(e.pointer,t)),e.scale&&"object"==typeof e.scale&&(s.scale={...e.scale},Array.isArray(e.scale.ranges)&&(s.scale.ranges=O(e.scale.ranges,t)),e.scale.labels&&"object"==typeof e.scale.labels&&(s.scale.labels={...e.scale.labels},"string"==typeof e.scale.labels.color&&(s.scale.labels.color=G(e.scale.labels.color,t))),e.scale.majorTicks&&"object"==typeof e.scale.majorTicks&&(s.scale.majorTicks={...e.scale.majorTicks},"string"==typeof e.scale.majorTicks.color&&(s.scale.majorTicks.color=G(e.scale.majorTicks.color,t))),e.scale.minorTicks&&"object"==typeof e.scale.minorTicks&&(s.scale.minorTicks={...e.scale.minorTicks},"string"==typeof e.scale.minorTicks.color&&(s.scale.minorTicks.color=G(e.scale.minorTicks.color,t)))),s};class C extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.gaugeType=a.ArcGauge,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{value:t,color:s,colors:r,opacity:n,scale:a}=this.props,i={...e,value:t,color:s,colors:r,opacity:n,scale:a};return this.element?T(i,this.element):i}}get gaugeInstance(){return this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return this._baseGauge?this._baseGauge.surface:null}get element(){return this._baseGauge?this._baseGauge.element:null}render(){const{children:e,arcCenterRender:t,centerRender:s,className:r,...a}=this.props;return l.createElement(b,{...a,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:this.gaugeType,getTarget:this.getTarget,className:n.classNames("k-gauge k-arcgauge",r)},e,l.createElement(I,{render:s||t}))}exportVisual(e){return null!==this.gaugeInstance&&this.element?i.drawDOM(this.element,e):Promise.resolve(new i.Group)}}let _=class extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props,r={...e,pointer:t,scale:s};return this.element?T(r,this.element):r}}get gaugeInstance(){return null!==this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return null!==this._baseGauge?this._baseGauge.surface:null}get element(){return null!==this._baseGauge?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return l.createElement(b,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:a.LinearGauge,getTarget:this.getTarget,className:n.classNames("k-gauge",t)},e)}exportVisual(e){return null!==this.gaugeInstance?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new i.Group)}};class w extends l.Component{constructor(){super(...arguments),this._baseGauge=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>{const{pointer:t,scale:s}=this.props,r={...e,pointer:t,scale:s};return this.element?T(r,this.element):r}}get gaugeInstance(){return null!==this._baseGauge?this._baseGauge.gaugeInstance:null}get surface(){return null!==this._baseGauge?this._baseGauge.surface:null}get element(){return null!==this._baseGauge?this._baseGauge.element:null}render(){const{children:e,className:t,...s}=this.props;return l.createElement(b,{...s,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseGauge=e},gaugeConstructor:a.RadialGauge,getTarget:this.getTarget,className:n.classNames("k-gauge",t)},e)}exportVisual(e){return null!==this.gaugeInstance?Promise.resolve(this.gaugeInstance.exportVisual(e)):Promise.resolve(new i.Group)}}e.ArcGauge=C,e.CircularGauge=class extends C{constructor(){super(...arguments),this.gaugeType=a.CircularGauge}},e.LinearGauge=_,e.RadialGauge=w}));

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-gauges",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1761726799,version:"12.3.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-gauges",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1762330087,version:"12.3.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1761726799,
-  version: "12.3.0-develop.2",
+  publishDate: 1762330087,
+  version: "12.3.0-develop.4",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-gauges",
-  "version": "12.3.0-develop.2",
+  "version": "12.3.0-develop.4",
   "description": "React Gauges provide a set of React components for building beautiful and customizable gauges. KendoReact Gauges package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -27,13 +27,13 @@
   "peerDependencies": {
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-react-common": "12.3.0-develop.2",
-    "@progress/kendo-react-intl": "12.3.0-develop.2",
+    "@progress/kendo-react-common": "12.3.0-develop.4",
+    "@progress/kendo-react-intl": "12.3.0-develop.4",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@progress/kendo-charts": "2.8.2",
+    "@progress/kendo-charts": "2.9.0",
     "prop-types": "^15.6.0"
   },
   "keywords": [
@@ -59,7 +59,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1761726799,
+      "publishDate": 1762330087,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/store/reducer.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=(t,e)=>{if(e.type)switch(e.type){case"set":return i.themeItem(t,e);case"push":return Object.assign(t,e.payload);default:return t}else return{}},c=(t,e)=>{if(e.type)switch(e.type){case"add":return[...t,e.payload];case"remove":return t.filter(s=>s!==e.payload);default:return t}else return[]},i={configurationItem(t,e){return Object.assign(t,{[e.gaugeKey]:e.payload})},collectionConfigurationItem(t,e){let s=!1;const[o,n]=e.gaugeCollectionIdxKey.split("_"),a=t[o].map((l,r)=>parseInt(n,10)===r?(s=!0,e.payload):l);return s===!1&&a.splice(parseInt(n,10),0,e.payload),Object.assign(t,{[o]:a})},themeItem(t,e){let s={};const o=Object.assign(s,t),{field:n,value:a}=e.payload,l=n.split(".");let r=l.shift();for(;l.length>0;)s=s[r]=s[r]||{},r=l.shift();return s[r]=a,o}};exports.observersReducer=c;exports.themeReducer=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=(t,e)=>{if(e.type)switch(e.type){case"set":return p.themeItem(t,e);case"push":return{...t,...e.payload};default:return t}else return{}},d=(t,e)=>{if(e.type)switch(e.type){case"add":return[...t,e.payload];case"remove":return t.filter(r=>r!==e.payload);default:return t}else return[]},p={configurationItem(t,e){return{...t,[e.gaugeKey]:e.payload}},collectionConfigurationItem(t,e){let r=!1;const[o,u]=e.gaugeCollectionIdxKey.split("_"),n=t[o].map((s,l)=>parseInt(u,10)===l?(r=!0,e.payload):s);return r===!1&&n.splice(parseInt(u,10),0,e.payload),{...t,[o]:n}},themeItem(t,e){let r={};const o={...r,...t},{field:u,value:n}=e.payload,s=u.split(".");let l=s.shift();for(;s.length>0;)r=r[l]=r[l]||{},l=s.shift();return r[l]=n,o}};exports.observersReducer=d;exports.themeReducer=a;

package/store/reducer.mjs

@@ -5,53 +5,55 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const p = (t, e) => {
+const a = (t, e) => {
   if (e.type)
     switch (e.type) {
       case "set":
-        return i.themeItem(t, e);
+        return u.themeItem(t, e);
       case "push":
-        return Object.assign(t, e.payload);
+        return { ...t, ...e.payload };
       default:
         return t;
     }
   else
     return {};
-}, u = (t, e) => {
+}, d = (t, e) => {
   if (e.type)
     switch (e.type) {
       case "add":
         return [...t, e.payload];
       case "remove":
-        return t.filter((s) => s !== e.payload);
+        return t.filter((l) => l !== e.payload);
       default:
         return t;
     }
   else
     return [];
-}, i = {
+}, u = {
   configurationItem(t, e) {
-    return Object.assign(t, {
+    return {
+      ...t,
       [e.gaugeKey]: e.payload
-    });
+    };
   },
   collectionConfigurationItem(t, e) {
-    let s = !1;
-    const [o, n] = e.gaugeCollectionIdxKey.split("_"), a = t[o].map((r, l) => parseInt(n, 10) === l ? (s = !0, e.payload) : r);
-    return s === !1 && a.splice(parseInt(n, 10), 0, e.payload), Object.assign(t, {
-      [o]: a
-    });
+    let l = !1;
+    const [o, n] = e.gaugeCollectionIdxKey.split("_"), p = t[o].map((s, r) => parseInt(n, 10) === r ? (l = !0, e.payload) : s);
+    return l === !1 && p.splice(parseInt(n, 10), 0, e.payload), {
+      ...t,
+      [o]: p
+    };
   },
   themeItem(t, e) {
-    let s = {};
-    const o = Object.assign(s, t), { field: n, value: a } = e.payload, r = n.split(".");
-    let l = r.shift();
-    for (; r.length > 0; )
-      s = s[l] = s[l] || {}, l = r.shift();
-    return s[l] = a, o;
+    let l = {};
+    const o = { ...l, ...t }, { field: n, value: p } = e.payload, s = n.split(".");
+    let r = s.shift();
+    for (; s.length > 0; )
+      l = l[r] = l[r] || {}, r = s.shift();
+    return l[r] = p, o;
   }
 };
 export {
-  u as observersReducer,
-  p as themeReducer
+  d as observersReducer,
+  a as themeReducer
 };

package/utils/css-variables.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=e=>typeof e!="string"?!1:e.startsWith("--")||e.startsWith("var(")&&e.endsWith(")"),a=(e,s)=>{if(!f(e))return e;const r=s||document.documentElement,u=getComputedStyle(r);let l;if(e.startsWith("var(")&&e.endsWith(")")){l=e.slice(4,-1).trim();const i=l.indexOf(",");i>-1&&(l=l.substring(0,i).trim())}else if(e.startsWith("--"))l=e;else return e;return u.getPropertyValue(l).trim()||e},o=(e,s)=>{if(!e||typeof e!="object")return e;const r={...e};return typeof e.color=="string"&&(r.color=a(e.color,s)),r},c=(e,s)=>Array.isArray(e)?e.map(r=>o(r,s)):e,t=(e,s)=>{if(!e||typeof e!="object")return e;const r={...e};return typeof e.color=="string"&&(r.color=a(e.color,s)),r},b=(e,s)=>e&&(Array.isArray(e)?e.map(r=>t(r,s)):t(e,s)),y=(e,s)=>{if(!e||typeof e!="object")return e;const r={...e};return typeof e.color=="string"&&(r.color=a(e.color,s)),Array.isArray(e.colors)&&(r.colors=c(e.colors,s)),e.pointer&&(r.pointer=b(e.pointer,s)),e.scale&&typeof e.scale=="object"&&(r.scale={...e.scale},Array.isArray(e.scale.ranges)&&(r.scale.ranges=c(e.scale.ranges,s)),e.scale.labels&&typeof e.scale.labels=="object"&&(r.scale.labels={...e.scale.labels},typeof e.scale.labels.color=="string"&&(r.scale.labels.color=a(e.scale.labels.color,s))),e.scale.majorTicks&&typeof e.scale.majorTicks=="object"&&(r.scale.majorTicks={...e.scale.majorTicks},typeof e.scale.majorTicks.color=="string"&&(r.scale.majorTicks.color=a(e.scale.majorTicks.color,s))),e.scale.minorTicks&&typeof e.scale.minorTicks=="object"&&(r.scale.minorTicks={...e.scale.minorTicks},typeof e.scale.minorTicks.color=="string"&&(r.scale.minorTicks.color=a(e.scale.minorTicks.color,s)))),r};exports.isCssVariable=f;exports.resolveColorRangeVariables=o;exports.resolveColorsArray=c;exports.resolveCssVariable=a;exports.resolveGaugeColorsVariables=y;exports.resolvePointerColorsVariables=b;exports.resolvePointerVariables=t;

package/utils/css-variables.mjs

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const y = (r) => typeof r != "string" ? !1 : r.startsWith("--") || r.startsWith("var(") && r.endsWith(")"), c = (r, s) => {
+  if (!y(r))
+    return r;
+  const e = s || document.documentElement, f = getComputedStyle(e);
+  let a;
+  if (r.startsWith("var(") && r.endsWith(")")) {
+    a = r.slice(4, -1).trim();
+    const l = a.indexOf(",");
+    l > -1 && (a = a.substring(0, l).trim());
+  } else if (r.startsWith("--"))
+    a = r;
+  else
+    return r;
+  return f.getPropertyValue(a).trim() || r;
+}, u = (r, s) => {
+  if (!r || typeof r != "object")
+    return r;
+  const e = { ...r };
+  return typeof r.color == "string" && (e.color = c(r.color, s)), e;
+}, t = (r, s) => Array.isArray(r) ? r.map((e) => u(e, s)) : r, i = (r, s) => {
+  if (!r || typeof r != "object")
+    return r;
+  const e = { ...r };
+  return typeof r.color == "string" && (e.color = c(r.color, s)), e;
+}, b = (r, s) => r && (Array.isArray(r) ? r.map((e) => i(e, s)) : i(r, s)), o = (r, s) => {
+  if (!r || typeof r != "object")
+    return r;
+  const e = { ...r };
+  return typeof r.color == "string" && (e.color = c(r.color, s)), Array.isArray(r.colors) && (e.colors = t(r.colors, s)), r.pointer && (e.pointer = b(r.pointer, s)), r.scale && typeof r.scale == "object" && (e.scale = { ...r.scale }, Array.isArray(r.scale.ranges) && (e.scale.ranges = t(r.scale.ranges, s)), r.scale.labels && typeof r.scale.labels == "object" && (e.scale.labels = { ...r.scale.labels }, typeof r.scale.labels.color == "string" && (e.scale.labels.color = c(r.scale.labels.color, s))), r.scale.majorTicks && typeof r.scale.majorTicks == "object" && (e.scale.majorTicks = { ...r.scale.majorTicks }, typeof r.scale.majorTicks.color == "string" && (e.scale.majorTicks.color = c(r.scale.majorTicks.color, s))), r.scale.minorTicks && typeof r.scale.minorTicks == "object" && (e.scale.minorTicks = { ...r.scale.minorTicks }, typeof r.scale.minorTicks.color == "string" && (e.scale.minorTicks.color = c(r.scale.minorTicks.color, s)))), e;
+};
+export {
+  y as isCssVariable,
+  u as resolveColorRangeVariables,
+  t as resolveColorsArray,
+  c as resolveCssVariable,
+  o as resolveGaugeColorsVariables,
+  b as resolvePointerColorsVariables,
+  i as resolvePointerVariables
+};