/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/DevExtreme */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import { AnimationEaseMode, Font, ChartsColor, Palette, PaletteExtensionMode, LabelOverlap, Theme, TextOverflow, WordWrap, DashStyle } from 'devextreme/common/charts'; import { ExportFormat, Orientation, HorizontalAlignment, VerticalAlignment, VerticalEdge } from 'devextreme/common'; import { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, TooltipHiddenEvent, TooltipShownEvent } from 'devextreme/viz/linear_gauge'; import { Format } from 'devextreme/common/core/localization'; import { GaugeIndicator } from 'devextreme/viz/gauges/base_gauge'; import DxLinearGauge from 'devextreme/viz/linear_gauge'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxLinearGaugeTypes from "devextreme/viz/linear_gauge_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/linear-gauge/nested"; import * as i3 from "devextreme-angular/core"; /** * The LinearGauge is a UI component that indicates values on a linear numeric scale. */ export declare class DxLinearGaugeComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; set _rangesContentChildren(value: QueryList); instance: DxLinearGauge; /** * Specifies animation properties. */ get animation(): { duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }; set animation(value: { duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }); /** * Specifies the color of the parent page element. */ get containerBackgroundColor(): string; set containerBackgroundColor(value: string); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Configures the exporting and printing features. */ get export(): { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }; set export(value: { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }); /** * Specifies the properties required to set the geometry of the LinearGauge UI component. */ get geometry(): { orientation?: Orientation; }; set geometry(value: { orientation?: Orientation; }); /** * Configures the loading indicator. */ get loadingIndicator(): { backgroundColor?: string; font?: Font; show?: boolean; text?: string; }; set loadingIndicator(value: { backgroundColor?: string; font?: Font; show?: boolean; text?: string; }); /** * Generates space around the UI component. */ get margin(): { bottom?: number; left?: number; right?: number; top?: number; }; set margin(value: { bottom?: number; left?: number; right?: number; top?: number; }); /** * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path. */ get pathModified(): boolean; set pathModified(value: boolean); /** * Specifies gauge range container properties. */ get rangeContainer(): { backgroundColor?: ChartsColor | string; horizontalOrientation?: HorizontalAlignment; offset?: number; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; ranges?: { color?: ChartsColor | string; endValue?: number; startValue?: number; }[]; verticalOrientation?: VerticalAlignment; width?: number | { end?: number; start?: number; }; }; set rangeContainer(value: { backgroundColor?: ChartsColor | string; horizontalOrientation?: HorizontalAlignment; offset?: number; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; ranges?: { color?: ChartsColor | string; endValue?: number; startValue?: number; }[]; verticalOrientation?: VerticalAlignment; width?: number | { end?: number; start?: number; }; }); /** * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates. */ get redrawOnResize(): boolean; set redrawOnResize(value: boolean); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies the gauge's scale properties. */ get scale(): { allowDecimals?: boolean | undefined; customMinorTicks?: Array; customTicks?: Array; endValue?: number; horizontalOrientation?: HorizontalAlignment; label?: { customizeText?: ((scaleValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indentFromTick?: number; overlappingBehavior?: LabelOverlap; useRangeColors?: boolean; visible?: boolean; }; minorTick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; minorTickInterval?: number | undefined; scaleDivisionFactor?: number; startValue?: number; tick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; tickInterval?: number | undefined; verticalOrientation?: VerticalAlignment; }; set scale(value: { allowDecimals?: boolean | undefined; customMinorTicks?: Array; customTicks?: Array; endValue?: number; horizontalOrientation?: HorizontalAlignment; label?: { customizeText?: ((scaleValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indentFromTick?: number; overlappingBehavior?: LabelOverlap; useRangeColors?: boolean; visible?: boolean; }; minorTick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; minorTickInterval?: number | undefined; scaleDivisionFactor?: number; startValue?: number; tick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; tickInterval?: number | undefined; verticalOrientation?: VerticalAlignment; }); /** * Specifies the UI component's size in pixels. */ get size(): { height?: number | undefined; width?: number | undefined; }; set size(value: { height?: number | undefined; width?: number | undefined; }); /** * Specifies the appearance properties of subvalue indicators. */ get subvalueIndicator(): GaugeIndicator | { type?: "rectangle" | "circle" | "rhombus" | "rangeBar" | "triangleMarker" | "textCloud"; }; set subvalueIndicator(value: GaugeIndicator | { type?: "rectangle" | "circle" | "rhombus" | "rangeBar" | "triangleMarker" | "textCloud"; }); /** * Specifies a set of subvalues to be designated by the subvalue indicators. */ get subvalues(): Array; set subvalues(value: Array); /** * Sets the name of the theme the UI component uses. */ get theme(): Theme; set theme(value: Theme); /** * Configures the UI component's title. */ get title(): string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }; set title(value: string | { font?: Font; horizontalAlignment?: HorizontalAlignment; margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: string | { font?: Font; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }); /** * Configures tooltips. */ get tooltip(): { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((scaleValue: { value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; interactive?: boolean; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }; set tooltip(value: { arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((scaleValue: { value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; interactive?: boolean; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }); /** * Specifies the main value on a gauge. */ get value(): number | undefined; set value(value: number | undefined); /** * Specifies the appearance properties of the value indicator. */ get valueIndicator(): GaugeIndicator | { type?: "rectangle" | "circle" | "rhombus" | "rangeBar" | "triangleMarker" | "textCloud"; }; set valueIndicator(value: GaugeIndicator | { type?: "rectangle" | "circle" | "rhombus" | "rangeBar" | "triangleMarker" | "textCloud"; }); /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the UI component's rendering has finished. */ onDrawn: EventEmitter; /** * A function that is executed after the UI component is exported. */ onExported: EventEmitter; /** * A function that is executed before the UI component is exported. */ onExporting: EventEmitter; /** * A function that is executed before a file with exported UI component is saved to the user's local storage. */ onFileSaving: EventEmitter; /** * A function that is executed when an error or warning occurs. */ onIncidentOccurred: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * A function that is executed when a tooltip becomes hidden. */ onTooltipHidden: EventEmitter; /** * A function that is executed when a tooltip appears. */ onTooltipShown: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ animationChange: EventEmitter<{ duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ containerBackgroundColorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ exportChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ geometryChange: EventEmitter<{ orientation?: Orientation; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loadingIndicatorChange: EventEmitter<{ backgroundColor?: string; font?: Font; show?: boolean; text?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ marginChange: EventEmitter<{ bottom?: number; left?: number; right?: number; top?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pathModifiedChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rangeContainerChange: EventEmitter<{ backgroundColor?: ChartsColor | string; horizontalOrientation?: HorizontalAlignment; offset?: number; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; ranges?: { color?: ChartsColor | string; endValue?: number; startValue?: number; }[]; verticalOrientation?: VerticalAlignment; width?: number | { end?: number; start?: number; }; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ redrawOnResizeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ scaleChange: EventEmitter<{ allowDecimals?: boolean | undefined; customMinorTicks?: Array; customTicks?: Array; endValue?: number; horizontalOrientation?: HorizontalAlignment; label?: { customizeText?: ((scaleValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indentFromTick?: number; overlappingBehavior?: LabelOverlap; useRangeColors?: boolean; visible?: boolean; }; minorTick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; minorTickInterval?: number | undefined; scaleDivisionFactor?: number; startValue?: number; tick?: { color?: string; length?: number; opacity?: number; visible?: boolean; width?: number; }; tickInterval?: number | undefined; verticalOrientation?: VerticalAlignment; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sizeChange: EventEmitter<{ height?: number | undefined; width?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ subvalueIndicatorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ subvaluesChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ themeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ titleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tooltipChange: EventEmitter<{ arrowLength?: number; border?: { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: any; cornerRadius?: number; customizeTooltip?: ((scaleValue: { value: number; valueText: string; }) => Record) | undefined; enabled?: boolean; font?: Font; format?: Format | undefined; interactive?: boolean; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueIndicatorChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxLinearGauge; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxLinearGaugeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/linear-gauge/nested'; export { DxLinearGaugeTypes };