/*! * 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, OnChanges, DoCheck, SimpleChanges, ContentChildren, QueryList } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxVectorMap from 'devextreme/viz/vector_map'; 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 { DxoAreaSettingsModule } from './nested/area-settings'; import { DxoLabelModule } from './nested/label'; import { DxoFontModule } from './nested/font'; import { DxoBackgroundModule } from './nested/background'; import { DxoControlBarModule } from './nested/control-bar'; import { DxoExportModule } from './nested/export'; import { DxiLayerModule } from './nested/layer-dxi'; import { DxiLegendModule } from './nested/legend-dxi'; import { DxoBorderModule } from './nested/border'; import { DxoMarginModule } from './nested/margin'; import { DxoSourceModule } from './nested/source'; import { DxoLoadingIndicatorModule } from './nested/loading-indicator'; import { DxiMarkerModule } from './nested/marker-dxi'; import { DxoMarkerSettingsModule } from './nested/marker-settings'; import { DxoSizeModule } from './nested/size'; import { DxoTitleModule } from './nested/title'; import { DxoSubtitleModule } from './nested/subtitle'; import { DxoTooltipModule } from './nested/tooltip'; import { DxoShadowModule } from './nested/shadow'; import { DxiLayerComponent } from './nested/layer-dxi'; import { DxiLegendComponent } from './nested/legend-dxi'; import { DxiMarkerComponent } from './nested/marker-dxi'; /** * The VectorMap is a widget that visualizes geographical locations. This widget represents a geographical map that contains areas and markers. Areas embody continents and countries. Markers flag specific points on the map, for example, towns, cities or capitals. */ @Component({ selector: 'dx-vector-map', template: '', styles: [ ' :host { display: block; }'], providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ] }) export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { instance: DxVectorMap; /** * Use the "area" type element of the layers array. */ @Input() get areaSettings(): any { return this._getOption('areaSettings'); } set areaSettings(value: any) { this._setOption('areaSettings', value); } /** * Specifies the options for the map background. */ @Input() get background(): any { return this._getOption('background'); } set background(value: any) { this._setOption('background', value); } /** * Specifies the positioning of a map in geographical coordinates. */ @Input() get bounds(): Array { return this._getOption('bounds'); } set bounds(value: Array) { this._setOption('bounds', value); } /** * Specifies the geographical coordinates of the center for a map. */ @Input() get center(): Array { return this._getOption('center'); } set center(value: Array) { this._setOption('center', value); } /** * Specifies the options of the control bar. */ @Input() get controlBar(): any { return this._getOption('controlBar'); } set controlBar(value: any) { this._setOption('controlBar', 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); } /** * Specifies options for VectorMap widget layers. */ @Input() get layers(): Array, customize?: Function, data?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions, dataField?: string, dataSource?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string, elementType?: string, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: DevExpress.viz.Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: string| Array, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: string, size?: number, sizeGroupingField?: string, sizeGroups?: Array, type?: string }> { return this._getOption('layers'); } set layers(value: Array, customize?: Function, data?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions, dataField?: string, dataSource?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string, elementType?: string, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: DevExpress.viz.Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: string| Array, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: string, size?: number, sizeGroupingField?: string, sizeGroups?: Array, type?: string }>) { this._setOption('layers', value); } /** * Configures map legends. */ @Input() get legends(): Array { return this._getOption('legends'); } set legends(value: Array) { this._setOption('legends', value); } /** * Configures the loading indicator. */ @Input() get loadingIndicator(): any { return this._getOption('loadingIndicator'); } set loadingIndicator(value: any) { this._setOption('loadingIndicator', value); } /** * Use the layers.dataSource option instead. */ @Input() get mapData(): string| Array { return this._getOption('mapData'); } set mapData(value: string| Array) { this._setOption('mapData', value); } /** * Use the layers.dataSource option instead. */ @Input() get markers(): string| Array, text?: string, url?: string, value?: number, values?: Array }> { return this._getOption('markers'); } set markers(value: string| Array, text?: string, url?: string, value?: number, values?: Array }>) { this._setOption('markers', value); } /** * Use the "marker" type element of the layers array. */ @Input() get markerSettings(): any { return this._getOption('markerSettings'); } set markerSettings(value: any) { this._setOption('markerSettings', value); } /** * Specifies a map's maximum zoom factor. */ @Input() get maxZoomFactor(): number { return this._getOption('maxZoomFactor'); } set maxZoomFactor(value: number) { this._setOption('maxZoomFactor', value); } /** * Disables the panning capability. */ @Input() get panningEnabled(): boolean { return this._getOption('panningEnabled'); } set panningEnabled(value: boolean) { this._setOption('panningEnabled', 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 the map projection. */ @Input() get projection(): any { return this._getOption('projection'); } set projection(value: any) { this._setOption('projection', 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 the widget's size in pixels. */ @Input() get size(): any { return this._getOption('size'); } set size(value: any) { this._setOption('size', 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); } /** * Configures tooltips. */ @Input() get tooltip(): any { return this._getOption('tooltip'); } set tooltip(value: any) { this._setOption('tooltip', value); } /** * Specifies whether the map should respond to touch gestures. */ @Input() get touchEnabled(): boolean { return this._getOption('touchEnabled'); } set touchEnabled(value: boolean) { this._setOption('touchEnabled', value); } /** * Specifies whether or not the map should respond when a user rolls the mouse wheel. */ @Input() get wheelEnabled(): boolean { return this._getOption('wheelEnabled'); } set wheelEnabled(value: boolean) { this._setOption('wheelEnabled', value); } /** * Specifies a number that is used to zoom a map initially. */ @Input() get zoomFactor(): number { return this._getOption('zoomFactor'); } set zoomFactor(value: number) { this._setOption('zoomFactor', value); } /** * Disables the zooming capability. */ @Input() get zoomingEnabled(): boolean { return this._getOption('zoomingEnabled'); } set zoomingEnabled(value: boolean) { this._setOption('zoomingEnabled', value); } /** * Use the onClick option instead. */ @Output() onAreaClick: EventEmitter; /** * Use the onSelectionChanged option instead. */ @Output() onAreaSelectionChanged: EventEmitter; /** * A handler for the centerChanged event. */ @Output() onCenterChanged: EventEmitter; /** * A handler for the click event. */ @Output() onClick: EventEmitter; /** * 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; /** * Use the onClick option instead. */ @Output() onMarkerClick: EventEmitter; /** * Use the onSelecitonChanged option instead. */ @Output() onMarkerSelectionChanged: EventEmitter; /** * A handler for the optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * A handler for the selectionChanged event. */ @Output() onSelectionChanged: EventEmitter; /** * A handler for the tooltipHidden event. */ @Output() onTooltipHidden: EventEmitter; /** * A handler for the tooltipShown event. */ @Output() onTooltipShown: EventEmitter; /** * A handler for the zoomFactorChanged event. */ @Output() onZoomFactorChanged: EventEmitter; /** * A handler for the areaSettingsChange event. */ @Output() areaSettingsChange: EventEmitter; /** * A handler for the backgroundChange event. */ @Output() backgroundChange: EventEmitter; /** * A handler for the boundsChange event. */ @Output() boundsChange: EventEmitter>; /** * A handler for the centerChange event. */ @Output() centerChange: EventEmitter>; /** * A handler for the controlBarChange event. */ @Output() controlBarChange: EventEmitter; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the exportChange event. */ @Output() exportChange: EventEmitter; /** * A handler for the layersChange event. */ @Output() layersChange: EventEmitter, customize?: Function, data?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions, dataField?: string, dataSource?: any| DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string, elementType?: string, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: DevExpress.viz.Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: string| Array, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: string, size?: number, sizeGroupingField?: string, sizeGroups?: Array, type?: string }>>; /** * A handler for the legendsChange event. */ @Output() legendsChange: EventEmitter>; /** * A handler for the loadingIndicatorChange event. */ @Output() loadingIndicatorChange: EventEmitter; /** * A handler for the mapDataChange event. */ @Output() mapDataChange: EventEmitter>; /** * A handler for the markersChange event. */ @Output() markersChange: EventEmitter, text?: string, url?: string, value?: number, values?: Array }>>; /** * A handler for the markerSettingsChange event. */ @Output() markerSettingsChange: EventEmitter; /** * A handler for the maxZoomFactorChange event. */ @Output() maxZoomFactorChange: EventEmitter; /** * A handler for the panningEnabledChange event. */ @Output() panningEnabledChange: EventEmitter; /** * A handler for the pathModifiedChange event. */ @Output() pathModifiedChange: EventEmitter; /** * A handler for the projectionChange event. */ @Output() projectionChange: EventEmitter; /** * A handler for the redrawOnResizeChange event. */ @Output() redrawOnResizeChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the sizeChange event. */ @Output() sizeChange: EventEmitter; /** * A handler for the themeChange event. */ @Output() themeChange: EventEmitter; /** * A handler for the titleChange event. */ @Output() titleChange: EventEmitter; /** * A handler for the tooltipChange event. */ @Output() tooltipChange: EventEmitter; /** * A handler for the touchEnabledChange event. */ @Output() touchEnabledChange: EventEmitter; /** * A handler for the wheelEnabledChange event. */ @Output() wheelEnabledChange: EventEmitter; /** * A handler for the zoomFactorChange event. */ @Output() zoomFactorChange: EventEmitter; /** * A handler for the zoomingEnabledChange event. */ @Output() zoomingEnabledChange: EventEmitter; @ContentChildren(DxiLayerComponent) get layersChildren(): QueryList { return this._getOption('layers'); } set layersChildren(value) { this.setChildren('layers', value); } @ContentChildren(DxiLegendComponent) get legendsChildren(): QueryList { return this._getOption('legends'); } set legendsChildren(value) { this.setChildren('legends', value); } @ContentChildren(DxiMarkerComponent) get markersChildren(): QueryList { return this._getOption('markers'); } set markersChildren(value) { this.setChildren('markers', value); } 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: 'areaClick', emit: 'onAreaClick' }, { subscribe: 'areaSelectionChanged', emit: 'onAreaSelectionChanged' }, { subscribe: 'centerChanged', emit: 'onCenterChanged' }, { subscribe: 'click', emit: 'onClick' }, { 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: 'markerClick', emit: 'onMarkerClick' }, { subscribe: 'markerSelectionChanged', emit: 'onMarkerSelectionChanged' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'selectionChanged', emit: 'onSelectionChanged' }, { subscribe: 'tooltipHidden', emit: 'onTooltipHidden' }, { subscribe: 'tooltipShown', emit: 'onTooltipShown' }, { subscribe: 'zoomFactorChanged', emit: 'onZoomFactorChanged' }, { emit: 'areaSettingsChange' }, { emit: 'backgroundChange' }, { emit: 'boundsChange' }, { emit: 'centerChange' }, { emit: 'controlBarChange' }, { emit: 'elementAttrChange' }, { emit: 'exportChange' }, { emit: 'layersChange' }, { emit: 'legendsChange' }, { emit: 'loadingIndicatorChange' }, { emit: 'mapDataChange' }, { emit: 'markersChange' }, { emit: 'markerSettingsChange' }, { emit: 'maxZoomFactorChange' }, { emit: 'panningEnabledChange' }, { emit: 'pathModifiedChange' }, { emit: 'projectionChange' }, { emit: 'redrawOnResizeChange' }, { emit: 'rtlEnabledChange' }, { emit: 'sizeChange' }, { emit: 'themeChange' }, { emit: 'titleChange' }, { emit: 'tooltipChange' }, { emit: 'touchEnabledChange' }, { emit: 'wheelEnabledChange' }, { emit: 'zoomFactorChange' }, { emit: 'zoomingEnabledChange' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxVectorMap(element, options); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); this.setupChanges('bounds', changes); this.setupChanges('center', changes); this.setupChanges('layers', changes); this.setupChanges('legends', changes); this.setupChanges('mapData', changes); this.setupChanges('markers', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('bounds'); this._idh.doCheck('center'); this._idh.doCheck('layers'); this._idh.doCheck('legends'); this._idh.doCheck('mapData'); this._idh.doCheck('markers'); 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); } } } @NgModule({ imports: [ DxoAreaSettingsModule, DxoLabelModule, DxoFontModule, DxoBackgroundModule, DxoControlBarModule, DxoExportModule, DxiLayerModule, DxiLegendModule, DxoBorderModule, DxoMarginModule, DxoSourceModule, DxoLoadingIndicatorModule, DxiMarkerModule, DxoMarkerSettingsModule, DxoSizeModule, DxoTitleModule, DxoSubtitleModule, DxoTooltipModule, DxoShadowModule, DxTemplateModule ], declarations: [ DxVectorMapComponent ], exports: [ DxVectorMapComponent, DxoAreaSettingsModule, DxoLabelModule, DxoFontModule, DxoBackgroundModule, DxoControlBarModule, DxoExportModule, DxiLayerModule, DxiLegendModule, DxoBorderModule, DxoMarginModule, DxoSourceModule, DxoLoadingIndicatorModule, DxiMarkerModule, DxoMarkerSettingsModule, DxoSizeModule, DxoTitleModule, DxoSubtitleModule, DxoTooltipModule, DxoShadowModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxVectorMapModule { }