devextreme-angular/fesm2022/devextreme-angular-ui-range-selector.mjs.map

DevExtreme UI and Visualization Components for Angular

{"version":3,"file":"devextreme-angular-ui-range-selector.mjs","sources":["../../../dist/ui/range-selector/index.ts","../../../dist/ui/range-selector/devextreme-angular-ui-range-selector.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED\n *\n * This software may be modified and distributed under the terms\n * of the MIT license. See the LICENSE file in the root of the project for details.\n *\n * https://github.com/DevExpress/DevExtreme\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n    TransferState,\n    Component,\n    NgModule,\n    ElementRef,\n    NgZone,\n    PLATFORM_ID,\n    Inject,\n\n    Input,\n    Output,\n    OnDestroy,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    OnChanges,\n    DoCheck,\n    SimpleChanges,\n    ContentChildren,\n    QueryList\n} from '@angular/core';\n\n\nimport type * as CommonChartTypes from 'devextreme/common/charts';\nimport type { BackgroundImageLocation, ChartAxisScale, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent, AxisScale } from 'devextreme/viz/range_selector';\nimport type { SliderValueChangeMode, ExportFormat, HorizontalAlignment, VerticalEdge } from 'devextreme/common';\nimport type { dxChartCommonSeriesSettings } from 'devextreme/viz/chart';\nimport type { Palette, PaletteExtensionMode, ChartsDataType, Font, TimeInterval, ScaleBreak, ScaleBreakLineStyle, DiscreteAxisDivisionMode, LabelOverlap, VisualRangeUpdateMode, Theme, TextOverflow, WordWrap } from 'devextreme/common/charts';\nimport type { ChartSeries } from 'devextreme/viz/common';\nimport type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';\nimport type { Store } from 'devextreme/data/store';\nimport type { Format } from 'devextreme/common/core/localization';\n\nimport DxRangeSelector from 'devextreme/viz/range_selector';\n\nimport {\n    ControlValueAccessor,\n    NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nimport {\n    DxComponent,\n    DxTemplateHost,\n    DxIntegrationModule,\n    DxTemplateModule,\n    NestedOptionHost,\n    IterableDifferHelper,\n    WatcherHelper,\n    CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxoBackgroundModule } from 'devextreme-angular/ui/nested';\nimport { DxoImageModule } from 'devextreme-angular/ui/nested';\nimport { DxoBehaviorModule } from 'devextreme-angular/ui/nested';\nimport { DxoChartModule } from 'devextreme-angular/ui/nested';\nimport { DxoCommonSeriesSettingsModule } from 'devextreme-angular/ui/nested';\nimport { DxoAggregationModule } from 'devextreme-angular/ui/nested';\nimport { DxoAreaModule } from 'devextreme-angular/ui/nested';\nimport { DxoBorderModule } from 'devextreme-angular/ui/nested';\nimport { DxoHoverStyleModule } from 'devextreme-angular/ui/nested';\nimport { DxoHatchingModule } from 'devextreme-angular/ui/nested';\nimport { DxoLabelModule } from 'devextreme-angular/ui/nested';\nimport { DxoConnectorModule } from 'devextreme-angular/ui/nested';\nimport { DxoPointModule } from 'devextreme-angular/ui/nested';\nimport { DxoHeightModule } from 'devextreme-angular/ui/nested';\nimport { DxoUrlModule } from 'devextreme-angular/ui/nested';\nimport { DxoWidthModule } from 'devextreme-angular/ui/nested';\nimport { DxoSelectionStyleModule } from 'devextreme-angular/ui/nested';\nimport { DxoReductionModule } from 'devextreme-angular/ui/nested';\nimport { DxoValueErrorBarModule } from 'devextreme-angular/ui/nested';\nimport { DxoBarModule } from 'devextreme-angular/ui/nested';\nimport { DxoBubbleModule } from 'devextreme-angular/ui/nested';\nimport { DxoCandlestickModule } from 'devextreme-angular/ui/nested';\nimport { DxoColorModule } from 'devextreme-angular/ui/nested';\nimport { DxoFullstackedareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoFullstackedbarModule } from 'devextreme-angular/ui/nested';\nimport { DxoFullstackedlineModule } from 'devextreme-angular/ui/nested';\nimport { DxoFullstackedsplineModule } from 'devextreme-angular/ui/nested';\nimport { DxoFullstackedsplineareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoArgumentFormatModule } from 'devextreme-angular/ui/nested';\nimport { DxoFontModule } from 'devextreme-angular/ui/nested';\nimport { DxoFormatModule } from 'devextreme-angular/ui/nested';\nimport { DxoLineModule } from 'devextreme-angular/ui/nested';\nimport { DxoRangeareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoRangebarModule } from 'devextreme-angular/ui/nested';\nimport { DxoScatterModule } from 'devextreme-angular/ui/nested';\nimport { DxoSplineModule } from 'devextreme-angular/ui/nested';\nimport { DxoSplineareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoStackedareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoStackedbarModule } from 'devextreme-angular/ui/nested';\nimport { DxoStackedlineModule } from 'devextreme-angular/ui/nested';\nimport { DxoStackedsplineModule } from 'devextreme-angular/ui/nested';\nimport { DxoStackedsplineareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoStepareaModule } from 'devextreme-angular/ui/nested';\nimport { DxoSteplineModule } from 'devextreme-angular/ui/nested';\nimport { DxoStockModule } from 'devextreme-angular/ui/nested';\nimport { DxoDataPrepareSettingsModule } from 'devextreme-angular/ui/nested';\nimport { DxiSeriesModule } from 'devextreme-angular/ui/nested';\nimport { DxoSeriesTemplateModule } from 'devextreme-angular/ui/nested';\nimport { DxoValueAxisModule } from 'devextreme-angular/ui/nested';\nimport { DxoExportModule } from 'devextreme-angular/ui/nested';\nimport { DxoIndentModule } from 'devextreme-angular/ui/nested';\nimport { DxoLoadingIndicatorModule } from 'devextreme-angular/ui/nested';\nimport { DxoMarginModule } from 'devextreme-angular/ui/nested';\nimport { DxoScaleModule } from 'devextreme-angular/ui/nested';\nimport { DxoAggregationIntervalModule } from 'devextreme-angular/ui/nested';\nimport { DxiBreakModule } from 'devextreme-angular/ui/nested';\nimport { DxoBreakStyleModule } from 'devextreme-angular/ui/nested';\nimport { DxoMarkerModule } from 'devextreme-angular/ui/nested';\nimport { DxoMaxRangeModule } from 'devextreme-angular/ui/nested';\nimport { DxoMinorTickModule } from 'devextreme-angular/ui/nested';\nimport { DxoMinorTickIntervalModule } from 'devextreme-angular/ui/nested';\nimport { DxoMinRangeModule } from 'devextreme-angular/ui/nested';\nimport { DxoTickModule } from 'devextreme-angular/ui/nested';\nimport { DxoTickIntervalModule } from 'devextreme-angular/ui/nested';\nimport { DxoShutterModule } from 'devextreme-angular/ui/nested';\nimport { DxoSizeModule } from 'devextreme-angular/ui/nested';\nimport { DxoSliderHandleModule } from 'devextreme-angular/ui/nested';\nimport { DxoSliderMarkerModule } from 'devextreme-angular/ui/nested';\nimport { DxoTitleModule } from 'devextreme-angular/ui/nested';\nimport { DxoSubtitleModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoRangeSelectorAggregationModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorAggregationIntervalModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorArgumentFormatModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorBackgroundModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorBackgroundImageModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorBehaviorModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorBorderModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxiRangeSelectorBreakModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorBreakStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorChartModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorColorModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorCommonSeriesSettingsModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorCommonSeriesSettingsHoverStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorCommonSeriesSettingsLabelModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorCommonSeriesSettingsSelectionStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorConnectorModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorDataPrepareSettingsModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorExportModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorFontModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorFormatModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorHatchingModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorHeightModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorHoverStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorImageModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorIndentModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorLabelModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorLengthModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorLoadingIndicatorModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMarginModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMarkerModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMarkerLabelModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMaxRangeModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMinorTickModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMinorTickIntervalModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorMinRangeModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorPointModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorPointBorderModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorPointHoverStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorPointImageModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorPointSelectionStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorReductionModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorScaleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorScaleLabelModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSelectionStyleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxiRangeSelectorSeriesModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSeriesBorderModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSeriesTemplateModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorShutterModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSizeModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSliderHandleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSliderMarkerModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorSubtitleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorTickModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorTickIntervalModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorTitleModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorUrlModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorValueModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorValueAxisModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorValueErrorBarModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { DxoRangeSelectorWidthModule } from 'devextreme-angular/ui/range-selector/nested';\nimport { \n           PROPERTY_TOKEN_breaks,\n           PROPERTY_TOKEN_series,\n     } from 'devextreme-angular/core/tokens';\n\n\n\nconst CUSTOM_VALUE_ACCESSOR_PROVIDER = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => DxRangeSelectorComponent),\n    multi: true\n};\n/**\n * The RangeSelector is a UI component that allows a user to select a range of values on a scale.\n\n */\n@Component({\n    selector: 'dx-range-selector',\n    template: '',\n    styles: [ ' :host {  display: block; }'],\n    host: { ngSkipHydration: 'true' },\n    imports: [ DxIntegrationModule ],\n    providers: [\n        DxTemplateHost,\n        WatcherHelper,\n        CUSTOM_VALUE_ACCESSOR_PROVIDER,\n        NestedOptionHost,\n        IterableDifferHelper\n    ]\n})\nexport class DxRangeSelectorComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck {\n\n    @ContentChildren(PROPERTY_TOKEN_breaks)\n    set _breaksContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('breaks', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_series)\n    set _seriesContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('series', value);\n    }\n\n    instance: DxRangeSelector = null;\n\n    /**\n     * Specifies the properties for the range selector&apos;s background.\n    \n     */\n    @Input()\n    get background(): { color?: string, image?: { location?: BackgroundImageLocation, url?: string | undefined }, visible?: boolean } {\n        return this._getOption('background');\n    }\n    set background(value: { color?: string, image?: { location?: BackgroundImageLocation, url?: string | undefined }, visible?: boolean }) {\n        this._setOption('background', value);\n    }\n\n\n    /**\n     * Specifies the RangeSelector&apos;s behavior properties.\n    \n     */\n    @Input()\n    get behavior(): { allowSlidersSwap?: boolean, animationEnabled?: boolean, manualRangeSelectionEnabled?: boolean, moveSelectedRangeByClick?: boolean, snapToTicks?: boolean, valueChangeMode?: SliderValueChangeMode } {\n        return this._getOption('behavior');\n    }\n    set behavior(value: { allowSlidersSwap?: boolean, animationEnabled?: boolean, manualRangeSelectionEnabled?: boolean, moveSelectedRangeByClick?: boolean, snapToTicks?: boolean, valueChangeMode?: SliderValueChangeMode }) {\n        this._setOption('behavior', value);\n    }\n\n\n    /**\n     * Specifies the properties required to display a chart as the range selector&apos;s background.\n    \n     */\n    @Input()\n    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<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, series?: Array<ChartSeries> | ChartSeries | undefined, seriesTemplate?: any, topIndent?: number, valueAxis?: { inverted?: boolean, logarithmBase?: number, max?: number | undefined, min?: number | undefined, type?: ChartAxisScale | undefined, valueType?: ChartsDataType | undefined } } {\n        return this._getOption('chart');\n    }\n    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<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, series?: Array<ChartSeries> | ChartSeries | undefined, seriesTemplate?: any, topIndent?: number, valueAxis?: { inverted?: boolean, logarithmBase?: number, max?: number | undefined, min?: number | undefined, type?: ChartAxisScale | undefined, valueType?: ChartsDataType | undefined } }) {\n        this._setOption('chart', value);\n    }\n\n\n    /**\n     * Specifies the color of the parent page element.\n    \n     */\n    @Input()\n    get containerBackgroundColor(): string {\n        return this._getOption('containerBackgroundColor');\n    }\n    set containerBackgroundColor(value: string) {\n        this._setOption('containerBackgroundColor', value);\n    }\n\n\n    /**\n     * Specifies a data source for the scale values and for the chart at the background.\n    \n     */\n    @Input()\n    get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string {\n        return this._getOption('dataSource');\n    }\n    set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string) {\n        this._setOption('dataSource', value);\n    }\n\n\n    /**\n     * Specifies the data source field that provides data for the scale.\n    \n     */\n    @Input()\n    get dataSourceField(): string {\n        return this._getOption('dataSourceField');\n    }\n    set dataSourceField(value: string) {\n        this._setOption('dataSourceField', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component responds to user interaction.\n    \n     */\n    @Input()\n    get disabled(): boolean {\n        return this._getOption('disabled');\n    }\n    set disabled(value: boolean) {\n        this._setOption('disabled', value);\n    }\n\n\n    /**\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\n    \n     */\n    @Input()\n    get elementAttr(): Record<string, any> {\n        return this._getOption('elementAttr');\n    }\n    set elementAttr(value: Record<string, any>) {\n        this._setOption('elementAttr', value);\n    }\n\n\n    /**\n     * Configures the exporting and printing features.\n    \n     */\n    @Input()\n    get export(): { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined } {\n        return this._getOption('export');\n    }\n    set export(value: { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }) {\n        this._setOption('export', value);\n    }\n\n\n    /**\n     * Range selector&apos;s indent properties.\n    \n     */\n    @Input()\n    get indent(): { left?: number | undefined, right?: number | undefined } {\n        return this._getOption('indent');\n    }\n    set indent(value: { left?: number | undefined, right?: number | undefined }) {\n        this._setOption('indent', value);\n    }\n\n\n    /**\n     * Configures the loading indicator.\n    \n     */\n    @Input()\n    get loadingIndicator(): { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string } {\n        return this._getOption('loadingIndicator');\n    }\n    set loadingIndicator(value: { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }) {\n        this._setOption('loadingIndicator', value);\n    }\n\n\n    /**\n     * Generates space around the UI component.\n    \n     */\n    @Input()\n    get margin(): { bottom?: number, left?: number, right?: number, top?: number } {\n        return this._getOption('margin');\n    }\n    set margin(value: { bottom?: number, left?: number, right?: number, top?: number }) {\n        this._setOption('margin', value);\n    }\n\n\n    /**\n     * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.\n    \n     */\n    @Input()\n    get pathModified(): boolean {\n        return this._getOption('pathModified');\n    }\n    set pathModified(value: boolean) {\n        this._setOption('pathModified', value);\n    }\n\n\n    /**\n     * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.\n    \n     */\n    @Input()\n    get redrawOnResize(): boolean {\n        return this._getOption('redrawOnResize');\n    }\n    set redrawOnResize(value: boolean) {\n        this._setOption('redrawOnResize', value);\n    }\n\n\n    /**\n     * Switches the UI component to a right-to-left representation.\n    \n     */\n    @Input()\n    get rtlEnabled(): boolean {\n        return this._getOption('rtlEnabled');\n    }\n    set rtlEnabled(value: boolean) {\n        this._setOption('rtlEnabled', value);\n    }\n\n\n    /**\n     * Specifies properties of the range selector&apos;s scale.\n    \n     */\n    @Input()\n    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<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, 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<Date | string> | Array<number>, 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<number> } {\n        return this._getOption('scale');\n    }\n    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<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, 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<Date | string> | Array<number>, 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<number> }) {\n        this._setOption('scale', value);\n    }\n\n\n    /**\n     * Specifies the color of the selected range.\n    \n     */\n    @Input()\n    get selectedRangeColor(): string {\n        return this._getOption('selectedRangeColor');\n    }\n    set selectedRangeColor(value: string) {\n        this._setOption('selectedRangeColor', value);\n    }\n\n\n    /**\n     * Specifies how the selected range should behave when data is updated. Applies only when the RangeSelector is bound to a data source.\n    \n     */\n    @Input()\n    get selectedRangeUpdateMode(): VisualRangeUpdateMode {\n        return this._getOption('selectedRangeUpdateMode');\n    }\n    set selectedRangeUpdateMode(value: VisualRangeUpdateMode) {\n        this._setOption('selectedRangeUpdateMode', value);\n    }\n\n\n    /**\n     * Specifies range selector shutter properties.\n    \n     */\n    @Input()\n    get shutter(): { color?: string | undefined, opacity?: number } {\n        return this._getOption('shutter');\n    }\n    set shutter(value: { color?: string | undefined, opacity?: number }) {\n        this._setOption('shutter', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s size in pixels.\n    \n     */\n    @Input()\n    get size(): { height?: number | undefined, width?: number | undefined } {\n        return this._getOption('size');\n    }\n    set size(value: { height?: number | undefined, width?: number | undefined }) {\n        this._setOption('size', value);\n    }\n\n\n    /**\n     * Specifies the appearance of the range selector&apos;s slider handles.\n    \n     */\n    @Input()\n    get sliderHandle(): { color?: string, opacity?: number, width?: number } {\n        return this._getOption('sliderHandle');\n    }\n    set sliderHandle(value: { color?: string, opacity?: number, width?: number }) {\n        this._setOption('sliderHandle', value);\n    }\n\n\n    /**\n     * Defines the properties of the range selector slider markers.\n    \n     */\n    @Input()\n    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 } {\n        return this._getOption('sliderMarker');\n    }\n    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 }) {\n        this._setOption('sliderMarker', value);\n    }\n\n\n    /**\n     * Sets the name of the theme the UI component uses.\n    \n     */\n    @Input()\n    get theme(): Theme {\n        return this._getOption('theme');\n    }\n    set theme(value: Theme) {\n        this._setOption('theme', value);\n    }\n\n\n    /**\n     * Configures the UI component&apos;s title.\n    \n     */\n    @Input()\n    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 } {\n        return this._getOption('title');\n    }\n    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 }) {\n        this._setOption('title', value);\n    }\n\n\n    /**\n     * The selected range (initial or current). Equals the entire scale when not set.\n    \n     */\n    @Input()\n    get value(): Array<Date | number | string> | CommonChartTypes.VisualRange {\n        return this._getOption('value');\n    }\n    set value(value: Array<Date | number | string> | CommonChartTypes.VisualRange) {\n        this._setOption('value', value);\n    }\n\n    /**\n    \n     * A function that is executed before the UI component is disposed of.\n    \n    \n     */\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component&apos;s rendering has finished.\n    \n    \n     */\n    @Output() onDrawn: EventEmitter<DrawnEvent>;\n\n    /**\n    \n     * A function that is executed after the UI component is exported.\n    \n    \n     */\n    @Output() onExported: EventEmitter<ExportedEvent>;\n\n    /**\n    \n     * A function that is executed before the UI component is exported.\n    \n    \n     */\n    @Output() onExporting: EventEmitter<ExportingEvent>;\n\n    /**\n    \n     * A function that is executed before a file with exported UI component is saved to the user&apos;s local storage.\n    \n    \n     */\n    @Output() onFileSaving: EventEmitter<FileSavingEvent>;\n\n    /**\n    \n     * A function that is executed when an error or warning occurs.\n    \n    \n     */\n    @Output() onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;\n\n    /**\n    \n     * A function used in JavaScript frameworks to save the UI component instance.\n    \n    \n     */\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n    /**\n    \n     * A function that is executed after a UI component property is changed.\n    \n    \n     */\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n    /**\n    \n     * A function that is executed after the UI component&apos;s value is changed.\n    \n    \n     */\n    @Output() onValueChanged: EventEmitter<ValueChangedEvent>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() backgroundChange: EventEmitter<{ color?: string, image?: { location?: BackgroundImageLocation, url?: string | undefined }, visible?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() behaviorChange: EventEmitter<{ allowSlidersSwap?: boolean, animationEnabled?: boolean, manualRangeSelectionEnabled?: boolean, moveSelectedRangeByClick?: boolean, snapToTicks?: boolean, valueChangeMode?: SliderValueChangeMode }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() 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<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, series?: Array<ChartSeries> | ChartSeries | undefined, seriesTemplate?: any, topIndent?: number, valueAxis?: { inverted?: boolean, logarithmBase?: number, max?: number | undefined, min?: number | undefined, type?: ChartAxisScale | undefined, valueType?: ChartsDataType | undefined } }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() containerBackgroundColorChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dataSourceFieldChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() exportChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() indentChange: EventEmitter<{ left?: number | undefined, right?: number | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() loadingIndicatorChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() marginChange: EventEmitter<{ bottom?: number, left?: number, right?: number, top?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pathModifiedChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() redrawOnResizeChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() 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<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, 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<Date | string> | Array<number>, 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<number> }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() selectedRangeColorChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() selectedRangeUpdateModeChange: EventEmitter<VisualRangeUpdateMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() shutterChange: EventEmitter<{ color?: string | undefined, opacity?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() sizeChange: EventEmitter<{ height?: number | undefined, width?: number | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() sliderHandleChange: EventEmitter<{ color?: string, opacity?: number, width?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() 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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() themeChange: EventEmitter<Theme>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() titleChange: EventEmitter<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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueChange: EventEmitter<Array<Date | number | string> | CommonChartTypes.VisualRange>;\n\n    /**\n    \n     * \n    \n    \n     */\n    @Output() onBlur: EventEmitter<any>;\n\n\n    @HostListener('valueChange', ['$event']) change(_) { }\n    @HostListener('onBlur', ['$event']) touched = (_) => {};\n\n\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\n            private _watcherHelper: WatcherHelper,\n            private _idh: IterableDifferHelper,\n            optionHost: NestedOptionHost,\n            transferState: TransferState,\n            @Inject(PLATFORM_ID) platformId: any) {\n\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\n\n        this._createEventEmitters([\n            { subscribe: 'disposing', emit: 'onDisposing' },\n            { subscribe: 'drawn', emit: 'onDrawn' },\n            { subscribe: 'exported', emit: 'onExported' },\n            { subscribe: 'exporting', emit: 'onExporting' },\n            { subscribe: 'fileSaving', emit: 'onFileSaving' },\n            { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },\n            { subscribe: 'initialized', emit: 'onInitialized' },\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\n            { subscribe: 'valueChanged', emit: 'onValueChanged' },\n            { emit: 'backgroundChange' },\n            { emit: 'behaviorChange' },\n            { emit: 'chartChange' },\n            { emit: 'containerBackgroundColorChange' },\n            { emit: 'dataSourceChange' },\n            { emit: 'dataSourceFieldChange' },\n            { emit: 'disabledChange' },\n            { emit: 'elementAttrChange' },\n            { emit: 'exportChange' },\n            { emit: 'indentChange' },\n            { emit: 'loadingIndicatorChange' },\n            { emit: 'marginChange' },\n            { emit: 'pathModifiedChange' },\n            { emit: 'redrawOnResizeChange' },\n            { emit: 'rtlEnabledChange' },\n            { emit: 'scaleChange' },\n            { emit: 'selectedRangeColorChange' },\n            { emit: 'selectedRangeUpdateModeChange' },\n            { emit: 'shutterChange' },\n            { emit: 'sizeChange' },\n            { emit: 'sliderHandleChange' },\n            { emit: 'sliderMarkerChange' },\n            { emit: 'themeChange' },\n            { emit: 'titleChange' },\n            { emit: 'valueChange' },\n            { emit: 'onBlur' }\n        ]);\n\n        this._idh.setHost(this);\n        optionHost.setHost(this);\n    }\n\n    protected _createInstance(element, options) {\n\n        return new DxRangeSelector(element, options);\n    }\n\n\n    writeValue(value: any): void {\n        this.eventHelper.lockedValueChangeEvent = true;\n        this.value = value;\n        this.eventHelper.lockedValueChangeEvent = false;\n    }\n\n    registerOnChange(fn: (_: any) => void): void { this.change = fn; }\n    registerOnTouched(fn: () => void): void { this.touched = fn; }\n\n    _createWidget(element: any) {\n        super._createWidget(element);\n        this.instance.on('focusOut', (e) => {\n            this.eventHelper.fireNgEvent('onBlur', [e]);\n        });\n    }\n\n    ngOnDestroy() {\n        this._destroyWidget();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        super.ngOnChanges(changes);\n        this.setupChanges('dataSource', changes);\n        this.setupChanges('value', changes);\n    }\n\n    setupChanges(prop: string, changes: SimpleChanges) {\n        if (!(prop in this._optionsToUpdate)) {\n            this._idh.setup(prop, changes);\n        }\n    }\n\n    ngDoCheck() {\n        this._idh.doCheck('dataSource');\n        this._idh.doCheck('value');\n        this._watcherHelper.checkWatchers();\n        super.ngDoCheck();\n        super.clearChangedOptions();\n    }\n\n    _setOption(name: string, value: any) {\n        let isSetup = this._idh.setupSingle(name, value);\n        let isChanged = this._idh.getChanges(name, value) !== null;\n\n        if (isSetup || isChanged) {\n            super._setOption(name, value);\n        }\n    }\n}\n\n@NgModule({\n  imports: [\n    DxRangeSelectorComponent,\n    DxoBackgroundModule,\n    DxoImageModule,\n    DxoBehaviorModule,\n    DxoChartModule,\n    DxoCommonSeriesSettingsModule,\n    DxoAggregationModule,\n    DxoAreaModule,\n    DxoBorderModule,\n    DxoHoverStyleModule,\n    DxoHatchingModule,\n    DxoLabelModule,\n    DxoConnectorModule,\n    DxoPointModule,\n    DxoHeightModule,\n    DxoUrlModule,\n    DxoWidthModule,\n    DxoSelectionStyleModule,\n    DxoReductionModule,\n    DxoValueErrorBarModule,\n    DxoBarModule,\n    DxoBubbleModule,\n    DxoCandlestickModule,\n    DxoColorModule,\n    DxoFullstackedareaModule,\n    DxoFullstackedbarModule,\n    DxoFullstackedlineModule,\n    DxoFullstackedsplineModule,\n    DxoFullstackedsplineareaModule,\n    DxoArgumentFormatModule,\n    DxoFontModule,\n    DxoFormatModule,\n    DxoLineModule,\n    DxoRangeareaModule,\n    DxoRangebarModule,\n    DxoScatterModule,\n    DxoSplineModule,\n    DxoSplineareaModule,\n    DxoStackedareaModule,\n    DxoStackedbarModule,\n    DxoStackedlineModule,\n    DxoStackedsplineModule,\n    DxoStackedsplineareaModule,\n    DxoStepareaModule,\n    DxoSteplineModule,\n    DxoStockModule,\n    DxoDataPrepareSettingsModule,\n    DxiSeriesModule,\n    DxoSeriesTemplateModule,\n    DxoValueAxisModule,\n    DxoExportModule,\n    DxoIndentModule,\n    DxoLoadingIndicatorModule,\n    DxoMarginModule,\n    DxoScaleModule,\n    DxoAggregationIntervalModule,\n    DxiBreakModule,\n    DxoBreakStyleModule,\n    DxoMarkerModule,\n    DxoMaxRangeModule,\n    DxoMinorTickModule,\n    DxoMinorTickIntervalModule,\n    DxoMinRangeModule,\n    DxoTickModule,\n    DxoTickIntervalModule,\n    DxoShutterModule,\n    DxoSizeModule,\n    DxoSliderHandleModule,\n    DxoSliderMarkerModule,\n    DxoTitleModule,\n    DxoSubtitleModule,\n    DxoRangeSelectorAggregationModule,\n    DxoRangeSelectorAggregationIntervalModule,\n    DxoRangeSelectorArgumentFormatModule,\n    DxoRangeSelectorBackgroundModule,\n    DxoRangeSelectorBackgroundImageModule,\n    DxoRangeSelectorBehaviorModule,\n    DxoRangeSelectorBorderModule,\n    DxiRangeSelectorBreakModule,\n    DxoRangeSelectorBreakStyleModule,\n    DxoRangeSelectorChartModule,\n    DxoRangeSelectorColorModule,\n    DxoRangeSelectorCommonSeriesSettingsModule,\n    DxoRangeSelectorCommonSeriesSettingsHoverStyleModule,\n    DxoRangeSelectorCommonSeriesSettingsLabelModule,\n    DxoRangeSelectorCommonSeriesSettingsSelectionStyleModule,\n    DxoRangeSelectorConnectorModule,\n    DxoRangeSelectorDataPrepareSettingsModule,\n    DxoRangeSelectorExportModule,\n    DxoRangeSelectorFontModule,\n    DxoRangeSe