/*! * 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 DataSource from 'devextreme/data/data_source'; import * as CommonChartTypes from 'devextreme/common/charts'; import { BackgroundImageLocation, ChartAxisScale, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent, AxisScale } from 'devextreme/viz/range_selector'; import { SliderValueChangeMode, ExportFormat, HorizontalAlignment, VerticalEdge } from 'devextreme/common'; import { dxChartCommonSeriesSettings } from 'devextreme/viz/chart'; import { Palette, PaletteExtensionMode, ChartsDataType, Font, TimeInterval, ScaleBreak, ScaleBreakLineStyle, DiscreteAxisDivisionMode, LabelOverlap, VisualRangeUpdateMode, Theme, TextOverflow, WordWrap } from 'devextreme/common/charts'; import { ChartSeries } from 'devextreme/viz/common'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { Format } from 'devextreme/common/core/localization'; import DxRangeSelector from 'devextreme/viz/range_selector'; import { ControlValueAccessor } from '@angular/forms'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxRangeSelectorTypes from "devextreme/viz/range_selector_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/range-selector/nested"; import * as i3 from "devextreme-angular/core"; /** * The RangeSelector is a UI component that allows a user to select a range of values on a scale. */ export declare class DxRangeSelectorComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck { private _watcherHelper; private _idh; set _breaksContentChildren(value: QueryList); set _seriesContentChildren(value: QueryList); instance: DxRangeSelector; /** * Specifies the properties for the range selector's background. */ get background(): { color?: string; image?: { location?: BackgroundImageLocation; url?: string | undefined; }; visible?: boolean; }; set background(value: { color?: string; image?: { location?: BackgroundImageLocation; url?: string | undefined; }; visible?: boolean; }); /** * Specifies the RangeSelector's behavior properties. */ get behavior(): { allowSlidersSwap?: boolean; animationEnabled?: boolean; manualRangeSelectionEnabled?: boolean; moveSelectedRangeByClick?: boolean; snapToTicks?: boolean; valueChangeMode?: SliderValueChangeMode; }; set behavior(value: { allowSlidersSwap?: boolean; animationEnabled?: boolean; manualRangeSelectionEnabled?: boolean; moveSelectedRangeByClick?: boolean; snapToTicks?: boolean; valueChangeMode?: SliderValueChangeMode; }); /** * Specifies the properties required to display a chart as the range selector's background. */ get chart(): { barGroupPadding?: number; barGroupWidth?: number | undefined; bottomIndent?: number; commonSeriesSettings?: dxChartCommonSeriesSettings; dataPrepareSettings?: { checkTypeForAllData?: boolean; convertToAxisDataType?: boolean; sortingMethod?: boolean | ((a: { arg: Date | number | string; val: Date | number | string; }, b: { arg: Date | number | string; val: Date | number | string; }) => number); }; maxBubbleSize?: number; minBubbleSize?: number; negativesAsZeroes?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; series?: Array | ChartSeries | undefined; seriesTemplate?: any; topIndent?: number; valueAxis?: { inverted?: boolean; logarithmBase?: number; max?: number | undefined; min?: number | undefined; type?: ChartAxisScale | undefined; valueType?: ChartsDataType | undefined; }; }; set chart(value: { barGroupPadding?: number; barGroupWidth?: number | undefined; bottomIndent?: number; commonSeriesSettings?: dxChartCommonSeriesSettings; dataPrepareSettings?: { checkTypeForAllData?: boolean; convertToAxisDataType?: boolean; sortingMethod?: boolean | ((a: { arg: Date | number | string; val: Date | number | string; }, b: { arg: Date | number | string; val: Date | number | string; }) => number); }; maxBubbleSize?: number; minBubbleSize?: number; negativesAsZeroes?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; series?: Array | ChartSeries | undefined; seriesTemplate?: any; topIndent?: number; valueAxis?: { inverted?: boolean; logarithmBase?: number; max?: number | undefined; min?: number | undefined; type?: ChartAxisScale | undefined; valueType?: ChartsDataType | undefined; }; }); /** * Specifies the color of the parent page element. */ get containerBackgroundColor(): string; set containerBackgroundColor(value: string); /** * Specifies a data source for the scale values and for the chart at the background. */ get dataSource(): Array | DataSource | DataSourceOptions | null | Store | string; set dataSource(value: Array | DataSource | DataSourceOptions | null | Store | string); /** * Specifies the data source field that provides data for the scale. */ get dataSourceField(): string; set dataSourceField(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; }); /** * Range selector's indent properties. */ get indent(): { left?: number | undefined; right?: number | undefined; }; set indent(value: { left?: number | undefined; right?: number | undefined; }); /** * Configures the loading indicator. */ get loadingIndicator(): { backgroundColor?: string; enabled?: boolean; font?: Font; show?: boolean; text?: string; }; set loadingIndicator(value: { backgroundColor?: string; enabled?: boolean; 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 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 properties of the range selector's scale. */ get scale(): { aggregationGroupWidth?: number | undefined; aggregationInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; allowDecimals?: boolean | undefined; breaks?: Array | { endValue?: Date | number | string | undefined; startValue?: Date | number | string | undefined; }[]; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; categories?: Array; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean; endValue?: Date | number | string | undefined; holidays?: Array | Array; label?: { customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; overlappingBehavior?: LabelOverlap; topIndent?: number; visible?: boolean; }; linearThreshold?: number; logarithmBase?: number; marker?: { label?: { customizeText?: ((markerValue: { value: Date | number; valueText: string; }) => string); format?: Format | undefined; }; separatorHeight?: number; textLeftIndent?: number; textTopIndent?: number; topIndent?: number; visible?: boolean; }; maxRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minorTick?: { color?: string; opacity?: number; visible?: boolean; width?: number; }; minorTickCount?: number | undefined; minorTickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; placeholderHeight?: number | undefined; showCustomBoundaryTicks?: boolean; singleWorkdays?: Array | Array; startValue?: Date | number | string | undefined; tick?: { color?: string; opacity?: number; width?: number; }; tickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; type?: AxisScale | undefined; valueType?: ChartsDataType | undefined; workdaysOnly?: boolean; workWeek?: Array; }; set scale(value: { aggregationGroupWidth?: number | undefined; aggregationInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; allowDecimals?: boolean | undefined; breaks?: Array | { endValue?: Date | number | string | undefined; startValue?: Date | number | string | undefined; }[]; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; categories?: Array; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean; endValue?: Date | number | string | undefined; holidays?: Array | Array; label?: { customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; overlappingBehavior?: LabelOverlap; topIndent?: number; visible?: boolean; }; linearThreshold?: number; logarithmBase?: number; marker?: { label?: { customizeText?: ((markerValue: { value: Date | number; valueText: string; }) => string); format?: Format | undefined; }; separatorHeight?: number; textLeftIndent?: number; textTopIndent?: number; topIndent?: number; visible?: boolean; }; maxRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minorTick?: { color?: string; opacity?: number; visible?: boolean; width?: number; }; minorTickCount?: number | undefined; minorTickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; placeholderHeight?: number | undefined; showCustomBoundaryTicks?: boolean; singleWorkdays?: Array | Array; startValue?: Date | number | string | undefined; tick?: { color?: string; opacity?: number; width?: number; }; tickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; type?: AxisScale | undefined; valueType?: ChartsDataType | undefined; workdaysOnly?: boolean; workWeek?: Array; }); /** * Specifies the color of the selected range. */ get selectedRangeColor(): string; set selectedRangeColor(value: string); /** * Specifies how the selected range should behave when data is updated. Applies only when the RangeSelector is bound to a data source. */ get selectedRangeUpdateMode(): VisualRangeUpdateMode; set selectedRangeUpdateMode(value: VisualRangeUpdateMode); /** * Specifies range selector shutter properties. */ get shutter(): { color?: string | undefined; opacity?: number; }; set shutter(value: { color?: string | undefined; opacity?: number; }); /** * 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 of the range selector's slider handles. */ get sliderHandle(): { color?: string; opacity?: number; width?: number; }; set sliderHandle(value: { color?: string; opacity?: number; width?: number; }); /** * Defines the properties of the range selector slider markers. */ get sliderMarker(): { color?: string; customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; invalidRangeColor?: string; paddingLeftRight?: number; paddingTopBottom?: number; placeholderHeight?: number | undefined; visible?: boolean; }; set sliderMarker(value: { color?: string; customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; invalidRangeColor?: string; paddingLeftRight?: number; paddingTopBottom?: number; placeholderHeight?: number | undefined; visible?: boolean; }); /** * 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; }); /** * The selected range (initial or current). Equals the entire scale when not set. */ get value(): Array | CommonChartTypes.VisualRange; set value(value: Array | CommonChartTypes.VisualRange); /** * 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 after the UI component's value is changed. */ onValueChanged: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ backgroundChange: EventEmitter<{ color?: string; image?: { location?: BackgroundImageLocation; url?: string | undefined; }; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ behaviorChange: EventEmitter<{ allowSlidersSwap?: boolean; animationEnabled?: boolean; manualRangeSelectionEnabled?: boolean; moveSelectedRangeByClick?: boolean; snapToTicks?: boolean; valueChangeMode?: SliderValueChangeMode; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ chartChange: EventEmitter<{ barGroupPadding?: number; barGroupWidth?: number | undefined; bottomIndent?: number; commonSeriesSettings?: dxChartCommonSeriesSettings; dataPrepareSettings?: { checkTypeForAllData?: boolean; convertToAxisDataType?: boolean; sortingMethod?: boolean | ((a: { arg: Date | number | string; val: Date | number | string; }, b: { arg: Date | number | string; val: Date | number | string; }) => number); }; maxBubbleSize?: number; minBubbleSize?: number; negativesAsZeroes?: boolean; palette?: Array | Palette; paletteExtensionMode?: PaletteExtensionMode; series?: Array | ChartSeries | undefined; seriesTemplate?: any; topIndent?: number; valueAxis?: { inverted?: boolean; logarithmBase?: number; max?: number | undefined; min?: number | undefined; type?: ChartAxisScale | undefined; valueType?: ChartsDataType | undefined; }; }>; /** * 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. */ dataSourceChange: EventEmitter | DataSource | DataSourceOptions | null | Store | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceFieldChange: 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. */ indentChange: EventEmitter<{ left?: number | undefined; right?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loadingIndicatorChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; 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. */ 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<{ aggregationGroupWidth?: number | undefined; aggregationInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; allowDecimals?: boolean | undefined; breaks?: Array | { endValue?: Date | number | string | undefined; startValue?: Date | number | string | undefined; }[]; breakStyle?: { color?: string; line?: ScaleBreakLineStyle; width?: number; }; categories?: Array; discreteAxisDivisionMode?: DiscreteAxisDivisionMode; endOnTick?: boolean; endValue?: Date | number | string | undefined; holidays?: Array | Array; label?: { customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; overlappingBehavior?: LabelOverlap; topIndent?: number; visible?: boolean; }; linearThreshold?: number; logarithmBase?: number; marker?: { label?: { customizeText?: ((markerValue: { value: Date | number; valueText: string; }) => string); format?: Format | undefined; }; separatorHeight?: number; textLeftIndent?: number; textTopIndent?: number; topIndent?: number; visible?: boolean; }; maxRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minorTick?: { color?: string; opacity?: number; visible?: boolean; width?: number; }; minorTickCount?: number | undefined; minorTickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; minRange?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; placeholderHeight?: number | undefined; showCustomBoundaryTicks?: boolean; singleWorkdays?: Array | Array; startValue?: Date | number | string | undefined; tick?: { color?: string; opacity?: number; width?: number; }; tickInterval?: number | TimeInterval | { days?: number; hours?: number; milliseconds?: number; minutes?: number; months?: number; quarters?: number; seconds?: number; weeks?: number; years?: number; }; type?: AxisScale | undefined; valueType?: ChartsDataType | undefined; workdaysOnly?: boolean; workWeek?: Array; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedRangeColorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedRangeUpdateModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ shutterChange: EventEmitter<{ color?: string | undefined; opacity?: number; }>; /** * 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. */ sliderHandleChange: EventEmitter<{ color?: string; opacity?: number; width?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sliderMarkerChange: EventEmitter<{ color?: string; customizeText?: ((scaleValue: { value: Date | number | string; valueText: string; }) => string); font?: Font; format?: Format | undefined; invalidRangeColor?: string; paddingLeftRight?: number; paddingTopBottom?: number; placeholderHeight?: number | undefined; visible?: boolean; }>; /** * 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. */ valueChange: EventEmitter | CommonChartTypes.VisualRange>; /** * */ onBlur: EventEmitter; change(_: any): void; touched: (_: any) => void; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxRangeSelector; writeValue(value: any): void; registerOnChange(fn: (_: any) => void): void; registerOnTouched(fn: () => void): void; _createWidget(element: any): void; 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 DxRangeSelectorModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/range-selector/nested'; export { DxRangeSelectorTypes };