/*! * devextreme-angular-test * Version: 17.2.8 * Build date: Mon Feb 05 2018 * * Copyright (c) 2012 - 2018 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ import { Component, NgModule, ElementRef, NgZone, Input, Output, OnDestroy, Injector, EventEmitter, OnInit, AfterViewInit, ContentChild, forwardRef, HostListener, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxRangeSelector from 'devextreme/viz/range_selector'; import { DxValidatorComponent } from './validator'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DxComponent } from '../core/component'; import { DxTemplateHost } from '../core/template-host'; import { DxTemplateModule } from '../core/template'; import { EventsRegistrator } from '../core/events-strategy'; import { NestedOptionHost } from '../core/nested-option'; import { WatcherHelper } from '../core/watcher-helper'; import { IterableDifferHelper } from '../core/iterable-differ-helper'; import { DxoBackgroundModule } from './nested/background'; import { DxoImageModule } from './nested/image'; import { DxoBehaviorModule } from './nested/behavior'; import { DxoChartModule } from './nested/chart'; import { DxoCommonSeriesSettingsModule } from './nested/common-series-settings'; import { DxoAreaModule } from './nested/area'; import { DxoBorderModule } from './nested/border'; import { DxoHoverStyleModule } from './nested/hover-style'; import { DxoHatchingModule } from './nested/hatching'; import { DxoLabelModule } from './nested/label'; import { DxoConnectorModule } from './nested/connector'; import { DxoPointModule } from './nested/point'; import { DxoHeightModule } from './nested/height'; import { DxoUrlModule } from './nested/url'; import { DxoWidthModule } from './nested/width'; import { DxoSelectionStyleModule } from './nested/selection-style'; import { DxoReductionModule } from './nested/reduction'; import { DxoValueErrorBarModule } from './nested/value-error-bar'; import { DxoBarModule } from './nested/bar'; import { DxoBubbleModule } from './nested/bubble'; import { DxoCandlestickModule } from './nested/candlestick'; import { DxoFullstackedareaModule } from './nested/fullstackedarea'; import { DxoFullstackedbarModule } from './nested/fullstackedbar'; import { DxoFullstackedlineModule } from './nested/fullstackedline'; import { DxoFullstackedsplineModule } from './nested/fullstackedspline'; import { DxoFullstackedsplineareaModule } from './nested/fullstackedsplinearea'; import { DxoArgumentFormatModule } from './nested/argument-format'; import { DxoFontModule } from './nested/font'; import { DxoFormatModule } from './nested/format'; import { DxoLineModule } from './nested/line'; import { DxoRangeareaModule } from './nested/rangearea'; import { DxoRangebarModule } from './nested/rangebar'; import { DxoScatterModule } from './nested/scatter'; import { DxoSplineModule } from './nested/spline'; import { DxoSplineareaModule } from './nested/splinearea'; import { DxoStackedareaModule } from './nested/stackedarea'; import { DxoStackedbarModule } from './nested/stackedbar'; import { DxoStackedlineModule } from './nested/stackedline'; import { DxoStackedsplineModule } from './nested/stackedspline'; import { DxoStackedsplineareaModule } from './nested/stackedsplinearea'; import { DxoStepareaModule } from './nested/steparea'; import { DxoSteplineModule } from './nested/stepline'; import { DxoStockModule } from './nested/stock'; import { DxoDataPrepareSettingsModule } from './nested/data-prepare-settings'; import { DxiSeriesModule } from './nested/series-dxi'; import { DxoSeriesTemplateModule } from './nested/series-template'; import { DxoValueAxisModule } from './nested/value-axis'; import { DxoExportModule } from './nested/export'; import { DxoIndentModule } from './nested/indent'; import { DxoLoadingIndicatorModule } from './nested/loading-indicator'; import { DxoMarginModule } from './nested/margin'; import { DxoScaleModule } from './nested/scale'; import { DxiBreakModule } from './nested/break-dxi'; import { DxoBreakStyleModule } from './nested/break-style'; import { DxoMajorTickIntervalModule } from './nested/major-tick-interval'; import { DxoMarkerModule } from './nested/marker'; import { DxoMaxRangeModule } from './nested/max-range'; import { DxoMinorTickModule } from './nested/minor-tick'; import { DxoMinorTickIntervalModule } from './nested/minor-tick-interval'; import { DxoMinRangeModule } from './nested/min-range'; import { DxoTickModule } from './nested/tick'; import { DxoTickIntervalModule } from './nested/tick-interval'; import { DxoSelectedRangeModule } from './nested/selected-range'; import { DxoShutterModule } from './nested/shutter'; import { DxoSizeModule } from './nested/size'; import { DxoSliderHandleModule } from './nested/slider-handle'; import { DxoSliderMarkerModule } from './nested/slider-marker'; import { DxoPlaceholderSizeModule } from './nested/placeholder-size'; import { DxoTitleModule } from './nested/title'; import { DxoSubtitleModule } from './nested/subtitle'; const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxRangeSelectorComponent), multi: true }; /** * The RangeSelector is a widget that allows a user to select a range of values on a scale. */ @Component({ selector: 'dx-range-selector', template: '', styles: [ ' :host { display: block; }'], providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ] }) export class DxRangeSelectorComponent extends DxComponent implements OnDestroy, OnInit, AfterViewInit, ControlValueAccessor, OnChanges, DoCheck { instance: DxRangeSelector; @ContentChild(DxValidatorComponent) validator: DxValidatorComponent; /** * Specifies the options for the range selector's background. */ @Input() get background(): any { return this._getOption('background'); } set background(value: any) { this._setOption('background', value); } /** * Specifies the RangeSelector's behavior options. */ @Input() get behavior(): any { return this._getOption('behavior'); } set behavior(value: any) { this._setOption('behavior', value); } /** * Specifies the options required to display a chart as the range selector's background. */ @Input() get chart(): any { return this._getOption('chart'); } set chart(value: any) { this._setOption('chart', value); } /** * Specifies the color of the parent page element. */ @Input() get containerBackgroundColor(): string { return this._getOption('containerBackgroundColor'); } set containerBackgroundColor(value: string) { this._setOption('containerBackgroundColor', value); } /** * Specifies a data source for the scale values and for the chart at the background. */ @Input() get dataSource(): DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array { return this._getOption('dataSource'); } set dataSource(value: DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array) { this._setOption('dataSource', value); } /** * Specifies the data source field that provides data for the scale. */ @Input() get dataSourceField(): string { return this._getOption('dataSourceField'); } set dataSourceField(value: string) { this._setOption('dataSourceField', value); } /** * Specifies the attributes to be attached to the widget's root element. */ @Input() get elementAttr(): any { return this._getOption('elementAttr'); } set elementAttr(value: any) { this._setOption('elementAttr', value); } /** * Configures the exporting and printing features. */ @Input() get export(): any { return this._getOption('export'); } set export(value: any) { this._setOption('export', value); } /** * Range selector's indent options. */ @Input() get indent(): any { return this._getOption('indent'); } set indent(value: any) { this._setOption('indent', value); } /** * Configures the loading indicator. */ @Input() get loadingIndicator(): any { return this._getOption('loadingIndicator'); } set loadingIndicator(value: any) { this._setOption('loadingIndicator', value); } /** * Generates space around the widget. */ @Input() get margin(): any { return this._getOption('margin'); } set margin(value: any) { this._setOption('margin', value); } /** * Notifies the widget that it is embedded into an HTML page that uses a tag modifying the path. */ @Input() get pathModified(): boolean { return this._getOption('pathModified'); } set pathModified(value: boolean) { this._setOption('pathModified', value); } /** * Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates. */ @Input() get redrawOnResize(): boolean { return this._getOption('redrawOnResize'); } set redrawOnResize(value: boolean) { this._setOption('redrawOnResize', value); } /** * Switches the widget to a right-to-left representation. */ @Input() get rtlEnabled(): boolean { return this._getOption('rtlEnabled'); } set rtlEnabled(value: boolean) { this._setOption('rtlEnabled', value); } /** * Specifies options of the range selector's scale. */ @Input() get scale(): any { return this._getOption('scale'); } set scale(value: any) { this._setOption('scale', value); } /** * Use the value option instead. */ @Input() get selectedRange(): any { return this._getOption('selectedRange'); } set selectedRange(value: any) { this._setOption('selectedRange', value); } /** * Specifies the color of the selected range. */ @Input() get selectedRangeColor(): string { return this._getOption('selectedRangeColor'); } set selectedRangeColor(value: string) { this._setOption('selectedRangeColor', value); } /** * Specifies range selector shutter options. */ @Input() get shutter(): any { return this._getOption('shutter'); } set shutter(value: any) { this._setOption('shutter', value); } /** * Specifies the widget's size in pixels. */ @Input() get size(): any { return this._getOption('size'); } set size(value: any) { this._setOption('size', value); } /** * Specifies the appearance of the range selector's slider handles. */ @Input() get sliderHandle(): any { return this._getOption('sliderHandle'); } set sliderHandle(value: any) { this._setOption('sliderHandle', value); } /** * Defines the options of the range selector slider markers. */ @Input() get sliderMarker(): any { return this._getOption('sliderMarker'); } set sliderMarker(value: any) { this._setOption('sliderMarker', value); } /** * Sets the name of the theme the widget uses. */ @Input() get theme(): string { return this._getOption('theme'); } set theme(value: string) { this._setOption('theme', value); } /** * Configures the widget's title. */ @Input() get title(): string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string } { return this._getOption('title'); } set title(value: string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string }) { this._setOption('title', value); } /** * The selected range, initial or current. */ @Input() get value(): Array { return this._getOption('value'); } set value(value: Array) { this._setOption('value', value); } /** * A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only. */ @Output() onDisposing: EventEmitter; /** * A handler for the drawn event. Executed when the widget has finished drawing itself. */ @Output() onDrawn: EventEmitter; /** * A handler for the exported event. Executed after data from the widget is exported. */ @Output() onExported: EventEmitter; /** * A handler for the exporting event. Executed before data from the widget is exported. */ @Output() onExporting: EventEmitter; /** * A handler for the fileSaving event. Executed before a file with exported data is saved on the user's local storage. */ @Output() onFileSaving: EventEmitter; /** * A handler for the incidentOccurred event. Executed when an error or warning appears in the widget. */ @Output() onIncidentOccurred: EventEmitter; /** * A handler for the initialized event. Executed only once, after the widget is initialized. */ @Output() onInitialized: EventEmitter; /** * A handler for the optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * Use the onValueChanged option instead. */ @Output() onSelectedRangeChanged: EventEmitter; /** * A handler for the valueChanged event. */ @Output() onValueChanged: EventEmitter; /** * A handler for the backgroundChange event. */ @Output() backgroundChange: EventEmitter; /** * A handler for the behaviorChange event. */ @Output() behaviorChange: EventEmitter; /** * A handler for the chartChange event. */ @Output() chartChange: EventEmitter; /** * A handler for the containerBackgroundColorChange event. */ @Output() containerBackgroundColorChange: EventEmitter; /** * A handler for the dataSourceChange event. */ @Output() dataSourceChange: EventEmitter>; /** * A handler for the dataSourceFieldChange event. */ @Output() dataSourceFieldChange: EventEmitter; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the exportChange event. */ @Output() exportChange: EventEmitter; /** * A handler for the indentChange event. */ @Output() indentChange: EventEmitter; /** * A handler for the loadingIndicatorChange event. */ @Output() loadingIndicatorChange: EventEmitter; /** * A handler for the marginChange event. */ @Output() marginChange: EventEmitter; /** * A handler for the pathModifiedChange event. */ @Output() pathModifiedChange: EventEmitter; /** * A handler for the redrawOnResizeChange event. */ @Output() redrawOnResizeChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the scaleChange event. */ @Output() scaleChange: EventEmitter; /** * A handler for the selectedRangeChange event. */ @Output() selectedRangeChange: EventEmitter; /** * A handler for the selectedRangeColorChange event. */ @Output() selectedRangeColorChange: EventEmitter; /** * A handler for the shutterChange event. */ @Output() shutterChange: EventEmitter; /** * A handler for the sizeChange event. */ @Output() sizeChange: EventEmitter; /** * A handler for the sliderHandleChange event. */ @Output() sliderHandleChange: EventEmitter; /** * A handler for the sliderMarkerChange event. */ @Output() sliderMarkerChange: EventEmitter; /** * A handler for the themeChange event. */ @Output() themeChange: EventEmitter; /** * A handler for the titleChange event. */ @Output() titleChange: EventEmitter; /** * A handler for the valueChange event. */ @Output() valueChange: EventEmitter>; @Output() onBlur: EventEmitter; @HostListener('valueChange', ['$event']) change(_) { } @HostListener('onBlur', ['$event']) touched = () => {}; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, injector: Injector, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, optionHost: NestedOptionHost) { super(elementRef, ngZone, templateHost, _watcherHelper); injector.get(EventsRegistrator); this._createEventEmitters([ { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'drawn', emit: 'onDrawn' }, { subscribe: 'exported', emit: 'onExported' }, { subscribe: 'exporting', emit: 'onExporting' }, { subscribe: 'fileSaving', emit: 'onFileSaving' }, { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'selectedRangeChanged', emit: 'onSelectedRangeChanged' }, { subscribe: 'valueChanged', emit: 'onValueChanged' }, { emit: 'backgroundChange' }, { emit: 'behaviorChange' }, { emit: 'chartChange' }, { emit: 'containerBackgroundColorChange' }, { emit: 'dataSourceChange' }, { emit: 'dataSourceFieldChange' }, { emit: 'elementAttrChange' }, { emit: 'exportChange' }, { emit: 'indentChange' }, { emit: 'loadingIndicatorChange' }, { emit: 'marginChange' }, { emit: 'pathModifiedChange' }, { emit: 'redrawOnResizeChange' }, { emit: 'rtlEnabledChange' }, { emit: 'scaleChange' }, { emit: 'selectedRangeChange' }, { emit: 'selectedRangeColorChange' }, { emit: 'shutterChange' }, { emit: 'sizeChange' }, { emit: 'sliderHandleChange' }, { emit: 'sliderMarkerChange' }, { emit: 'themeChange' }, { emit: 'titleChange' }, { emit: 'valueChange' }, { emit: 'onBlur' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxRangeSelector(element, options); } writeValue(value: any): void { this.value = value; } registerOnChange(fn: (_: any) => void): void { this.change = fn; } registerOnTouched(fn: () => void): void { this.touched = fn; } _createWidget(element: any) { super._createWidget(element); this.instance.on('focusOut', (e) => { this.eventHelper.fireNgEvent('onBlur', [e]); }); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); this.setupChanges('dataSource', changes); this.setupChanges('value', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('dataSource'); this._idh.doCheck('value'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); } _setOption(name: string, value: any) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } ngOnInit() { super.ngOnInit(); if (this.validator) { this.validator.createInstanceOnInit = false; } } ngAfterViewInit() { super.ngAfterViewInit(); if (this.validator) { this.validator.createInstance(this.element.nativeElement); } } } @NgModule({ imports: [ DxoBackgroundModule, DxoImageModule, DxoBehaviorModule, DxoChartModule, DxoCommonSeriesSettingsModule, DxoAreaModule, DxoBorderModule, DxoHoverStyleModule, DxoHatchingModule, DxoLabelModule, DxoConnectorModule, DxoPointModule, DxoHeightModule, DxoUrlModule, DxoWidthModule, DxoSelectionStyleModule, DxoReductionModule, DxoValueErrorBarModule, DxoBarModule, DxoBubbleModule, DxoCandlestickModule, DxoFullstackedareaModule, DxoFullstackedbarModule, DxoFullstackedlineModule, DxoFullstackedsplineModule, DxoFullstackedsplineareaModule, DxoArgumentFormatModule, DxoFontModule, DxoFormatModule, DxoLineModule, DxoRangeareaModule, DxoRangebarModule, DxoScatterModule, DxoSplineModule, DxoSplineareaModule, DxoStackedareaModule, DxoStackedbarModule, DxoStackedlineModule, DxoStackedsplineModule, DxoStackedsplineareaModule, DxoStepareaModule, DxoSteplineModule, DxoStockModule, DxoDataPrepareSettingsModule, DxiSeriesModule, DxoSeriesTemplateModule, DxoValueAxisModule, DxoExportModule, DxoIndentModule, DxoLoadingIndicatorModule, DxoMarginModule, DxoScaleModule, DxiBreakModule, DxoBreakStyleModule, DxoMajorTickIntervalModule, DxoMarkerModule, DxoMaxRangeModule, DxoMinorTickModule, DxoMinorTickIntervalModule, DxoMinRangeModule, DxoTickModule, DxoTickIntervalModule, DxoSelectedRangeModule, DxoShutterModule, DxoSizeModule, DxoSliderHandleModule, DxoSliderMarkerModule, DxoPlaceholderSizeModule, DxoTitleModule, DxoSubtitleModule, DxTemplateModule ], declarations: [ DxRangeSelectorComponent ], exports: [ DxRangeSelectorComponent, DxoBackgroundModule, DxoImageModule, DxoBehaviorModule, DxoChartModule, DxoCommonSeriesSettingsModule, DxoAreaModule, DxoBorderModule, DxoHoverStyleModule, DxoHatchingModule, DxoLabelModule, DxoConnectorModule, DxoPointModule, DxoHeightModule, DxoUrlModule, DxoWidthModule, DxoSelectionStyleModule, DxoReductionModule, DxoValueErrorBarModule, DxoBarModule, DxoBubbleModule, DxoCandlestickModule, DxoFullstackedareaModule, DxoFullstackedbarModule, DxoFullstackedlineModule, DxoFullstackedsplineModule, DxoFullstackedsplineareaModule, DxoArgumentFormatModule, DxoFontModule, DxoFormatModule, DxoLineModule, DxoRangeareaModule, DxoRangebarModule, DxoScatterModule, DxoSplineModule, DxoSplineareaModule, DxoStackedareaModule, DxoStackedbarModule, DxoStackedlineModule, DxoStackedsplineModule, DxoStackedsplineareaModule, DxoStepareaModule, DxoSteplineModule, DxoStockModule, DxoDataPrepareSettingsModule, DxiSeriesModule, DxoSeriesTemplateModule, DxoValueAxisModule, DxoExportModule, DxoIndentModule, DxoLoadingIndicatorModule, DxoMarginModule, DxoScaleModule, DxiBreakModule, DxoBreakStyleModule, DxoMajorTickIntervalModule, DxoMarkerModule, DxoMaxRangeModule, DxoMinorTickModule, DxoMinorTickIntervalModule, DxoMinRangeModule, DxoTickModule, DxoTickIntervalModule, DxoSelectedRangeModule, DxoShutterModule, DxoSizeModule, DxoSliderHandleModule, DxoSliderMarkerModule, DxoPlaceholderSizeModule, DxoTitleModule, DxoSubtitleModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxRangeSelectorModule { }