@progress/kendo-react-gauges 13.3.0-develop.9 → 13.4.0-develop.1

package/ArcCenter.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { InstanceObserver } from '@progress/kendo-charts';
+import { GaugeContext } from './GaugeContext.js';
+import * as React from 'react';
+export interface ArcCenterStyle {
+    /**
+     * The horizontal position of the arc center in pixels.
+     */
+    left: number;
+    /**
+     * The vertical position of the arc center in pixels.
+     */
+    top: number;
+}
+export interface ArcCenterValue {
+    /**
+     * The numeric value displayed in the arc center.
+     */
+    value: number;
+    /**
+     * The color of the text value. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color: string;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterState {
+    arcCenterStyles: ArcCenterStyle | null;
+    arcCenterValue: ArcCenterValue;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterProps {
+    render?: (value: number, color: string) => React.ReactNode;
+}
+/**
+ * @hidden
+ */
+declare class ArcCenter extends React.Component<ArcCenterProps, ArcCenterState> {
+    static contextType: React.Context<import('./GaugeContext').GaugeContextType | null>;
+    context: React.ContextType<typeof GaugeContext>;
+    readonly state: ArcCenterState;
+    gaugeObserver: InstanceObserver;
+    protected _element: HTMLDivElement | null;
+    constructor(props: ArcCenterProps);
+    componentDidMount(): void;
+    render(): any;
+    onRender(e: any): void;
+}
+export { ArcCenter };

package/ArcGauge.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ArcGaugeProps } from './ArcGaugeProps.js';
+import { Surface, Group } from '@progress/kendo-drawing';
+import * as React from 'react';
+export declare class ArcGauge extends React.Component<ArcGaugeProps, {}> {
+    private _baseGauge;
+    protected gaugeType: any;
+    /**
+     * @hidden
+     */
+    get gaugeInstance(): any;
+    /**
+     * The Drawing `Surface` of the Gauge.
+     */
+    get surface(): Surface | null;
+    /**
+     * The DOM element of the Gauge.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * Exports a Gauge component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
+     */
+    exportVisual(options?: any): Promise<Group>;
+    private getTarget;
+    private deriveOptionsFromParent;
+}

package/ArcGaugeProps.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseGaugeProps } from './BaseGaugeProps.js';
+import { ArcScale, ColorRange } from './types.js';
+/**
+ * Represents the props of the [KendoReact ArcGauge component](https://www.telerik.com/kendo-react-ui/components/gauges/arcgauge).
+ */
+export interface ArcGaugeProps extends BaseGaugeProps {
+    /**
+     * The value of the Gauge.
+     */
+    value: number;
+    /**
+     * The color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The color ranges of the value pointer
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/gauges/arcgauge/color-ranges)).
+     */
+    colors?: ColorRange[];
+    /**
+     * The opacity of the value pointer.
+     */
+    opacity?: number;
+    /**
+     * The scale options of the ArcGauge.
+     */
+    scale?: ArcScale;
+    /**
+     * @hidden
+     *
+     * Alias for backwards compatbility.
+     */
+    arcCenterRender?: (value: number, color: string) => React.ReactElement<any>;
+    /**
+     *
+     * A function that renders the center template of the Gauge.
+     */
+    centerRender?: (value: number, color: string) => React.ReactElement<any>;
+}

package/BaseGauge.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { Surface } from '@progress/kendo-drawing';
+import { BaseGaugePrivateProps } from './BaseGaugeProps.js';
+import { GaugeContextType } from './GaugeContext.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare class BaseGauge extends React.Component<BaseGaugePrivateProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        dir: PropTypes.Requireable<string>;
+        renderAs: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        renderAs: string;
+    };
+    /**
+     * @hidden
+     */
+    gaugeInstance: any | null;
+    /**
+     * @hidden
+     */
+    surface: Surface | null;
+    /**
+     * @hidden
+     */
+    get element(): HTMLDivElement;
+    protected _element: HTMLDivElement | null;
+    protected themeStore: any;
+    protected themeUnsubscriber: Function;
+    protected contextValue: GaugeContextType;
+    protected observersStore: any;
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    constructor(props: BaseGaugePrivateProps);
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: any): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * @hidden
+     */
+    instantiateCoreGauge(): void;
+    /**
+     * @hidden
+     */
+    refresh(): void;
+    /**
+     * @hidden
+     */
+    refreshValue(value: number): void;
+    /**
+     * @hidden
+     */
+    refreshAllValues(values: Array<number>): void;
+    /**
+     * @hidden
+     */
+    getDirection(dir?: string): boolean;
+    /**
+     * @hidden
+     */
+    getGaugeOptions(): any;
+    /**
+     * @hidden
+     */
+    trigger(name: string, e: any): void;
+    /**
+     * @hidden
+     */
+    onWindowResize: () => void;
+}

