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

DevExtreme UI and Visualization Components for Angular

{"version":3,"file":"devextreme-angular-ui-date-range-box.mjs","sources":["../../../dist/ui/date-range-box/index.ts","../../../dist/ui/date-range-box/devextreme-angular-ui-date-range-box.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 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\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n    TransferState,\n    Component,\n    NgModule,\n    ElementRef,\n    NgZone,\n    PLATFORM_ID,\n    Inject,\n\n    Input,\n    Output,\n    OnDestroy,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    OnChanges,\n    DoCheck,\n    SimpleChanges,\n    ContentChildren,\n    QueryList\n} from '@angular/core';\n\n\nimport type { ApplyValueMode, TextEditorButton, LabelMode, EditorStyle, ValidationMessageMode, Mode, Position, ValidationStatus } from 'devextreme/common';\nimport type { DropDownPredefinedButton } from 'devextreme/ui/drop_down_editor/ui.drop_down_editor';\nimport type { dxCalendarOptions } from 'devextreme/ui/calendar';\nimport type { Format } from 'devextreme/common/core/localization';\nimport type { dxPopupOptions } from 'devextreme/ui/popup';\nimport type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, ValueChangedEvent } from 'devextreme/ui/date_range_box';\n\nimport DxDateRangeBox from 'devextreme/ui/date_range_box';\n\nimport {\n    ControlValueAccessor,\n    NG_VALUE_ACCESSOR\n} from '@angular/forms';\n\nimport {\n    DxComponent,\n    DxTemplateHost,\n    DxIntegrationModule,\n    DxTemplateModule,\n    NestedOptionHost,\n    IterableDifferHelper,\n    WatcherHelper,\n    CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxiButtonModule } from 'devextreme-angular/ui/nested';\nimport { DxoOptionsModule } from 'devextreme-angular/ui/nested';\nimport { DxoCalendarOptionsModule } from 'devextreme-angular/ui/nested';\nimport { DxoDisplayFormatModule } from 'devextreme-angular/ui/nested';\nimport { DxoDropDownOptionsModule } from 'devextreme-angular/ui/nested';\nimport { DxoAnimationModule } from 'devextreme-angular/ui/nested';\nimport { DxoHideModule } from 'devextreme-angular/ui/nested';\nimport { DxoFromModule } from 'devextreme-angular/ui/nested';\nimport { DxoPositionModule } from 'devextreme-angular/ui/nested';\nimport { DxoAtModule } from 'devextreme-angular/ui/nested';\nimport { DxoBoundaryOffsetModule } from 'devextreme-angular/ui/nested';\nimport { DxoCollisionModule } from 'devextreme-angular/ui/nested';\nimport { DxoMyModule } from 'devextreme-angular/ui/nested';\nimport { DxoOffsetModule } from 'devextreme-angular/ui/nested';\nimport { DxoToModule } from 'devextreme-angular/ui/nested';\nimport { DxoShowModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoDateRangeBoxAnimationModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxAtModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxBoundaryOffsetModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxiDateRangeBoxButtonModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxCalendarOptionsModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxCollisionModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxDisplayFormatModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxDropDownOptionsModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxFromModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxHideModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxMyModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxOffsetModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxOptionsModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxPositionModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxShowModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxoDateRangeBoxToModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { DxiDateRangeBoxToolbarItemModule } from 'devextreme-angular/ui/date-range-box/nested';\nimport { \n           PROPERTY_TOKEN_buttons,\n           PROPERTY_TOKEN_toolbarItems,\n     } from 'devextreme-angular/core/tokens';\n\n\n\nconst CUSTOM_VALUE_ACCESSOR_PROVIDER = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => DxDateRangeBoxComponent),\n    multi: true\n};\n/**\n * DateRangeBox is a UI component that allows a user to select a date range (pick or enter start and end dates).\n\n */\n@Component({\n    selector: 'dx-date-range-box',\n    template: '',\n    host: { ngSkipHydration: 'true' },\n    imports: [ DxIntegrationModule ],\n    providers: [\n        DxTemplateHost,\n        WatcherHelper,\n        CUSTOM_VALUE_ACCESSOR_PROVIDER,\n        NestedOptionHost,\n        IterableDifferHelper\n    ]\n})\nexport class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, ControlValueAccessor, OnChanges, DoCheck {\n\n    @ContentChildren(PROPERTY_TOKEN_buttons)\n    set _buttonsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('buttons', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_toolbarItems)\n    set _toolbarItemsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('toolbarItems', value);\n    }\n\n    instance: DxDateRangeBox = null;\n\n    /**\n     * Specifies whether or not the UI component allows an end user to enter a custom value.\n    \n     */\n    @Input()\n    get acceptCustomValue(): boolean {\n        return this._getOption('acceptCustomValue');\n    }\n    set acceptCustomValue(value: boolean) {\n        this._setOption('acceptCustomValue', value);\n    }\n\n\n    /**\n     * Specifies the shortcut key that sets focus on the UI component.\n    \n     */\n    @Input()\n    get accessKey(): string | undefined {\n        return this._getOption('accessKey');\n    }\n    set accessKey(value: string | undefined) {\n        this._setOption('accessKey', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component changes its visual state as a result of user interaction.\n    \n     */\n    @Input()\n    get activeStateEnabled(): boolean {\n        return this._getOption('activeStateEnabled');\n    }\n    set activeStateEnabled(value: boolean) {\n        this._setOption('activeStateEnabled', value);\n    }\n\n\n    /**\n     * Specifies the Apply button&apos;s text.\n    \n     */\n    @Input()\n    get applyButtonText(): string {\n        return this._getOption('applyButtonText');\n    }\n    set applyButtonText(value: string) {\n        this._setOption('applyButtonText', value);\n    }\n\n\n    /**\n     * Specifies the way an end user applies the selected value.\n    \n     */\n    @Input()\n    get applyValueMode(): ApplyValueMode {\n        return this._getOption('applyValueMode');\n    }\n    set applyValueMode(value: ApplyValueMode) {\n        this._setOption('applyValueMode', value);\n    }\n\n\n    /**\n     * Allows you to add custom buttons to the input text field.\n    \n     */\n    @Input()\n    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {\n        return this._getOption('buttons');\n    }\n    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {\n        this._setOption('buttons', value);\n    }\n\n\n    /**\n     * Configures the calendar&apos;s value picker.\n    \n     */\n    @Input()\n    get calendarOptions(): dxCalendarOptions {\n        return this._getOption('calendarOptions');\n    }\n    set calendarOptions(value: dxCalendarOptions) {\n        this._setOption('calendarOptions', value);\n    }\n\n\n    /**\n     * Specifies the Cancel button&apos;s text.\n    \n     */\n    @Input()\n    get cancelButtonText(): string {\n        return this._getOption('cancelButtonText');\n    }\n    set cancelButtonText(value: string) {\n        this._setOption('cancelButtonText', value);\n    }\n\n\n    /**\n     * Specifies the date value serialization format.\n    \n     */\n    @Input()\n    get dateSerializationFormat(): string | undefined {\n        return this._getOption('dateSerializationFormat');\n    }\n    set dateSerializationFormat(value: string | undefined) {\n        this._setOption('dateSerializationFormat', value);\n    }\n\n\n    /**\n     * Specifies whether to render the drop-down field&apos;s content when it is displayed. If false, the content is rendered immediately.\n    \n     */\n    @Input()\n    get deferRendering(): boolean {\n        return this._getOption('deferRendering');\n    }\n    set deferRendering(value: boolean) {\n        this._setOption('deferRendering', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component responds to user interaction.\n    \n     */\n    @Input()\n    get disabled(): boolean {\n        return this._getOption('disabled');\n    }\n    set disabled(value: boolean) {\n        this._setOption('disabled', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component disables date selection before the start date and after the end date.\n    \n     */\n    @Input()\n    get disableOutOfRangeSelection(): boolean {\n        return this._getOption('disableOutOfRangeSelection');\n    }\n    set disableOutOfRangeSelection(value: boolean) {\n        this._setOption('disableOutOfRangeSelection', value);\n    }\n\n\n    /**\n     * Specifies the date&apos;s display format.\n    \n     */\n    @Input()\n    get displayFormat(): Format {\n        return this._getOption('displayFormat');\n    }\n    set displayFormat(value: Format) {\n        this._setOption('displayFormat', value);\n    }\n\n\n    /**\n     * Specifies a custom template for the drop-down button.\n    \n     */\n    @Input()\n    get dropDownButtonTemplate(): any {\n        return this._getOption('dropDownButtonTemplate');\n    }\n    set dropDownButtonTemplate(value: any) {\n        this._setOption('dropDownButtonTemplate', value);\n    }\n\n\n    /**\n     * Configures the drop-down that holds the content.\n    \n     */\n    @Input()\n    get dropDownOptions(): dxPopupOptions<any> {\n        return this._getOption('dropDownOptions');\n    }\n    set dropDownOptions(value: dxPopupOptions<any>) {\n        this._setOption('dropDownOptions', value);\n    }\n\n\n    /**\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\n    \n     */\n    @Input()\n    get elementAttr(): Record<string, any> {\n        return this._getOption('elementAttr');\n    }\n    set elementAttr(value: Record<string, any>) {\n        this._setOption('elementAttr', value);\n    }\n\n\n    /**\n     * Specifies the range&apos;s end date.\n    \n     */\n    @Input()\n    get endDate(): Date | null | number | string {\n        return this._getOption('endDate');\n    }\n    set endDate(value: Date | null | number | string) {\n        this._setOption('endDate', value);\n    }\n\n\n    /**\n     * Specifies the attributes passed to the end date input field.\n    \n     */\n    @Input()\n    get endDateInputAttr(): any {\n        return this._getOption('endDateInputAttr');\n    }\n    set endDateInputAttr(value: any) {\n        this._setOption('endDateInputAttr', value);\n    }\n\n\n    /**\n     * Specifies the label of the end date input field.\n    \n     */\n    @Input()\n    get endDateLabel(): string {\n        return this._getOption('endDateLabel');\n    }\n    set endDateLabel(value: string) {\n        this._setOption('endDateLabel', value);\n    }\n\n\n    /**\n     * Specifies the name attribute of the end date input field.\n    \n     */\n    @Input()\n    get endDateName(): string {\n        return this._getOption('endDateName');\n    }\n    set endDateName(value: string) {\n        this._setOption('endDateName', value);\n    }\n\n\n    /**\n     * Specifies the message displayed if the specified end date is later than the max value or earlier than the min value.\n    \n     */\n    @Input()\n    get endDateOutOfRangeMessage(): string {\n        return this._getOption('endDateOutOfRangeMessage');\n    }\n    set endDateOutOfRangeMessage(value: string) {\n        this._setOption('endDateOutOfRangeMessage', value);\n    }\n\n\n    /**\n     * Specifies a placeholder for the end date input field.\n    \n     */\n    @Input()\n    get endDatePlaceholder(): string {\n        return this._getOption('endDatePlaceholder');\n    }\n    set endDatePlaceholder(value: string) {\n        this._setOption('endDatePlaceholder', value);\n    }\n\n\n    /**\n     * Returns the text displayed by the end date input field.\n    \n     */\n    @Input()\n    get endDateText(): string {\n        return this._getOption('endDateText');\n    }\n    set endDateText(value: string) {\n        this._setOption('endDateText', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component can be focused using keyboard navigation.\n    \n     */\n    @Input()\n    get focusStateEnabled(): boolean {\n        return this._getOption('focusStateEnabled');\n    }\n    set focusStateEnabled(value: boolean) {\n        this._setOption('focusStateEnabled', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s height.\n    \n     */\n    @Input()\n    get height(): number | string | undefined {\n        return this._getOption('height');\n    }\n    set height(value: number | string | undefined) {\n        this._setOption('height', value);\n    }\n\n\n    /**\n     * Specifies text for a hint that appears when a user pauses on the UI component.\n    \n     */\n    @Input()\n    get hint(): string | undefined {\n        return this._getOption('hint');\n    }\n    set hint(value: string | undefined) {\n        this._setOption('hint', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component changes its state when a user pauses on it.\n    \n     */\n    @Input()\n    get hoverStateEnabled(): boolean {\n        return this._getOption('hoverStateEnabled');\n    }\n    set hoverStateEnabled(value: boolean) {\n        this._setOption('hoverStateEnabled', value);\n    }\n\n\n    /**\n     * Specifies a message for invalid end date input.\n    \n     */\n    @Input()\n    get invalidEndDateMessage(): string {\n        return this._getOption('invalidEndDateMessage');\n    }\n    set invalidEndDateMessage(value: string) {\n        this._setOption('invalidEndDateMessage', value);\n    }\n\n\n    /**\n     * Specifies a message for invalid start date input.\n    \n     */\n    @Input()\n    get invalidStartDateMessage(): string {\n        return this._getOption('invalidStartDateMessage');\n    }\n    set invalidStartDateMessage(value: string) {\n        this._setOption('invalidStartDateMessage', value);\n    }\n\n\n    /**\n     * Specifies whether the component&apos;s current value differs from the initial value.\n    \n     */\n    @Input()\n    get isDirty(): boolean {\n        return this._getOption('isDirty');\n    }\n    set isDirty(value: boolean) {\n        this._setOption('isDirty', value);\n    }\n\n\n    /**\n     * Specifies or indicates whether the editor&apos;s value is valid.\n    \n     */\n    @Input()\n    get isValid(): boolean {\n        return this._getOption('isValid');\n    }\n    set isValid(value: boolean) {\n        this._setOption('isValid', value);\n    }\n\n\n    /**\n     * Specifies the label&apos;s display mode.\n    \n     */\n    @Input()\n    get labelMode(): LabelMode {\n        return this._getOption('labelMode');\n    }\n    set labelMode(value: LabelMode) {\n        this._setOption('labelMode', value);\n    }\n\n\n    /**\n     * The latest date that can be selected in the UI component.\n    \n     */\n    @Input()\n    get max(): Date | null | number | string | undefined {\n        return this._getOption('max');\n    }\n    set max(value: Date | null | number | string | undefined) {\n        this._setOption('max', value);\n    }\n\n\n    /**\n     * The earliest date that can be selected in the UI component.\n    \n     */\n    @Input()\n    get min(): Date | null | number | string | undefined {\n        return this._getOption('min');\n    }\n    set min(value: Date | null | number | string | undefined) {\n        this._setOption('min', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component displays a single-month calendar or a multi-month calendar.\n    \n     */\n    @Input()\n    get multiView(): boolean {\n        return this._getOption('multiView');\n    }\n    set multiView(value: boolean) {\n        this._setOption('multiView', value);\n    }\n\n\n    /**\n     * Specifies whether or not the drop-down editor is displayed.\n    \n     */\n    @Input()\n    get opened(): boolean {\n        return this._getOption('opened');\n    }\n    set opened(value: boolean) {\n        this._setOption('opened', value);\n    }\n\n\n    /**\n     * Specifies whether a user can open the popup calendar by clicking an input field.\n    \n     */\n    @Input()\n    get openOnFieldClick(): boolean {\n        return this._getOption('openOnFieldClick');\n    }\n    set openOnFieldClick(value: boolean) {\n        this._setOption('openOnFieldClick', value);\n    }\n\n\n    /**\n     * Specifies whether the editor is read-only.\n    \n     */\n    @Input()\n    get readOnly(): boolean {\n        return this._getOption('readOnly');\n    }\n    set readOnly(value: boolean) {\n        this._setOption('readOnly', value);\n    }\n\n\n    /**\n     * Switches the UI component to a right-to-left representation.\n    \n     */\n    @Input()\n    get rtlEnabled(): boolean {\n        return this._getOption('rtlEnabled');\n    }\n    set rtlEnabled(value: boolean) {\n        this._setOption('rtlEnabled', value);\n    }\n\n\n    /**\n     * Specifies whether to display the Clear button in the UI component.\n    \n     */\n    @Input()\n    get showClearButton(): boolean {\n        return this._getOption('showClearButton');\n    }\n    set showClearButton(value: boolean) {\n        this._setOption('showClearButton', value);\n    }\n\n\n    /**\n     * Specifies whether the drop-down button is visible.\n    \n     */\n    @Input()\n    get showDropDownButton(): boolean {\n        return this._getOption('showDropDownButton');\n    }\n    set showDropDownButton(value: boolean) {\n        this._setOption('showDropDownButton', value);\n    }\n\n\n    /**\n     * Specifies whether or not the UI component checks the inner text for spelling mistakes.\n    \n     */\n    @Input()\n    get spellcheck(): boolean {\n        return this._getOption('spellcheck');\n    }\n    set spellcheck(value: boolean) {\n        this._setOption('spellcheck', value);\n    }\n\n\n    /**\n     * Specifies the start date of date range.\n    \n     */\n    @Input()\n    get startDate(): Date | null | number | string {\n        return this._getOption('startDate');\n    }\n    set startDate(value: Date | null | number | string) {\n        this._setOption('startDate', value);\n    }\n\n\n    /**\n     * Specifies the attributes passed to the start date input field.\n    \n     */\n    @Input()\n    get startDateInputAttr(): any {\n        return this._getOption('startDateInputAttr');\n    }\n    set startDateInputAttr(value: any) {\n        this._setOption('startDateInputAttr', value);\n    }\n\n\n    /**\n     * Specifies a label of the start date input field.\n    \n     */\n    @Input()\n    get startDateLabel(): string {\n        return this._getOption('startDateLabel');\n    }\n    set startDateLabel(value: string) {\n        this._setOption('startDateLabel', value);\n    }\n\n\n    /**\n     * Specifies the name attribute of the start date input field.\n    \n     */\n    @Input()\n    get startDateName(): string {\n        return this._getOption('startDateName');\n    }\n    set startDateName(value: string) {\n        this._setOption('startDateName', value);\n    }\n\n\n    /**\n     * Specifies the message displayed if the specified start date is later than the max value or earlier than the min value.\n    \n     */\n    @Input()\n    get startDateOutOfRangeMessage(): string {\n        return this._getOption('startDateOutOfRangeMessage');\n    }\n    set startDateOutOfRangeMessage(value: string) {\n        this._setOption('startDateOutOfRangeMessage', value);\n    }\n\n\n    /**\n     * Specifies a placeholder for the start date input field.\n    \n     */\n    @Input()\n    get startDatePlaceholder(): string {\n        return this._getOption('startDatePlaceholder');\n    }\n    set startDatePlaceholder(value: string) {\n        this._setOption('startDatePlaceholder', value);\n    }\n\n\n    /**\n     * Returns the text displayed by the start date input field.\n    \n     */\n    @Input()\n    get startDateText(): string {\n        return this._getOption('startDateText');\n    }\n    set startDateText(value: string) {\n        this._setOption('startDateText', value);\n    }\n\n\n    /**\n     * Specifies how the UI component&apos;s text field is styled.\n    \n     */\n    @Input()\n    get stylingMode(): EditorStyle {\n        return this._getOption('stylingMode');\n    }\n    set stylingMode(value: EditorStyle) {\n        this._setOption('stylingMode', value);\n    }\n\n\n    /**\n     * Specifies the number of the element when the Tab key is used for navigating.\n    \n     */\n    @Input()\n    get tabIndex(): number {\n        return this._getOption('tabIndex');\n    }\n    set tabIndex(value: number) {\n        this._setOption('tabIndex', value);\n    }\n\n\n    /**\n     * Specified the Today button&apos;s text.\n    \n     */\n    @Input()\n    get todayButtonText(): string {\n        return this._getOption('todayButtonText');\n    }\n    set todayButtonText(value: string) {\n        this._setOption('todayButtonText', value);\n    }\n\n\n    /**\n     * Specifies whether to use an input mask based on the displayFormat property.\n    \n     */\n    @Input()\n    get useMaskBehavior(): boolean {\n        return this._getOption('useMaskBehavior');\n    }\n    set useMaskBehavior(value: boolean) {\n        this._setOption('useMaskBehavior', value);\n    }\n\n\n    /**\n     * Information on the broken validation rule. Contains the first item from the validationErrors array.\n    \n     */\n    @Input()\n    get validationError(): any {\n        return this._getOption('validationError');\n    }\n    set validationError(value: any) {\n        this._setOption('validationError', value);\n    }\n\n\n    /**\n     * An array of validation errors.\n    \n     */\n    @Input()\n    get validationErrors(): Array<any> {\n        return this._getOption('validationErrors');\n    }\n    set validationErrors(value: Array<any>) {\n        this._setOption('validationErrors', value);\n    }\n\n\n    /**\n     * Specifies how the message about the validation rules that are not satisfied by this editor&apos;s value is displayed.\n    \n     */\n    @Input()\n    get validationMessageMode(): ValidationMessageMode {\n        return this._getOption('validationMessageMode');\n    }\n    set validationMessageMode(value: ValidationMessageMode) {\n        this._setOption('validationMessageMode', value);\n    }\n\n\n    /**\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.\n    \n     */\n    @Input()\n    get validationMessagePosition(): Mode | Position {\n        return this._getOption('validationMessagePosition');\n    }\n    set validationMessagePosition(value: Mode | Position) {\n        this._setOption('validationMessagePosition', value);\n    }\n\n\n    /**\n     * Indicates or specifies the current validation status.\n    \n     */\n    @Input()\n    get validationStatus(): ValidationStatus {\n        return this._getOption('validationStatus');\n    }\n    set validationStatus(value: ValidationStatus) {\n        this._setOption('validationStatus', value);\n    }\n\n\n    /**\n     * An array that specifies the selected range (start and end dates).\n    \n     */\n    @Input()\n    get value(): Array<Date | null | number | string> {\n        return this._getOption('value');\n    }\n    set value(value: Array<Date | null | number | string>) {\n        this._setOption('value', value);\n    }\n\n\n    /**\n     * Specifies the DOM events after which the UI component&apos;s value should be updated.\n    \n     */\n    @Input()\n    get valueChangeEvent(): string {\n        return this._getOption('valueChangeEvent');\n    }\n    set valueChangeEvent(value: string) {\n        this._setOption('valueChangeEvent', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component is visible.\n    \n     */\n    @Input()\n    get visible(): boolean {\n        return this._getOption('visible');\n    }\n    set visible(value: boolean) {\n        this._setOption('visible', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s width.\n    \n     */\n    @Input()\n    get width(): number | string | undefined {\n        return this._getOption('width');\n    }\n    set width(value: number | string | undefined) {\n        this._setOption('width', value);\n    }\n\n    /**\n    \n     * A function that is executed when the UI component loses focus after the text field&apos;s content was changed using the keyboard.\n    \n    \n     */\n    @Output() onChange: EventEmitter<ChangeEvent>;\n\n    /**\n    \n     * A function that is executed once the drop-down editor is closed.\n    \n    \n     */\n    @Output() onClosed: EventEmitter<ClosedEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component is rendered and each time the component is repainted.\n    \n    \n     */\n    @Output() onContentReady: EventEmitter<ContentReadyEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component&apos;s input has been copied.\n    \n    \n     */\n    @Output() onCopy: EventEmitter<CopyEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component&apos;s input has been cut.\n    \n    \n     */\n    @Output() onCut: EventEmitter<CutEvent>;\n\n    /**\n    \n     * A function that is executed before the UI component is disposed of.\n    \n    \n     */\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n    /**\n    \n     * A function that is executed when the Enter key has been pressed while the UI component is focused.\n    \n    \n     */\n    @Output() onEnterKey: EventEmitter<EnterKeyEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component gets focus.\n    \n    \n     */\n    @Output() onFocusIn: EventEmitter<FocusInEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component loses focus.\n    \n    \n     */\n    @Output() onFocusOut: EventEmitter<FocusOutEvent>;\n\n    /**\n    \n     * A function used in JavaScript frameworks to save the UI component instance.\n    \n    \n     */\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n    /**\n    \n     * A function that is executed each time the UI component&apos;s input is changed while the UI component is focused.\n    \n    \n     */\n    @Output() onInput: EventEmitter<InputEvent>;\n\n    /**\n    \n     * A function that is executed when a user is pressing a key on the keyboard.\n    \n    \n     */\n    @Output() onKeyDown: EventEmitter<KeyDownEvent>;\n\n    /**\n    \n     * A function that is executed when a user releases a key on the keyboard.\n    \n    \n     */\n    @Output() onKeyUp: EventEmitter<KeyUpEvent>;\n\n    /**\n    \n     * A function that is executed once the drop-down editor is opened.\n    \n    \n     */\n    @Output() onOpened: EventEmitter<OpenedEvent>;\n\n    /**\n    \n     * A function that is executed after a UI component property is changed.\n    \n    \n     */\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component&apos;s input has been pasted.\n    \n    \n     */\n    @Output() onPaste: EventEmitter<PasteEvent>;\n\n    /**\n    \n     * A function that is executed after the UI component&apos;s value is changed.\n    \n    \n     */\n    @Output() onValueChanged: EventEmitter<ValueChangedEvent>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() acceptCustomValueChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() accessKeyChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() activeStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() applyButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() applyValueModeChange: EventEmitter<ApplyValueMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() calendarOptionsChange: EventEmitter<dxCalendarOptions>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() cancelButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dateSerializationFormatChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() deferRenderingChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disableOutOfRangeSelectionChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() displayFormatChange: EventEmitter<Format>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dropDownButtonTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dropDownOptionsChange: EventEmitter<dxPopupOptions<any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateChange: EventEmitter<Date | null | number | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateInputAttrChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateLabelChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateNameChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateOutOfRangeMessageChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDatePlaceholderChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() endDateTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() focusStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() heightChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() hintChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() hoverStateEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() invalidEndDateMessageChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() invalidStartDateMessageChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() isDirtyChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() isValidChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() labelModeChange: EventEmitter<LabelMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() maxChange: EventEmitter<Date | null | number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() minChange: EventEmitter<Date | null | number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() multiViewChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() openedChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() openOnFieldClickChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() readOnlyChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showClearButtonChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showDropDownButtonChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() spellcheckChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateChange: EventEmitter<Date | null | number | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateInputAttrChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateLabelChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateNameChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateOutOfRangeMessageChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDatePlaceholderChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startDateTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() stylingModeChange: EventEmitter<EditorStyle>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() tabIndexChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() todayButtonTextChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() useMaskBehaviorChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationErrorChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationErrorsChange: EventEmitter<Array<any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationMessageModeChange: EventEmitter<ValidationMessageMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationMessagePositionChange: EventEmitter<Mode | Position>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() validationStatusChange: EventEmitter<ValidationStatus>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueChange: EventEmitter<Array<Date | null | number | string>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() valueChangeEventChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() visibleChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() widthChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * \n    \n    \n     */\n    @Output() onBlur: EventEmitter<any>;\n\n\n    @HostListener('valueChange', ['$event']) change(_) { }\n    @HostListener('onBlur', ['$event']) touched = (_) => {};\n\n\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\n            private _watcherHelper: WatcherHelper,\n            private _idh: IterableDifferHelper,\n            optionHost: NestedOptionHost,\n            transferState: TransferState,\n            @Inject(PLATFORM_ID) platformId: any) {\n\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\n\n        this._createEventEmitters([\n            { subscribe: 'change', emit: 'onChange' },\n            { subscribe: 'closed', emit: 'onClosed' },\n            { subscribe: 'contentReady', emit: 'onContentReady' },\n            { subscribe: 'copy', emit: 'onCopy' },\n            { subscribe: 'cut', emit: 'onCut' },\n            { subscribe: 'disposing', emit: 'onDisposing' },\n            { subscribe: 'enterKey', emit: 'onEnterKey' },\n            { subscribe: 'focusIn', emit: 'onFocusIn' },\n            { subscribe: 'focusOut', emit: 'onFocusOut' },\n            { subscribe: 'initialized', emit: 'onInitialized' },\n            { subscribe: 'input', emit: 'onInput' },\n            { subscribe: 'keyDown', emit: 'onKeyDown' },\n            { subscribe: 'keyUp', emit: 'onKeyUp' },\n            { subscribe: 'opened', emit: 'onOpened' },\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\n            { subscribe: 'paste', emit: 'onPaste' },\n            { subscribe: 'valueChanged', emit: 'onValueChanged' },\n            { emit: 'acceptCustomValueChange' },\n            { emit: 'accessKeyChange' },\n            { emit: 'activeStateEnabledChange' },\n            { emit: 'applyButtonTextChange' },\n            { emit: 'applyValueModeChange' },\n            { emit: 'buttonsChange' },\n            { emit: 'calendarOptionsChange' },\n            { emit: 'cancelButtonTextChange' },\n            { emit: 'dateSerializationFormatChange' },\n            { emit: 'deferRenderingChange' },\n            { emit: 'disabledChange' },\n            { emit: 'disableOutOfRangeSelectionChange' },\n            { emit: 'displayFormatChange' },\n            { emit: 'dropDownButtonTemplateChange' },\n            { emit: 'dropDownOptionsChange' },\n            { emit: 'elementAttrChange' },\n            { emit: 'endDateChange' },\n            { emit: 'endDateInputAttrChange' },\n            { emit: 'endDateLabelChange' },\n            { emit: 'endDateNameChange' },\n            { emit: 'endDateOutOfRangeMessageChange' },\n            { emit: 'endDatePlaceholderChange' },\n            { emit: 'endDateTextChange' },\n            { emit: 'focusStateEnabledChange' },\n            { emit: 'heightChange' },\n            { emit: 'hintChange' },\n            { emit: 'hoverStateEnabledChange' },\n            { emit: 'invalidEndDateMessageChange' },\n            { emit: 'invalidStartDateMessageChange' },\n            { emit: 'isDirtyChange' },\n            { emit: 'isValidChange' },\n            { emit: 'labelModeChange' },\n            { emit: 'maxChange' },\n            { emit: 'minChange' },\n            { emit: 'multiViewChange' },\n            { emit: 'openedChange' },\n            { emit: 'openOnFieldClickChange' },\n            { emit: 'readOnlyChange' },\n            { emit: 'rtlEnabledChange' },\n            { emit: 'showClearButtonChange' },\n            { emit: 'showDropDownButtonChange' },\n            { emit: 'spellcheckChange' },\n            { emit: 'startDateChange' },\n            { emit: 'startDateInputAttrChange' },\n            { emit: 'startDateLabelChange' },\n            { emit: 'startDateNameChange' },\n            { emit: 'startDateOutOfRangeMessageChange' },\n            { emit: 'startDatePlaceholderChange' },\n            { emit: 'startDateTextChange' },\n            { emit: 'stylingModeChange' },\n            { emit: 'tabIndexChange' },\n            { emit: 'todayButtonTextChange' },\n            { emit: 'useMaskBehaviorChange' },\n            { emit: 'validationErrorChange' },\n            { emit: 'validationErrorsChange' },\n            { emit: 'validationMessageModeChange' },\n            { emit: 'validationMessagePositionChange' },\n            { emit: 'validationStatusChange' },\n            { emit: 'valueChange' },\n            { emit: 'valueChangeEventChange' },\n            { emit: 'visibleChange' },\n            { emit: 'widthChange' },\n            { emit: 'onBlur' }\n        ]);\n\n        this._idh.setHost(this);\n        optionHost.setHost(this);\n    }\n\n    protected _createInstance(element, options) {\n\n        return new DxDateRangeBox(element, options);\n    }\n\n\n    writeValue(value: any): void {\n        this.eventHelper.lockedValueChangeEvent = true;\n        this.value = value;\n        this.eventHelper.lockedValueChangeEvent = false;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    registerOnChange(fn: (_: any) => void): void { this.change = fn; }\n    registerOnTouched(fn: () => void): void { this.touched = fn; }\n\n    _createWidget(element: any) {\n        super._createWidget(element);\n        this.instance.on('focusOut', (e) => {\n            this.eventHelper.fireNgEvent('onBlur', [e]);\n        });\n    }\n\n    ngOnDestroy() {\n        this._destroyWidget();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        super.ngOnChanges(changes);\n        this.setupChanges('buttons', changes);\n        this.setupChanges('validationErrors', changes);\n        this.setupChanges('value', changes);\n    }\n\n    setupChanges(prop: string, changes: SimpleChanges) {\n        if (!(prop in this._optionsToUpdate)) {\n            this._idh.setup(prop, changes);\n        }\n    }\n\n    ngDoCheck() {\n        this._idh.doCheck('buttons');\n        this._idh.doCheck('validationErrors');\n        this._idh.doCheck('value');\n        this._watcherHelper.checkWatchers();\n        super.ngDoCheck();\n        super.clearChangedOptions();\n    }\n\n    _setOption(name: string, value: any) {\n        let isSetup = this._idh.setupSingle(name, value);\n        let isChanged = this._idh.getChanges(name, value) !== null;\n\n        if (isSetup || isChanged) {\n            super._setOption(name, value);\n        }\n    }\n}\n\n@NgModule({\n  imports: [\n    DxDateRangeBoxComponent,\n    DxiButtonModule,\n    DxoOptionsModule,\n    DxoCalendarOptionsModule,\n    DxoDisplayFormatModule,\n    DxoDropDownOptionsModule,\n    DxoAnimationModule,\n    DxoHideModule,\n    DxoFromModule,\n    DxoPositionModule,\n    DxoAtModule,\n    DxoBoundaryOffsetModule,\n    DxoCollisionModule,\n    DxoMyModule,\n    DxoOffsetModule,\n    DxoToModule,\n    DxoShowModule,\n    DxoDateRangeBoxAnimationModule,\n    DxoDateRangeBoxAtModule,\n    DxoDateRangeBoxBoundaryOffsetModule,\n    DxiDateRangeBoxButtonModule,\n    DxoDateRangeBoxCalendarOptionsModule,\n    DxoDateRangeBoxCollisionModule,\n    DxoDateRangeBoxDisplayFormatModule,\n    DxoDateRangeBoxDropDownOptionsModule,\n    DxoDateRangeBoxFromModule,\n    DxoDateRangeBoxHideModule,\n    DxoDateRangeBoxMyModule,\n    DxoDateRangeBoxOffsetModule,\n    DxoDateRangeBoxOptionsModule,\n    DxoDateRangeBoxPositionModule,\n    DxoDateRangeBoxShowModule,\n    DxoDateRangeBoxToModule,\n    DxiDateRangeBoxToolbarItemModule,\n    DxIntegrationModule,\n    DxTemplateModule\n  ],\n  exports: [\n    DxDateRangeBoxComponent,\n    DxiButtonModule,\n    DxoOptionsModule,\n    DxoCalendarOptionsModule,\n    DxoDisplayFormatModule,\n    DxoDropDownOptionsModule,\n    DxoAnimationModule,\n    DxoHideModule,\n    DxoFromModule,\n    DxoPositionModule,\n    DxoAtModule,\n    DxoBoundaryOffsetModule,\n    DxoCollisionModule,\n    DxoMyModule,\n    DxoOffsetModule,\n    DxoToModule,\n    DxoShowModule,\n    DxoDateRangeBoxAnimationModule,\n    DxoDateRangeBoxAtModule,\n    DxoDateRangeBoxBo