/**
 * DevExtreme (cjs/ui/date_range_box/ui.date_range_box.js)
 * Version: 23.2.6 (build 24140-0112)
 * Build date: Sun May 19 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _dom_adapter = _interopRequireDefault(require("../../core/dom_adapter"));
var _extend = require("../../core/utils/extend");
var _icon = require("../../core/utils/icon");
var _config = _interopRequireDefault(require("../../core/config"));
var _devices = _interopRequireDefault(require("../../core/devices"));
var _message = _interopRequireDefault(require("../../localization/message"));
var _themes = require("../themes");
var _editor = _interopRequireDefault(require("../editor/editor"));
var _ui = _interopRequireDefault(require("./ui.multiselect_date_box"));
var _index = _interopRequireDefault(require("../text_box/texteditor_button_collection/index"));
var _ui2 = _interopRequireDefault(require("../drop_down_editor/ui.drop_down_button"));
var _uiText_editor = _interopRequireDefault(require("../text_box/ui.text_editor.clear"));
var _function_template = require("../../core/templates/function_template");
var _uiDate_range = require("./ui.date_range.utils");
var _iterator = require("../../core/utils/iterator");
var _inflector = require("../../core/utils/inflector");
var _index2 = require("../../events/utils/index");
var _events_engine = _interopRequireDefault(require("../../events/core/events_engine"));

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}

function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function(target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key]
                }
            }
        }
        return target
    };
    return _extends.apply(this, arguments)
}

function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    _setPrototypeOf(subClass, superClass)
}

function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
        o.__proto__ = p;
        return o
    };
    return _setPrototypeOf(o, p)
}
const DATERANGEBOX_CLASS = "dx-daterangebox";
const TEXTEDITOR_LABEL_STATIC_CLASS = "dx-texteditor-with-label";
const TEXTEDITOR_LABEL_OUTSIDE_CLASS = "dx-texteditor-label-outside";
const TEXTEDITOR_LABEL_FLOATING_CLASS = "dx-texteditor-with-floating-label";
const START_DATEBOX_CLASS = "dx-start-datebox";
const END_DATEBOX_CLASS = "dx-end-datebox";
const DATERANGEBOX_SEPARATOR_CLASS = "dx-daterangebox-separator";
const DROP_DOWN_EDITOR_BUTTON_ICON = "dx-dropdowneditor-icon";
const INVALID_BADGE_CLASS = "dx-show-invalid-badge";
const READONLY_STATE_CLASS = "dx-state-readonly";
const TEXTEDITOR_CLASS = "dx-texteditor";
const TEXTEDITOR_INPUT_CLASS = "dx-texteditor-input";
const TEXTEDITOR_EMPTY_INPUT_CLASS = "dx-texteditor-empty";
const DROP_DOWN_EDITOR_CLASS = "dx-dropdowneditor";
const DROP_DOWN_EDITOR_ACTIVE_CLASS = "dx-dropdowneditor-active";
const SEPARATOR_ICON_NAME = "to";
const EVENTS_LIST = ["KeyDown", "KeyUp", "Change", "Cut", "Copy", "Paste", "Input", "EnterKey"];
let DateRangeBox = function(_Editor) {
    _inheritsLoose(DateRangeBox, _Editor);

    function DateRangeBox() {
        return _Editor.apply(this, arguments) || this
    }
    var _proto = DateRangeBox.prototype;
    _proto._getDefaultOptions = function() {
        return (0, _extend.extend)(_Editor.prototype._getDefaultOptions.call(this), {
            acceptCustomValue: true,
            activeStateEnabled: true,
            applyButtonText: _message.default.format("OK"),
            applyValueMode: "instantly",
            buttons: void 0,
            calendarOptions: {},
            cancelButtonText: _message.default.format("Cancel"),
            endDateOutOfRangeMessage: _message.default.format("dxDateRangeBox-endDateOutOfRangeMessage"),
            dateSerializationFormat: void 0,
            deferRendering: true,
            disableOutOfRangeSelection: false,
            disabledDates: null,
            displayFormat: null,
            dropDownButtonTemplate: "dropDownButton",
            dropDownOptions: {},
            endDate: null,
            endDateInputAttr: {},
            endDateLabel: _message.default.format("dxDateRangeBox-endDateLabel"),
            endDateName: "",
            endDatePlaceholder: "",
            endDateText: void 0,
            focusStateEnabled: true,
            hoverStateEnabled: true,
            invalidStartDateMessage: _message.default.format("dxDateRangeBox-invalidStartDateMessage"),
            invalidEndDateMessage: _message.default.format("dxDateRangeBox-invalidEndDateMessage"),
            isValid: true,
            labelMode: "static",
            max: void 0,
            min: void 0,
            multiView: true,
            onChange: null,
            onClosed: null,
            onCopy: null,
            onCut: null,
            onEnterKey: null,
            onInput: null,
            onKeyDown: null,
            onKeyUp: null,
            onOpened: null,
            onPaste: null,
            onValueChanged: null,
            openOnFieldClick: true,
            opened: false,
            pickerType: "calendar",
            readOnly: false,
            showClearButton: false,
            showDropDownButton: true,
            spellcheck: false,
            startDate: null,
            startDateInputAttr: {},
            startDateLabel: _message.default.format("dxDateRangeBox-startDateLabel"),
            startDateName: "",
            startDateOutOfRangeMessage: _message.default.format("dxDateRangeBox-startDateOutOfRangeMessage"),
            startDatePlaceholder: "",
            startDateText: void 0,
            stylingMode: (0, _config.default)().editorStylingMode || "outlined",
            todayButtonText: _message.default.format("dxCalendar-todayButtonText"),
            useHiddenSubmitElement: false,
            useMaskBehavior: false,
            validationError: null,
            validationErrors: null,
            validationMessageMode: "auto",
            validationMessagePosition: "auto",
            validationStatus: "valid",
            value: [null, null],
            valueChangeEvent: "change",
            _internalValidationErrors: [],
            _currentSelection: "startDate"
        })
    };
    _proto._defaultOptionsRules = function() {
        return _Editor.prototype._defaultOptionsRules.call(this).concat([{
            device: function() {
                const themeName = (0, _themes.current)();
                return (0, _themes.isMaterial)(themeName)
            },
            options: {
                labelMode: "floating",
                stylingMode: (0, _config.default)().editorStylingMode || "filled"
            }
        }, {
            device: function() {
                const themeName = (0, _themes.current)();
                return (0, _themes.isFluent)(themeName)
            },
            options: {
                labelMode: "outside"
            }
        }, {
            device: function() {
                const realDevice = _devices.default.real();
                const platform = realDevice.platform;
                return "ios" === platform || "android" === platform
            },
            options: {
                multiView: false
            }
        }])
    };
    _proto._initOptions = function(options) {
        _Editor.prototype._initOptions.call(this, options);
        const {
            value: initialValue
        } = this.initialOption();
        let {
            value: value,
            startDate: startDate,
            endDate: endDate
        } = this.option();
        if (value[0] && value[1] && (0, _uiDate_range.getDeserializedDate)(value[0]) > (0, _uiDate_range.getDeserializedDate)(value[1])) {
            value = [value[1], value[0]]
        }
        if (startDate && endDate && (0, _uiDate_range.getDeserializedDate)(startDate) > (0, _uiDate_range.getDeserializedDate)(endDate)) {
            [startDate, endDate] = [endDate, startDate]
        }
        if ((0, _uiDate_range.isSameDateArrays)(initialValue, value)) {
            value = [startDate, endDate]
        } else {
            [startDate, endDate] = value
        }
        this.option({
            startDate: startDate,
            endDate: endDate,
            value: value
        })
    };
    _proto._createOpenAction = function() {
        this._openAction = this._createActionByOption("onOpened", {
            excludeValidators: ["disabled", "readOnly"]
        })
    };
    _proto._raiseOpenAction = function() {
        if (!this._openAction) {
            this._createOpenAction()
        }
        this._openAction()
    };
    _proto._createCloseAction = function() {
        this._closeAction = this._createActionByOption("onClosed", {
            excludeValidators: ["disabled", "readOnly"]
        })
    };
    _proto._raiseCloseAction = function() {
        if (!this._closeAction) {
            this._createCloseAction()
        }
        this._closeAction()
    };
    _proto._createEventAction = function(eventName) {
        this["_".concat((0, _inflector.camelize)(eventName), "Action")] = this._createActionByOption("on".concat(eventName), {
            excludeValidators: ["readOnly"]
        })
    };
    _proto._raiseAction = function(eventName, event) {
        const action = this["_".concat((0, _inflector.camelize)(eventName), "Action")];
        if (!action) {
            this._createEventAction(eventName)
        }
        this["_".concat((0, _inflector.camelize)(eventName), "Action")]({
            event: event
        })
    };
    _proto._initTemplates = function() {
        this._templateManager.addDefaultTemplates({
            dropDownButton: new _function_template.FunctionTemplate((function(options) {
                const $icon = (0, _renderer.default)("<div>").addClass("dx-dropdowneditor-icon");
                (0, _renderer.default)(options.container).append($icon)
            }))
        });
        this.callBase()
    };
    _proto._getDefaultButtons = function() {
        return [{
            name: "clear",
            Ctor: _uiText_editor.default
        }, {
            name: "dropDown",
            Ctor: _ui2.default
        }]
    };
    _proto._initMarkup = function() {
        this.$element().addClass("dx-daterangebox").addClass("dx-texteditor").addClass("dx-dropdowneditor");
        this._toggleDropDownEditorActiveClass();
        this._toggleEditorLabelClass();
        this._toggleReadOnlyState();
        this._renderStylingMode();
        this._renderEndDateBox();
        this._renderSeparator();
        this._renderStartDateBox();
        this._toggleEmptinessState();
        this._renderEmptinessEvent();
        this._renderButtonsContainer();
        _Editor.prototype._initMarkup.call(this);
        this.$element().removeClass(INVALID_BADGE_CLASS)
    };
    _proto._renderEmptinessEvent = function() {
        const eventName = (0, _index2.addNamespace)("input blur", this.NAME);
        _events_engine.default.off(this._focusTarget(), eventName);
        _events_engine.default.on(this._focusTarget(), eventName, this._toggleEmptinessState.bind(this))
    };
    _proto._toggleEmptinessState = function() {
        const isEmpty = this.getStartDateBox().$element().hasClass("dx-texteditor-empty") && this.getEndDateBox().$element().hasClass("dx-texteditor-empty");
        this.$element().toggleClass("dx-texteditor-empty", isEmpty)
    };
    _proto._attachKeyboardEvents = function() {
        if (!this.option("readOnly")) {
            _Editor.prototype._attachKeyboardEvents.call(this)
        }
    };
    _proto._toggleReadOnlyState = function() {
        const {
            readOnly: readOnly
        } = this.option();
        this.$element().toggleClass("dx-state-readonly", !!readOnly)
    };
    _proto._toggleDropDownEditorActiveClass = function() {
        const {
            opened: opened
        } = this.option();
        this.$element().toggleClass("dx-dropdowneditor-active", opened)
    };
    _proto._toggleEditorLabelClass = function() {
        const {
            startDateLabel: startDateLabel,
            endDateLabel: endDateLabel,
            labelMode: labelMode
        } = this.option();
        const isLabelVisible = (!!startDateLabel || !!endDateLabel) && "hidden" !== labelMode;
        this.$element().removeClass(TEXTEDITOR_LABEL_FLOATING_CLASS).removeClass("dx-texteditor-label-outside").removeClass("dx-texteditor-with-label");
        if (isLabelVisible) {
            this.$element().addClass("floating" === labelMode ? TEXTEDITOR_LABEL_FLOATING_CLASS : "dx-texteditor-with-label");
            if ("outside" === labelMode) {
                this.$element().addClass("dx-texteditor-label-outside")
            }
        }
    };
    _proto._renderStartDateBox = function() {
        this._$startDateBox = (0, _renderer.default)("<div>").addClass("dx-start-datebox").prependTo(this.$element());
        this._startDateBox = this._createComponent(this._$startDateBox, _ui.default, this._getStartDateBoxConfig());
        this._startDateBox.NAME = "_StartDateBox"
    };
    _proto._renderEndDateBox = function() {
        this._$endDateBox = (0, _renderer.default)("<div>").addClass("dx-end-datebox").appendTo(this.$element());
        this._endDateBox = this._createComponent(this._$endDateBox, _ui.default, this._getEndDateBoxConfig());
        this._endDateBox.NAME = "_EndDateBox"
    };
    _proto._renderSeparator = function() {
        const $icon = (0, _icon.getImageContainer)("to");
        this._$separator = (0, _renderer.default)("<div>").addClass("dx-daterangebox-separator").prependTo(this.$element());
        this._renderPreventBlurOnSeparatorClick();
        $icon.appendTo(this._$separator)
    };
    _proto._renderPreventBlurOnSeparatorClick = function() {
        const eventName = (0, _index2.addNamespace)("mousedown", this.NAME);
        _events_engine.default.off(this._$separator, eventName);
        _events_engine.default.on(this._$separator, eventName, e => {
            if (!this._hasActiveElement()) {
                this.focus()
            }
            e.preventDefault()
        })
    };
    _proto._renderButtonsContainer = function() {
        this._buttonCollection = new _index.default(this, this._getDefaultButtons());
        this._$beforeButtonsContainer = null;
        this._$afterButtonsContainer = null;
        const {
            buttons: buttons
        } = this.option();
        this._$beforeButtonsContainer = this._buttonCollection.renderBeforeButtons(buttons, this.$element());
        this._$afterButtonsContainer = this._buttonCollection.renderAfterButtons(buttons, this.$element())
    };
    _proto._updateButtons = function(names) {
        this._buttonCollection.updateButtons(names)
    };
    _proto._openHandler = function() {
        this._toggleOpenState()
    };
    _proto._shouldCallOpenHandler = function() {
        return true
    };
    _proto._toggleOpenState = function() {
        const {
            opened: opened
        } = this.option();
        if (!opened) {
            this.getStartDateBox()._focusInput()
        }
        if (!this.option("readOnly")) {
            this.option("opened", !this.option("opened"))
        }
    };
    _proto._clearValueHandler = function(e) {
        e.stopPropagation();
        this._saveValueChangeEvent(e);
        this.clear();
        !this._isStartDateActiveElement() && this.focus();
        _events_engine.default.trigger((0, _renderer.default)(this.startDateField()), "input")
    };
    _proto._isClearButtonVisible = function() {
        return this.option("showClearButton") && !this.option("readOnly")
    };
    _proto._focusInHandler = function(event) {
        if (this._shouldSkipFocusEvent(event)) {
            return
        }
        _Editor.prototype._focusInHandler.call(this, event)
    };
    _proto._focusOutHandler = function(event) {
        if (this._shouldSkipFocusEvent(event)) {
            return
        }
        _Editor.prototype._focusOutHandler.call(this, event)
    };
    _proto._shouldSkipFocusEvent = function(event) {
        const {
            target: target,
            relatedTarget: relatedTarget
        } = event;
        return (0, _renderer.default)(target).is(this.startDateField()) && (0, _renderer.default)(relatedTarget).is(this.endDateField()) || (0, _renderer.default)(target).is(this.endDateField()) && (0, _renderer.default)(relatedTarget).is(this.startDateField())
    };
    _proto._getPickerType = function() {
        const {
            pickerType: pickerType
        } = this.option();
        return ["calendar", "native"].includes(pickerType) ? pickerType : "calendar"
    };
    _proto._getRestErrors = function(allErrors, partialErrors) {
        return allErrors.filter(error => !partialErrors.some(prevError => error.message === prevError.message))
    };
    _proto._syncValidationErrors = function(optionName, newPartialErrors, previousPartialErrors) {
        newPartialErrors || (newPartialErrors = []);
        previousPartialErrors || (previousPartialErrors = []);
        const allErrors = this.option(optionName) || [];
        const otherErrors = this._getRestErrors(allErrors, previousPartialErrors);
        this.option(optionName, [...otherErrors, ...newPartialErrors])
    };
    _proto._getDateBoxConfig = function() {
        const options = this.option();
        const dateBoxConfig = {
            acceptCustomValue: options.acceptCustomValue,
            activeStateEnabled: options.activeStateEnabled,
            applyValueMode: options.applyValueMode,
            dateOutOfRangeMessage: options.dateOutOfRangeMessage,
            dateSerializationFormat: options.dateSerializationFormat,
            deferRendering: options.deferRendering,
            disabled: options.disabled,
            displayFormat: options.displayFormat,
            focusStateEnabled: options.focusStateEnabled,
            isValid: options.isValid,
            tabIndex: options.tabIndex,
            height: options.height,
            hoverStateEnabled: options.hoverStateEnabled,
            labelMode: options.labelMode,
            max: options.max,
            min: options.min,
            openOnFieldClick: options.openOnFieldClick,
            pickerType: this._getPickerType(),
            readOnly: options.readOnly,
            rtlEnabled: options.rtlEnabled,
            spellcheck: options.spellcheck,
            stylingMode: options.stylingMode,
            type: "date",
            useMaskBehavior: options.useMaskBehavior,
            validationMessageMode: options.validationMessageMode,
            validationMessagePosition: options.validationMessagePosition,
            valueChangeEvent: options.valueChangeEvent,
            onKeyDown: options.onKeyDown,
            onKeyUp: options.onKeyUp,
            onChange: options.onChange,
            onInput: options.onInput,
            onCut: options.onCut,
            onCopy: options.onCopy,
            onPaste: options.onPaste,
            onEnterKey: options.onEnterKey,
            _dateRangeBoxInstance: this,
            _showValidationMessage: false
        };
        (0, _iterator.each)(EVENTS_LIST, (_, eventName) => {
            const optionName = "on".concat(eventName);
            if (this.hasActionSubscription(optionName)) {
                dateBoxConfig[optionName] = e => {
                    this._raiseAction(eventName, e.event)
                }
            }
        });
        return dateBoxConfig
    };
    _proto._hideOnOutsideClickHandler = function(_ref) {
        let {
            target: target
        } = _ref;
        const $target = (0, _renderer.default)(target);
        const dropDownButton = this.getButton("dropDown");
        const $dropDownButton = dropDownButton && dropDownButton.$element();
        const isInputClicked = !!$target.closest(this.$element()).length;
        const isDropDownButtonClicked = !!$target.closest($dropDownButton).length;
        const isOutsideClick = !isInputClicked && !isDropDownButtonClicked;
        return isOutsideClick
    };
    _proto._getStartDateBoxConfig = function() {
        var _options$dropDownOpti;
        const options = this.option();
        return _extends({}, this._getDateBoxConfig(), {
            applyButtonText: options.applyButtonText,
            calendarOptions: options.calendarOptions,
            cancelButtonText: options.cancelButtonText,
            dateOutOfRangeMessage: options.startDateOutOfRangeMessage,
            deferRendering: options.deferRendering,
            disabledDates: null === (_options$dropDownOpti = options.dropDownOptions) || void 0 === _options$dropDownOpti ? void 0 : _options$dropDownOpti.disabledDates,
            dropDownOptions: _extends({
                showTitle: false,
                title: "",
                hideOnOutsideClick: e => this._hideOnOutsideClickHandler(e),
                hideOnParentScroll: false,
                preventScrollEvents: false
            }, options.dropDownOptions),
            invalidDateMessage: options.invalidStartDateMessage,
            onValueChanged: _ref2 => {
                let {
                    value: value,
                    event: event
                } = _ref2;
                const newValue = [value, this.option("value")[1]];
                this.updateValue(newValue, event)
            },
            opened: options.opened,
            onOpened: () => {
                this._raiseOpenAction()
            },
            onClosed: () => {
                this._raiseCloseAction()
            },
            onOptionChanged: args => {
                const {
                    name: name,
                    value: value,
                    previousValue: previousValue
                } = args;
                if ("text" === name) {
                    this.option("startDateText", value)
                }
                if ("validationErrors" === name) {
                    this._syncValidationErrors("_internalValidationErrors", value, previousValue)
                }
            },
            todayButtonText: options.todayButtonText,
            showClearButton: false,
            showDropDownButton: false,
            value: this.option("value")[0],
            label: options.startDateLabel,
            placeholder: options.startDatePlaceholder,
            inputAttr: options.startDateInputAttr,
            name: options.startDateName,
            _showValidationIcon: false
        })
    };
    _proto._getEndDateBoxConfig = function() {
        const options = this.option();
        return _extends({}, this._getDateBoxConfig(), {
            invalidDateMessage: options.invalidEndDateMessage,
            dateOutOfRangeMessage: options.endDateOutOfRangeMessage,
            onValueChanged: _ref3 => {
                let {
                    value: value,
                    event: event
                } = _ref3;
                const newValue = [this.option("value")[0], value];
                this.updateValue(newValue, event)
            },
            onOptionChanged: args => {
                const {
                    name: name,
                    value: value,
                    previousValue: previousValue
                } = args;
                if ("text" === name) {
                    this.option("endDateText", value)
                }
                if ("validationErrors" === name) {
                    this._syncValidationErrors("_internalValidationErrors", value, previousValue)
                }
            },
            opened: options.opened,
            showClearButton: false,
            showDropDownButton: false,
            value: this.option("value")[1],
            label: options.endDateLabel,
            placeholder: options.endDatePlaceholder,
            deferRendering: true,
            inputAttr: options.endDateInputAttr,
            name: options.endDateName
        })
    };
    _proto._getValidationMessagePosition = function() {
        const {
            validationMessagePosition: validationMessagePosition
        } = this.option();
        if ("auto" === validationMessagePosition) {
            return this.option("opened") ? "top" : "bottom"
        }
        return validationMessagePosition
    };
    _proto._getSerializedDates = function(_ref4) {
        let [startDate, endDate] = _ref4;
        return [this.getStartDateBox()._serializeDate((0, _uiDate_range.getDeserializedDate)(startDate)), this.getStartDateBox()._serializeDate((0, _uiDate_range.getDeserializedDate)(endDate))]
    };
    _proto.updateValue = function(newValue, event) {
        if (!(0, _uiDate_range.isSameDateArrays)(newValue, this.option("value"))) {
            if (event) {
                this._saveValueChangeEvent(event)
            }
            this.option("value", this._getSerializedDates(newValue))
        }
    };
    _proto._updateDateBoxesValue = function(newValue) {
        const startDateBox = this.getStartDateBox();
        const endDateBox = this.getEndDateBox();
        const [newStartDate, newEndDate] = newValue;
        const oldStartDate = startDateBox.option("value");
        const oldEndDate = endDateBox.option("value");
        if (!(0, _uiDate_range.isSameDates)(newStartDate, oldStartDate)) {
            startDateBox.option("value", newStartDate)
        }
        if (!(0, _uiDate_range.isSameDates)(newEndDate, oldEndDate)) {
            endDateBox.option("value", newEndDate)
        }
    };
    _proto._renderAccessKey = function() {
        const $startDateInput = (0, _renderer.default)(this.field()[0]);
        const {
            accessKey: accessKey
        } = this.option();
        $startDateInput.attr("accesskey", accessKey)
    };
    _proto._focusTarget = function() {
        return this.$element().find(".".concat("dx-texteditor-input"))
    };
    _proto._focusEventTarget = function() {
        return this.element()
    };
    _proto._focusClassTarget = function() {
        return this.$element()
    };
    _proto._toggleFocusClass = function(isFocused, $element) {
        _Editor.prototype._toggleFocusClass.call(this, isFocused, this._focusClassTarget($element))
    };
    _proto._hasActiveElement = function() {
        return this._isStartDateActiveElement() || this._isEndDateActiveElement()
    };
    _proto._isStartDateActiveElement = function() {
        return this._isActiveElement(this.startDateField())
    };
    _proto._isEndDateActiveElement = function() {
        return this._isActiveElement(this.endDateField())
    };
    _proto._isActiveElement = function(input) {
        return (0, _renderer.default)(input).is(_dom_adapter.default.getActiveElement(input))
    };
    _proto._popupContentIdentifier = function(identifier) {
        if (identifier) {
            this._popupContentId = identifier
        }
        return this._popupContentId
    };
    _proto._setAriaAttributes = function() {
        const {
            opened: opened
        } = this.option();
        const arias = {
            expanded: opened,
            controls: this._popupContentIdentifier()
        };
        const ariaOwns = opened ? this._popupContentIdentifier() : void 0;
        this.setAria(arias);
        this.setAria("owns", ariaOwns, this.$element())
    };
    _proto._cleanButtonContainers = function() {
        var _this$_$beforeButtons, _this$_$afterButtonsC;
        null === (_this$_$beforeButtons = this._$beforeButtonsContainer) || void 0 === _this$_$beforeButtons ? void 0 : _this$_$beforeButtons.remove();
        null === (_this$_$afterButtonsC = this._$afterButtonsContainer) || void 0 === _this$_$afterButtonsC ? void 0 : _this$_$afterButtonsC.remove();
        this._buttonCollection.clean();
        this._$beforeButtonsContainer = null;
        this._$afterButtonsContainer = null
    };
    _proto._applyCustomValidation = function(value) {
        this.validationRequest.fire({
            editor: this,
            value: value
        })
    };
    _proto._clean = function() {
        var _this$_$startDateBox, _this$_$endDateBox, _this$_$separator;
        this._cleanButtonContainers();
        null === (_this$_$startDateBox = this._$startDateBox) || void 0 === _this$_$startDateBox ? void 0 : _this$_$startDateBox.remove();
        null === (_this$_$endDateBox = this._$endDateBox) || void 0 === _this$_$endDateBox ? void 0 : _this$_$endDateBox.remove();
        null === (_this$_$separator = this._$separator) || void 0 === _this$_$separator ? void 0 : _this$_$separator.remove();
        _Editor.prototype._clean.call(this)
    };
    _proto._optionChanged = function(args) {
        const {
            name: name,
            fullName: fullName,
            value: value,
            previousValue: previousValue
        } = args;
        switch (name) {
            case "acceptCustomValue":
            case "dateSerializationFormat":
            case "displayFormat":
            case "max":
            case "min":
            case "openOnFieldClick":
            case "spellcheck":
            case "useMaskBehavior":
            case "valueChangeEvent":
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                break;
            case "rtlEnabled":
                _Editor.prototype._optionChanged.call(this, args);
                break;
            case "labelMode":
                this._toggleEditorLabelClass();
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                break;
            case "applyButtonText":
            case "applyValueMode":
            case "cancelButtonText":
            case "deferRendering":
            case "disabledDates":
            case "todayButtonText":
                this.getStartDateBox().option(name, value);
                break;
            case "opened":
                this._toggleDropDownEditorActiveClass();
                this.getStartDateBox().option(name, value);
                this.getEndDateBox()._setOptionWithoutOptionChange(name, value);
                break;
            case "buttons":
                this._cleanButtonContainers();
                this._renderButtonsContainer();
                break;
            case "calendarOptions":
            case "dropDownOptions":
                this.getStartDateBox().option(fullName, value);
                break;
            case "pickerType": {
                const pickerType = this._getPickerType();
                this.getStartDateBox().option(name, pickerType);
                this.getEndDateBox().option(name, pickerType);
                break
            }
            case "dateOutOfRangeMessage":
                break;
            case "height":
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                _Editor.prototype._optionChanged.call(this, args);
                break;
            case "dropDownButtonTemplate":
            case "showDropDownButton":
                this._updateButtons(["dropDown"]);
                break;
            case "showClearButton":
                this._updateButtons(["clear"]);
                break;
            case "endDate":
                this.updateValue([this.option("value")[0], value]);
                break;
            case "startDateLabel":
                this._toggleEditorLabelClass();
                this.getStartDateBox().option("label", value);
                break;
            case "endDateLabel":
                this._toggleEditorLabelClass();
                this.getEndDateBox().option("label", value);
                break;
            case "startDatePlaceholder":
                this.getStartDateBox().option("placeholder", value);
                break;
            case "endDatePlaceholder":
                this.getEndDateBox().option("placeholder", value);
                break;
            case "startDateInputAttr":
                this.getStartDateBox().option("inputAttr", value);
                break;
            case "startDateName":
                this.getStartDateBox().option("name", value);
                break;
            case "endDateInputAttr":
                this.getEndDateBox().option("inputAttr", value);
                break;
            case "endDateName":
                this.getEndDateBox().option("name", value);
                break;
            case "multiView":
                this.getStartDateBox().option("calendarOptions.viewsCount", value ? 2 : 1);
                break;
            case "tabIndex":
            case "activeStateEnabled":
            case "focusStateEnabled":
            case "hoverStateEnabled":
                _Editor.prototype._optionChanged.call(this, args);
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                break;
            case "onValueChanged":
                this._createValueChangeAction();
                break;
            case "onOpened":
                this._createOpenAction();
                break;
            case "onClosed":
                this._createCloseAction();
                break;
            case "onKeyDown":
            case "onKeyUp":
            case "onChange":
            case "onInput":
            case "onCut":
            case "onCopy":
            case "onPaste":
            case "onEnterKey":
                this._createEventAction(name.replace("on", ""));
                break;
            case "readOnly":
            case "disabled":
                this._updateButtons();
                _Editor.prototype._optionChanged.call(this, args);
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                break;
            case "disableOutOfRangeSelection":
                break;
            case "startDate":
                this.updateValue([value, this.option("value")[1]]);
                break;
            case "stylingMode":
                this._renderStylingMode();
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                break;
            case "startDateText":
            case "endDateText":
            case "useHiddenSubmitElement":
                break;
            case "invalidStartDateMessage":
                this.getStartDateBox().option("invalidDateMessage", value);
                break;
            case "invalidEndDateMessage":
                this.getEndDateBox().option("invalidDateMessage", value);
                break;
            case "startDateOutOfRangeMessage":
                this.getStartDateBox().option("dateOutOfRangeMessage", value);
                break;
            case "endDateOutOfRangeMessage":
                this.getEndDateBox().option("dateOutOfRangeMessage", value);
                break;
            case "validationMessagePosition":
                this.getStartDateBox().option(name, value);
                _Editor.prototype._optionChanged.call(this, args);
                break;
            case "_internalValidationErrors": {
                this._syncValidationErrors("validationErrors", value, previousValue);
                const validationErrors = this.option("validationErrors");
                this.option("isValid", !(null !== validationErrors && void 0 !== validationErrors && validationErrors.length));
                break
            }
            case "isValid": {
                this.getStartDateBox().option(name, value);
                this.getEndDateBox().option(name, value);
                const isValid = value && !this.option("_internalValidationErrors").length;
                if (this._shouldSkipIsValidChange || isValid === value) {
                    _Editor.prototype._optionChanged.call(this, args);
                    return
                }
                this._shouldSkipIsValidChange = true;
                this.option("isValid", isValid);
                this._shouldSkipIsValidChange = false;
                break
            }
            case "validationErrors": {
                const internalValidationErrors = this.option("_internalValidationErrors") || [];
                const allErrors = value || [];
                const externalErrors = this._getRestErrors(allErrors, internalValidationErrors);
                const errors = [...externalErrors, ...internalValidationErrors];
                const newValue = errors.length ? errors : null;
                this._options.silent("validationErrors", newValue);
                _Editor.prototype._optionChanged.call(this, _extends({}, args, {
                    value: newValue
                }));
                break
            }
            case "value": {
                const newValue = (0, _uiDate_range.sortDatesArray)(value);
                if (!(0, _uiDate_range.isSameDateArrays)(newValue, previousValue)) {
                    const isDirty = !(0, _uiDate_range.isSameDateArrays)(newValue, this._initialValue);
                    this.option("isDirty", isDirty);
                    this._setOptionWithoutOptionChange("value", newValue);
                    this._setOptionWithoutOptionChange("startDate", newValue[0]);
                    this._setOptionWithoutOptionChange("endDate", newValue[1]);
                    this._applyCustomValidation(newValue);
                    this._updateDateBoxesValue(newValue);
                    this.getStartDateBox()._strategy.renderValue();
                    this._toggleEmptinessState();
                    this._raiseValueChangeAction(newValue, previousValue);
                    this._saveValueChangeEvent(void 0)
                }
                break
            }
            case "_currentSelection":
                break;
            default:
                _Editor.prototype._optionChanged.call(this, args)
        }
    };
    _proto.getStartDateBox = function() {
        return this._startDateBox
    };
    _proto.getEndDateBox = function() {
        return this._endDateBox
    };
    _proto.getButton = function(name) {
        return this._buttonCollection.getButton(name)
    };
    _proto.open = function() {
        this.option("opened", true)
    };
    _proto.close = function() {
        this.option("opened", false)
    };
    _proto.content = function() {
        return this.getStartDateBox().content()
    };
    _proto.field = function() {
        return [this.startDateField(), this.endDateField()]
    };
    _proto.startDateField = function() {
        return this.getStartDateBox().field()
    };
    _proto.endDateField = function() {
        return this.getEndDateBox().field()
    };
    _proto.focus = function() {
        this.getStartDateBox().focus()
    };
    _proto.reset = function() {
        _Editor.prototype.reset.call(this);
        const startDateBox = this.getStartDateBox();
        const endDateBox = this.getEndDateBox();
        startDateBox.reset();
        endDateBox.reset();
        startDateBox._updateInternalValidationState(true);
        endDateBox._updateInternalValidationState(true)
    };
    _proto.clear = function() {
        _Editor.prototype.clear.call(this);
        this.getEndDateBox().clear();
        this.getStartDateBox().clear()
    };
    return DateRangeBox
}(_editor.default);
(0, _component_registrator.default)("dxDateRangeBox", DateRangeBox);
var _default = DateRangeBox;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;
