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