package/BaseGaugeProps.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Gauges } from './common/gauges.js';
+/**
+ * @hidden
+ */
+export interface BaseGaugePrivateProps extends BaseGaugeProps {
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent?: (options: any) => any;
+    /**
+     * @hidden
+     */
+    gaugeConstructor: any;
+    /**
+     * @hidden
+     */
+    getTarget: () => Gauges;
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeProps {
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * The styles that are applied to the component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional CSS classes to the component.
+     */
+    className?: string;
+    /**
+     * Sets the preferred rendering engine. If not supported by the browser, the Gauge switches to the first available mode.
+     *
+     * The supported values are:
+     * - `"svg"`—If available, renders the component as an inline `.svg` file.
+     * - `"canvas"`—If available, renders the component as a `canvas` element.
+     */
+    renderAs?: 'svg' | 'canvas';
+    /**
+     * If set to `true`, the Gauge plays animations when it displays the series. By default, animations are enabled.
+     */
+    transitions?: boolean;
+}

package/CircularGauge.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CircularGaugeProps } from './CircularGaugeProps.js';
+import { ArcGauge } from './ArcGauge.js';
+import * as React from 'react';
+export declare class CircularGauge extends ArcGauge implements React.Component<CircularGaugeProps, {}> {
+    protected gaugeType: any;
+}

package/CircularGaugeProps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ArcGaugeProps } from './ArcGaugeProps.js';
+import { CircularScale } from './types/circular-scale.interface.js';
+import { ColorRange } from './types/color-range.interface.js';
+/**
+ * Represents the props of the [KendoReact CircularGauge component](https://www.telerik.com/kendo-react-ui/components/gauges/circulargauge).
+ */
+export interface CircularGaugeProps extends ArcGaugeProps {
+    /**
+     * The color ranges of the value pointer
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/gauges/circulargauge/color-ranges)).
+     */
+    colors?: ColorRange[];
+    /**
+     * The scale options of the CircularGauge.
+     */
+    scale?: CircularScale;
+}

package/GaugeContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Store } from './store/store.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface GaugeContextType {
+    observersStore: Store;
+}
+/**
+ * @hidden
+ */
+export declare const GaugeContext: React.Context<GaugeContextType | null>;

package/LinearGauge.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { LinearGaugeProps } from './LinearGaugeProps.js';
+import { Surface, Group } from '@progress/kendo-drawing';
+import * as React from 'react';
+export declare class LinearGauge extends React.Component<LinearGaugeProps, {}> {
+    private _baseGauge;
+    /**
+     * @hidden
+     */
+    get gaugeInstance(): any;
+    /**
+     * The Drawing `Surface` of the Gauge.
+     */
+    get surface(): Surface | null;
+    /**
+     * The DOM element of the Gauge.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * Exports a Gauge component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
+     */
+    exportVisual(options?: any): Promise<Group>;
+    private getTarget;
+    private deriveOptionsFromParent;
+}

package/LinearGaugeProps.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseGaugeProps } from './BaseGaugeProps.js';
+import { LinearPointer, LinearScale } from './types.js';
+/**
+ * Represents the props of the [KendoReact LinearGauge component](https://www.telerik.com/kendo-react-ui/components/gauges/lineargauge).
+ */
+export interface LinearGaugeProps extends BaseGaugeProps {
+    /**
+     * The configuration of the pointers ([see example](https://www.telerik.com/kendo-react-ui/components/gauges/lineargauge/multiple-pointers)).
+     *
+     * Example:
+     * ```jsx
+     * <LinearGauge pointer={{ value: 75 }} />
+     * ```
+     */
+    pointer: LinearPointer | LinearPointer[];
+    /**
+     * The configuration of the scale.
+     *
+     * Example:
+     * ```jsx
+     * <LinearGauge scale={{ min: 0, max: 100 }} />
+     * ```
+     */
+    scale?: LinearScale;
+}

