/*! * 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 DxCalendar from 'devextreme/ui/calendar'; 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'; const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxCalendarComponent), multi: true }; /** * The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range. */ @Component({ selector: 'dx-calendar', template: '', providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ] }) export class DxCalendarComponent extends DxComponent implements OnDestroy, OnInit, AfterViewInit, ControlValueAccessor, OnChanges, DoCheck { instance: DxCalendar; @ContentChild(DxValidatorComponent) validator: DxValidatorComponent; /** * Specifies the shortcut key that sets focus on the widget. */ @Input() get accessKey(): string { return this._getOption('accessKey'); } set accessKey(value: string) { this._setOption('accessKey', value); } /** * Specifies whether or not the widget changes its state when interacting with a user. */ @Input() get activeStateEnabled(): boolean { return this._getOption('activeStateEnabled'); } set activeStateEnabled(value: boolean) { this._setOption('activeStateEnabled', value); } /** * The template to be used for rendering calendar cells. */ @Input() get cellTemplate(): any { return this._getOption('cellTemplate'); } set cellTemplate(value: any) { this._setOption('cellTemplate', value); } /** * Specifies the date-time value serialization format. Use it only if you do not specify the value at design time. */ @Input() get dateSerializationFormat(): string { return this._getOption('dateSerializationFormat'); } set dateSerializationFormat(value: string) { this._setOption('dateSerializationFormat', value); } /** * Specifies whether the widget responds to user interaction. */ @Input() get disabled(): boolean { return this._getOption('disabled'); } set disabled(value: boolean) { this._setOption('disabled', value); } /** * Specifies dates to be disabled. */ @Input() get disabledDates(): Function| Array { return this._getOption('disabledDates'); } set disabledDates(value: Function| Array) { this._setOption('disabledDates', 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); } /** * Specifies the first day of a week. */ @Input() get firstDayOfWeek(): number| string { return this._getOption('firstDayOfWeek'); } set firstDayOfWeek(value: number| string) { this._setOption('firstDayOfWeek', value); } /** * Specifies whether the widget can be focused using keyboard navigation. */ @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); } set focusStateEnabled(value: boolean) { this._setOption('focusStateEnabled', value); } /** * Specifies the widget's height. */ @Input() get height(): number| Function| string { return this._getOption('height'); } set height(value: number| Function| string) { this._setOption('height', value); } /** * Specifies text for a hint that appears when a user pauses on the widget. */ @Input() get hint(): string { return this._getOption('hint'); } set hint(value: string) { this._setOption('hint', value); } /** * Specifies whether the widget changes its state when a user pauses on it. */ @Input() get hoverStateEnabled(): boolean { return this._getOption('hoverStateEnabled'); } set hoverStateEnabled(value: boolean) { this._setOption('hoverStateEnabled', value); } /** * Specifies whether the editor's value is valid. */ @Input() get isValid(): boolean { return this._getOption('isValid'); } set isValid(value: boolean) { this._setOption('isValid', value); } /** * The latest date the widget allows to select. */ @Input() get max(): Date| number| string { return this._getOption('max'); } set max(value: Date| number| string) { this._setOption('max', value); } /** * Specifies the maximum zoom level of the calendar. */ @Input() get maxZoomLevel(): string { return this._getOption('maxZoomLevel'); } set maxZoomLevel(value: string) { this._setOption('maxZoomLevel', value); } /** * The earliest date the widget allows to select. */ @Input() get min(): Date| number| string { return this._getOption('min'); } set min(value: Date| number| string) { this._setOption('min', value); } /** * Specifies the minimum zoom level of the calendar. */ @Input() get minZoomLevel(): string { return this._getOption('minZoomLevel'); } set minZoomLevel(value: string) { this._setOption('minZoomLevel', value); } /** * The value to be assigned to the `name` attribute of the underlying HTML element. */ @Input() get name(): string { return this._getOption('name'); } set name(value: string) { this._setOption('name', value); } /** * A Boolean value specifying whether or not the widget is read-only. */ @Input() get readOnly(): boolean { return this._getOption('readOnly'); } set readOnly(value: boolean) { this._setOption('readOnly', 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 whether or not the widget displays a button that selects the current date. */ @Input() get showTodayButton(): boolean { return this._getOption('showTodayButton'); } set showTodayButton(value: boolean) { this._setOption('showTodayButton', value); } /** * Specifies the number of the element when the Tab key is used for navigating. */ @Input() get tabIndex(): number { return this._getOption('tabIndex'); } set tabIndex(value: number) { this._setOption('tabIndex', value); } /** * Specifies information on the validation error when using a custom validation engine. Should be changed at runtime along with the isValid option. */ @Input() get validationError(): any { return this._getOption('validationError'); } set validationError(value: any) { this._setOption('validationError', value); } /** * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed. */ @Input() get validationMessageMode(): string { return this._getOption('validationMessageMode'); } set validationMessageMode(value: string) { this._setOption('validationMessageMode', value); } /** * An object or a value specifying the date and time currently selected in the calendar. */ @Input() get value(): Date| number| string { return this._getOption('value'); } set value(value: Date| number| string) { this._setOption('value', value); } /** * Specifies whether the widget is visible. */ @Input() get visible(): boolean { return this._getOption('visible'); } set visible(value: boolean) { this._setOption('visible', value); } /** * Specifies the widget's width. */ @Input() get width(): number| Function| string { return this._getOption('width'); } set width(value: number| Function| string) { this._setOption('width', value); } /** * Specifies the current calendar zoom level. */ @Input() get zoomLevel(): string { return this._getOption('zoomLevel'); } set zoomLevel(value: string) { this._setOption('zoomLevel', 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 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; /** * A handler for the valueChanged event. */ @Output() onValueChanged: EventEmitter; /** * A handler for the accessKeyChange event. */ @Output() accessKeyChange: EventEmitter; /** * A handler for the activeStateEnabledChange event. */ @Output() activeStateEnabledChange: EventEmitter; /** * A handler for the cellTemplateChange event. */ @Output() cellTemplateChange: EventEmitter; /** * A handler for the dateSerializationFormatChange event. */ @Output() dateSerializationFormatChange: EventEmitter; /** * A handler for the disabledChange event. */ @Output() disabledChange: EventEmitter; /** * A handler for the disabledDatesChange event. */ @Output() disabledDatesChange: EventEmitter>; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the firstDayOfWeekChange event. */ @Output() firstDayOfWeekChange: EventEmitter; /** * A handler for the focusStateEnabledChange event. */ @Output() focusStateEnabledChange: EventEmitter; /** * A handler for the heightChange event. */ @Output() heightChange: EventEmitter; /** * A handler for the hintChange event. */ @Output() hintChange: EventEmitter; /** * A handler for the hoverStateEnabledChange event. */ @Output() hoverStateEnabledChange: EventEmitter; /** * A handler for the isValidChange event. */ @Output() isValidChange: EventEmitter; /** * A handler for the maxChange event. */ @Output() maxChange: EventEmitter; /** * A handler for the maxZoomLevelChange event. */ @Output() maxZoomLevelChange: EventEmitter; /** * A handler for the minChange event. */ @Output() minChange: EventEmitter; /** * A handler for the minZoomLevelChange event. */ @Output() minZoomLevelChange: EventEmitter; /** * A handler for the nameChange event. */ @Output() nameChange: EventEmitter; /** * A handler for the readOnlyChange event. */ @Output() readOnlyChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the showTodayButtonChange event. */ @Output() showTodayButtonChange: EventEmitter; /** * A handler for the tabIndexChange event. */ @Output() tabIndexChange: EventEmitter; /** * A handler for the validationErrorChange event. */ @Output() validationErrorChange: EventEmitter; /** * A handler for the validationMessageModeChange event. */ @Output() validationMessageModeChange: EventEmitter; /** * A handler for the valueChange event. */ @Output() valueChange: EventEmitter; /** * A handler for the visibleChange event. */ @Output() visibleChange: EventEmitter; /** * A handler for the widthChange event. */ @Output() widthChange: EventEmitter; /** * A handler for the zoomLevelChange event. */ @Output() zoomLevelChange: 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: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'valueChanged', emit: 'onValueChanged' }, { emit: 'accessKeyChange' }, { emit: 'activeStateEnabledChange' }, { emit: 'cellTemplateChange' }, { emit: 'dateSerializationFormatChange' }, { emit: 'disabledChange' }, { emit: 'disabledDatesChange' }, { emit: 'elementAttrChange' }, { emit: 'firstDayOfWeekChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, { emit: 'isValidChange' }, { emit: 'maxChange' }, { emit: 'maxZoomLevelChange' }, { emit: 'minChange' }, { emit: 'minZoomLevelChange' }, { emit: 'nameChange' }, { emit: 'readOnlyChange' }, { emit: 'rtlEnabledChange' }, { emit: 'showTodayButtonChange' }, { emit: 'tabIndexChange' }, { emit: 'validationErrorChange' }, { emit: 'validationMessageModeChange' }, { emit: 'valueChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' }, { emit: 'zoomLevelChange' }, { emit: 'onBlur' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxCalendar(element, options); } writeValue(value: any): void { this.value = value; } setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } 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('disabledDates', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('disabledDates'); 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: [ DxTemplateModule ], declarations: [ DxCalendarComponent ], exports: [ DxCalendarComponent, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxCalendarModule { }