devextreme-angular/fesm2022/devextreme-angular-ui-date-box.mjs.map

Angular UI and visualization components based on DevExtreme widgets

{"version":3,"file":"devextreme-angular-ui-date-box.mjs","sources":["../../../dist/ui/date-box/index.ts","../../../dist/ui/date-box/devextreme-angular-ui-date-box.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 24.2.6\n * Build date: Mon Mar 17 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    ContentChildren,\r\n    QueryList\r\n} from '@angular/core';\r\n\r\n\r\nimport dxDateBox from 'devextreme/ui/date_box';\r\nimport { ApplyValueMode, TextEditorButton, LabelMode, EditorStyle, ValidationMessageMode, Mode, Position, ValidationStatus } from 'devextreme/common';\r\nimport { DropDownPredefinedButton } from 'devextreme/ui/drop_down_editor/ui.drop_down_editor';\r\nimport { dxCalendarOptions } from 'devextreme/ui/calendar';\r\nimport { Format } from 'devextreme/common/core/localization';\r\nimport { dxPopupOptions } from 'devextreme/ui/popup';\r\nimport { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, ValueChangedEvent, DatePickerType, DateType } from 'devextreme/ui/date_box';\r\n\r\nimport DxDateBox from 'devextreme/ui/date_box';\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 { DxiButtonModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoOptionsModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoCalendarOptionsModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoDisplayFormatModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoDropDownOptionsModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoAnimationModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoHideModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoFromModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoPositionModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoAtModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoBoundaryOffsetModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoCollisionModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoMyModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoOffsetModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoToModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoShowModule } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxoDateBoxAnimationModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxAtModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxBoundaryOffsetModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxiDateBoxButtonModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxCalendarOptionsModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxCollisionModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxDisplayFormatModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxDropDownOptionsModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxFromModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxHideModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxMyModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxOffsetModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxOptionsModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxPositionModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxShowModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxoDateBoxToModule } from 'devextreme-angular/ui/date-box/nested';\r\nimport { DxiDateBoxToolbarItemModule } from 'devextreme-angular/ui/date-box/nested';\r\n\r\nimport { DxiButtonComponent } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxiDateBoxButtonComponent } from 'devextreme-angular/ui/date-box/nested';\r\n\r\n\r\n\r\nconst CUSTOM_VALUE_ACCESSOR_PROVIDER = {\r\n    provide: NG_VALUE_ACCESSOR,\r\n    useExisting: forwardRef(() => DxDateBoxComponent),\r\n    multi: true\r\n};\r\n/**\r\n * The DateBox is a UI component that displays date and time in a specified format, and enables a user to pick or type in the required date/time value.\r\n\r\n */\r\n@Component({\r\n    selector: 'dx-date-box',\r\n    template: '',\r\n    host: { ngSkipHydration: 'true' },\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 DxDateBoxComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck {\r\n    instance: DxDateBox = null;\r\n\r\n    /**\r\n     * Specifies whether or not the UI component allows an end user to enter a custom value.\r\n    \r\n     */\r\n    @Input()\r\n    get acceptCustomValue(): boolean {\r\n        return this._getOption('acceptCustomValue');\r\n    }\r\n    set acceptCustomValue(value: boolean) {\r\n        this._setOption('acceptCustomValue', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the shortcut key that sets focus on the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get accessKey(): string | undefined {\r\n        return this._getOption('accessKey');\r\n    }\r\n    set accessKey(value: string | undefined) {\r\n        this._setOption('accessKey', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component changes its visual state as a result of user interaction.\r\n    \r\n     */\r\n    @Input()\r\n    get activeStateEnabled(): boolean {\r\n        return this._getOption('activeStateEnabled');\r\n    }\r\n    set activeStateEnabled(value: boolean) {\r\n        this._setOption('activeStateEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether or not adaptive UI component rendering is enabled on a small screen.\r\n    \r\n     */\r\n    @Input()\r\n    get adaptivityEnabled(): boolean {\r\n        return this._getOption('adaptivityEnabled');\r\n    }\r\n    set adaptivityEnabled(value: boolean) {\r\n        this._setOption('adaptivityEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the Apply button&apos;s text.\r\n    \r\n     */\r\n    @Input()\r\n    get applyButtonText(): string {\r\n        return this._getOption('applyButtonText');\r\n    }\r\n    set applyButtonText(value: string) {\r\n        this._setOption('applyButtonText', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the way an end user applies the selected value.\r\n    \r\n     */\r\n    @Input()\r\n    get applyValueMode(): ApplyValueMode {\r\n        return this._getOption('applyValueMode');\r\n    }\r\n    set applyValueMode(value: ApplyValueMode) {\r\n        this._setOption('applyValueMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Allows you to add custom buttons to the input text field.\r\n    \r\n     */\r\n    @Input()\r\n    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {\r\n        return this._getOption('buttons');\r\n    }\r\n    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {\r\n        this._setOption('buttons', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the calendar&apos;s value picker.\r\n    \r\n     */\r\n    @Input()\r\n    get calendarOptions(): dxCalendarOptions {\r\n        return this._getOption('calendarOptions');\r\n    }\r\n    set calendarOptions(value: dxCalendarOptions) {\r\n        this._setOption('calendarOptions', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the Cancel button&apos;s text.\r\n    \r\n     */\r\n    @Input()\r\n    get cancelButtonText(): string {\r\n        return this._getOption('cancelButtonText');\r\n    }\r\n    set cancelButtonText(value: string) {\r\n        this._setOption('cancelButtonText', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the message displayed if the specified date is later than the max value or earlier than the min value.\r\n    \r\n     */\r\n    @Input()\r\n    get dateOutOfRangeMessage(): string {\r\n        return this._getOption('dateOutOfRangeMessage');\r\n    }\r\n    set dateOutOfRangeMessage(value: string) {\r\n        this._setOption('dateOutOfRangeMessage', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the date value serialization format.\r\n    \r\n     */\r\n    @Input()\r\n    get dateSerializationFormat(): string | undefined {\r\n        return this._getOption('dateSerializationFormat');\r\n    }\r\n    set dateSerializationFormat(value: string | undefined) {\r\n        this._setOption('dateSerializationFormat', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether to render the drop-down field&apos;s content when it is displayed. If false, the content is rendered immediately.\r\n    \r\n     */\r\n    @Input()\r\n    get deferRendering(): boolean {\r\n        return this._getOption('deferRendering');\r\n    }\r\n    set deferRendering(value: boolean) {\r\n        this._setOption('deferRendering', 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 dates that users cannot select. Applies only if pickerType is &apos;calendar&apos;.\r\n    \r\n     */\r\n    @Input()\r\n    get disabledDates(): Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean) {\r\n        return this._getOption('disabledDates');\r\n    }\r\n    set disabledDates(value: Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean)) {\r\n        this._setOption('disabledDates', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the date&apos;s display format.\r\n    \r\n     */\r\n    @Input()\r\n    get displayFormat(): Format {\r\n        return this._getOption('displayFormat');\r\n    }\r\n    set displayFormat(value: Format) {\r\n        this._setOption('displayFormat', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a custom template for the drop-down button.\r\n    \r\n     */\r\n    @Input()\r\n    get dropDownButtonTemplate(): any {\r\n        return this._getOption('dropDownButtonTemplate');\r\n    }\r\n    set dropDownButtonTemplate(value: any) {\r\n        this._setOption('dropDownButtonTemplate', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the drop-down that holds the content.\r\n    \r\n     */\r\n    @Input()\r\n    get dropDownOptions(): dxPopupOptions<any> {\r\n        return this._getOption('dropDownOptions');\r\n    }\r\n    set dropDownOptions(value: dxPopupOptions<any>) {\r\n        this._setOption('dropDownOptions', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the global attributes to be attached to the UI component&apos;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     * Specifies whether the UI component can be focused using keyboard navigation.\r\n    \r\n     */\r\n    @Input()\r\n    get focusStateEnabled(): boolean {\r\n        return this._getOption('focusStateEnabled');\r\n    }\r\n    set focusStateEnabled(value: boolean) {\r\n        this._setOption('focusStateEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the UI component&apos;s height.\r\n    \r\n     */\r\n    @Input()\r\n    get height(): (() => number | string) | number | string | undefined {\r\n        return this._getOption('height');\r\n    }\r\n    set height(value: (() => number | string) | number | string | undefined) {\r\n        this._setOption('height', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies text for a hint that appears when a user pauses on the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get hint(): string | undefined {\r\n        return this._getOption('hint');\r\n    }\r\n    set hint(value: string | undefined) {\r\n        this._setOption('hint', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component changes its state when a user pauses on it.\r\n    \r\n     */\r\n    @Input()\r\n    get hoverStateEnabled(): boolean {\r\n        return this._getOption('hoverStateEnabled');\r\n    }\r\n    set hoverStateEnabled(value: boolean) {\r\n        this._setOption('hoverStateEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the attributes to be passed on to the underlying HTML element.\r\n    \r\n     */\r\n    @Input()\r\n    get inputAttr(): any {\r\n        return this._getOption('inputAttr');\r\n    }\r\n    set inputAttr(value: any) {\r\n        this._setOption('inputAttr', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the interval between neighboring values in the popup list in minutes.\r\n    \r\n     */\r\n    @Input()\r\n    get interval(): number {\r\n        return this._getOption('interval');\r\n    }\r\n    set interval(value: number) {\r\n        this._setOption('interval', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the message displayed if the typed value is not a valid date or time.\r\n    \r\n     */\r\n    @Input()\r\n    get invalidDateMessage(): string {\r\n        return this._getOption('invalidDateMessage');\r\n    }\r\n    set invalidDateMessage(value: string) {\r\n        this._setOption('invalidDateMessage', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the component&apos;s current value differs from the initial value.\r\n    \r\n     */\r\n    @Input()\r\n    get isDirty(): boolean {\r\n        return this._getOption('isDirty');\r\n    }\r\n    set isDirty(value: boolean) {\r\n        this._setOption('isDirty', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies or indicates whether the editor&apos;s value is valid.\r\n    \r\n     */\r\n    @Input()\r\n    get isValid(): boolean {\r\n        return this._getOption('isValid');\r\n    }\r\n    set isValid(value: boolean) {\r\n        this._setOption('isValid', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a text string used to annotate the editor&apos;s value.\r\n    \r\n     */\r\n    @Input()\r\n    get label(): string {\r\n        return this._getOption('label');\r\n    }\r\n    set label(value: string) {\r\n        this._setOption('label', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the label&apos;s display mode.\r\n    \r\n     */\r\n    @Input()\r\n    get labelMode(): LabelMode {\r\n        return this._getOption('labelMode');\r\n    }\r\n    set labelMode(value: LabelMode) {\r\n        this._setOption('labelMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * The latest date that can be selected in the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get max(): Date | number | string | undefined {\r\n        return this._getOption('max');\r\n    }\r\n    set max(value: Date | number | string | undefined) {\r\n        this._setOption('max', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the maximum number of characters you can enter into the textbox.\r\n    \r\n     */\r\n    @Input()\r\n    get maxLength(): number | string {\r\n        return this._getOption('maxLength');\r\n    }\r\n    set maxLength(value: number | string) {\r\n        this._setOption('maxLength', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * The earliest date that can be selected in the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get min(): Date | number | string | undefined {\r\n        return this._getOption('min');\r\n    }\r\n    set min(value: Date | number | string | undefined) {\r\n        this._setOption('min', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * The value to be assigned to the `name` attribute of the underlying HTML element.\r\n    \r\n     */\r\n    @Input()\r\n    get name(): string {\r\n        return this._getOption('name');\r\n    }\r\n    set name(value: string) {\r\n        this._setOption('name', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether or not the drop-down editor is displayed.\r\n    \r\n     */\r\n    @Input()\r\n    get opened(): boolean {\r\n        return this._getOption('opened');\r\n    }\r\n    set opened(value: boolean) {\r\n        this._setOption('opened', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether a user can open the drop-down list by clicking a text field.\r\n    \r\n     */\r\n    @Input()\r\n    get openOnFieldClick(): boolean {\r\n        return this._getOption('openOnFieldClick');\r\n    }\r\n    set openOnFieldClick(value: boolean) {\r\n        this._setOption('openOnFieldClick', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the type of the date/time picker.\r\n    \r\n     */\r\n    @Input()\r\n    get pickerType(): DatePickerType {\r\n        return this._getOption('pickerType');\r\n    }\r\n    set pickerType(value: DatePickerType) {\r\n        this._setOption('pickerType', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a placeholder for the input field.\r\n    \r\n     */\r\n    @Input()\r\n    get placeholder(): string {\r\n        return this._getOption('placeholder');\r\n    }\r\n    set placeholder(value: string) {\r\n        this._setOption('placeholder', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the editor is read-only.\r\n    \r\n     */\r\n    @Input()\r\n    get readOnly(): boolean {\r\n        return this._getOption('readOnly');\r\n    }\r\n    set readOnly(value: boolean) {\r\n        this._setOption('readOnly', 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 whether to show the analog clock in the value picker. Applies only if type is &apos;datetime&apos; and pickerType is &apos;calendar&apos;.\r\n    \r\n     */\r\n    @Input()\r\n    get showAnalogClock(): boolean {\r\n        return this._getOption('showAnalogClock');\r\n    }\r\n    set showAnalogClock(value: boolean) {\r\n        this._setOption('showAnalogClock', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether to display the Clear button in the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get showClearButton(): boolean {\r\n        return this._getOption('showClearButton');\r\n    }\r\n    set showClearButton(value: boolean) {\r\n        this._setOption('showClearButton', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the drop-down button is visible.\r\n    \r\n     */\r\n    @Input()\r\n    get showDropDownButton(): boolean {\r\n        return this._getOption('showDropDownButton');\r\n    }\r\n    set showDropDownButton(value: boolean) {\r\n        this._setOption('showDropDownButton', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether or not the UI component checks the inner text for spelling mistakes.\r\n    \r\n     */\r\n    @Input()\r\n    get spellcheck(): boolean {\r\n        return this._getOption('spellcheck');\r\n    }\r\n    set spellcheck(value: boolean) {\r\n        this._setOption('spellcheck', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies how the UI component&apos;s text field is styled.\r\n    \r\n     */\r\n    @Input()\r\n    get stylingMode(): EditorStyle {\r\n        return this._getOption('stylingMode');\r\n    }\r\n    set stylingMode(value: EditorStyle) {\r\n        this._setOption('stylingMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the number of the element when the Tab key is used for navigating.\r\n    \r\n     */\r\n    @Input()\r\n    get tabIndex(): number {\r\n        return this._getOption('tabIndex');\r\n    }\r\n    set tabIndex(value: number) {\r\n        this._setOption('tabIndex', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * The read-only property that stores the text displayed by the UI component input element.\r\n    \r\n     */\r\n    @Input()\r\n    get text(): string {\r\n        return this._getOption('text');\r\n    }\r\n    set text(value: string) {\r\n        this._setOption('text', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specified the Today button&apos;s text.\r\n    \r\n     */\r\n    @Input()\r\n    get todayButtonText(): string {\r\n        return this._getOption('todayButtonText');\r\n    }\r\n    set todayButtonText(value: string) {\r\n        this._setOption('todayButtonText', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * A format used to display date/time information.\r\n    \r\n     */\r\n    @Input()\r\n    get type(): DateType {\r\n        return this._getOption('type');\r\n    }\r\n    set type(value: DateType) {\r\n        this._setOption('type', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether to use an input mask based on the displayFormat property.\r\n    \r\n     */\r\n    @Input()\r\n    get useMaskBehavior(): boolean {\r\n        return this._getOption('useMaskBehavior');\r\n    }\r\n    set useMaskBehavior(value: boolean) {\r\n        this._setOption('useMaskBehavior', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Information on the broken validation rule. Contains the first item from the validationErrors array.\r\n    \r\n     */\r\n    @Input()\r\n    get validationError(): any {\r\n        return this._getOption('validationError');\r\n    }\r\n    set validationError(value: any) {\r\n        this._setOption('validationError', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * An array of the validation rules that failed.\r\n    \r\n     */\r\n    @Input()\r\n    get validationErrors(): Array<any> {\r\n        return this._getOption('validationErrors');\r\n    }\r\n    set validationErrors(value: Array<any>) {\r\n        this._setOption('validationErrors', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies how the message about the validation rules that are not satisfied by this editor&apos;s value is displayed.\r\n    \r\n     */\r\n    @Input()\r\n    get validationMessageMode(): ValidationMessageMode {\r\n        return this._getOption('validationMessageMode');\r\n    }\r\n    set validationMessageMode(value: ValidationMessageMode) {\r\n        this._setOption('validationMessageMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the position of a validation message relative to the component. The validation message describes the validation rules that this component&apos;s value does not satisfy.\r\n    \r\n     */\r\n    @Input()\r\n    get validationMessagePosition(): Mode | Position {\r\n        return this._getOption('validationMessagePosition');\r\n    }\r\n    set validationMessagePosition(value: Mode | Position) {\r\n        this._setOption('validationMessagePosition', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Indicates or specifies the current validation status.\r\n    \r\n     */\r\n    @Input()\r\n    get validationStatus(): ValidationStatus {\r\n        return this._getOption('validationStatus');\r\n    }\r\n    set validationStatus(value: ValidationStatus) {\r\n        this._setOption('validationStatus', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the currently selected date and time.\r\n    \r\n     */\r\n    @Input()\r\n    get value(): Date | number | string {\r\n        return this._getOption('value');\r\n    }\r\n    set value(value: Date | number | string) {\r\n        this._setOption('value', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the DOM events after which the UI component&apos;s value should be updated.\r\n    \r\n     */\r\n    @Input()\r\n    get valueChangeEvent(): string {\r\n        return this._getOption('valueChangeEvent');\r\n    }\r\n    set valueChangeEvent(value: string) {\r\n        this._setOption('valueChangeEvent', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component is visible.\r\n    \r\n     */\r\n    @Input()\r\n    get visible(): boolean {\r\n        return this._getOption('visible');\r\n    }\r\n    set visible(value: boolean) {\r\n        this._setOption('visible', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the UI component&apos;s width.\r\n    \r\n     */\r\n    @Input()\r\n    get width(): (() => number | string) | number | string | undefined {\r\n        return this._getOption('width');\r\n    }\r\n    set width(value: (() => number | string) | number | string | undefined) {\r\n        this._setOption('width', value);\r\n    }\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component loses focus after the text field&apos;s content was changed using the keyboard.\r\n    \r\n    \r\n     */\r\n    @Output() onChange: EventEmitter<ChangeEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed once the drop-down editor is closed.\r\n    \r\n    \r\n     */\r\n    @Output() onClosed: EventEmitter<ClosedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component is rendered and each time the component is repainted.\r\n    \r\n    \r\n     */\r\n    @Output() onContentReady: EventEmitter<ContentReadyEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component&apos;s input has been copied.\r\n    \r\n    \r\n     */\r\n    @Output() onCopy: EventEmitter<CopyEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component&apos;s input has been cut.\r\n    \r\n    \r\n     */\r\n    @Output() onCut: EventEmitter<CutEvent>;\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 Enter key has been pressed while the UI component is focused.\r\n    \r\n    \r\n     */\r\n    @Output() onEnterKey: EventEmitter<EnterKeyEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component gets focus.\r\n    \r\n    \r\n     */\r\n    @Output() onFocusIn: EventEmitter<FocusInEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component loses focus.\r\n    \r\n    \r\n     */\r\n    @Output() onFocusOut: EventEmitter<FocusOutEvent>;\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 each time the UI component&apos;s input is changed while the UI component is focused.\r\n    \r\n    \r\n     */\r\n    @Output() onInput: EventEmitter<InputEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a user is pressing a key on the keyboard.\r\n    \r\n    \r\n     */\r\n    @Output() onKeyDown: EventEmitter<KeyDownEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a user releases a key on the keyboard.\r\n    \r\n    \r\n     */\r\n    @Output() onKeyUp: EventEmitter<KeyUpEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed once the drop-down editor is opened.\r\n    \r\n    \r\n     */\r\n    @Output() onOpened: EventEmitter<OpenedEvent>;\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 when the UI component&apos;s input has been pasted.\r\n    \r\n    \r\n     */\r\n    @Output() onPaste: EventEmitter<PasteEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after the UI component&apos;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() acceptCustomValueChange: 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() accessKeyChange: EventEmitter<string | 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() activeStateEnabledChange: 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() adaptivityEnabledChange: 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() applyButtonTextChange: 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() applyValueModeChange: EventEmitter<ApplyValueMode>;\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() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;\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() calendarOptionsChange: EventEmitter<dxCalendarOptions>;\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() cancelButtonTextChange: 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() dateOutOfRangeMessageChange: 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() dateSerializationFormatChange: EventEmitter<string | 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() deferRenderingChange: 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() 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() disabledDatesChange: EventEmitter<Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => 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() displayFormatChange: EventEmitter<Format>;\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() dropDownButtonTemplateChange: EventEmitter<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() dropDownOptionsChange: EventEmitter<dxPopupOptions<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() 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() focusStateEnabledChange: 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() heightChange: EventEmitter<(() => number | string) | number | string | 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() hintChange: EventEmitter<string | 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() hoverStateEnabledChange: 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() inputAttrChange: EventEmitter<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() intervalChange: EventEmitter<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() invalidDateMessageChange: 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() isDirtyChange: 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() isValidChange: 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() labelChange: 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() labelModeChange: EventEmitter<LabelMode>;\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() maxChange: EventEmitter<Date | number | string | 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() maxLengthChange: EventEmitter<number | 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() minChange: EventEmitter<Date | number | string | 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() nameChange: 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() openedChange: 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() openOnFieldClickChange: 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() pickerTypeChange: EventEmitter<DatePickerType>;\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() placeholderChange: 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() readOnlyChange: 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() showAnalogClockChange: 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() showClearButtonChange: 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() showDropDownButtonChange: 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() spellcheckChange: 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() stylingModeChange: EventEmitter<EditorStyle>;\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() tabIndexChange: EventEmitter<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() textChange: 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() todayButtonTextChange: 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() typeChange: EventEmitter<DateType>;\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() useMaskBehaviorChange: 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() validationErrorChange: EventEmitter<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() validationErrorsChange: EventEmitter<Array<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() validationMessageModeChange: EventEmitter<ValidationMessageMode>;\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() validationMessagePositionChange: EventEmitter<Mode | Position>;\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() validationStatusChange: EventEmitter<ValidationStatus>;\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<Date | number | 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() valueChangeEventChange: 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() visibleChange: 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() widthChange: EventEmitter<(() => number | string) | number | string | undefined>;\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    @ContentChildren(DxiDateBoxButtonComponent)\r\n    get buttonsChildren(): QueryList<DxiDateBoxButtonComponent> {\r\n        return this._getOption('buttons');\r\n    }\r\n    set buttonsChildren(value) {\r\n        this._setChildren('buttons', value, 'DxiDateBoxButtonComponent');\r\n    }\r\n\r\n\r\n    @ContentChildren(DxiButtonComponent)\r\n    get buttonsLegacyChildren(): QueryList<DxiButtonComponent> {\r\n        return this._getOption('buttons');\r\n    }\r\n    set buttonsLegacyChildren(value) {\r\n        this._setChildren('buttons', value, 'DxiButtonComponent');\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: 'change', emit: 'onChange' },\r\n            { subscribe: 'closed', emit: 'onClosed' },\r\n            { subscribe: 'contentReady', emit: 'onContentReady' },\r\n            { subscribe: 'copy', emit: 'onCopy' },\r\n            { subscribe: 'cut', emit: 'onCut' },\r\n            { subscribe: 'disposing', emit: 'onDisposing' },\r\n            { subscribe: 'enterKey', emit: 'onEnterKey' },\r\n            { subscribe: 'focusIn', emit: 'onFocusIn' },\r\n            { subscribe: 'focusOut', emit: 'onFocusOut' },\r\n            { subscribe: 'initialized', emit: 'onInitialized' },\r\n            { subscribe: 'input', emit: 'onInput' },\r\n            { subscribe: 'keyDown', emit: 'onKeyDown' },\r\n            { subscribe: 'keyUp', emit: 'onKeyUp' },\r\n            { subscribe: 'opened', emit: 'onOpened' },\r\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\r\n            { subscribe: 'paste', emit: 'onPaste' },\r\n            { subscribe: 'valueChanged', emit: 'onValueChanged' },\r\n            { emit: 'acceptCustomValueChange' },\r\n            { emit: 'accessKeyChange' },\r\n            { emit: 'activeStateEnabledChange' },\r\n            { emit: 'adaptivityEnabledChange' },\r\n            { emit: 'applyButtonTextChange' },\r\n            { emit: 'applyValueModeChange' },\r\n            { emit: 'buttonsChange' },\r\n            { emit: 'calendarOptionsChange' },\r\n            { emit: 'cancelButtonTextChange' },\r\n            { emit: 'dateOutOfRangeMessageChange' },\r\n            { emit: 'dateSerializationFormatChange' },\r\n            { emit: 'deferRenderingChange' },\r\n            { emit: 'disabledChange' },\r\n            { emit: 'disabledDatesChange' },\r\n            { emit: 'displayFormatChange' },\r\n            { emit: 'dropDownButtonTemplateChange' },\r\n            { emit: 'dropDownOptionsChange' },\r\n            { emit: 'elementAttrChange' },\r\n            { emit: 'focusStateEnabledChange' },\r\n            { emit: 'heightChange' },\r\n            { emit: 'hintChange' },\r\n            { emit: 'hoverStateEnabledChange' },\r\n            { emit: 'inputAttrChange' },\r\n            { emit: 'intervalChange' },\r\n            { emit: 'invalidDateMessageChange' },\r\n            { emit: 'isDirtyChange' },\r\n            { emit: 'isValidChange' },\r\n            { emit: 'labelChange' },\r\n            { emit: 'labelModeChange' },\r\n            { emit: 'maxChange' },\r\n            { emit: 'maxLengthChange' },\r\n            { emit: 'minChange' },\r\n            { emit: 'nameChange' },\r\n            { emit: 'openedChange' },\r\n            { emit: 'openOnFieldClickChange' },\r\n            { emit: 'pickerTypeChange' },\r\n            { emit: 'placeholderChange' },\r\n            { emit: 'readOnlyChange' },\r\n            { emit: 'rtlEnabledChange' },\r\n            { emit: 'showAnalogClockChange' },\r\n            { emit: 'showClearButtonChange' },\r\n            { emit: 'showDropDownButtonChange' },\r\n            { emit: 'spellcheckChange' },\r\n            { emit: 'stylingModeChange' },\r\n            { emit: 'tabIndexChange' },\r\n            { emit: 'textChange' },\r\n            { emit: 'todayButtonTextChange' },\r\n            { emit: 'typeChange' },\r\n            { emit: 'useMaskBehaviorChange' },\r\n            { emit: 'validationErrorChange' },\r\n            { emit: 'validationErrorsChange' },\r\n            { emit: 'validationMessageModeChange' },\r\n            { emit: 'validationMessagePositionChange' },\r\n            { emit: 'validationStatusChange' },\r\n            { emit: 'valueChange' },\r\n            { emit: 'valueChangeEventChange' },\r\n            { emit: 'visibleChange' },\r\n            { emit: 'widthChange' },\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 DxDateBox(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    setDisabledState(isDisabled: boolean): void {\r\n        this.disabled = isDisabled;\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('buttons', changes);\r\n        this.setupChanges('disabledDates', changes);\r\n        this.setupChanges('validationErrors', 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('buttons');\r\n        this._idh.doCheck('disabledDates');\r\n        this._idh.doCheck('validationErrors');\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    DxiButtonModule,\r\n    DxoOptionsModule,\r\n    DxoCalendarOptionsModule,\r\n    DxoDisplayFormatModule,\r\n    DxoDropDownOptionsModule,\r\n    DxoAnimationModule,\r\n    DxoHideModule,\r\n    DxoFromModule,\r\n    DxoPositionModule,\r\n    DxoAtModule,\r\n    DxoBoundaryOffsetModule,\r\n    DxoCollisionModule,\r\n    DxoMyModule,\r\n    DxoOffsetModule,\r\n    DxoToModule,\r\n    DxoShowModule,\r\n    DxoDateBoxAnimationModule,\r\n    DxoDateBoxAtModule,\r\n    DxoDateBoxBoundaryOffsetModule,\r\n    DxiDateBoxButtonModule,\r\n    DxoDateBoxCalendarOptionsModule,\r\n    DxoDateBoxCollisionModule,\r\n    DxoDateBoxDisplayFormatModule,\r\n    DxoDateBoxDropDownOptionsModule,\