package/RadialGauge.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { RadialGaugeProps } from './RadialGaugeProps.js';
+import { Surface, Group } from '@progress/kendo-drawing';
+import * as React from 'react';
+export declare class RadialGauge extends React.Component<RadialGaugeProps, {}> {
+    private _baseGauge;
+    /**
+     * @hidden
+     */
+    get gaugeInstance(): any;
+    /**
+     * The Drawing `Surface` of the Gauge.
+     */
+    get surface(): Surface | null;
+    /**
+     * The DOM element of the Gauge.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * Exports a Gauge component as a Drawing `Scene`.
+     *
+     * @param {any} options - The parameters for the export operation.
+     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
+     */
+    exportVisual(options?: any): Promise<Group>;
+    private getTarget;
+    private deriveOptionsFromParent;
+}

package/RadialGaugeProps.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseGaugeProps } from './BaseGaugeProps.js';
+import { RadialPointer, RadialScale } from './types.js';
+/**
+ * Represents the props of the [KendoReact RadialGauge component](https://www.telerik.com/kendo-react-ui/components/gauges/radialgauge).
+ */
+export interface RadialGaugeProps extends BaseGaugeProps {
+    /**
+     * The configuration of the pointers ([see example](https://www.telerik.com/kendo-react-ui/components/gauges/radialgauge/multiple-pointers)).
+     *
+     * Example:
+     * ```jsx
+     * <RadialGauge pointer={{ value: 50 }} />
+     * ```
+     */
+    pointer: RadialPointer | RadialPointer[];
+    /**
+     * The configuration of the scale.
+     *
+     * Example:
+     * ```jsx
+     * <RadialGauge scale={{ startAngle: -90, endAngle: 180 }} />
+     * ```
+     */
+    scale?: RadialScale;
+}

package/common/gauges.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ArcGauge } from './../ArcGauge.js';
+import { LinearGauge } from './../LinearGauge.js';
+import { RadialGauge } from './../RadialGauge.js';
+type Gauges = ArcGauge | LinearGauge | RadialGauge;
+export { Gauges };

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 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:"13.3.0-develop.9",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}));
+!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=1e3/60,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()),c))};return a({}),{getState:()=>t,dispatch:a,subscribe:e=>(r.push(e),()=>r=r.filter(t=>t!==e))}},g=(e,t)=>{if(!t.type)return{};switch(t.type){case"set":return p.themeItem(e,t);case"push":return{...e,...t.payload};default:return e}},h=(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}},p={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}},d=e=>"object"==typeof e,m=(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(d(r)&&d(n)?m(r,n):r!==n)return!0}return!1},f=l.createContext(null);f.displayName="GaugeContext";const y=Object.freeze({name:"@progress/kendo-react-gauges",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.1",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(y,{component:"Gauge"}),this.licenseMessage=n.getLicenseMessage(y),this.themeStore=u(g),this.observersStore=u(h),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:d,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(m(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(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={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 v=b;r.registerForIntl(v);const I=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()}})}};I.contextType=f;let G=I;const O=(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},k=(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=O(e.color,t)),s})(e,t)):e,T=(e,t)=>{if(!e||"object"!=typeof e)return e;const s={...e};return"string"==typeof e.color&&(s.color=O(e.color,t)),s},C=(e,t)=>{if(!e||"object"!=typeof e)return e;const s={...e};return"string"==typeof e.color&&(s.color=O(e.color,t)),Array.isArray(e.colors)&&(s.colors=k(e.colors,t)),e.pointer&&(s.pointer=((e,t)=>e&&(Array.isArray(e)?e.map(e=>T(e,t)):T(e,t)))(e.pointer,t)),e.scale&&"object"==typeof e.scale&&(s.scale={...e.scale},Array.isArray(e.scale.ranges)&&(s.scale.ranges=k(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=O(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=O(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=O(e.scale.minorTicks.color,t)))),s};class _ 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?C(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(v,{...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(G,{render:s||t}))}exportVisual(e){return null!==this.gaugeInstance&&this.element?i.drawDOM(this.element,e):Promise.resolve(new i.Group)}}let w=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?C(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(v,{...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 S 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?C(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(v,{...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=_,e.CircularGauge=class extends _{constructor(){super(...arguments),this.gaugeType=a.CircularGauge}},e.LinearGauge=w,e.RadialGauge=S});